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

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

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

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

Nivo Slider

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

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

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

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

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

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

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

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

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

</head>

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

/* <![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/AVvXsEiRitb1yaryaMOoKNu72kpME-XQ_4vzVCWYZfqYKr_9R-t3PFZ8OyIA7UkCOFHKMDDhktmxmO0ZcVmUJyjL5TTA3JQn0_JHAXENRJyVgThGR80InNxmJTcnQdTbG4yYL6G7jN9pbR0YnMK3/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/AVvXsEikpLHAIW7KXEbR8BxXnegn_avMUyH70sEv-pYIFcFQEtl7090QiyhJuDDw-wm7symDmwYSAwqtoXYzpOo2j4ThUKYqrtPQDPYZJGs9Vfh8Trg4ZHZd8hDMTS1gQZqkAXw1Bnk591bi1H7L/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/AVvXsEidPRrsFD2LEJbyJwiiKa5O6PkPKbd0zoJnOXTXQ5kXFx7eX9-UG474H7wLya-3cb48EpHmUkdCak_AoTar3JwnAgDPpra4a1Q6q82CR_o0C83__Lol59hXzIdNmF1zlucbES8l-H3mnTS5/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>

/* <![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 فقط

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

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

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

</a></p></a></p></div>

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

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

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

أَاجِــي تَــفْـهَــمْ

http://thekuy.blogspot.com

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

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

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

Nivo Slider

http://thekuy.blogspot.com