السلام عليكم ورحمة الله وبركاته
اليوم سوف أتطرق إلى شرح طريق تركيب سلايد شو إحترافي لمدونات بلوجر بناء على طلب الأخوة والأخوات .
أعزائي متابعي المدونة الطريقة سهلة ولا يوجد بها أي تعقيد ، تابعوا معي طريقة التركيب :
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/AVvXsEjE39C0IKeMO2390AEpkILge3H5p6NAs_OlRMG4I-EhAeEZVKa3XQFaEJKHth3otMhXC6oAP2mqgz_drB-J0Ev0yI7vp84iCvW5x3vN1vpgwR1NghQShu9SPReOCsAERqaGvA76R06NR1M/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/AVvXsEhY2nSRpndHFocJMrzJUDyXJb_okYYLBb7G2gGO9r70uyDGz_WS4rfzjZltKETZaPjbqZaED64a7EkHAUxaAnjXsxfiebPscbc-JmBlS3h96IL-4K_wCTPgvGQgEuA9JWYQduVbB6-JQPrb/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/AVvXsEis-xd7g9UgipAtYnJclBKi-c00p3DDJk5hp1c-lbFtqNbzArpShy4QyoO-PNyXsLxi6GuiLlLDL2fjtU-BYkVP4Rc_D9sAFq7BJw4MBmTvTbzghrASCun5L5W_jMcSLX1ctQkNAk77i20c/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/AVvXsEherpkgcT0usdVfkNiKfP6DDu9XGYITQZlArUZLJGLGw-c5eTEweEHigimv1IIJkogT0r5GNjCeou1zhE6AwYHjBkHmYeLLaAJLoGjPsj392mh3Z-WsbDAJshdSzUYkEnjf47MqQgiXK6TG/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/AVvXsEherpkgcT0usdVfkNiKfP6DDu9XGYITQZlArUZLJGLGw-c5eTEweEHigimv1IIJkogT0r5GNjCeou1zhE6AwYHjBkHmYeLLaAJLoGjPsj392mh3Z-WsbDAJshdSzUYkEnjf47MqQgiXK6TG/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/AVvXsEis-xd7g9UgipAtYnJclBKi-c00p3DDJk5hp1c-lbFtqNbzArpShy4QyoO-PNyXsLxi6GuiLlLDL2fjtU-BYkVP4Rc_D9sAFq7BJw4MBmTvTbzghrASCun5L5W_jMcSLX1ctQkNAk77i20c/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>
تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .
كتب بواسطة Expert Blogger
بلدي هو الأردن مشرف سابقا على عدة منتديات و مواقع و صفحات تعليمية على الفيسبوك و من عشاق البحت و الاكتشاف أشياء جديدة و حصرية حول شبكت الأنترنيت من أهمها مدونات بلوجر و وود دبرس و الصفحات على الفيسبوك أحب مساعدة المبتدئين لإنجاز طموحاتهم كما أسعى لتحقيقي طموحاتي من خلال هذا الموفع المتواضع أتمنى أن تنال مقالاتي إعجابكم و أن أكون أول من يدعمكم لشق طريقكم نحو التطور و الإحتراف و الإستفادة من خلال عرض مجموعة من المعلومات و المواضيع القيمة .
0 التعليقات:
إرسال تعليق