كيفية تصميم قالب بلوجر اضافة اقراء المزيد

انشاء قالب بلوجر اضافة اقراء المزيد

في الدرس السابق قمنا بإضافة أداة رسائل المدونة الإلكترونية
سنقوم الان باضافة زر اقراء المزيد, تنسيق المشاركة في الصفحة الرئيسية

سنتوجه الان الى علامة التبويب (المشاركات) ونقوم باضافة مشاركة جديدة تجريبية 

انسخ النص التالي لانشاء مشاركة تجريبية

انسخ النص التالي

لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع. ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق. هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً.

بعد الانتهاء من انشاء المشاركة التجريبية اضغط على زر نشر

من القائمة الجانبية توجه الى علامة التبويب المظهر ثم اضغط على تعديل html

بعد فتح محرر html سنفوم باضافة كود جافاسكريبت الخاص باضافة اقراء المزيد

من خلال اداة البحث داخل محرر html ابحث عن هذا الوسم </head> واضف فوقه الكود التالي

كود جافا سكريبت

<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 188; img_thumb_width = 100; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<div class="col-md-6 main-img" style="float:right;"> <img src="'+img[0].src+'" width="'+img_thumb_width+'%" height="'+img_thumb_height+'px"/></div> '; summ = summary_img; } var summary = imgtag + '<div class="col-md-6"> <p class="main-art"> ' + removeHtmlTag(div.innerHTML,summ) + '</p> </div> '; div.innerHTML = summary; } //]]> </script>

يمكنك التعديل على الكود من خلال الخصائص التالية

summary_noimg = 250; عدد الحروف بدون صورة

summary_img = 200; عدد الحروف مع صورة

img_thumb_height = 188; ارتفاع الصورة px

img_thumb_width = 100;  عرض الصورة بالنسبة المئوية %

يمكن تعديل كود html المضمن داخل كود جافا سكريبت اعلاه الخاص بعرض الصورة والنص في الرئيسية

الكود المخصص للنص والصورة داخل كلاس <div class="col-md-6">

لتغير حجم الصورة قم بالتعديل اجعل كود الصورة <div class="col-md-4"> 

والنص <div class="col-md-8"> قم بالتعديل حتى تحصل على الحجم المناسب 

على ان يكون مجموع الكلاسين 12 يعني كلاس الصورة 4 والنص 8 المجموع 12 ستكون النتيجة عرض الصورة width: 33.33333333%; من اجمالي المساحة والنص width: 66.66666667%;

لان سنقوم باضافة زر اقراء المزيد

نبحث هذا الكود <data:post.body/> ستجده مكرر مرتين المطلوب هو الكود الثاني قم باستبدله بالتالي

كود html

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div class='text-center more'> <a class='des-more' expr:href='data:post.url'>إقرأ المزيد</a> </div> </b:if> </b:if>

بعد الانتهاء اضغط على حفظ وقم بعرض المدونة

لان سنقوم باضافة كود css لتنسيق المشاركة وزر اقراء المزيد

اضافة اقراء المزيد, تنسيق المشاركة في الصفحة الرئيسية, تصميم قالب بلوجر.

كود css

.post-outer { width: 100%; margin: 0 auto 40px auto; transition: 0.3s; display: inline-block; height: auto; background-color: #ffffff; line-height: 2; border-radius: 1px; z-index: 1; box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15); } .post-outer:hover { box-shadow: 0px 12px 19px -7px rgba(0, 0, 0, 0.3); transform: translateY(-10px); -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); -moz-transform: translateY(-10px); } h3.post-title.entry-title { display: block; font-size: 26px; text-align: right; text-decoration: none; margin: 20px 0 20px; padding: 0 10px; min-height: auto; max-height: none; font-weight: 700; line-height: 1.2; color: #111315; font-family: 'Droid Arabic Kufi', Oswald; } h3.post-title.entry-title a { display: block; font-size: 26px; text-align: right; text-decoration: none; margin: 20px 0 20px; padding: 0 10px; min-height: auto; max-height: none; font-weight: 700; line-height: 1.2; color: #111315; font-family: 'Droid Arabic Kufi', Oswald; text-decoration: none; } h3.post-title.entry-title a:hover { color: #2196F3; } p.main-art { padding: 0; line-height: 32px; text-align: right; float: right; overflow: hidden; font-family: 'Droid Arabic Kufi', Oswald; } .text-center.more { text-align: center; float: left; margin-bottom: 15px; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } a.des-more { outline: none; font-size: 16px; text-align: center; text-decoration: none; font-weight: 500; cursor: pointer; line-height: 50px; color: #2196F3; border: 1px solid #2196F3; background: #fff; float: none; margin: 0 auto 15px; overflow: hidden; max-width: 170px; padding: 5px 17px; } .des-more:hover { color: #fff; background: #2196F3; border: 1px solid transparent; }

اضغط على حفظ وقم بعرض المدونة للمعاينة اضغط هنا

الان يمكن ضبط إعدادات المشاركات من خلال اداة رسائل المدونة الإلكترونية
يمكنك التحكم في عدد المواضيع في الصفحة الرئيسية ويمكنك أيضا اظهار او اخفاء كل من التاريخ
او اسم المحرر او الوقت او التسميات.

لان سنقوم باضافة كود css لتنسيق صفحة عرض المقال
ابحث عن </b:skin> اضف اسفله مباشرة الكود التالي

كود css

<!-- صفحة المواضيع --> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .post-outer { padding: 0 20px; } .post-outer:hover { transform: none; } .post-outer img { max-width: 100%; width: 100%; max-height: 600px; height: 100%; margin-left: auto !important; margin-right: auto !important; display: block; } </style> </b:if> </b:if>