Pictures Slide Show with Navigation for Blogger

If you want to give your Blogspot blog a professional look, then this featured post gadget is must for you. This gadget will show your posts with images and it also has slider with some amazing effects.

you can view a demo of it here before applying it to your blog. So here goes the tutorial ‘Featured Posts Gadget for Blogger’

Go to your blogger Dashboard >>Design>>Page Elements

Click Add a gadget where you want your featured post slider to be shown.

Scroll down and then click HTML/JavaScript

Inside content area, paste the following code

<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(http://4.bp.blogspot.com/_7wsQzULWIwo/TQ-dlkBU2zI/AAAAAAAADME/t3LPHO0VCso/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(http://3.bp.blogspot.com/_7wsQzULWIwo/TQ-dlGeZ32I/AAAAAAAADL0/R3v8bZsCtqo/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”> Liked this? Now Learn How to create one by <a href=”http://wwww.mybloggertricks.com”>Clicking here</a> </div>
<br/> <br/>

Replace URL Of Image with image link and Description Goes Here with whatever you want the slider to show related to your image. If you want to show no description then simply delete title=”Description Goes Here”

That’s it. If you are having any problems, you can ask us by posting your queries in the comment section below.

Source: Mybloggertricks

Pictures Slide Show with Navigation for Blogger

Comments

Leave a Reply Cancel reply