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

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

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

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

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

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

إذهب إلى

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/AVvXsEgyikL_BJ0X5QSpLhF9IKlEp9amPQq0HCgYE1dQQ3t5tJQtV3Wdl3_qg3K65Z2aMBy7gUydZfUjFzc-OYD3w-lp34m4NxT4WoBDdZsJm0Lv5V4XHzUQC1g516JvpAiRZrqffzEwVkuMCi9T/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/AVvXsEgi9-MGd4xFePus9K81gHHPYFX1ezT1sCImUzzQ7pgDMUM9R9f4UkCGg38tHlcWTjsVx5U_yApi37WmviKPZHTcUs_7RpBMLRjKN78x9Htdw_qvDfE0O-vLLdxRLIpc1aBGEYvZaiCBKOkN/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhdazht3iKoIiuzRpGXc47FIP6FTvLmE-pfHJIqAAWTwA2lmLYyY846VNC-iEPmTgecWHXXG3Lg8b47mCfc6euCQ98g8LDA-ugr6Jm2Lrf9aOoa1349ciqmo0lLlzFjXxMiME66GWO8ggT/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/AVvXsEgqRH_30ETHgJJfck81Y4xFkhk1_FVRySiiidMoVSC2o4_mKirSwjxWFtHusGVDtk9E7Ly_KM7U5UdU6vq_YUp9fAJF5JmR-M8osfPwAcfawLAIK7EaL1z8FYhCt1HUuteg8TOXzmoypQOA/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>
يمكنك حذف ما باللون الأزرق
إذا أردت أن تظهر الإضافة أيضا في صفحات التدواينات
والآن نرجوا تعليقاتكم المحفزة لأعمالنا
وأي استفسار ضعه بتعليق

آخر مقالات المدونة

هناك 15 تعليقًا:

  1. مجهود رائع مشكور أخي

    ردحذف
    الردود
    1. شكرا لك على مرورك أخي الكريم
      :)
      نرجوا ان تتابع كل جديد عبر تسجيلك بالمدونة
      ;)

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

    ردحذف
  3. شكرا على التعليق أخي لابد أن يكون احد هاته الاكواد

    أو هذا

    يبدو انك لم تضغط على توسيع القوالب لتجدهما جرب ورد علي

    ردحذف
  4. شكرا لك على اهتمامك
    ولكني لم أجده ولكن وجدت هذا

    ردحذف
  5. إذا أردت ان ترسل لي قالبك وأضف عليه هاته الخاصية :>)

    ردحذف
  6. The widget with id PopularPosts2 is not within a section (actual parent element is: div.) Every widget should be in a section.

    ردحذف
  7. يبدو انه يجب عليك تغييرها إلى PopularPosts1

    ردحذف
  8. نفس المشكل اخي ارجو حل لهذه المشكلة فالسلايدر اعجبني كثيرا

    ردحذف
  9. لكن هاته هي الحلول المقترحة فقط إدا أردت أن أضعها لك بدعم فني مباشر عبر إرسال الدعوة لحسابي الذي بصفحة الدعم الفني أوك

    ردحذف
  10. كذلك أخي ممكن طريقى تغيير شكل القائمة العلوية؟

    ردحذف
  11. و كذلك طريقة وضع 2 سايد بار مثل ما في مدونتك الان

    ردحذف
  12. ذه لازمها تعديل من الاول يعني وتغيير المساحة وعرض التدوينات والقائمة الأخرى

    ردحذف
  13. شكرا اخي
    www.redth3pro.blogspot.com

    ردحذف

إذا أردت عزيزي الزائر إدراج فيديو من يوتوب بتعليق قم بالتالي
[youtube]رابط فيديو يوتوب هنا[/youtube]
كما يمكنك إدراج صورة عبر الكود التالي
[img]رابط صورتك هنا[/img]

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن