حصرياتالمزيد

الأحد، 18 فبراير 2018

احصل على هذة الاداة من هنا

التنقل بين المواضيع بالصورة والعنوان



السلام عليكم ورحمة
الله وبركاته


 نقدم لكم في هذه التدوينة اضافة التنقل بين المواضيع بالصورة والعنوان
فربما تجد جميع القوالب تحتوي هذه الاضافة لكن صورة أو عنوان
وهذا قد يكون غير كافيا بالنسبة للزائر


طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ابحث عن <b:includable id='nextprev'>...</b:includable> واستبدله بالكود التالي
<b:includable id='nav-post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='iswpp'>
<div class='blog-pager' id='blog-pager'>
<div class='iswpp-kiri'>
<div class='isiiswpp-kiri'>
<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'>&#171; الموضوع التالى</a>
</span>
<b:else/>
<span class='current-pageright'><i class='fa fa-chevron-right panahkiri'/><span class='pager-title-right'>التالى</span><br/>هذا احدث موضوع بالمدونة</span>
</b:if>
<div class='clear'/>
</div>
</div>
<div class='iswpp-kanan'>
<div class='isiiswpp-kanan'>
<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'>الموضوع السابق &#187;</a>
</span>
<b:else/>
<span class='current-pageleft'><i class='fa fa-chevron-left panahkanan'/><span class='pager-title-right'>السابق</span><br/>هذا اقدم موضوع بالمدونة</span>
</b:if>
<div class='clear'/>
</div>
</div>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>


      1. ابحث عن </head> وضع فوقه الكود التالي
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /*<![CDATA[*/
    .iswpp-kanan,.iswpp-kiri{transition:all .3s ease-in-out}
    .iswpp{margin:0;padding:12px;height:auto}
    .iswpp-kanan,.iswpp-kiri{color:#666;position:relative;background:#000;background:white;    border: 1px solid #e3e3e3;width:50%;min-height:110px;-moz-box-sizing:border-box;margin:0}
    .iswpp-kiri{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box}
    .iswpp-kanan,.iswpp-kiri{    width: 49.5%;-webkit-box-sizing:border-box}
    .iswpp-kanan{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box}
    .current-pageright,.current-pageleft,.iswpp-kanan a,.iswpp-kiri a{font-size:16px;font-weight:bold;background:0 0;text-decoration:none;line-height:1.1}
    .iswpp-kanan a,.iswpp-kiri a,.current-pageright,.current-pageleft{color:#fff;}
    #blog-pager,.isiiswpp-kanan,.isiiswpp-kiri{margin:0!important}
    .panahkanan,.panahkiri,.iswpp-kiri a div:before,.iswpp-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:30px!important;}
    .panahkiri,.iswpp-kiri a div:before{right:10px}
    .panahkanan,.iswpp-kanan a div:before{left:10px}
    .iswpp-kanan a:hover,.iswpp-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
    .isiiswpp-kanan img,.isiiswpp-kiri img{position:absolute;top:0;width:50%;height:100%;z-index:1}
    .isiiswpp-kanan img{left:0}
    .isiiswpp-kiri img{right:0}
    .iswpp-kiri a div, .iswpp-kanan a div,.current-pageright,.current-pageleft {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
    .iswpp-kiri a div,.current-pageright{right:0;padding-right:40px;}
    .iswpp-kiri a div:before{content:'\f054';font-family: FontAwesome;}
    .iswpp-kiri a div h5 {
        color: #353533;
        font-family: droid arabic kufi;
        width: 53%;
        float: left;
    }
    .iswpp-kiri a div h6 {
        float: right;
        margin: 0 6px;
        margin-top: 42px;
        margin-bottom: -26px;
    }
    .iswpp-kanan div h5 {
        color: #353533;
        font-family: droid arabic kufi;
        width: 53%;
        float: right;
    }
    .iswpp-kanan div h6 {
        float: left;
        margin: 0 6px;
        margin-top: 42px;
        margin-bottom: -26px;
    }
    .blog-pager-older-link:after {
        background: #34495ead;
        width: 50%;
        left: 0;
    }
    .blog-pager-newer-link:after {
        right: 0;
        background: #34495ead;
        width: 50%;
    }
    .iswpp-kanan a div,.current-pageleft  {left:0;padding-left:40px}
    .iswpp-kanan a div:before{content:'\f053';font-family: FontAwesome;}
    .iswpp-kiri a div h6,.iswpp-kanan a div h6,.pager-title-right{font-weight:light}
    .blog-pager-newer-link:after,.blog-pager-older-link:after{content:"";position:absolute;top:0;bottom:0;z-index:2;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f474e', endColorstr='#a63f474e', GradientType=0 );transition:all .4s ease-in-out}
    .iswpp-kanan a:hover:after,.iswpp-kiri a:hover:after{opacity:0}
    @media screen and (max-width:414px){.iswpp-kiri,.iswpp-kanan{width:100%;}
    }
    /*]]>*/
    </style>
    </b:if>



      1. ابحث عن </body> وضع فوقه الكود التالي
    <script type='text/javascript'>
    //<![CDATA[
    (function ($) { var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link');
    $.get(newerLink.attr('href'), function (data) { var thumb = $(data)
    .find('.post-body')
    .length == 1 ? "<img alt='" + $(data)
    .find('.post-title')
    .text() + "' src='" + $(data)
    .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
    .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
    newerLink.html(thumb + '<div><h6>التالى</h6><h5>' + $(data)
    .find('.post-title')
    .text() + '</h5></div>') }, "html");
    $.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2)
    .find('.post-body')
    .length == 1 ? "<img alt='" + $(data2)
    .find('.post-title')
    .text() + "' src='" + $(data2)
    .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
    .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
    olderLink.html(thumb2 + '<div><h6>السابق</h6><h5>' + $(data2)
    .find('.post-title')
    .text() + '</h5></div>') }, "html") })(jQuery);
    //]]>
    </script>



      1. ابحث عن <div class='post-body entry-content' وقم بجمع الكود ليصبح على هذا الشكل
      2.  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>...</div>
      3. ثم ضع الكود التالي أسفله
    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:include name='nav-post'/></b:if>


      1. اذا واجهت اي مشكلة ضعها بتعليق




    هناك تعليق واحد


    EmoticonEmoticon