The Default Theme Nivo Featured Posts Slider For Blogger ( slider pentru Blogger )

Add The Default Theme Nivo Slider To Blogger


DEMO


Step 1. In Your Blogger Dashboard Click Design > Edit Html 

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

Important - This is a scroll box make sure to get all the code.
/*Start Slider Css*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKtou5PCxc8sz6Bsv9xrs7aOfU9Lb9h79NsEXg4U0gMp2joMgF38h8XNg5_4lMXKXnqQOfz58XnHBnVCEE4XJcrMAnITi96tYm4M7Z2zwpkhG_0lQhhWqmk-TpCH3zrlMQXOtK-7BlFck1/s1600/loading.gif) 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/AVvXsEjKtou5PCxc8sz6Bsv9xrs7aOfU9Lb9h79NsEXg4U0gMp2joMgF38h8XNg5_4lMXKXnqQOfz58XnHBnVCEE4XJcrMAnITi96tYm4M7Z2zwpkhG_0lQhhWqmk-TpCH3zrlMQXOtK-7BlFck1/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yT0QRhsT4ul1Ad8mt5yhIdH-CSr6Xq7zhWNFWY6AqQSoPyCo4CrGhrMq2OLDprVRvnxU_LboRY0vfD6atEw1phbGjeouhjNQwlsICs6rKWI9ZAo9G-nQcVlIwtXRn5XVJmPKDb9LtPnZ/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/AVvXsEhVLDVSAZ1Xw5eDeiMFSaEWdFLq6L7kPzx4f_OEPBFh4jQZsBMbslyoZDb9DBRND_b94JyTco4mC2AYZesDcYjSpdsdgcs1oaRNW2PNPx6fiXtAxpTxWhj6XonFRqlGwA8OF00HUUba5g3z/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/AVvXsEhVLDVSAZ1Xw5eDeiMFSaEWdFLq6L7kPzx4f_OEPBFh4jQZsBMbslyoZDb9DBRND_b94JyTco4mC2AYZesDcYjSpdsdgcs1oaRNW2PNPx6fiXtAxpTxWhj6XonFRqlGwA8OF00HUUba5g3z/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/AVvXsEi-yT0QRhsT4ul1Ad8mt5yhIdH-CSr6Xq7zhWNFWY6AqQSoPyCo4CrGhrMq2OLDprVRvnxU_LboRY0vfD6atEw1phbGjeouhjNQwlsICs6rKWI9ZAo9G-nQcVlIwtXRn5XVJmPKDb9LtPnZ/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
/* End Slider Css, Info @ http://www.spiceupyourblog.com */


Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)

</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>

If you have previously added jQuery to your template you can leave out the line in green.
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

Step 6. Save Your Template.

That's the Css and Scripts added we now add the Html for the slides.

We will be adding the slider across your blog below the header.This area is called Cross Column and can be seen in the image below.If your blog does not have this section available you can see how to enable it here.

Adding HTML For The Slides


The HTML for the slides goes in a Html/Javascript gadget in the cross column section as shown above.

Below is the html for the slider in the demo.There is no really easy way to explain it so you will need to take a minute to figure out the code.I have the URLs (The Destination of the slide when clicked) is in red, the image is in green and the caption (Optional) is in yellow.Each slide works in the same way, you can just copy and paste this code and replace the URL, Image and captions.To add extra slides you can repeat one of the sections and once again add your URL, Image and Caption.

&lt;div id="slider">
&lt;a href="http://www.spiceupyourblog.com">&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsqbqbG8hdVp1SG0rYs3eXwbzqrpg90eKW73aCQpRI5V4F81FcyIE5uA6v56wVTMrqjmuETMBJBzxaEzzCgg_vRQ7DF04OuBXH9unCZ3kVeJn48Ndgh-ygQ_8-al2QxeGYJql6nVPlNkA/s1600/toystory.jpg" title="This Is A Caption" />&lt;/a>

&lt;a href="http://www.spiceupyourblog.com">&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-RcmUJTdVYqoSwNM2laTx14X4nxAyEDaW5UBJxBBvomsv1ja6JzrnzsP5fNgMoQeINv9HIPiqOoE0Wza0qKI-HuYMbvzVEe-1zePu4wBh7PNjBGu3rOLVW7JfK5L1J5AnUYueSZ8C11U/s1600/up.jpg" title="This Is Another Caption" />&lt;/a>

&lt;a href="http://www.spiceupyourblog.com">&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWOyqOcpRZqIjvHD4zf2mulIqR93fhAidjBOdle4MzT-lWn3M3Duill9wBfpy__19VzjCZDo55SAJx8v4M-RNC6m-JlRzoMU5GZDh0M37fx0jIj33kkSepxG28cUFuKVb5H7JWSkXJ01k/s1600/walle.jpg" title="This is an example of a caption" />&lt;/a>

&lt;a href="http://www.spiceupyourblog.com">&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZvmKE6DbcQQRV0l8Ps9FEf9_Dt604CsFZL1qkCu5hIoV1C3VJvm8LQ8iazaWBvDwb4YY_xW5mKDTU8VNJUmWUTUwxPbG2kMJVR5-jpCkrNi0zKQ91ByFnoC0yjuJ-WnYLdvTcVX3qDsk/s1600/nemo.jpg" title="This is another Caption" />&lt;/a>
&lt;/div>

I have 4 slides in the demo you can add more by repeating a section and once again add your URL, Image and caption.


 [sursa] 

Comentarii