لذلك اليوم أحببت أن أشارك معكم ومعى متابعى المدونة هذا الموضوع عندما طلبه منى أحد متابعى المدونة وانا اعرف جيدا أن هذا الموضوع قد يكون قديما جدا وأن يوجد الكثير من المدونين قامو بنشر مثل هذا الموضوع ولكنى اليوم سوف أقوم بوضع شرح لكل من من يعملون على تصميم قوالب بلوجر والذى لديهم قالب جاهز لايوجد به فقط زر اقرا المزيد وفى الحاله الثانية سوف يحتاج فقط كود بسيط لوضع الأضافة أم الحاله الأوله فسوف يحتاج الى جميع الأكواد.
ما هى خاصية اقرا المزيد
اضافة اقرا المزيد او خاصية اقرا المزيد هى اضافة مهمه جدا لكل من لديه قالب بلوجر وليس مدونة فقط لأنه تعمل على تلخص محتوى المواضيع حتى يظهر منه فقط حزء بسيط مثل العنوان وجزء اخر من محتوى الموضوع نفسه ويمكنك التحكم فى الكود الذى فى الموضوع اليوم كما تشاء.
تحميل الأكواد كامله
تحميل الأكواد كامله لمن لريد فقط زر اقرا المزيد ومن يريد الأكواد كامله لتصميم قالب بلوجر
شرح التركيب
سوف يكون الشرح لمن يريد الكود كامل حتى يعمل على تصميم قالب ، وبعد ذلك سوف نمر لأضافة فقط زر اقرا المزيد لمن لديه تلخيص للمواضيع ولا يوجد لديه الزر- أولا عليك وضع هذا الكود فوق الوسم هذا</head>فى قالب مدونتك
- وان لم تجد هذا الوسم أبحث عنه هكذا<head/>
<script type='text/javascript'> posts_no_thumb_sum = 200; posts_thumb_sum = 120; img_thumb_height = 195; img_thumb_width = 290; </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, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<div class="posts-thumb"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></div>'; summ = posts_thumb_sum; } var summary = imgtag + '<div class="post-info"><h2 class="post-title"><a href="' + pURL + '">' + pTITLE + '</a></h2></div><div class="post-summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>
- فى هذا الكود سوف يكون عليك تعديل بعد الأمور اذا تريد مثل الأرقام فى أول الكود
- الرقم 200 هو عدد حروف جزء الموضوع بدون صورة للموضوع
- الرقم 120 هو عدد الحروب مع وجود صورة للموضوع
- الرقم 195 هو ارتفاع الصورة
- الرقم 290 هو عرض الصورة
- الأن عليك وضع الكود الثانى وهو كود html
- قم بالبحث عن هذا الوسم<data:post.body/>ثم ضع بدل منه هذا الكود
<b:if cond='data:blog.pageType not in {"item","static_page"}'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script> <div class='jump-link'><a expr:href='data:post.url + "#more"' expr:title='data:post.jumpText + " " + data:post.title'> <data:post.jumpText/> </a> </div> </b:if> <b:if cond='data:blog.pageType in {"item","static_page"}'> <data:post.body/> </b:if>
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if>
- الأن هذا كود استايل بسيط للأضافة
- سوق تبحث عن هذا الوسم]]></b:skin> ثم تضعه فوقه
.jump-link a { display: inline-block; font-family: 'Moussa-font'; background: #FF5722; color: #Fff; font-size: 15px; padding: 7px 15px; float: right; margin-right: 15px; border-radius: 2px; transition: all .3s; -webkit-transition: all .3s;-o-transition: all .3s; -moz-transition: all .3s; }
الأن تقوم بحفظ القالب ومبروك عليك الإضافة الجديده
تركيب الإضافة لمن لديه يريد زر اقرا المزيد فقط
- أبحث عن هذا الوسم<data:post.body/> ثم قم بوضع أسفله الكود التالى
<div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div>
- الأن ثم بالبحث عن هذا الوسم]]></b:skin>ثم ضع فوقه الكود هذا
.jump-link a { display: inline-block; font-family: 'Moussa-font'; background: #FF5722; color: #Fff; font-size: 15px; padding: 7px 15px; float: right; margin-right: 15px; border-radius: 2px; transition: all .3s; -webkit-transition: all .3s;-o-transition: all .3s; -moz-transition: all .3s; }
- وايضا فى هذا الطريقة يمكنك البحث ايضا عن هذا الكود واذا وجدته احذفه
<b:if cond='data:post.hasJumpLink'> <div class='jump-link' style=' display: none; '> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if>
- الأن عليك فوق حفظ القالب ومبروك عليك زر اقرا المزيد فقط
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).
EmoticonClick to see the code!
To insert emoticon you must added at least one space before the code.