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

الخميس، 1 نوفمبر 2018

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

نوفمبر 01, 2018 | By هشام احرار | | تعديل الرسالة

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

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

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

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

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

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

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

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

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

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

1 - في البداية قم بحفظ نسخة احتياطية من قالب بلوجر.. يمكنك الاستعانة بهذه المقالة للمزيد من المعلومات عن:

النسخ الاحتياطي لقوالب بلوجر

2 - قم بالدخول إلى قالب مدونتك بالضغط على التبويب Template.

3 - قم بفتح أكواد قالبك من خلال الضغط على Edit HTML.

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

قم بكتابة الكود التالي في مربع البحث:

</head>

والأن أهم خطوة.. قم بوضع الكود التالي أعلى الكود السابق:

posts_no_thumb_sum = 400;

posts_thumb_sum = 300;

img_thumb_height = 160;

img_thumb_width = 180;

</script>

//<![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>

</b:if>

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

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

<data:post.body/>

إستبدل هذا الكود بالكود التالي:

<b:if cond='data:blog.pageType not in {"item","static_page"}'>

<a expr:href='data:post.url'>اقرأ المزيد</a>

</b:if>

<b:if cond='data:blog.pageType in {"item","static_page"}'>

<data:post.body/>

</b:if>

وإذا وجدت أكثر من واحدة فقم بتغيير كل واحدة منهم مرة ومعاينة قالبك حتى تظبط معك.

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

فكلها نقاط برغم صغرها تدل على خبرتك ووضع لمستك الخاصة على مدونتك.

والأن .. هل ترغب بمعرفة طريقة تركيب إقرأ المزيد بشكل صوري بدلاً من النصي؟ تابع معنا.

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

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