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

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


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

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

Nivo Slider

لمعاينة السلايدر من الموقع الرسمى للاداة

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

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

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


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

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

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

اولا اضافة سكربت وانماط 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/AVvXsEgnv1iEZ3o9Du_uegUcqAkVbnYRD_AUvjz7c_3fJNJY3HvKg9JDQK8eSm0xBOkuvB9e3ljxyuVErunzEIGESyw4smAaJGlmjqj4n2zS84IapSKK1-j3OuOaR7ulzY-b7MZJ1IJUR-F2M11i/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/AVvXsEgqeBAszpM-OLlyB3LKAHSa1FHxuU97ul3FjLljmj224N9S9Hzbz-G21LyjHENoKV_k0t8rOCRLBsPUlYb7jW6aIQzLXouahyphenhyphen-NhruKlVMYHfqETLjRhyphenhyphenkdqFh9DF4IC4FmE5igcoVl72gy/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/AVvXsEhpyYD31kGF8sB4vQOV7Pa9ljYMrOQJPpuPzH8bUa41mLEUP1Ci10IZHCb-2iOYubbSGblQ_fEdQOW8Vx4wI1G08GsPYxtT0X3MwPlv3IXSYt5NDhMbV2gFk1oV8mnubiZHesnXC70MXlC3/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="رابط الموضوع">

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

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