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

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

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

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

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(http://3.bp.blogspot.com/-upQKtIwk5Kw/TeiNrE-31II/AAAAAAAAASU/J_p9rYGVEHQ/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(http://1.bp.blogspot.com/-8ZAQNmHSshs/UAAMnmFYUOI/AAAAAAAABD8/5-71fPb3BMg/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(http://3.bp.blogspot.com/-5ltb7tJGiXA/UAAMfb_54vI/AAAAAAAABD0/K38lH3LcWjY/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(http://1.bp.blogspot.com/-wUTrnuigudE/UAAMbW0p6PI/AAAAAAAABDs/KQ2aeCr59gs/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(http://1.bp.blogspot.com/-wUTrnuigudE/UAAMbW0p6PI/AAAAAAAABDs/KQ2aeCr59gs/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(http://3.bp.blogspot.com/-5ltb7tJGiXA/UAAMfb_54vI/AAAAAAAABD0/K38lH3LcWjY/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>

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

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