1:01:00 PM
Today
we provide you Featured Content
Slider for Blogger Using jQuery for content slider on your home page. Every blogger
wants to add Featured
content Slider for their blog. So don't worry we provide you full
tutorial about featured content slider for blogger and give you fully guide to
add this on your blog easily. Featured Content Slider helps you to show automatic
sliding of your featured content on your home page. This is the great technique
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. We provide you most used and effective featured content
slider with demo.
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. You can also check over
demo with click on view demo picture. After choose your design copy and paste
below code to HTML/JavaScript box and click on save button:
Style 1
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
type="text/javascript"/></script><script
src="http://usefbcover.com/public/mbt-slider-0-01-jis.js"
type="text/javascript"/></script><script
src="http://usefbcover.com/public/mbt-slider-0-02-jis.js"
type="text/javascript"/></script><script
src="http://usefbcover.com/public/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.haakblog.com/2014/10/featured-content-slider-blogger.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://img1.blogblog.com/img/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/AVvXsEhACnta2rQZ2h-L4ee7OuF9KUmsEgDTGNewGKntsHv7kxF-Be5boYkuYOyx5PA2PyXXrUaLKLo4ZKAyp_7-jP1kUmq34kWvBRrheyH6S6Ur_qGYNuunVX5Xg1zbdRm8IV5MJSKHfpUzSRM/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/AVvXsEhUR9AfMQb3pXoOC3hLBRJQ9NJwnleeCv0pdxnk2LUaoRcgzsUIpK7L9foEs7JkaUE6QHNDfYs2L9BKhQOkl9Eox0YwSD5YdI2byYZojnWnZAw3n2qJqd-GOsynjaAFI2d2jkwGqYrgQpc/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/AVvXsEjeGemHQqtSXphoje0Q6tN0o8QmqaJ4uLrjDgDcKKC2M1bRme7PPbhOXd6KIJP_yFgNok1WkafKug_piwTyQwQAZQWbs9T3SKRt2-XjR4D49sfRzdeKdtrPuog9kj9C8I84OkJHi7y4rV4/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/AVvXsEgwsSaxMs3Sp4TQzyi2lpqLHOl9G1tqiP0FiBNq757rOXJ8EeXACb2opYoULtK-tAyQX75WDvpLFdZHOUwq7fIBHW6IBwafT7Sz4Fr5TN5FB2zBIpOMBQW2w7ssyiZrmFmAnIm-nJfM_s4/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/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLulM6MYmaaiQD8xddJn4yhVn0mMZ_N-_UpbS53tGtn5sdOXU9U9smPkb6M__D3B-8bihkdyR7lkMGz-cSERDpNY-02Ba4mJ91DARtP2qRD_fAasj11xsBd2o4ratp8C0aY_Su3B1Q3mEz/s1600/animated+cursor.gif" 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCaxiKaVnnCLssusVtBYLz6fopaUDM45LL2jsHD4UhVIBjuoD6s5hzWzAXc0YXHVkz4gfPYiJjKTiSA20AvGtX9HpfX9-tWdxUaqwLgsawlGg_01z7tjXc6WBa5RvE_LjHFXL88CGvARW/s320/Dropdown-menus1.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_iChrbqzW7OeVAiiGjRq3P-AKVCGCBAOr2kraYLX81mW-AzblGPQ3dnZea1MqweIOuna8A-5xkl570bi2jQlhF5FlPlPEz4fyXJG-cDAhhhwTwyg5cBaGDsmTzdXwdwPpu2kkQJBSgMu/s320/clock+blogger.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>
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.haakblog.com/2014/10/featured-content-slider-blogger.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://img1.blogblog.com/img/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/AVvXsEhACnta2rQZ2h-L4ee7OuF9KUmsEgDTGNewGKntsHv7kxF-Be5boYkuYOyx5PA2PyXXrUaLKLo4ZKAyp_7-jP1kUmq34kWvBRrheyH6S6Ur_qGYNuunVX5Xg1zbdRm8IV5MJSKHfpUzSRM/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/AVvXsEhUR9AfMQb3pXoOC3hLBRJQ9NJwnleeCv0pdxnk2LUaoRcgzsUIpK7L9foEs7JkaUE6QHNDfYs2L9BKhQOkl9Eox0YwSD5YdI2byYZojnWnZAw3n2qJqd-GOsynjaAFI2d2jkwGqYrgQpc/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/AVvXsEjeGemHQqtSXphoje0Q6tN0o8QmqaJ4uLrjDgDcKKC2M1bRme7PPbhOXd6KIJP_yFgNok1WkafKug_piwTyQwQAZQWbs9T3SKRt2-XjR4D49sfRzdeKdtrPuog9kj9C8I84OkJHi7y4rV4/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/AVvXsEgwsSaxMs3Sp4TQzyi2lpqLHOl9G1tqiP0FiBNq757rOXJ8EeXACb2opYoULtK-tAyQX75WDvpLFdZHOUwq7fIBHW6IBwafT7Sz4Fr5TN5FB2zBIpOMBQW2w7ssyiZrmFmAnIm-nJfM_s4/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/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLulM6MYmaaiQD8xddJn4yhVn0mMZ_N-_UpbS53tGtn5sdOXU9U9smPkb6M__D3B-8bihkdyR7lkMGz-cSERDpNY-02Ba4mJ91DARtP2qRD_fAasj11xsBd2o4ratp8C0aY_Su3B1Q3mEz/s1600/animated+cursor.gif" 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCaxiKaVnnCLssusVtBYLz6fopaUDM45LL2jsHD4UhVIBjuoD6s5hzWzAXc0YXHVkz4gfPYiJjKTiSA20AvGtX9HpfX9-tWdxUaqwLgsawlGg_01z7tjXc6WBa5RvE_LjHFXL88CGvARW/s320/Dropdown-menus1.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_iChrbqzW7OeVAiiGjRq3P-AKVCGCBAOr2kraYLX81mW-AzblGPQ3dnZea1MqweIOuna8A-5xkl570bi2jQlhF5FlPlPEz4fyXJG-cDAhhhwTwyg5cBaGDsmTzdXwdwPpu2kkQJBSgMu/s320/clock+blogger.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>
Note: Change # to your post URL and All Red Images Link to
Your original Image Link. Also Change Title of Post and Description.
Style 2
<script
src="http://usefbcover.com/public/contentslider-n-b-l-t-r.js"
type="text/javascript"></script><script
src="http://usefbcover.com/public/n17-content-slider-026.js"
type="text/javascript"></script>
<a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.haakblog.com/2014/10/featured-content-slider-blogger.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://img1.blogblog.com/img/blank.gif" alt="Featured Content Slider" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">.sliderwrapper{position: relative; /*leave as is*/overflow: hidden; /*leave as is*/border: 5px solid #333333;border-bottom-width: 5px;width: 565px; /*width of featured content slider*/height: 175px;margin-left:15px;}.sliderwrapper .contentdiv{visibility: hidden; /*leave as is*/position: absolute; /*leave as is*/left: 0; /*leave as is*/top: 0; /*leave as is*/padding: 5px;background: white;width: 555px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;margin-top:0px;}.pagination{width: 555px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/text-align: right;background-color: #333333;padding: 5px 10px;margin-top:-3px;height:30px;margin-left:15px;}.pagination a{padding: 0 5px;text-decoration: none; color: #000;background: #AAAAAA;}.pagination a:hover, .pagination a.selected{color: #000;background-color: #FFF;}
</style>
<div class="sliderwrapper" id="slider1"><div class="contentdiv"><img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwsSaxMs3Sp4TQzyi2lpqLHOl9G1tqiP0FiBNq757rOXJ8EeXACb2opYoULtK-tAyQX75WDvpLFdZHOUwq7fIBHW6IBwafT7Sz4Fr5TN5FB2zBIpOMBQW2w7ssyiZrmFmAnIm-nJfM_s4/s400/add-nivo-slider-to-blogger-blog.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLulM6MYmaaiQD8xddJn4yhVn0mMZ_N-_UpbS53tGtn5sdOXU9U9smPkb6M__D3B-8bihkdyR7lkMGz-cSERDpNY-02Ba4mJ91DARtP2qRD_fAasj11xsBd2o4ratp8C0aY_Su3B1Q3mEz/s1600/animated+cursor.gif" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCaxiKaVnnCLssusVtBYLz6fopaUDM45LL2jsHD4UhVIBjuoD6s5hzWzAXc0YXHVkz4gfPYiJjKTiSA20AvGtX9HpfX9-tWdxUaqwLgsawlGg_01z7tjXc6WBa5RvE_LjHFXL88CGvARW/s320/Dropdown-menus1.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_iChrbqzW7OeVAiiGjRq3P-AKVCGCBAOr2kraYLX81mW-AzblGPQ3dnZea1MqweIOuna8A-5xkl570bi2jQlhF5FlPlPEz4fyXJG-cDAhhhwTwyg5cBaGDsmTzdXwdwPpu2kkQJBSgMu/s320/clock+blogger.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div></div><div class="pagination" id="paginate-slider1"></div><script type="text/javascript">featuredcontentslider.init({id: "slider1", //id of main slider DIVcontentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.enablefade: [true, 0.2], //[true/false, fadedegree]autorotate: [true, 3000], //[true/false, pausetime]onChange: function(previndex, curindex){ //event handler fired whenever script changes slide//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)}})</script>
<a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.haakblog.com/2014/10/featured-content-slider-blogger.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://img1.blogblog.com/img/blank.gif" alt="Featured Content Slider" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">.sliderwrapper{position: relative; /*leave as is*/overflow: hidden; /*leave as is*/border: 5px solid #333333;border-bottom-width: 5px;width: 565px; /*width of featured content slider*/height: 175px;margin-left:15px;}.sliderwrapper .contentdiv{visibility: hidden; /*leave as is*/position: absolute; /*leave as is*/left: 0; /*leave as is*/top: 0; /*leave as is*/padding: 5px;background: white;width: 555px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;margin-top:0px;}.pagination{width: 555px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/text-align: right;background-color: #333333;padding: 5px 10px;margin-top:-3px;height:30px;margin-left:15px;}.pagination a{padding: 0 5px;text-decoration: none; color: #000;background: #AAAAAA;}.pagination a:hover, .pagination a.selected{color: #000;background-color: #FFF;}
</style>
<div class="sliderwrapper" id="slider1"><div class="contentdiv"><img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwsSaxMs3Sp4TQzyi2lpqLHOl9G1tqiP0FiBNq757rOXJ8EeXACb2opYoULtK-tAyQX75WDvpLFdZHOUwq7fIBHW6IBwafT7Sz4Fr5TN5FB2zBIpOMBQW2w7ssyiZrmFmAnIm-nJfM_s4/s400/add-nivo-slider-to-blogger-blog.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLulM6MYmaaiQD8xddJn4yhVn0mMZ_N-_UpbS53tGtn5sdOXU9U9smPkb6M__D3B-8bihkdyR7lkMGz-cSERDpNY-02Ba4mJ91DARtP2qRD_fAasj11xsBd2o4ratp8C0aY_Su3B1Q3mEz/s1600/animated+cursor.gif" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCaxiKaVnnCLssusVtBYLz6fopaUDM45LL2jsHD4UhVIBjuoD6s5hzWzAXc0YXHVkz4gfPYiJjKTiSA20AvGtX9HpfX9-tWdxUaqwLgsawlGg_01z7tjXc6WBa5RvE_LjHFXL88CGvARW/s320/Dropdown-menus1.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div><div class="contentdiv"><img height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_iChrbqzW7OeVAiiGjRq3P-AKVCGCBAOr2kraYLX81mW-AzblGPQ3dnZea1MqweIOuna8A-5xkl570bi2jQlhF5FlPlPEz4fyXJG-cDAhhhwTwyg5cBaGDsmTzdXwdwPpu2kkQJBSgMu/s320/clock+blogger.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="145" /><h2><a href="#" target="_blank">Title-of-Post</a></h2>Slide Description [...]</div></div><div class="pagination" id="paginate-slider1"></div><script type="text/javascript">featuredcontentslider.init({id: "slider1", //id of main slider DIVcontentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.enablefade: [true, 0.2], //[true/false, fadedegree]autorotate: [true, 3000], //[true/false, pausetime]onChange: function(previndex, curindex){ //event handler fired whenever script changes slide//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)}})</script>
Style 3
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
type="text/javascript"></script><script
src="http://usefbcover.com/public/30111191622-slider.js"
type="text/javascript"></script><script
type="text/javascript">stepcarousel.setup({galleryid: 'mygallery',
//id of carousel DIVbeltclass: 'belt', //class of inner "belt" DIV containing
all the panel DIVspanelclass: 'panel', //class of panel DIVs each holding
contentautostep: {enable:true, moveby:1, pause:3000},panelbehavior: {speed:500,
wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 3,
leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Xsa-zF5xHRoBXltKr6Oi_-8O3pn5IpTy0X6-WgBLXZl20-PGGvr15jNqU4yItpzRSIN4Y9qekngTUFbe4vH0zUuDLreU2uV967v5zH4icy7a7PNnUo1b33M2KnY2nVbra9RNpC8ja94/s400/left.jpg',
-48, 0], rightnav:
['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-CJPx7iTXY8aINtKh-53sPH4FW0YpFkA1djIG2XxvYUdCSSvcBKIPkmpVkb8iuoTN6YEHwSIxdxzXOh2EFJ7zbr8iAdDfWhqYJ-UDmU0J9rJfPpMsORabaD_ePzDjNDcyCmP7dLhWFUk/s400/right.jpg',
0, 0]},statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables
that contain current panel (start), current panel (last), and total
panelscontenttype: ['external'] //content setting ['inline'] or ['external',
'path_to_external_file']})</script><a
href="http://www.haakblog.com/" rel="dofollow"
target="_blank" title="Blogger Tips and Tricks"><img
src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips
and Tricks" border="0" style="position: fixed; bottom: 10%;
right: 0%; top: 0px;" /></a><a
href="http://www.haakblog.com/2014/10/featured-content-slider-blogger.html"
rel="dofollow" target="_blank" title="Featured Content
Slider"><img src="http://img1.blogblog.com/img/blank.gif"
alt="Featured Content Slider" border="0"
style="position: fixed; bottom: 10%; left: 0%;"
/></a><style type="text/css">#myslides{background:#000
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlO6Y37TNLpkaZq55XDAcN4FwENss-dY3rYzdHTwTR4IxVJZaeKCPlOek_ttOkb5ojSVQrX9SAhxTKXUsvhsZEwmJS4tUvR10VDEST9Pe0d1S5o4DFDZRMK6C7ABoksfQOxigJ66WsOA/s1600/mslid.jpg)
repeat-x;width: 650px;height:165px;margin-bottom:5px;}.stepcarousel{position:
relative; /*leave this value alone*/overflow: scroll; /*leave this value
alone*/width: 554px; /*Width of Carousel Viewer itself*/height: 160px; /*Height
should enough to fit largest content's height*/margin: 0px 48px 5px
48px;}.stepcarousel .belt{position: absolute; /*leave this value alone*/left:
0;top: 0;}.stepcarousel .panel{float: left; /*leave this value alone*/overflow:
hidden; /*clip content that go outside dimensions of holding panel DIV*/margin:
20px 10px ; /*margin around each panel*/width:170px; /*Width of each panel
holding each content. If removed, widths should be individually defined on each
content DIV then. */background:#0e1829;height:120px;border:1px solid
#1d2c44;}.stepcarousel .panel p{text-align: left; /*leave this value
alone*/overflow: hidden; /*clip content that go outside dimensions of holding
panel DIV*/margin: 5px 5px ; /*margin around each panel*/}.stepcarousel .panel
h2{text-align: left; /*leave this value alone*/height:20px;overflow: hidden;
/*clip content that go outside dimensions of holding panel DIV*/margin: 2px 5px
; /*margin around each panel*/font-size:16px;font-weight:bold;text-align:center;font-family:Georgia,century
gothic,Arial,verdana, sans-serif;}.stepcarousel .panel img{float: left; /*leave
this value alone*/background:#0E1829; /*clip content that go outside dimensions
of holding panel DIV*/margin: 5px 5px 5px 5px; /*margin around each
panel*/padding:0px 0px;}</style>
<div id="myslides"><div id="mygallery" class="stepcarousel"><div class="belt">
<!-- 1st Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwsSaxMs3Sp4TQzyi2lpqLHOl9G1tqiP0FiBNq757rOXJ8EeXACb2opYoULtK-tAyQX75WDvpLFdZHOUwq7fIBHW6IBwafT7Sz4Fr5TN5FB2zBIpOMBQW2w7ssyiZrmFmAnIm-nJfM_s4/s400/add-nivo-slider-to-blogger-blog.png" height="110"/> </a></div><!-- end code of 1st -->
<!-- 2nd Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg" height="110"/> </a></div><!-- end code of 2nd -->
<!-- 3rd Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLulM6MYmaaiQD8xddJn4yhVn0mMZ_N-_UpbS53tGtn5sdOXU9U9smPkb6M__D3B-8bihkdyR7lkMGz-cSERDpNY-02Ba4mJ91DARtP2qRD_fAasj11xsBd2o4ratp8C0aY_Su3B1Q3mEz/s1600/animated+cursor.gif" height="110"/> </a></div><!-- end code of 3rd -->
<!-- 4th Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCaxiKaVnnCLssusVtBYLz6fopaUDM45LL2jsHD4UhVIBjuoD6s5hzWzAXc0YXHVkz4gfPYiJjKTiSA20AvGtX9HpfX9-tWdxUaqwLgsawlGg_01z7tjXc6WBa5RvE_LjHFXL88CGvARW/s320/Dropdown-menus1.png" height="110"/> </a></div><!-- end code of 4th -->
<!-- 5th Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_iChrbqzW7OeVAiiGjRq3P-AKVCGCBAOr2kraYLX81mW-AzblGPQ3dnZea1MqweIOuna8A-5xkl570bi2jQlhF5FlPlPEz4fyXJG-cDAhhhwTwyg5cBaGDsmTzdXwdwPpu2kkQJBSgMu/s320/clock+blogger.jpg" height="110"/> </a></div><!-- end code of 5th -->
</div></div></div>
<div id="myslides"><div id="mygallery" class="stepcarousel"><div class="belt">
<!-- 1st Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwsSaxMs3Sp4TQzyi2lpqLHOl9G1tqiP0FiBNq757rOXJ8EeXACb2opYoULtK-tAyQX75WDvpLFdZHOUwq7fIBHW6IBwafT7Sz4Fr5TN5FB2zBIpOMBQW2w7ssyiZrmFmAnIm-nJfM_s4/s400/add-nivo-slider-to-blogger-blog.png" height="110"/> </a></div><!-- end code of 1st -->
<!-- 2nd Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg" height="110"/> </a></div><!-- end code of 2nd -->
<!-- 3rd Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLulM6MYmaaiQD8xddJn4yhVn0mMZ_N-_UpbS53tGtn5sdOXU9U9smPkb6M__D3B-8bihkdyR7lkMGz-cSERDpNY-02Ba4mJ91DARtP2qRD_fAasj11xsBd2o4ratp8C0aY_Su3B1Q3mEz/s1600/animated+cursor.gif" height="110"/> </a></div><!-- end code of 3rd -->
<!-- 4th Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCaxiKaVnnCLssusVtBYLz6fopaUDM45LL2jsHD4UhVIBjuoD6s5hzWzAXc0YXHVkz4gfPYiJjKTiSA20AvGtX9HpfX9-tWdxUaqwLgsawlGg_01z7tjXc6WBa5RvE_LjHFXL88CGvARW/s320/Dropdown-menus1.png" height="110"/> </a></div><!-- end code of 4th -->
<!-- 5th Template --><div class="panel"><a href="#" target="blank" title="TITLE-OF-THE-SLIDE"> <img width="160" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_iChrbqzW7OeVAiiGjRq3P-AKVCGCBAOr2kraYLX81mW-AzblGPQ3dnZea1MqweIOuna8A-5xkl570bi2jQlhF5FlPlPEz4fyXJG-cDAhhhwTwyg5cBaGDsmTzdXwdwPpu2kkQJBSgMu/s320/clock+blogger.jpg" height="110"/> </a></div><!-- end code of 5th -->
</div></div></div>
Style 4
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script><script
src="http://usefbcover.com/public/n17-content-slider-024.js"
type="text/javascript"></script><a
href="http://www.haakblog.com/" rel="dofollow"
target="_blank" title="Blogger Tips and Tricks"><img
src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tips
and Tricks" border="0" style="position: fixed; bottom: 10%;
right: 0%; top: 0px;" /></a><a
href="http://www.haakblog.com/2014/10/featured-content-slider-blogger.html"
rel="dofollow" target="_blank" title="Featured Content
Slider"><img src="http://img1.blogblog.com/img/blank.gif"
alt="Featured Content Slider" border="0"
style="position: fixed; bottom: 10%; left: 0%;"
/></a><style type="text/css">#myslides{background:#000
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlO6Y37TNLpkaZq55XDAcN4FwENss-dY3rYzdHTwTR4IxVJZaeKCPlOek_ttOkb5ojSVQrX9SAhxTKXUsvhsZEwmJS4tUvR10VDEST9Pe0d1S5o4DFDZRMK6C7ABoksfQOxigJ66WsOA/s1600/mslid.jpg)
repeat-x;width: 650px;height:165px;margin-bottom:5px;}.stepcarousel{position:
relative; /*leave this value alone*/overflow: scroll; /*leave this value
alone*/width: 554px; /*Width of Carousel Viewer itself*/height: 160px; /*Height
should enough to fit largest content's height*/margin: 0px 48px 5px
48px;}.stepcarousel .belt{position: absolute; /*leave this value alone*/left:
0;top: 0;}#contentSlide {background : #ddd;
-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;height
: 228px; margin-bottom: 10px;padding : 10px 0px 10px;}#slideshow {margin : 0
auto;width : 953px;height : 230px;background : #eeeeee none repeat scroll 0
0;position : relative;}#slideshow #slidesContainer {margin : 0 auto;width :
845px;height : 228px;overflow : auto;position : relative;}#slideshow
#slidesContainer .slide {margin : 0 auto;width : 845px;height : 228px;}.control
{display : block;width : 39px;height : 228px;text-indent : -10000px;position :
absolute;cursor : pointer;}#leftControl {top : 0;left : 0;width :
55px;background : transparent
url(http://lh6.ggpht.com/_9b1traaMESE/Sms_Pg_IsqI/AAAAAAAAAXU/tTxdiIsFY4g/previous%20gray.jpg)no-repeat
scroll 0 0;}#rightControl {top : 0;right : 0;background : transparent
url(http://lh6.ggpht.com/_9b1traaMESE/Sms-s5qb9iI/AAAAAAAAAXQ/edpXAZIaxCI/next%20gray.jpg)
no-repeat scroll 0 0;width : 55px;}.slide h2, .slide p {margin : 15px;}.slide
h2 {font : italic 24px Georgia, "Times New Roman", Times, serif;color
: #212421;letter-spacing : -1px;}.slide img {float : right;margin : 0
15px;padding : 1px;}</style>
<!-- Slideshow HTML --> <div id="contentSlide"><div id="slideshow"> <div id="slidesContainer"> <div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 1</a></h2>
<p>TEXT-OF-THE-SLIDE 1</p><img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwsSaxMs3Sp4TQzyi2lpqLHOl9G1tqiP0FiBNq757rOXJ8EeXACb2opYoULtK-tAyQX75WDvpLFdZHOUwq7fIBHW6IBwafT7Sz4Fr5TN5FB2zBIpOMBQW2w7ssyiZrmFmAnIm-nJfM_s4/s400/add-nivo-slider-to-blogger-blog.png" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 2</a></h2><p>TEXT-OF-THE-SLIDE 2</p><img alt="" width="215" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 3</a></h2><p>TEXT-OF-THE-SLIDE 3</p><img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLulM6MYmaaiQD8xddJn4yhVn0mMZ_N-_UpbS53tGtn5sdOXU9U9smPkb6M__D3B-8bihkdyR7lkMGz-cSERDpNY-02Ba4mJ91DARtP2qRD_fAasj11xsBd2o4ratp8C0aY_Su3B1Q3mEz/s1600/animated+cursor.gif" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 4</a></h2><p>TEXT-OF-THE-SLIDE 4</p><img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCaxiKaVnnCLssusVtBYLz6fopaUDM45LL2jsHD4UhVIBjuoD6s5hzWzAXc0YXHVkz4gfPYiJjKTiSA20AvGtX9HpfX9-tWdxUaqwLgsawlGg_01z7tjXc6WBa5RvE_LjHFXL88CGvARW/s320/Dropdown-menus1.png" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 5</a></h2><p>TEXT-OF-THE-SLIDE 5</p><img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_iChrbqzW7OeVAiiGjRq3P-AKVCGCBAOr2kraYLX81mW-AzblGPQ3dnZea1MqweIOuna8A-5xkl570bi2jQlhF5FlPlPEz4fyXJG-cDAhhhwTwyg5cBaGDsmTzdXwdwPpu2kkQJBSgMu/s320/clock+blogger.jpg" height="115"/></div></div>
</div></div> <!-- Slideshow HTML --> <div class="clear"/></div>
<!-- Slideshow HTML --> <div id="contentSlide"><div id="slideshow"> <div id="slidesContainer"> <div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 1</a></h2>
<p>TEXT-OF-THE-SLIDE 1</p><img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwsSaxMs3Sp4TQzyi2lpqLHOl9G1tqiP0FiBNq757rOXJ8EeXACb2opYoULtK-tAyQX75WDvpLFdZHOUwq7fIBHW6IBwafT7Sz4Fr5TN5FB2zBIpOMBQW2w7ssyiZrmFmAnIm-nJfM_s4/s400/add-nivo-slider-to-blogger-blog.png" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 2</a></h2><p>TEXT-OF-THE-SLIDE 2</p><img alt="" width="215" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 3</a></h2><p>TEXT-OF-THE-SLIDE 3</p><img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLulM6MYmaaiQD8xddJn4yhVn0mMZ_N-_UpbS53tGtn5sdOXU9U9smPkb6M__D3B-8bihkdyR7lkMGz-cSERDpNY-02Ba4mJ91DARtP2qRD_fAasj11xsBd2o4ratp8C0aY_Su3B1Q3mEz/s1600/animated+cursor.gif" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 4</a></h2><p>TEXT-OF-THE-SLIDE 4</p><img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCaxiKaVnnCLssusVtBYLz6fopaUDM45LL2jsHD4UhVIBjuoD6s5hzWzAXc0YXHVkz4gfPYiJjKTiSA20AvGtX9HpfX9-tWdxUaqwLgsawlGg_01z7tjXc6WBa5RvE_LjHFXL88CGvARW/s320/Dropdown-menus1.png" height="115"/></div><div class="slide"><h2><a href="#" target="_blank">TITLE-OF-THE-SLIDE 5</a></h2><p>TEXT-OF-THE-SLIDE 5</p><img alt="" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_iChrbqzW7OeVAiiGjRq3P-AKVCGCBAOr2kraYLX81mW-AzblGPQ3dnZea1MqweIOuna8A-5xkl570bi2jQlhF5FlPlPEz4fyXJG-cDAhhhwTwyg5cBaGDsmTzdXwdwPpu2kkQJBSgMu/s320/clock+blogger.jpg" height="115"/></div></div>
</div></div> <!-- Slideshow HTML --> <div class="clear"/></div>
Style 5
<script type="text/javascript"> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 180; </script><script src="http://usefbcover.com/public/n17-content-slider-011.js" type="text/javascript"></script><script src="http://usefbcover.com/public/n17-content-slider-012.js" type="text/javascript"></script><script src="http://usefbcover.com/public/n17-content-slider-013.js" type="text/javascript"></script><a href="http://www.haakblog.com/2014/10/featured-content-slider-blogger.html" rel="dofollow" target="_blank" title="blogger templates"><img src="http://img1.blogblog.com/img/blank.gif" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com/2013/12/add-featured-content-slider-for-blogger.-jquery.html" rel="dofollow" target="_blank" title="Featured Content Slider"><img src="http://img1.blogblog.com/img/blank.gif" alt="Featured Content Slider" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><style type="text/css">div#featabout { width: 635px; border-bottom: 1px solid; }div#featabout-wrapper { margin: 0 auto; padding: 22px 0; width: 635px; height: 235px; }
div#featabout div.featured { float: left; width: 640px; }div#featabout div.featured div.top { height: 15px; }div#featabout div.featured div.mid { padding: 0 15px; }div#featabout div.featured div.mid div#featured { border: 1px solid; }div#featabout div.featured div.bot { height: 15px; }
div#featabout div.about { float: right; width: 328px; }div#featabout div.about div.top { height: 15px; }div#featabout div.about div.mid { padding: 0 15px; height: 224px; }div#featabout div.about div.bot { height: 15px; }
div#featabout div.ab-box h2 { display: block; margin: 0; padding: 0 0 8px 0; font-size: 12px;font-family: Georgia, 'Times New Roman', serif;text-transform: uppercase;}div#featabout div.ab-box div.interior { padding: 8px 0; }div#featabout div.ab-box div.interior p { display: block; margin: 0; padding: 0; }div#featabout div.ab-box-author div.interior { padding: 8px 0 16px 0; min-height: 60px; }div#featabout div.ab-box-author div.interior img { padding: 3px; border: 1px solid; float: left; margin: 0 5px 0 0; }div#featabout div.ab-box-burner div.interior { padding: 8px 0 8px 65px; }div#featabout div.ab-box-burner div.interior p { display: block; margin: 0; padding: 0; line-height: 28px; }div#featabout div.ab-box-burner div.interior span { display: block; height: 21px; margin: 0 0 0 0; padding: 6px 0 0 0; }div#featabout div.ab-box-burner div.interior span input { width: 191px; padding: 0 5px; border: 0; }div#featabout {background: #ffffff url('') repeat-x scroll left top;border-bottom: none;}div#featabout div.featured { background: transparent url('') repeat-y scroll left top; }div#featabout div.featured div.top { background: transparent url('') no-repeat scroll left top; }div#featabout div.featured div.mid div#featured { border-color: #000; }div#featabout div.featured div.bot { background: transparent url('') no-repeat scroll left bottom; }div#featured h2 {font-family: Georgia, 'Times New Roman', sans-serif; font-size: 24px;line-height: 30px; font-weight: normal;}div#featured p {font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
div#featabout div.about { color: #999; background: transparent url('') repeat-y scroll left top; }div#featabout div.about div.top { background: transparent url('') no-repeat scroll left top; }div#featabout div.about div.bot { background: transparent url('') no-repeat scroll left bottom; }
div#featabout div.ab-box h2 { color: #e1e1c7; background: transparent url('') repeat-x scroll left bottom; }div#featabout div.ab-box-burner div.interior { color: #999; background: transparent url('') no-repeat scroll 0px 8px; }div#featabout div.ab-box-burner div.interior span { background: transparent url('') left top no-repeat; }div#featabout div.ab-box-burner div.interior span input { background: transparent none; color: #666; }
#flickrGallery{width: 500px;height: 334px;}#myGallery img.thumbnail, #myGallerySet img.thumbnail{display: none;}.jdGallery{overflow: hidden;position: relative;}.jdGallery img{border: 0;margin: 0;}.jdGallery .slideElement{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('');}.jdGallery .loadingElement{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('');}* html .jdGallery .slideInfoZone{bottom: -1px;}.jdGallery .slideInfoZone h2{padding: 0;font-size: 14px;margin: 0;margin: 2px 5px;font-weight: bold;color: #FFFFFF;bacground: transparent;}.jdGallery .slideInfoZone ul {list-style:none;margin:0 0 0;padding:0 0 0;color: #FFFFFF;}.jdGallery .slideInfoZone li {list-style:none;margin:0 0 0;padding:0 0 0;color: #FFFFFF;}.jdGallery .slideInfoZone p{padding: 0;font-size: 11px;margin: 2px 5px;color: #FFFFFF;}.jdGallery div.carouselContainer{position: absolute;height: 135px;width: 100%;z-index: 10;margin: 0px;left: 0;top: 0;}.jdGallery a.carouselBtn{position: absolute;bottom: 0;right: 30px;height: 20px;/*width: 100px; background: url('') no-repeat;*/text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;}.jdGallery .carousel{position: absolute;width: 100%;margin: 0px;left: 0;top: 0;height: 115px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}.jdExtCarousel{overflow: hidden;position: relative;}.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper{position: absolute;width: 100%;height: 78px;top: 10px;left: 0;overflow: hidden;}.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner{position: relative;}.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail{cursor: pointer;background: #000;background-position: center center;float: left;border: solid 1px #fff;}.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail{margin-bottom: 10px;}.jdGallery .carousel .label, .jdExtCarousel .label{font-size: 13px;position: absolute;bottom: 5px;left: 10px;padding: 0;margin: 0;}.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton{font-size: 10px;position: absolute;bottom: 5px;right: 10px;padding: 1px 2px;margin: 0;background: #222;border: 1px solid #888;cursor: pointer;}.jdGallery .carousel .label .number, .jdExtCarousel .label .number{color: #b5b5b5;}.jdGallery a, .jdGallery a:hover{font-size: 100%;text-decoration: none;color: #fff;}.jdGallery a.right, .jdGallery a.left{position: absolute;height: 99%;width: 25%;cursor: pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;}* html .jdGallery a.right, * html .jdGallery a.left{filter:alpha(opacity=50);}.jdGallery a.right:hover, .jdGallery a.left:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}.jdGallery a.left{left: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYLkySqAgcd-GLzY18or_ZGn_S3jvhaHCv-SNTl4FWrHRn3AKbg8jJo-dCPFrxJvDPoi_zBssd8dYSBnSacS7ivUcUN0SUDgRaMQSJYyuAAIqGFhAM63kpl3XwjXVLtnHWmID2epLtaCXs/s1600/fleche1.png') no-repeat center left;}* html .jdGallery a.left { background: url('') no-repeat center left; }.jdGallery a.right{right: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQP3BEAbM5VVHJTIN_cxYghNAYikNM1Bp0QBXEmvIhNjYBxfuR3v8f5VfVKzypMdDAde_1YpxhohD1XBFaQqNF1QNn-ZoO4TUFLY5TOchcEVTcjR_swcVXq2jSYsu1PIP7Nj_eqEvA0j/s1600/fleche2.png') no-repeat center right;}* html .jdGallery a.right { background: url('') no-repeat center right; }.jdGallery a.open{left: 0;top: 0;width: 100%;height: 100%;}.withArrows a.open{position: absolute;top: 0;left: 25%;height: 99%;width: 50%;cursor: pointer;z-index: 10;background: none;-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}.withArrows a.open:hover { background: url('') no-repeat center center; }* html .withArrows a.open:hover { background: url('') no-repeat center center;filter:alpha(opacity=80); }/* Gallery Sets */.jdGallery a.gallerySelectorBtn{z-index: 15;position: absolute;top: 0;left: 30px;height: 20px;/*width: 100px; background: url('') no-repeat;*/text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;opacity: .4;-moz-opacity: .4;-khtml-opacity: 0.4;filter:alpha(opacity=40);}.jdGallery .gallerySelector{z-index: 20;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;}.jdGallery .gallerySelector h2{margin: 0;padding: 10px 20px 10px 20px;font-size: 20px;line-height: 30px;color: #fff;}.jdGallery .gallerySelector .gallerySelectorWrapper{overflow: hidden;}.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton{margin-left: 10px;margin-top: 10px;border: 1px solid #888;padding: 5px;height: 40px;color: #fff;cursor: pointer;float: left;}.jdGallery .gallerySelector .gallerySelectorInner div.hover{background: #000;}.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview{background: #000;background-position: center center;float: left;border: none;width: 40px;height: 40px;margin-right: 5px;}.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{margin: 0;padding: 0;font-size: 12px;font-weight: normal;}.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info{margin: 0;padding: 0;font-size: 12px;font-weight: normal;color: #aaa;}.extra div.box { width: 310px; padding: 0px; margin:0;}.extra div.box-popular { float: left; }.extra div.box-recent { float: right; }
</style>
<div id="featabout"><div id="featabout-wrapper"><div class="featured"><div class="top"></div><div class="mid"><div id="featured"><style>#myGallery, #myGallerySet, #flickrGallery {width: 606px;height: 220px;z-index:5;border: 1px solid #000;overflow:hidden;}
.jdGallery .slideInfoZone{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 80px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}</style><script type="text/javascript">function startGallery() {var myGallery = new gallery($('myGallery'), {timed: true});}window.addEvent('domready',startGallery);</script><div id="myGallery">
<div class="imageElement"><h2><a href="#" target="_blank">Title-of-Post-1</a></h2><p>Slide 1 Description [...]</p><a class="open" href="#" target="_blank" title="TITLE-OF-THE-Slide1"></a><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwsSaxMs3Sp4TQzyi2lpqLHOl9G1tqiP0FiBNq757rOXJ8EeXACb2opYoULtK-tAyQX75WDvpLFdZHOUwq7fIBHW6IBwafT7Sz4Fr5TN5FB2zBIpOMBQW2w7ssyiZrmFmAnIm-nJfM_s4/s400/add-nivo-slider-to-blogger-blog.png"/><img class="thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwsSaxMs3Sp4TQzyi2lpqLHOl9G1tqiP0FiBNq757rOXJ8EeXACb2opYoULtK-tAyQX75WDvpLFdZHOUwq7fIBHW6IBwafT7Sz4Fr5TN5FB2zBIpOMBQW2w7ssyiZrmFmAnIm-nJfM_s4/s400/add-nivo-slider-to-blogger-blog.png"/></div><div class="imageElement"><h2><a href="#" target="_blank">Title-of-Post-2</a></h2><p>Slide 2 Description [...]</p><a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 2"></a><img class="full" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg"/><img class="thumbnail" src="http://1.bp.blogspot.com/-Z5lg8Qd_B_Y/UUnxZeLNimI/AAAAAAAAAXc/ZtzNEvJ8ll0/s320/images.jpg"/></div><div class="imageElement"><h2><a href="#" target="_blank">Title-of-Post-3</a></h2><p>Slide 3 Description [...]</p><a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 3"></a><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLulM6MYmaaiQD8xddJn4yhVn0mMZ_N-_UpbS53tGtn5sdOXU9U9smPkb6M__D3B-8bihkdyR7lkMGz-cSERDpNY-02Ba4mJ91DARtP2qRD_fAasj11xsBd2o4ratp8C0aY_Su3B1Q3mEz/s1600/animated+cursor.gif"/><img class="thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLulM6MYmaaiQD8xddJn4yhVn0mMZ_N-_UpbS53tGtn5sdOXU9U9smPkb6M__D3B-8bihkdyR7lkMGz-cSERDpNY-02Ba4mJ91DARtP2qRD_fAasj11xsBd2o4ratp8C0aY_Su3B1Q3mEz/s1600/animated+cursor.gif"/></div><div class="imageElement"><h2><a href="#" target="_blank">Title-of-Post-4</a></h2><p>Slide 4 Description [...]</p><a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 4"></a><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCaxiKaVnnCLssusVtBYLz6fopaUDM45LL2jsHD4UhVIBjuoD6s5hzWzAXc0YXHVkz4gfPYiJjKTiSA20AvGtX9HpfX9-tWdxUaqwLgsawlGg_01z7tjXc6WBa5RvE_LjHFXL88CGvARW/s320/Dropdown-menus1.png"/><img class="thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCaxiKaVnnCLssusVtBYLz6fopaUDM45LL2jsHD4UhVIBjuoD6s5hzWzAXc0YXHVkz4gfPYiJjKTiSA20AvGtX9HpfX9-tWdxUaqwLgsawlGg_01z7tjXc6WBa5RvE_LjHFXL88CGvARW/s320/Dropdown-menus1.png"/></div><div class="imageElement"><h2><a href="#" target="_blank">Title-of-Post-5</a></h2><p>Slide 5 Description [...]</p><a class="open" href="#" target="_blank" title="TITLE-OF-THE-SLIDE 5"></a><img class="full" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_iChrbqzW7OeVAiiGjRq3P-AKVCGCBAOr2kraYLX81mW-AzblGPQ3dnZea1MqweIOuna8A-5xkl570bi2jQlhF5FlPlPEz4fyXJG-cDAhhhwTwyg5cBaGDsmTzdXwdwPpu2kkQJBSgMu/s320/clock+blogger.jpg"/><img class="thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_iChrbqzW7OeVAiiGjRq3P-AKVCGCBAOr2kraYLX81mW-AzblGPQ3dnZea1MqweIOuna8A-5xkl570bi2jQlhF5FlPlPEz4fyXJG-cDAhhhwTwyg5cBaGDsmTzdXwdwPpu2kkQJBSgMu/s320/clock+blogger.jpg"/></div></div>
</div></div></div></div></div>
No comments
Post a Comment