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*/
    







add_commentإرسال تعليق

  1. فى الكود الاول نسيت ان تضع قفل الوسم

    ردحذف
    الردود
    1. اضن ان الوسم التالي مغلق
      <b:includable id='nextprev'>
      لا أرى الخلل هل من الممكن التوضيح

      حذف
  2. اشكرك جزيل الشكرا

    الاضافة غاية في الروعة بعد الدخول للمعاينة

    و لكن عند التجريب لم تظهر الاضافة

    هل يمكنك التاكد من الاكواد و شكرا

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

      حذف
    2. اشكر اهتمامك و على الرد كيف يمكن اظهار الحاوية الخاصة بالملاحة

      لانني جربت الاضافة على قالب اخر و لم تظهر

      و لك كل الشكر

      حذف
    3. حسنا أخي إذا ممكن ارسل لي رابط القالب التجريبي لمعاينة المشكل

      حذف
    4. لقد راجعت قالبك والظاهر أن وسم التضمين تم حذفه
      إبحث عن هذا العنصر
      <b:include name='feedLinks'/>

      فوقه مباشرة أضف هذا العنصر الاتي...
      <b:include name='nextprev'/>

      حذف
    5. اشكرك جزيل الشكر

      تم اضافة الكود و تم عمل الاضافة بشكل صحيح

      تحياتي و تقديري لحضرتك

      حذف
    6. تعديل
      لديك طريقتين ياإما تحذف الكود الخاص بالملاحة من على الصفحة الرئيسية أو فقط إخفائه

      1- طريقة اخفائه فقط قم بإضافة الكود الاتي فوق الوسم </head>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <style type='text/css'>
      #blog-pager {
      display: none !important;
      }
      </style>
      </b:if>


      2-طريقة حذفه ستقوم بالبحث عن جزء من الكود الذي اضفناها سابقا ثم حذفه وهو كالاتي..

      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <b:if cond='data:olderPageTitle'>
      <a class='blog-pager-older-link btn btn-mouse btn-45 radius100 waves-effect' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
      <i class='material-icons'>
      chevron_left
      </i>
      </a>
      <b:else/>
      <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>
      </b:if>
      </span>
      </b:if>
      <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <b:if cond='data:newerPageTitle'>
      <a class='blog-pager-newer-link btn btn-mouse btn-45 radius100 waves-effect' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
      <i class='material-icons'>
      chevron_right
      </i>
      </a>
      <b:else/>
      <a class='blog-pager-newer-link btn btn-mouse btn-45 radius100 waves-effect' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
      <data:newerPageTitle/>
      </a>
      </b:if>
      </span>
      </b:if>
      <b:if cond='data:blog.homepageUrl'>
      <a class='home-link btn btn-mouse btn-45 radius100 waves-effect' expr:href='data:blog.homepageUrl'>
      <i class='material-icons'>
      home
      </i>
      </a>
      <b:else/>
      <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>
      </b:if>

      حذف
    7. قمت بأخفائه

      بارك الله في تعبك

      حذف