Last day I shared a simple tutorial which tells how to a create Slideshow For Blogger. Today we have yet another more advanced slider that has some awesome effects added to it. You can navigate between images and the slideshow has opacity plus slice image effects. All adds up just more spice to the slideshow. This slider is created by dev7studios.com and modified by us. Kindly have a look at the demo before we may start learning how to create this new Jquery slider.
PS: If you have slow network connection then kindly have patience till the slideshow loads.
How to add the Slideshow to blogger?
The methods as usual are more easy than you can imagine. Follow up,
- Go To Blogger > Design
- Choose Add a Page Element
- Then choose HTML/JavaScript widget
- Inside the widget paste the code below,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script><script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script><style>
#slider {
position:relative;
}
#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/AVvXsEj2EVjHGljUD07llyZORrQT6vyG5gKV4Uw9hFW6e3FsP3YBl9zzchorLGo5VSWE-ErbbFPgT4ZrQ2wE4rwXSQohYzuxvxjVe-75yP812kzVE7CAoQo8rM62dAAsCYT8Mj-YbaxECZ2UR2s/s400/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/AVvXsEgEx-WMQmfXyKvu9T8JhawRIPCTsu5x_ESXMtAZMHLovzoQw2ULmSLdESs3XZb1FfX9ElOjY0J6HKbY_uymYBhdGWoNn3mwNNqXU152vfS_VYIn8Isnqe74ylWFxH4CkX0fWlzVgi3hIN4/s400/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;
font-size:16px;
padding: 10px 0px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}.clear {
clear:both;
}.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.7; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
</style><div id="slider">
<img src="URL Of Image" alt="" title="Description Goes Here" /><img src="URL Of Image" alt="" title="Description Goes Here" /><img src="URL Of Image" alt="" title="Description Goes Here" /><img src="URL Of Image" alt="" title="Description Goes Here" /><img src="URL Of Image" alt="" title="#htmlcaption" /></div><!—Write Descriptoon With Links In this Part—><div id="htmlcaption" class="nivo-html-caption">Cool na? :) Now Learn How to create one by <a href="http://tollywoodteasers.blogspot.com/2012/05/create-slideshow-in-blogger-with.html">Clicking here</a> </div>
<br/>
<br/>
How To Customize the Slider?
Of course its fun to customize it first using MBT HTML Editor :)Replace URL Of Image with image link and Description Goes Here with any stuff that you may write. If you want to show no caption/description then simply delete title="Description Goes Here"
If you wish to add effects to text or use a link then use title="#htmlcaption" instead and then add your description as I have done after <div id="htmlcaption" class="nivo-html-caption"> . If you are finding this part difficult then let me know to which image do you want to add the effect. I will provide you with the code required.
Note: Please Note that you will need to use Images with equal sizes. The default size of all images used in this tutorial is 618 x 270. To learn how to adjust image sizes using Photoshop read this tutorial. Photoshop Image Editing Basics For bloggers
How To add More Images?
To add another image simply paste the code below just above </div><img src="URL Of Image" alt="" title="Description Goes Here" />
That’s it! Enjoy :)
How To Change Blogger Background
Best Free Seo Tools to Optimize Your Blog
Profitable for your business - Guest Blogging
What Function Margin at Your CSS / Tips For Beginner
How to Host Jquery Script in Blogger / Blogspot
How to Earn Money with Chatika, Clicksor & Adhitz Learn in Urdu
How to Reduce site/blog Loading Speed Time?
Social Media & Email Subscription Box For Blogger
SiteMap
How to Make / Install Back To Top Button With
NoFollow | Understanding tag (rel = "nofollow") Attribute
Change Blog's Background Color Automatically with JavaScript
How to Make a Box Convert / Parse HTML and Functions
how to increase visitors easily to 2000
How to Make 2 Column Element in Lower Post
How To Add Message Box Like Wordpress With Close Button
RSS Feed Directories List
Best Alternatives to Google Adsense in 2013