You might have seen so many sliders or crousels that works on the recent posts or you have to add images in it manually. In this tutorial i will give you the slider/image gallery that works on the popular posts. This widget shows your 10 popular posts images in form of slider. This slider is made bydynamicdrive.com and i make some changes to make it popular post slider
Live Demo
POPULAR POSTS SLIDER PREVIEW
POPULAR POST SLIDER DEMO
HOW TO ADD POPULAR POST SLIDER/IMAGE GALLERY TO BLOGGER
- Go to Blogger Dashboard --> Design --> Edit HTML
- Backup your Template before making any changes to your blog
- Now Expand Widget Templates
- Find the code shown below using [ctrl+F]
</head>
- Now Paste the Code shown below just before/above it
<style type="text/css">
#gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbxHU-inOa0IEDdDp3U_XaEzwR7-bqtsTSZ98jCHMOWc3lB0NedSQJbsDKnTsbkfghP5iQHdXrlqZxA2nWYF9X12wdcgcsS64mNCwnnDlIMlDmOB3D6KF1ea3v_MsMCAiUPV0704rt88/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://latest-hacks.googlecode.com/svn/gadgets/popularposts/popular-posts.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvJt2fNVVt_2Yn2cBqB-Wr3D3VCKTuxPmAufaHOBtC8JkkwJoDgXKL1l0AjRydnWRRwfhad0bgKD6_2f0CV-AnC7GsfpyXn0SD584aaUEYMTYMil4A4HqPHGI0x1W3MQZHhinmhnPYdrw/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSAF7aa8hzTymSoAwOzsUKPPZtQ3G1yCIPGRavT1-Fvg2aWYOtSDZ5xcj1pshxxeULVSKsBSUuzp0xy37IsCI4iF_PU_MYsiBQ9Ap6CZLNadGdstAx3ftW0E2TvKqKz0GvNHQT3AF0GG0/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>
#gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbxHU-inOa0IEDdDp3U_XaEzwR7-bqtsTSZ98jCHMOWc3lB0NedSQJbsDKnTsbkfghP5iQHdXrlqZxA2nWYF9X12wdcgcsS64mNCwnnDlIMlDmOB3D6KF1ea3v_MsMCAiUPV0704rt88/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://latest-hacks.googlecode.com/svn/gadgets/popularposts/popular-posts.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvJt2fNVVt_2Yn2cBqB-Wr3D3VCKTuxPmAufaHOBtC8JkkwJoDgXKL1l0AjRydnWRRwfhad0bgKD6_2f0CV-AnC7GsfpyXn0SD584aaUEYMTYMil4A4HqPHGI0x1W3MQZHhinmhnPYdrw/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSAF7aa8hzTymSoAwOzsUKPPZtQ3G1yCIPGRavT1-Fvg2aWYOtSDZ5xcj1pshxxeULVSKsBSUuzp0xy37IsCI4iF_PU_MYsiBQ9Ap6CZLNadGdstAx3ftW0E2TvKqKz0GvNHQT3AF0GG0/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>
- Now Find the code shown below using [ctrl+F]
<b:section class='sidebar' id='sidebar' preferred='yes'>
- Now Paste the Code Shown Below just below/after it
<b:widget id='PopularPosts7' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgZqd3j1EcWswSiM-Xa7lOaY15jv2Sg4_KIaYEjgcrJKlQDdnmHe5c_eSuNHdxO9axXQgGHSzZort0DFSMGaBtyrfqoRtcodVsSW_qkJEU8hPbJx74DOZvpfwGbdDUnvYJ68igIJw8QA/s1600/defaultimage.jpg'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div></b:if>
</b:includable>
</b:widget>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgZqd3j1EcWswSiM-Xa7lOaY15jv2Sg4_KIaYEjgcrJKlQDdnmHe5c_eSuNHdxO9axXQgGHSzZort0DFSMGaBtyrfqoRtcodVsSW_qkJEU8hPbJx74DOZvpfwGbdDUnvYJ68igIJw8QA/s1600/defaultimage.jpg'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div></b:if>
</b:includable>
</b:widget>
- Now save your template
LIKE IT? SHARE IT.
Read more...
About the Author
0 comments:
Please no spam! Remove comment!