Featured Content Slider for Blogger

To day i have add Featured Content Slider on my blog for content slider on home page.I think bloggers wants to add Featured content Slider for their blog.Featured Content Slider helps you to show automatic sliding of your featured content on your home page. This is the great trick to show your most important content as Featured content on your home page. Featured Content Slider also helps to increase page views and decrease bounce rate of your blog.

How to Add Featured Content Slider for Blogger Using jQuery

Please follow below steps to add Featured Content Slider for Blogger Using jQuery:
Step 1

Login into Blogger Account and Go to Blogger Dashboard. Go to Layout at the left panel and click on Add a Gadget Link as shown in below picture.



Step 2

When you click on Add a Gadget link a popup window will open with all available gadgets. Choose HTML/JavaScript from gadgets list as shown in below picture.

Step 3

Now choose your Featured Content Slider design for your blog at below.Copy and paste below code to HTML/JavaScript box and click on save button:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"/></script><script src="http://dl.dropboxusercontent.com/s/2tuqn164c49bv4l/mbt-slider-0-01-jis.js" type="text/javascript"/></script><script src="http://dl.dropboxusercontent.com/s/t2e14sks1ufhcwp/mbt-slider-0-02-jis.js" type="text/javascript"/></script><script src="http://dl.dropboxusercontent.com/s/q81tdxkefnkwyxj/mbt-slider-0-03-jis.js" type="text/javascript"/></script><script type="text/javascript">/* <![CDATA[ */jQuery.noConflict();jQuery(function(){ jQuery('ul.menu-primary').superfish({ animation: {opacity:'show'},autoArrows: true,dropShadows: false, speed: 200,delay: 800});});

jQuery(function(){ jQuery('ul.menu-secondary').superfish({ animation: {opacity:'show'},autoArrows: true,dropShadows: false, speed: 200,delay: 800});});

jQuery(document).ready(function() {jQuery('.fp-slides').cycle({fx: 'fade',timeout: 4000,delay: 0,speed: 1000,next: '.fp-next',prev: '.fp-prev',pager: '.fp-pager',continuous: 0,sync: 1,pause: 1,pauseOnPagerHover: 1,cleartype: true,cleartypeNoBg: true});});

</script><a href="http://www.mybloggertricks.org/" rel="dofollow" target="_blank" title="blogger templates"><img src="http://dl.dropboxusercontent.com/u/127448791/blank.gif" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.mybloggertricks.org/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://dl.dropboxusercontent.com/u/127448791/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.mybloggertricks.org/2014/05/featured-content-slider-for-blogger.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://dl.dropboxusercontent.com/u/127448791/blank.gif" alt="Fetured Content Slider" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><style type="text/css">.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;} .fp-slides{} .fp-post{padding:13px;} .fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} .fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} .fp-title{color:#787878;font:bold 14px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;} .fp-title a{color:#000;text-decoration:none;} .fp-title a:hover{color:#0080fF;text-decoration:none;} .fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;} .fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;} .fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;} .fp-nav{width:590px;padding:0px 10px;height:14px;} .fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkKaujcZgujafGkzF9VY0p_r4-QAZL9akJpRinyBMZnu12mge4VctGwJGZIoVb9pbbg6hOS52fnChOFownxxv-K2e34BZ6cWMrujy5nWSqgHnBuzulgiGTONbyjj5jNlCllqpS3rVIQbk/s1600/featured-pager-24work-1.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;} .fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;} .fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAql8ZemhSrPSkbdI3YpZGJLR2OwGhfX0oXGhSoZg0W1pwui4E0_42tvjQxEmWw_rwkQaoRB53ta4ILz55Utbe3Zulg80dsycW1xiqih3PLYuQq_k97RppG3C5sFPOgBIXEgi8kSXfXCQ/s1600/featured-prev-24work-1.png) top left no-repeat;} .fp-prev:hover{opacity:1;} .fp-prev:active{opacity:0.7;} .fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMgnMETjeTDljaqDl5lFns8U46fHI_SEbXlXYI9u-lgpQFJH_LIUPdb6xE2QMEqU8e9vYsK2ZCMQTGU5hsM9yFaMfg0rXsEjIFcczldbJkqVUW13KgipXEGWaYYb9EvVJfZYY6B1v0qR0/s1600/featured-next-24work-1.png;) top left no-repeat} .fp-next:hover{opacity:1;} .fp-next:active{opacity:0.7;}</style>

<div class="featuredposts clearfix"><div class="fp-slides"><div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJo3rG5NtAgbtoa7RvwqURnon8-4IRHjlTq_2Ry9YSQeyTgwl0YH8sH5sI3R_cWAVzxAB7MKL85u8Q8ML5niAGPBUcJyUBUQXauQff6bRXYbJMAKcSqiZdrwCosDl4IRTOyBIWu7YBGiU/s400/add-nivo-slider-to-blogger-blog.png" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>

<div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-xpH2V2pL-1I/U3M870Wf-OI/AAAAAAAACVQ/XoqqRP-1o7k/s1600/Bouce_Rates.jpg" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>

<div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-xpH2V2pL-1I/U3M870Wf-OI/AAAAAAAACVQ/XoqqRP-1o7k/s1600/Bouce_Rates.jpg" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>

<div class="fp-post"> <div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-xpH2V2pL-1I/U3M870Wf-OI/AAAAAAAACVQ/XoqqRP-1o7k/s1600/Bouce_Rates.jpg" height="266"/></a></div><h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>

<div class="fp-post">

<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="http://1.bp.blogspot.com/-xpH2V2pL-1I/U3M870Wf-OI/AAAAAAAACVQ/XoqqRP-1o7k/s1600/Bouce_Rates.jpg" height="266"/></a></div>

<h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p> </div>

</div><div class="fp-nav clearfix"><span class="fp-pager"></span><a class="fp-next" href="#fp-next"></a><a class="fp-prev" href="#fp-prev"></a>

</div></div>*

Change # to your post URL and All Red Images Link to Your original Image Link. Also Change Title of Post and Description.

Thursday, February 18, 2016