2/22/2018

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






قبل أن تقوم بأي تعديل إذا كان قالب مدونتك يحتوي على أداة مشابهة لابد أن تقوم بحذفها حتى لا يقع تعارض بينهما

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب


لاتنسى أخذ نسخة إحتياطية من القالب

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

  • قم بالبحث عن هذا الوسم <b:includable id='nextprev'>  قم بإستبداله بـكود ـ  html التالي ...
  • ستجد الوسم الذي نبحث عليه غير موسع أي بهذا الشكل
    <b:includable id='nextprev'>...</b:includable>
    ستقوم بحذفه كليا ثم نستبدله بالكود التالي المشابه له وإليك صورة عن بداية ونهاية الكود المطلوب للحذف ...

    
                            <b:includable id='nextprev'>
       <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
       <div class='blog-pager' id='blog-pager'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <div class='MBT-Pager-Navigation-Widget'>
                    <ul class='post-nav'>
                     <li class='next'> 
                       <b:if cond='data:newerPageUrl'> 
    <a class='blog-pager-newer-link next-post' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' rel='next'></a> 
                         <b:else/> 
                         <a rel='next blog-pager-newer-link'><div class='nav-inner'><span/><p/></div></a>
                       </b:if> 
                     </li>
                     <li class='prev'> 
                       <b:if cond='data:olderPageUrl'> 
    <a class='blog-pager-older-link prev-post' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'  expr:title='data:olderPageTitle' rel='previous'></a>
                         <b:else/> 
                         <a rel='blog-pager-older-link previous'><div class='nav-inner'><span/><p/></div></a> 
                       </b:if> 
                     </li>
                   </ul>
                </div>
        </b:if>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
         <b:if cond='data:olderPageUrl'>  
          <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
          </span> 
    
                       </b:if> 
         <b:if cond='data:newerPageUrl'>
          <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
          </span>
                       </b:if> 
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
        </b:if>
        <b:if cond='data:mobileLinkUrl'>
          <div class='blog-mobile-link'>
            <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
          </div>
        </b:if>
       </div>
        </b:if>
      <div class='clear'/>
    </b:includable>
    

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

  • الآن قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود js التالي ...

  • 
        <b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <script type='text/javascript'>
    //<![CDATA[
    //Show topic titles in the nex and prev
    var postnavPrevText = "السابق"; 
    var postnavNextText = "التالي"; 
    var TextPrevoops = "الأقدم";
    var TextNextoops = "الأحدث"; 
    var navPrevMsg = "أنت تشاهد آخر موضوع";
    var navNextMsg = "أنت تشاهد أحدث موضوع";
    var noThumbnail = "https://3.bp.blogspot.com/-7CnHTs2OKS8/Wo214lKp0KI/AAAAAAAACPk/CD1mAZz7IwI32hkGM3aVbD6Tefw78IkvgCLcBGAs/s1600/no-img-300x300-blogg-code.jpg";
    $(".post-nav").each(function(){
    $(".prev .nav-inner span").text(TextPrevoops),
    $(".next .nav-inner span").text(TextNextoops),
    $(".prev .nav-inner p").text(navPrevMsg),
    $(".next .nav-inner p").text(navNextMsg);
    var a=$("a.prev-post").attr("href"),b=$("a.next-post").attr("href");
    $.ajax({url:a,type:"get",success:function(a){var b=$(a).find(".post-title").text(),c=postnavPrevText,d="",e=$(a).find(".post-body img:first").attr("src");if(void 0===e)var e=noThumbnail;d+="<div class='nav-thumb'><img alt='"+b+"' src='"+e+"'/></div><div class='nav-content'><span>"+c+"</span><p class='truncate'>"+b+"</p></div>",$("a.prev-post").html(d)}}),
    $.ajax({url:b,type:"get",success:function(a){var b=$(a).find(".post-title").text(),c=postnavNextText,d="",e=$(a).find(".post-body img:first").attr("src");if(void 0===e)var e=noThumbnail;d+="<div class='nav-thumb'><img alt='"+b+"' src='"+e+"'/></div><div class='nav-content'><span>"+c+"</span><p class='truncate'>"+b+"</p></div>",$("a.next-post").html(d)}})});
    //]]>
    </script>
       </b:if> 
    

    التعديل على كود javascript
    الكود المحدد بهذا اللون خاص برابط الصورة البديلة في التدوينة التي لاتحتوي على صورة رئيسية
    الكود .post-body img:first المحدد بهذا اللون والمكرر مرتين يعمل على جلب أول صورة في التدوينة في الغالب يكون الكلاس بهذا الإسم post-body فلا داعي لتغييره.
    الكود .post-title المحدد بهذا اللون  والمكرر مرتين يعمل على جلب عنوان التدوينة فإحتمال تجده مختلف وذلك في حالة لم تظهر العناوين عليك أن تغير إسم الكلاس post-title بالإسم الموجود في قالب مدونتك .. وإليك بعض الأمثلة ...
    أمثلة لمعرف العنوان
    .post h3.post-title
    .post h2.post-title
    .post h1.post-title
    h3.post-title
    h2.post-title
    h1.post-title
  • الآن قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود css التالي لأحد الشكلين الذي تريده
  • الشكل الأول

    
    /*=====================================
    = PostNav style 01 flat
    =====================================*/
    .MBT-Pager-Navigation-Widget .post-nav{position:relative;overflow:hidden;display:block;border:4px solid #f8f8f8;background:#f8f8f8;padding:0;margin:0;}
    .MBT-Pager-Navigation-Widget .post-nav li{width:50%;float:right;margin:0;padding:5px 0;overflow:hidden;height:100px;position:relative;}
    .MBT-Pager-Navigation-Widget .post-nav .nav-content,.MBT-Pager-Navigation-Widget .post-nav .nav-inner{position:relative;display:block;text-align:center;width:100%;height:100%;}
    .MBT-Pager-Navigation-Widget .post-nav .nav-content span,.MBT-Pager-Navigation-Widget .post-nav .nav-inner span{font-size:20px;}
    .MBT-Pager-Navigation-Widget .post-nav .next-post .nav-content span::before,.MBT-Pager-Navigation-Widget .post-nav .prev-post .nav-content span::after{font-family:FontAwesome;position:relative;margin:0 7px;}
    .MBT-Pager-Navigation-Widget .post-nav .next-post .nav-content span::before{content:"\f101";}
    .MBT-Pager-Navigation-Widget .post-nav .prev-post .nav-content span::after{content:"\f100";}
    .MBT-Pager-Navigation-Widget .post-nav p{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:5px 10px;padding:0;font-weight:normal;}
    .MBT-Pager-Navigation-Widget .post-nav .nav-thumb img{width:100%;height:100%;display:block;}
    /*----------------*/
    .MBT-Pager-Navigation-Widget span {float: none !important;}
    .MBT-Pager-Navigation-Widget .post-nav .nav-thumb{position:relative;overflow:hidden;margin:0 10px;padding:0;width:90px;height:90px;border:4px solid #d6d6d6;display:inline-block;}
    .MBT-Pager-Navigation-Widget a.next-post .nav-thumb{float:right;}
    .MBT-Pager-Navigation-Widget a.prev-post .nav-thumb{float:left;}
    .MBT-Pager-Navigation-Widget .post-nav li a{position:relative;overflow:hidden;display:block;height:100%;padding:0;border-color:#e8e8e8;border-style:solid;border-width:0 3px 0;color:#b9b9b9;font-weight:700;}
    .MBT-Pager-Navigation-Widget .post-nav li.prev a{border-left-color:transparent;}
    .MBT-Pager-Navigation-Widget .post-nav li.next a{border-right-color:transparent;}
    /*=====border-radius=====*/
    .MBT-Pager-Navigation-Widget .post-nav{border-radius:6px;-o-border-radius:6px;-ms-border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}
    .MBT-Pager-Navigation-Widget .post-nav .nav-thumb{border-radius:100%;-o-border-radius:100%;-ms-border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;}
    /*=====translate=====*/
    .MBT-Pager-Navigation-Widget .post-nav li:hover .nav-thumb img{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
    /*=====transition=====*/
    .MBT-Pager-Navigation-Widget .post-nav .nav-thumb img{-webkit-transition:all 1s ease 0s;-moz-transition:all 1s ease 0s;-ms-transition:all 1s ease 0s;-o-transition:all 1s ease 0s;transition:all 1s ease 0s;}
    /*=====Page Responsive=====*/
    @media screen and (max-width:600px){.MBT-Pager-Navigation-Widget .post-nav .nav-content span,.MBT-Pager-Navigation-Widget .post-nav .nav-inner span{font-size:14px;}.MBT-Pager-Navigation-Widget .post-nav p{font-size:10px;}}
    /*blackberry playbook + nexus7*/
    @media screen and (max-width:550px){.MBT-Pager-Navigation-Widget .post-nav li{height:70px;}.MBT-Pager-Navigation-Widget .post-nav .nav-thumb{display:none;}}
    /*blackberry playbook + nexus7*/
    

    الشكل الثاني

    
    /*=====================================
    = PostNav style 02 metro
    =====================================*/
    .MBT-Pager-Navigation-Widget .post-nav{position:relative;overflow:hidden;display:block;background:#efefef;padding:0;margin:0;}
    .MBT-Pager-Navigation-Widget .post-nav li{width:50%;float:right;margin:0;padding:0;overflow:hidden;height:100px;position:relative;}
    .MBT-Pager-Navigation-Widget .post-nav .nav-content,.MBT-Pager-Navigation-Widget .post-nav .nav-inner{position:absolute;display:block;text-align:center;top:0;right:0;padding:5px;margin:0;width:100%;height:100%;z-index:2;}
    .MBT-Pager-Navigation-Widget .post-nav .nav-content span,.MBT-Pager-Navigation-Widget .post-nav .nav-inner span{font-size:20px;color:#201c29;}
    .MBT-Pager-Navigation-Widget .post-nav .next-post .nav-content span::before,.MBT-Pager-Navigation-Widget .post-nav .prev-post .nav-content span::after{font-family:FontAwesome;position:relative;margin:0 7px;padding:5px 10px;background:rgba(47,47,47,0.36);color:#ffffff;}
    .MBT-Pager-Navigation-Widget .post-nav .next-post .nav-content span::before{content:"\f101";}
    .MBT-Pager-Navigation-Widget .post-nav .prev-post .nav-content span::after{content:"\f100";}
    .MBT-Pager-Navigation-Widget .post-nav p{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:5px 10px;padding:0;color:#ffffff;font-weight:normal;}
    .MBT-Pager-Navigation-Widget .post-nav .nav-thumb img{width:100%;height:100%;display:block;}
    /*----------------*/
    .MBT-Pager-Navigation-Widget span {float: none !important;}
    .MBT-Pager-Navigation-Widget .post-nav .nav-thumb{position:relative;overflow:hidden;margin:0;padding:0;width:100%;height:auto;display:block;}
    .MBT-Pager-Navigation-Widget .nav-thumb:before{content:"";right:0;width:100%;height:100%;z-index:1;position:absolute;background:rgba(0,0,0,0.48);background:-webkit-linear-gradient(transparent,rgba(0,0,0,0.84) 50%);background:-moz-linear-gradient(transparent,rgba(0,0,0,0.84) 50%);background:-o-linear-gradient(transparent,rgba(0,0,0,0.84) 50%);background:linear-gradient(transparent,rgba(0,0,0,0.84) 50%);}
    .MBT-Pager-Navigation-Widget .post-nav li:hover .nav-thumb:before{-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;filter:alpha(opacity=0);opacity:0;}
    .MBT-Pager-Navigation-Widget .post-nav li a{position:relative;overflow:hidden;display:block;height:100%;padding:0;color:#2f2f2f;font-weight:700;}
    /*=====translate=====*/
    .MBT-Pager-Navigation-Widget .post-nav li:hover .nav-thumb img{-webkit-transform:translateY(-100px);-moz-transform:translateY(-100px);-ms-transform:translateY(-100px);-o-transform:translateY(-100px);transform:translateY(-100px);}
    /*=====transition=====*/
    .MBT-Pager-Navigation-Widget .post-nav .nav-thumb img,.MBT-Pager-Navigation-Widget .nav-thumb:before{-webkit-transition:all 1s ease 0s;-moz-transition:all 1s ease 0s;-ms-transition:all 1s ease 0s;-o-transition:all 1s ease 0s;transition:all 1s ease 0s;}
    /*=====Page Responsive=====*/
    @media screen and (max-width:600px){.MBT-Pager-Navigation-Widget .post-nav .nav-content span,.MBT-Pager-Navigation-Widget .post-nav .nav-inner span{font-size:14px;}.MBT-Pager-Navigation-Widget .post-nav p{font-size:10px;}}
    /*blackberry playbook + nexus7*/
    @media screen and (max-width:550px){.MBT-Pager-Navigation-Widget .post-nav li{height:70px;}.MBT-Pager-Navigation-Widget .post-nav p{color:#c1c1c1;}.MBT-Pager-Navigation-Widget .post-nav .nav-thumb{display:none;}}
    /*blackberry playbook + nexus7*/