إقرأ المزيد هي فكرة مبسطة على إظهار عناوين المقالات الأخيرة بمدونتك وكذلك جزء من المحتوى و يكون بشكل إفتراضي من بداية كل مقالة في اغلب الأحيان و يكون هذا الجزء المختصر لا بفوق 300 حرف كما يتم إضافة صورة مصغرة بشكل مربع و تكون هي أول صورة بالموضوع من الأعلى ويعتمد عدد المقالات التي تظهر بالصفحة الرئيسية لمدونات بلوجر على ما تم تخصيصه
الفائدة من إقرأ المزيد
في الاول نبدأ القرائة من اول سطر وفي نهاية الملخص تظهر جملة إقرأ المزيد او حتى صورة لها مما يساعد الزائر على تصفح أكثر للمقالات المتاحة بمدونتك وأيضاً الدخول إلى الموضوع المرغوب من خلال الضغط على مفتاح إقرأ المزيد.
أشكال إقرأ المزيد
هناك الكثير والكثير من الأشكال لهذه الخاصية المفيدة وعلى حسب لون المدونة او المقع الخاص بك فمنها الصوري ومنها النصي وبأشكال مختلفة وفي درسنا اليوم سنضع بين أيديكم طريقة إضافتها بطريقة إحترافية وطريقة تخصيصها سواء كنت ترغب بها بشكل نصي أو صوري.
اولا:طريقة تركيب إقرأ المزيد النصية
- لوحة التحكم
- إضغط على قالب
- ثم تحريرhtml
- قم بحفظ نسخة إحتياطية
- ثم ضع قبله الكود التالي مباشرةً :
1 - في البداية قم بحفظ نسخة إحتياطية من قالب بلوج
2 - قم بالدخول إلى قالب مدونتك بالضغط على التبويب Template.
3 - قم بفتح أكواد قالبك من خلال الضغط على Edit HTML.
4 - قم بالبحث داخل صندوق الأكواد .. لتقوم بإظهار مربع البحث قم بالضغط على مفاتيح Ctrl و F معاً .. بشرط أن تكون قد ضغطت بزر الفأرة الأيسر ضغطة واحدة داخل صندوق أكواد قالبك أولاً حتى يكون البحث محدد بداخله فقط وليس في صفحة متصفحك بالكامل.
قم بكتابة الكود التالي في مربع البحث :
</head>
<script type='text/javascript'>
posts_no_thumb_sum = 400;
posts_thumb_sum = 300;
img_thumb_height = 160;
img_thumb_width = 180;
</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 = '<span class="posts-thumb" style="float:right; margin-left: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
اذا اردت تغيير الصورة المصغرة تظهر على يمين المحتوى الملخص قم بتغيير كلمة float:right; بـ float:lift;
وتحكم في الصورة من هنا margin-left: 10px; بـ margin-right: 10px;
الان سنحدد أين سيظهر هذا الخيار داخل قالب مدونتك ونحن فعلا نريده في الصفحة الرئيسية مع كل مقالة بشكل أوتوماتيكي لذا فقم بإتباع الأتي:
إبحث داخل قالبك عن الكود:
<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>
<a expr:href='data:post.url'>اقرأ المزيد</a>
</b:if>
<b:if cond='data:blog.pageType in {"item","static_page"}'>
<data:post.body/>
</b:if>
وإذا وجدت أكثر من واحدة فقم بتغيير كل مرة ومعاينة قالبك حتى تظبط معك.
وفي الاغلب يكون الاخير او ما قبله
طريقة تركيب إقرأ المزيد الصورية
كما فهلنا في الخطوات السابقة بالكامل ما عليكت تغيره هز الكود الأخير فقط
و هو جملة إقرأ المزيد
قم بحذفها ووضع الكود التالي:
<img src="رابط الصورة" title="إقرأ المزيد" alt="إقرأ المزيد"/>
وبالطبع قم بإستبدال جملة رابط الصورة ..بما يناسب القالب الخاص بك :
للحصول على الرابط قم بالبحث في قوقل و ثم Copy Image Address.
وقم بحفض القالب و قبل المغدرة اترك تعليق وشكرا
ليست هناك تعليقات:
إرسال تعليق