Pictures Slide Show with Navigation for Blogger

Friday, March 18, 2011

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

You can follow us on Twitter or Join us on Facebook to receive all updates . . .




Share your views...

0 Respones to "Pictures Slide Show with Navigation for Blogger"

Post a Comment

 

Connect with us

Followers

© 2010 - 2017 theinfoW.com All Rights Reserved | Contact Us | About Us | Privacy Policy | Terms of Use |