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

السلام عليكم ورحمة الله وبركاته 

اليوم سوف أتطرق إلى شرح طريق تركيب سلايد شو إحترافي لمدونات بلوجر بناء على طلب الأخوة والأخوات .

أعزائي متابعي المدونة الطريقة سهلة ولا يوجد بها أي تعقيد ، تابعوا معي طريقة التركيب :

1- أدخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم : ]]></b:skin>

3- ضع الكود التالي فوقه .

    <!--Home Blogger--!>/*/** jQuery Nivo Slider v2.5.1* http://nivo.dev7studios.com** copyright 2011, Gilbert Pellegrom* Free to use and abuse under the MIT license.* http://www.opensource.org/licenses/mit-license.php* Bloggerised by http://www.bloggertricks.biz*
    */#slider-wrapper {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZUm80gp4PeK3J0N8dPWxZ83n3kK5w5VkiP74O2JjM51t4KEkQlGJiVH8NzP3R_cQ4dM0aI6wr8r36b-o0mvOEl2Xlkqruq9y9VXPyWml4QF3bqs774ZF1L10AFv5aKpsgy4f1Q_6s_Jw/s1600/slider.png) no-repeat;width:998px;height:392px;margin:0 auto;padding-top:74px;margin-top:50px;}#slider {position:relative;width:618px;height:246px;margin-right:190px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceTFFYqrdRkrdjKc0R83TkxPXgAG519YzJ1sHoJWUcA2yteLqA0rkkF1qSO-6mL-YwyQLFjqOAgS20Xm147zbQ7Egl6pv_nJPYPLD4c1qpGgJLMqE58j6I3uXiV-F6Wn8h_eKYiWmqvx3/s1600/%5Bbloggertricks.biz%5Dload.gif) no-repeat 50% 50%;margin-bottom:30px;}#slider img {position:absolute;top:0px;right:0px;display:none;}#slider a {border:0;display:block;}.nivo-controlNav {position:absolute;right:260px;bottom:-42px;}.nivo-controlNav a {display:block;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLFoV5p9YMdRB-Th-csfwTlmKYGxz9bWD0qqzmq2BFRsRF3mKVpUZgrWLAmbLIg74P00dVRn_aaSrvJORnFTXQEsdYf4OVhA0o5VQh_Y5avzcJhQWzZZeOOkIlCQJqfYwuJsZgQ6-fgpYO/s1600/%5Bbloggertricks.biz%5DBullets.png) no-repeat;text-indent:-9999px;border:0;margin-left:3px;float:right;}.nivo-controlNav a.active {background-position:0 -22px;}.nivo-directionNav a {display:block;width:30px;height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6x_WCljruWcggUOzGK9I3JgflgtqqMykcRpEtQBH64R-mIwWE8kkeSDZdB2MxsAzm613GuGI9LlaOI8PxyaNpj52L4yCKY4BxpSfVV2cX96kpZXbzqY02-D0JZjcT1kuN9lQdKH6KcptP/s1600/%5Bbloggertricks.biz%5DArrows.png) no-repeat;text-indent:-9999px;border:0;}a.nivo-nextNav {background-position:-30px 0;left:15px;}a.nivo-prevNav {right:15px;}.nivo-caption {text-shadow:none;font-family: Helvetica, Arial, sans-serif;}.nivo-caption a {color:#efe9d1;text-decoration:underline;}/* The Nivo Slider styles */.nivoSlider {position:relative;}.nivoSlider img {position:absolute;top:0px;right:0px;}/* If an image is wrapped in a link */.nivoSlider a.nivo-imageLink {position:absolute;top:0px;right:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;}/* The slices and boxes in the Slider */.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}.nivo-box {display:block;position:absolute;z-index:5;}/* Caption styles */.nivo-caption {position:absolute;right:0px;bottom:0px;background:#000;color:#fff;opacity:0.8; /* Overridden by captionOpacity setting */width:100%;z-index:8;}.nivo-caption p {padding:5px;margin:0;}.nivo-caption a {display:inline !important;}.nivo-html-caption {display:none;}/* Direction nav styles (e.g. Next & Prev) */.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;}.nivo-prevNav {right:0px;}.nivo-nextNav {left:0px;}.nivo-directionNav a {display:block;width:30px;height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6x_WCljruWcggUOzGK9I3JgflgtqqMykcRpEtQBH64R-mIwWE8kkeSDZdB2MxsAzm613GuGI9LlaOI8PxyaNpj52L4yCKY4BxpSfVV2cX96kpZXbzqY02-D0JZjcT1kuN9lQdKH6KcptP/s1600/%5Bbloggertricks.biz%5DArrows.png) no-repeat;text-indent:-9999px;border:0;}a.nivo-nextNav {background-position:-30px 0;left:15px;}a.nivo-prevNav {right:15px;}/* Control nav styles (e.g. 1,2,3&#8230;) */.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;}.nivo-controlNav a.active {font-weight:bold;}.nivo-controlNav a {display:block;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLFoV5p9YMdRB-Th-csfwTlmKYGxz9bWD0qqzmq2BFRsRF3mKVpUZgrWLAmbLIg74P00dVRn_aaSrvJORnFTXQEsdYf4OVhA0o5VQh_Y5avzcJhQWzZZeOOkIlCQJqfYwuJsZgQ6-fgpYO/s1600/%5Bbloggertricks.biz%5DBullets.png) no-repeat;text-indent:-9999px;border:0;margin-left:3px;float:right;}

4- إبحث عن الوسم : </head>

5- ضع الكود التالي فوقه .

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script><script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'></script><script type='text/javascript'>$(window).load(function() { $('#slider').nivoSlider();});</script>

6- الآن إحفظ القالب | ثم توجه إلى تخطيط | ثم إضافة أداة : HTML/JavaScript

7 - اللصق الكود التالي في صندوق الأداة : 

     <div id='slider'><img alt='' src='http://i38.servimg.com/u/f38/17/70/27/78/112.jpg'/><a href='رابط المشاركة'><img alt='' src='http://i38.servimg.com/u/f38/17/70/27/78/212.jpg' title='وصف المشاركة'/></a><img alt='' src='http://i38.servimg.com/u/f38/17/70/27/78/313.jpg' title='وصف المشاركة'/><img alt='' src='http://i38.servimg.com/u/f38/17/70/27/78/home_b20.jpg'/></div>

- مقياس الصورة يجب أن يكون : 

- العرض : 618px 

- الارتفاع : 246px

- إذا أردت إضافة صورة أخرى  أضف هذا الكود إلى الكود السابق :

<a href="رابط المشاركة"><img src="رابط الصورة" alt="" title=" الوصف"/></a>

لمشاهدة السلايد شو

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