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

بسم الله الرحمان الرحيم

اللهم صل وسلم وبارك على سيدنا محمد صلى الله عليه وسلم وعلى آله وصحبه

أقدم لكم إخوتي الكرام

أجمل الإضافات ببلوجر

ألا وهي

  إضافة سلايدر لأكثر المواضيع مشاهدتا ببلوجر

فهي تزيد من جمالية مدونتك أخي الكريم

حيث يمكن للزائر ان يضغط على الموضوع بمجرد الضغط على صورة هذا الأخير

صورة الإضافة

لمعاينة الإضافة فهي بمدونتي

المهم نمر للشرح

إذهب إلى

Dashboard - Template - Edit HTML - Proceed - (make a backup) Expand Widget Template  

مستعملا CTRL + F إبحث عن الكود

]]></b:skin>

 وضع قبله الكود التالي

#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefPm4bYwxjIoYEpZ_hTxwVYxGj3Ho4hoQAn-YKnbaWem0hXZGGLelvC-CNXehVvEai-w_W1tBLY9c3N13En1X9N4EVpUwAOKH_Kn0iPrhXTP4ORKvAteUh4s-DCkqaGLMyWBxTeGImM7N/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

ينكنك أن تغير ما باللون الاحمر وهو عرض وطول الإضافة

كما يمكنك تغيير ما باللون البرتقالي وهو لون خلفية الإضافة

وكذللك تغيير في المارينغ الذي باللون الأزرق وذللك لضبط مكان الإضافة حسب مدونتك

ثم إبحث على الكود

</head>

وضع قبله

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMMrBtmRGuRJqN2tKPFM2SkzPZ_jclwUHBn0jlthtxYRRW7te4WFzb5KXuMjpFl-S__Zjt3FImyfcOlKUZhtdp918_DPIg5fLUb79vHPGdNhK0nfjXmT2tViLkw9S36v8NvYpJSva07TL/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2pmJkfgGwaEKrQgn_uFKb13__Wm6hTexjcCfvBXFOa17gPs0bteaJZLWwBwITyj8nwI7GC63wc7LZKvr2ntyT5was0qQt0G88D65lVg13svlv-P3p6CJ6TqO_VaL-2ec5Mg2MOWwuddXy/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script> 

الآن إبحث عن هذا

<b:section class='main' id='main' showaddelement='yes'>

أو هذا

<b:section class='main' id='main' showaddelement='no'> 

وضع قبله الكود التالي

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAXgtCOzrX5rQ2s6ArjQM7Pf3NtmfxpphFWDKFOyVQpdP6gRFZOSG9hDezA7BbkAdJGFyBIunIpkQ8eiGDpAOfqjhIPbFnPkRWoK7Bsyy-4c44kjRIPV3YLSh98XeS3Q24z8mE3-EYNKd/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

يمكنك حذف ما باللون الأزرق

إذا أردت أن تظهر الإضافة أيضا في صفحات التدواينات

والآن نرجوا تعليقاتكم المحفزة لأعمالنا

وأي استفسار ضعه بتعليق

Tweet