مدونة نيو ويب بلوجر

1- الذهاب إلى لوحة مدونة -- تخطيط --- إضافة أداة

2- اختر HTML / جافا سكريبت

3- نسخ الكود بالأسفل ولصق وحفظ ...

<div id='slider'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTC5_qX9Iq8b6vGERkXANEQ1iXbFraxUg3wS8OJJkRHbthQcpOg-IWiMkHCluTV9560djZxlhN9arjtPjVFXH0p_zv8Kix3Q18gKR1v9xrpHjffHnZnCJS2kqmEJtyv9ni79Ak8TOSBMM/s1600/toystory.jpg'/>
<a href='http://dev7studios.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP6-49XwZ1MGz2gbFTmkgCnMqCwLs15jLwaI3oqMCRqu-zc13KffJJyHzP0S_Q7nehqvIKFdCAR6eYx-o20nzIe3ql_LcpGxf9AP57xNFDGYZUzGLQfMc-fcdBH7Tf-5wO1oXf5f2LM-U/s1600/up.jpg' title='#htmlcaption'/></a>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_vDL5ryjdBxairYmgLayH49NJGGgBBz1rcG_TKGBbniqD64IrPs4FN3oktPvyv6PsI62Rmiu_aKEcAyRkt6h35gkBHAG4L7mr-RYBSUxqet1K7xdtMVfaQR3Zk268MShxzSB2XvyyGk/s1600/walle.jpg' title='This is an example of a caption'/>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg46mTx61Fxg85MEALVJR9TqplO5UYbYms_kr91Yowld-qNGf6H2I7-5TQJvbDT1XcpknCA7IiIY9d4lQJIJb2RB0PtvZdV69PTdafnLM2iCWYehz9eLLdyVNDNo048pC4VnHpKNRr2l2U/s1600/nemo.jpg'/>
</div>
<div class='nivo-html-caption' id='htmlcaption'>
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href='#'>a link</a>.
</div>

داخل القالب ابحث عن هذا الكود

</b:skin>

والصق الكود التالى فوقه :

*
* 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
*
* March 2010
*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MG5bkoDbtxjKuwsCaPibKZBsv-PMbqfBiy61YoiGyryfohxLTJ952-76raAlWW55bUtKgKxJsDdLQObhvOxd0R26p6cEyOYi_u0BqKeHKeCv3jog4luaEtX58JMeCRO9jteK9GjA3l0/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-left:190px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAgRKtIVN053u2FGAucS5zbReXjd1s0R-ehc6eY3hsfr87Eo3CG8uPnZi4YMVtEncwOiMF1MetD_ftuQN3K1LhTx5TERFTLXoVqau5lUY-HWx2K0aKxqwtMjAGVgukPtAdPQO2FE3VBzk/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW4gohyQaIyvsdyuThdqJkGgU3p5K8WmK7xDpKb-UnSLr1834UxqPNRT7nF_L2fSClWj70gf8IycLNpWL15t2RfKMrDIQnRR9rkUlI_EjOCqlUcZnReHnkAgaQRpkQztr0IoDZhVBrjcE/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.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/AVvXsEgJgtj3moQtrTAZfI3U_G-SJ1A7OPpO8w4ZCRSQFDpWZABhkjrfVcRNeXxVTtvki57GhIyUQlgft3nqkUTzw6vDTJFnPMnX_hmdOnIyFxO3Ccc6Zu-2xGwNeUqcLu8ZViUcrcf0U7cWUjs/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left: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;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left: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;
left: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 {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJgtj3moQtrTAZfI3U_G-SJ1A7OPpO8w4ZCRSQFDpWZABhkjrfVcRNeXxVTtvki57GhIyUQlgft3nqkUTzw6vDTJFnPMnX_hmdOnIyFxO3Ccc6Zu-2xGwNeUqcLu8ZViUcrcf0U7cWUjs/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left: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/AVvXsEjW4gohyQaIyvsdyuThdqJkGgU3p5K8WmK7xDpKb-UnSLr1834UxqPNRT7nF_L2fSClWj70gf8IycLNpWL15t2RfKMrDIQnRR9rkUlI_EjOCqlUcZnReHnkAgaQRpkQztr0IoDZhVBrjcE/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}

ثم ابحث عن هذا الكود :

</head>

الصق الكود التالى فوقه ايضا

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

ثم حفظ القالب ...

تم التعديل على السلايد بتاريخ : 5-7-2015

عنوان التدوينة: سلايدر Nivo Slider لبلوجر
تقييم : 100من 100مرتكز على 53 تقييم.
الكاتب / المدير : Unknown
التسميات : أضافات بلوجر
توقيت النشر : 10:54 ص

عدد التعليقات : 2

عدد المشاهدات :