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

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

مميزات الإضافة

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

شرح تركيب الإضافة

الخطوات اللي هنقوم بيها عشان نضيف الإضافة بسيطة جداً. اتبع الخطوات الجاية عشان تضيف أزرار التنقل بين المواضيع بسهولة.

1. تعديل الكود في قالب المدونة

ابحث عن الوسم </head> وحط الكود اللي جاي ده فوقه مباشرة:

<if cond="data:view.isPost">

<style type="text/css">

/*<![CDATA[*/

/* ------ Navigation ------ */

.topic-nav{clear:both;margin-top:20px;display:block;padding:20px;border:1px solid #eeeeee}

.topic-nav-wrap{position:relative}

.topic-nav-cont{overflow:hidden;font-size:0}

.topic-nav-cont a{width:50%;padding:15px;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;position:relative}

.topic-nav-cont a:hover{position:static;background:-webkit-linear-gradient(45deg,#d24949,#9e44c9);background:-o-linear-gradient(45deg,#d24949,#9e44c9);background:-moz-linear-gradient(45deg,#d24949,#9e44c9);background:linear-gradient(45deg,#d24949,#9e44c9)}

.topic-nav .next{float:left;border-right:1px solid #eeeeee}

.topic-nav .prev{float:right;margin-right:-1px;border-left:1px solid #eeeeee}

.topic-nav-cont span{display:block;width:120px;margin:0 auto;font-size:12px;color:#777777;position:relative;font-weight:700;padding:5px 0;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#eeeeee}

.topic-nav-cont a:hover span{background-color:#FFF;color:#d24949}

.topic-nav-cont h4{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;font-size:16px;margin:10px 0 0;overflow:hidden;color:#222222;max-height:50px;line-height:1.5em}

.topic-nav-cont a:hover h4{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;color:#FFF}

.topic-nav .topic-img{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;opacity:0;width:49.9%;height:180px;border:10px solid #9e44c9;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;position:absolute;bottom:150%;z-index:1}

.topic-nav .topic-img img{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;width:100%;height:100%;margin:0}

.topic-nav-cont a:hover .topic-img{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out;opacity:1;bottom:120%}

.topic-nav .next .topic-img{left:0}

.topic-nav .prev .topic-img{right:0}

.topic-nav .topic-img:after{content:"";display:block;border-width:19px;border-style:solid;border-color:#9e44c9 transparent transparent;position:absolute;left:-webkit-calc(50% - 19px);left:-moz-calc(50% - 19px);left:calc(50% - 19px);top:100%}

@media screen and (max-width:480px){.topic-nav-cont a.next,.topic-nav-cont a.prev{float:none;width:100%;border:none;display:block}.topic-nav .topic-img{display:none!important}}

@media print{.topic-nav{display:none}}

/*]]>*/

</style>

</if>

2. إضافة كود الجافا سكريبت

ابحث عن الوسم </body> وحط الكود اللي جاي ده فوقه مباشرة:

<if cond="data:view.isPost">

<script type="text/javascript">

/*<![CDATA[*/

var next_text ='الموضوع التالي';

var prev_text='الموضوع السابق';

var noimg ='../../../-qnLm52EsvBE/VDkrZ46TWXI/AAAAAAAAAsM/tiJ36WiboU4/s1600/90.jpg';

$(document).ready(function(){var t=$(".topic-nav .next"),a=$(".topic-nav .prev")

$.get(t.attr("href"),function(a){var r=$(a).find("h1.entry-title").text(),i=$(a).find(".post .separator img")

try{var n='<img alt="'+r+'" src="'+i[0].src+'" />'}catch(c){var n='<img alt="'+r+'" src="'+noimg+'" />'}t.html('<span class="next-txt">'+next_text+"</span><h4>"+r+'</h4><div class="topic-img">'+n+"</div>")},"html"),$.get(a.attr("href"),function(t){var r=$(t).find("h1.entry-title").text(),i=$(t).find(".post .separator img")

try{var n='<img alt="'+r+'" src="'+i[0].src+'" />'}catch(c){var n='<img alt="'+r+'" src="'+noimg+'" />'}a.html('<span class="prev-txt">'+prev_text+"</span><h4>"+r+'</h4><div class="topic-img">'+n+"</div>")},"html")})

//]]>

</script>

</if>

3. إضافة كود التنقل

وأخيراً، حط الكود ده فوق أو تحت أزرار النشر أو المواضيع ذات صلة، وده الكود اللي هيظهر فيه أزرار التنقل.

<if cond="data:view.isPost">

<div class="topic-nav">

  <div class="topic-nav-wrap">

    <div class="topic-nav-cont">

      <if cond="data:newerPageUrl">

        <a class="next" expr:href="data:newerPageUrl"><span class="next-txt">الموضوع التالي</span><h4><newerpagetitle></newerpagetitle></h4></a>

        <else></else>

      </if>

      <if cond="data:olderPageUrl">

        <a class="prev" expr:href="data:olderPageUrl"><span class="prev-txt">الموضوع السابق</span><h4><olderpagetitle></olderpagetitle></h4></a>

        <else></else>

      </if>

    </div>

  </div>

</div>

</if>

مبروك! الإضافة تعمل الآن

بعد حفظ القالب، هتلاحظ إن الإضافة اشتغلت تمام. لو عجبتك الإضافة، ما تنساش الاشتراك في المدونة علشان توصلك كل التحديثات الجديدة.