اضافة سلايدر لمدونات بلوجر

وصف الصورة طريقة اضافة سلايدر بمؤثر جى كويرى رائع وجذاب

  شرح اضافة  سلايدر لمدونة بلوجر


بتقنية الجى كويرى اضف الى مدونتك سلايدر يعرض افضل مشاركات المدونة عن طريق عرض صور مع وصف قصير للمشاركة  

Nivo Slider


قمت باضافة سلايدر Nivo Slider من الموقع الرسمى للاداة واعجبنى فى الاداة خلوها تماما من عيوب واخطاء البرمجة  كما يستخدم اكثر من لغة برمجة مثل جى كويرى جافا سكريبت واخيرا لغة حتى يظهر السلايد شو بالشكل الرائع الذى تراة 

يوفر الموقع الرسمى للاداة اكثر من مؤثر سلايدر مختلف او شكل مختلف للسلايدر حتى يتناسب مع اى موقع او مدونة

طريقة اضافة السلايد شو للمدونة بلوجر بسيطة جدا ولا تحتاج الى خبرة بلغات البرمجة  .  كما يمكن تغيير شكل وتاثير السلايدر فى اى وقت وبسهولة ,

مميزات السلايدر :


  1. يتناسب مع كافة المدونات وبكافة اللغات كما يدعم المدونات بالغة العربية 
  2. اسرع واخف سلايدر قمت بتجربتة يتناسب مع قوالب بلوجر 

سهولة تغيير طول وعرض السلايدر ليناسب المكان المراد ظهور السلايدر فية ,, مميزات اخرى عديدة سوف تقوم بتجربتها بمجرد اضافة الاداة

  • شرح طريقة اضافة سلايدر لقالب مدونة بلوجر

اولا اضافة سكربت وانماط CSS و ومكتبة الجى كويرى

ابحث عن الكود التالى 

</head>
وضع الكود التالى مباشرة اعلى الكود السابق


<style type="text/css">
/* <![CDATA[ */
#w2bSlideContainer           {position: relative;display: block;}
#w2bNivoSlider               {position:relative;width:666px  !important;height:333px  !important;min-height:225px  !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccpTM0GTTFasvqKERqPzNxeBYtdEsgD4FsKQjlZY9qPGjL8QjyZi7gG-dAjcUcv23csHbbgk-z41irJAyGkg6VanWn57N93HAnHm924hwB5F7gsSUhmYVrcyv5GWV0I3A0GqHywJ3Go8A/s1600/w2bLoader.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);box-shadow: 0px 1px 5px rgba(0,0,0,0.4);}
#w2bNivoSlider img           {position:absolute;top:0;left:0;display:none}
.nivoSlider                  {position:relative;width:100%;height:auto;}
.nivoSlider img              {position:absolute;top:0;left:0}
.nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice                  {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img                {display:block}
.nivo-caption                {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.nivo-caption p              {padding:5px;margin:0}
.nivo-caption a              {display:inline!important}
.nivo-html-caption           {display:none}
.nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyWc93RMiB4z-dpu5Dw6lr0gVuKHVedEH1NnG_OrXlIBGFQHTxSdkygTQPfaWbKcd_0SN_jMqng5MplBrjbmFVazU0hylDHCNUt7h4kAHJtW9l-9b0D12JJ2Qs-_otJmdRkWJiZCpZl4U9/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav                {left:10px}
.nivo-nextNav                {background-position:-30px 0!important;right:10px}
.nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBEjRyKJl-MPF3I6Bue53OB5vR7X5twvOodNH00FRDeKPJfSlqcq443TbA8Txx4Eybn9hEXSzdvijMeaReRqgebmKuDqfsaoaDN3674QXNg3VPKKC_ACp_s5OyR3aLLbX72b2yoEqIIiAn/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>

<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect           : 'random',
slices           : 15,
boxCols          : 8,
boxRows          : 4,
animSpeed        : 500,
pauseTime        : 3000,
startSlide       : 0,
directionNav     : true,
directionNavHide : true,
controlNav       : true,
keyboardNav      : true,
pauseOnHover     : true,
captionOpacity   : 0.8
});
});
/* ]]> */
</script>
ثانيا التعديل على سكربت السلايدر ليناسب المدونة

666 : عرض السلايدر
333 : ارتفاع او طول السلايدر

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



                effect   : المؤثر الذى سوف يظهر عند الانتقال من صورة الى اخرى * 
slices           : 15,
boxCols          : 8,
boxRows          : 4,
animSpeed        : سرعة المؤثر
pauseTime        : 3000,
startSlide       : 0,
directionNav     : true,
directionNavHide : true,
controlNav       : التحكم فى السلايدر من الاداة نفسها
keyboardNav      : التحكم فى السلايدر من الكيبورد
pauseOnHover     : توقف السلايدر  عند المرور عليها بالماوس
captionOpacity   : 0.8

فى الوصف السابق قمنا فقط بوصف القيم الهامة الذى يكثر استخدامها مثل  effect والذى يقوم بتغيير المؤثر وهذة افضل ميزة للسلايدر حيث يمكنك تغيير مؤثر السلايدر باكثر من شكل وبتغيير القيمة  effect  فقط

قم بحفظ القالب وتابع الشرح , الان بعد الانتهاء من اضافة سكريبت السلايدر والتعديل علية ليناسب مدونة بلوجر الخاصة بك ,

ثالثا  اضافة الصور و الوصف الذى سوف يظهر فى المكان المراد ظهور السلايدر بة داخل المدونة

اذهب الى التخطيط واضغط اضافة اداة , واضف الكود التالى بعد التعديل علية كما موضح بالكود


<div id="w2bNivoSlider">

<img src="رابط الصورة"  title="عنوان الرابط" alt="عنوان الصورة" height='333' width='666' />
<p><a href="رابط الموضوع">

<img src="رابط الصورة"  title="عنوان الرابط" alt="عنوان الصورة" height='333' width='666' />
<p><a href="رابط الموضوع">

<img src="رابط الصورة"  title="عنوان الرابط" alt="عنوان الصورة" height='333' width='666' />
<p><a href="رابط الموضوع">

<img src="رابط الصورة"  title="عنوان الرابط" alt="عنوان الصورة" height='333' width='666' />
<p><a href="رابط الموضوع">
</a></p></a></p></div>


ملاحظة يمكنك اضافة صور اكثر حسب رغبتك باضافة الكود التالى 

<img src="رابط الصورة"  title="عنوان الرابط" alt="عنوان الصورة" height='333' width='666' />
<p><a href="رابط الموضوع">

احفظ الترتيب وقم بمعاينة الاداة , .

لاى استفسار حول طريقة تركيب سلايدر لمدونات بلوجر اترك تعليقك هنا 

احصل دوريا على اخر مقالات كود بلوجر

هناك 5 تعليقات:

  1. هل يمكن بمجة السلايدر لعرض اخر المشاركات بشكل تلقائى ؟؟؟

    ردحذف
    الردود
    1. السلام عليكم ورحمة الله وبركاتة

      للاسف لايمكن ذلك خلال استخدام Nivo Slider

      سوف اقوم باضافة سلايدر يضيف اخر المشاركات تلقائيا ونفس تاثيرات Nivo Slider

      بالتوفيق ان شاء الله

      حذف
  2. شكرا جدا علي الموضوع الرائع ده

    http://bodybuilding-vids.blogspot.com/

    ردحذف
  3. بالنسبة للتعديلات الأخيرة لبلوجر؛ فبعد ما أضغط على زر (إضافة أداة) أيش أختار بالضبط.. أنا نقرت على جافا سكربت لكن الأمر ما ضبط معي :)

    ردحذف
  4. http://ati9nia.blogspot.com/
    شكرا جدا

    ردحذف


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