اضافة التالي والسابق لمدونات بلوجر

اضافة خاصية الانتقال "التالي والسابق" بين المواضيع بشكل جذاب وعصري

الانتقال بين مواضيع المدونة المختلفة يعتبر من العوامل المؤثرة في قوة الموقع الى محركات البحث والسيو. واكثر ما يهم المدون هو ابقاء القارئ اطول وقت ممكن عل المدونة.

اضافة روابط الانتقال بين المدونة السابقة والمدونة التالية قد يفيدك بشكل كبير في اظهار مدونتك بشكل جميل.

شرح اضافة السابق والتالي الى مدونة بلوجر بالتفصيل

يمكنك الان الإستغناء عن أزرار ترقيم الصفحات الأقدم/الأحدث المملة

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

معاينة اداة الانتقال بين المواضيع "السابق والتالي"

شاهد هذة الاضافة قبل تطبيقها على مدونتك

معاينة

كود اضافة السابق والتالي الى مدونة بلوجر

الخطوة الاولى:

قبل تعديل اي كود HTML

قم بحفظ المظهر الحالي لمدونتك

اذهب الى بلوجر← المظهر

قم بتعديل الـ "HTML"

ابحث عن

]]></b:skin>

وقم بلصق الكود التالي فوقة

#### 
/*################MBT Pager ##########################*/ 
.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;} 
.mbt-pager li.next { height:130px; float: right; padding:0px; background:none; margin:0px;} 
.mbt-pager li.next a { padding-left: 24px; } 
.mbt-pager li.previous { height:130px; margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px; background:none; 
} 
.mbt-pager li.previous a { padding-right: 24px; } 
.mbt-pager li.next:hover, .mbt-pager li.previous:hover {background:#333333; } 
.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; } 
.mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;} 
.mbt-pager li i { color: #ccc; font-size: 18px; } 
.mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;} 
.mbt-pager li a span { font-size: 16px; color: #666; font-weight: bold; font-family:oswald,Helvetica, arial; margin:0px;} 
.mbt-pager li a:hover span, 
.mbt-pager li a:hover i { color: #ffffff; } 
.mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; } 
.mbt-pager li.next i { float: right; 
margin-top: 15%; 
margin-right: 5%; } 
.mbt-pager li.next i, .mbt-pager li.previous i , 
.mbt-pager li.next, .mbt-pager li.previous{ 
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; 
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out; 
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out; 
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; } 
.fa-chevron-right {padding-right:0px;} 
#### 
.fa-chevron-right {padding-right:0px;}

تعديل اداة الانتقال بين الموضوع التالي والسابق في بلوجر

لتغيير الخلفية السوداء ولون الخط الأبيض في المنطقة المحددة على مؤشر الماوس في اداة الانتقال،

اذهب الى الكود السابق ثم:
قم بتغيير لون الخلفية : background: #333333؛

ولتغيير لون الخط: color: #FFFFFF؛

لتغيير ارتفاع المربع، قم بتغييرالارتفاع: 130 بكسل height:130px؛ "مكررة مرتين"
لأختيار اللون المناسب لمدونتك:

قم بزيارة صفحة اكواد الالوان

الخطوة الثانية:

سنقوم الآن بإضافة بعض خطوط الويب الرائعة من Google والمعروفة باسم Oswald ، بحيث تبرز عنصر واجهة المستخدم بشكل جذاب.

يرجى البحث عن

<head>
قم بلصق الكود التالي تحتة:

ملاحظة: امسح الكود السابق اذا كان موجود لديك مسبقاً داخل القالب.

الخطوة الثالثة:

ابحث عن

<data:post.body/>

والصق الكود التالي تحته مباشرة

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<ul class='mbt-pager'>
<li class='next'> 
<b:if cond='data:newerPageUrl'> 
<a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"'/> 
<b:else/> 
<a> أنت الان في اول موضوع</a> 
</b:if> 
</li>
<li class='previous'> 
<b:if cond='data:olderPageUrl'> 
<a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"'/> 
<b:else/> 
<a> أنت الأن في اخر موضوع</a> 
</b:if> 
</li>
</ul>
<script type='text/javascript'> 
//<![CDATA[ 
(function($){ 
 var newerLink = $('a.newer-link'); 
 var olderLink = $('a.older-link'); 
 $.get(newerLink.attr('href'), function (data) { 
 newerLink.html('التالي '+$(data).find('.post h3.post-title').text()+''); 
 },"html"); 
 $.get(olderLink.attr('href'), function (data2) { 
 olderLink.html('السابق '+$(data2).find('.post h3.post-title').text()+''); 
 },"html"); 
})(jQuery); 
//]]> 
</script> 
 
</b:if></b:if> 
.fa-chevron-right {padding-right:0px;}

الخطوة الرابعة والاخيرة:

احفظ القالب

ومبروك عليك الاضافة المميزة

قد يهمك ايضاً:

👇👇👇👇

اضف تاثير الالوان على الروابط في بلوجر

بضغطة واحدة، تصبح جميع إذاعات العالم بين يديك Radio Garden

بحث هذه المدونة الإلكترونية

مـعـلـومــات عــامــة