إضافة إقرأ المزيد لمدونات بلوجر بشكل إحترافي

إضافة إقرأ المزيد لمدونات بلوجر

أهمية إقرأ المزيد

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

إضافة إقرأ المزيد بلوجر

فكرة إقرأ المزيد

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

الهدف من إقرأ المزيد

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

أشكال إقرأ المزيد

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

فلنبدأ على بركة الله

طريقة تركيب إقرأ المزيد النصية

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;

وإذا لم يكن هناك صورة فإن عدد الحروف الخاصة بالملخص قبل كلمة إقرأ المزيد سيكون 400 حرف كما يتضح في بداية الكود .. ويمكنك تغيير الرقم بأي عدد حروف ترغب به سواء كان أكبر أو أقل.

وكذلك بالنسبة لعدد حروف المحتوى في حالة وجود صورة هو إفتراضياً 300 حرف .. ويمكنك تغييره أيضاً كما ترغب.

بالنسبة لإرتفاع الصورة الحالي 160 وعرضها 180 .. يمكنك تركهم كما هم أو تغييرهم لما يناسبك ويناسب قالبك.

والأن قم بالبحث عن الكود التالي وإحذفه من قالب مدونتك إن وجدته .. :

<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>

أما إن لم تجده فقم بالإنتقال للخطوة الأخيرة .. فمهلاً أخي لم ينتهي إعداد الكود بعد .. فما سبق كان خصائص شكل إقرأ المزيد من أحجام وخطوط ليس إلا .. وحتى الأن أنت لم تحدد أين سيظهر هذا الخيار داخل قالب مدونتك .. ونحن نريده في الصفحة الرئيسية مع كل مقالة بشكل أوتوماتيكي .. لذا فقم بإتباع الأتي:

إبحث داخل قالبك عن الكود:

<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>

<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.

أشكال إقرأ المزيد

الصفحات

روميسيا للخدمات الإلكترونية

إضافة إقرأ المزيد لمدونات بلوجر بشكل إحترافي