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

طريقة اضافة خاصية إقرأ المزيد لمدونات بلوجر blogspot google بالطريقة الصحيحة توفر خاصية "إقرأ المزيد" عدة فوائد. قد يكون تجزئة المحتوى مفيدًا بشكل خاص لتحسين تجربة المستخدم .

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

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

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

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

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

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

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

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>

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

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

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