السلام عليكم ورحمة الله وبركاته
اليوم سوف أتطرق إلى شرح طريق تركيب سلايد شو إحترافي لمدونات بلوجر بناء على طلب الأخوة والأخوات .
أعزائي متابعي المدونة الطريقة سهلة ولا يوجد بها أي تعقيد ، تابعوا معي طريقة التركيب :
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/AVvXsEju1w2SwN6pR1uBpZeCmHdvtqe2uG_E2V-konTmbAhSur8N5OVNm7QQPBsYjTNpGI0hUyvk9aArmDA9QsHVKcwynrGF1NREn6MuG_iLLLx9m1t__4bFlnrm4F285fT0RfCfmq-9Ff1HcV0/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/AVvXsEiljHlDRUgnhqxHvi_1AvAk9M3bMX8Bz_bMAjzU0-unybOmstMBKMEGsFGJZrVI5Sfn_BfyxlAugHNKsBgzhgAmJH0lO-UuuGt7y0oL9uoXUZBWpzafsr4Ik-0qKCUEO9XydRS3AdDwbudi/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/AVvXsEhEVyK2M0Fdt4iIU7dwEZpAl0JRV7ZzjevMjD2lx1-PGk8J3RdBle11lvybM7Cozvu9QT9SUO0L8S2jl6QyWbqTQYjUi9nvWeFrZWBOvte_x7wGigNBiiMkvvFdbvONCK8o4JkDjBH49uDK/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/AVvXsEiikRmEWxzOjcQvxS7o45VvSUyTv7IOz1tKYijViuYNw6cBe46OhzG042-sQWskjd_hr2P5vHVLYbevsgQBiONlxdy7vN2AhlgnyCj0xkGLWy9JgCUf4jneiB1SHqpVkxzu17-rAlVEXDbm/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/AVvXsEiikRmEWxzOjcQvxS7o45VvSUyTv7IOz1tKYijViuYNw6cBe46OhzG042-sQWskjd_hr2P5vHVLYbevsgQBiONlxdy7vN2AhlgnyCj0xkGLWy9JgCUf4jneiB1SHqpVkxzu17-rAlVEXDbm/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…) */.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/AVvXsEhEVyK2M0Fdt4iIU7dwEZpAl0JRV7ZzjevMjD2lx1-PGk8J3RdBle11lvybM7Cozvu9QT9SUO0L8S2jl6QyWbqTQYjUi9nvWeFrZWBOvte_x7wGigNBiiMkvvFdbvONCK8o4JkDjBH49uDK/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>
تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .
ليست هناك تعليقات:
إرسال تعليق