Popular Post for Blogger with Easy Slider (Featured Content Slider)
August 20th, 2011
Bismillah,..
Easy Slider.. why I chose this slider because it is simple and easy in the installation …
last time I used Easy Slider is when I make a content slider based on recent or random posts..Awesome Automatic Easy Slider for Blogger using jQuery Part 1
This time I used the Easy Slider for Popular Posts ..
The following is how it looks :
This script very easy to install, you only have to put the script to the new Gadget
- Login to Blogger Dashboard and navigate to Design – Page Elements
- Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
- After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
- Put all script bellow to the “Content” of HTML/Javascript Gadget
- Done- your popular post now with animation
<style type="text/css" media="screen">
<!--
#PopularPosts1{
height:263px;
}
.item-content {
height:263px;
position:relative;
width:560px;
}
.slider {
height:263px;
margin-left:25px;
width:560px;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:263px;
}
.item-snippet {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
width:560px;
font-size:9px;
font-style:italic;
}
.item-title{
color:#FFFFFF;
font-size:10px;
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}
.item-title a:link,.item-title a:visited{
color:#FFFFFF;
text-decoration:none;
border:none !important;
padding:0 !important;
}
.item-thumbnail img{
padding:0 !important;
}
.item-thumbnail a{
padding:0 !important;
}
.crosscol .widget-content {position:relative;}
.slider ul, .slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
.slider li, #slider2 li{
width:560px;
height:263px;
overflow:hidden;
}
.item-thumbnail img{width:560px;height:263px}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:582px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:100px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
.test{
margin:30px;
}
-->
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-for-blogger.googlecode.com/svn/trunk/easysliderpopular.js' type='text/javascript'></script>
if you have any questions please leave a comment….thx u
Alhamdulillah… by Catur
26 Responses to “Popular Post for Blogger with Easy Slider (Featured Content Slider)”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
keren widgetnya gan, ijin mencoba ya…
Pls I need you help because, I added the widget on my site and it’s not working… so I have to remove it back and after I removed it, all my layout refuse to save. it say “an error occur, try to refresh and try again” Pls should I do??? Pls help
nice information,,, happy blogging,,
Thanks for sharing like this beautiful templates …….keep on continue…..
What’s the parameter to adjust slider speed and the position of the #prevBtn ?
As you can see on portableplatypus.com (at the moment of this comment) the button isn’t lined up.
thank you fot your post…
Izin untuk mencobanya ya mas.
I like this Slider too much. I want the width not 560 but 830, and it doesn΄t look good at 830. Will you please help me? Thanks for your great job.
nice information its working good for me….
very very useful i tried this idea’s in my site called http://www.qizvook.com
Asalamualaikum Abu
Bagaimana caranya menampilkan lebih dari 1 post, misal 4 post
Makasih
it works but it streches the pictures, and tip how to leave the pictures constrained??? and how to slow down the speed or the transitions???
Your most of the widgets don`t work properly.Hope you saw your demo yourself in mozilla!
Thank you guy!
Click on my name to see my blog!
i have a problem with easy slider. please help
thanks……………..
saya seperti ini slider.I telah terinstal di blog.Working Abu saya fine.Thanks Farhan
Asalam-o-Alikum Brother this is not working, when I add the first Code it shows on the top of the Blog.
Wa’alaikumsalam, it defend on your popular post place
popular posts semua ;)
gak bikin yg no popular postnya sekalian bos..hihihi
no comments 2 … AWESOME 2
nice share information my friend :) thanks
pertama2 saya ingin mengucapkan terima kasih…gara2 blog kk abu blog jd lbh baik…^^
ada bbrp hal yg ingin saya ketahui…
1. http://i1224.photobucket.com/albums/ee376/se7olution1409/masalahblog.jpg saya sudah berhasil membuat itu tapi kok g bisa gerak turun ke bawah ya kk abu?
2. bagaimana membuat content slider pada home page kk abu, yg ada angka 1,2,3,4? tips blogger slider yg kk abu kasi berhasil semua, tp yg paling bagus yg ada pada home page kk abu…bisa tolong di ajarkan atau mgkn sudah ada link nya?
terima kasih kk abu sudah ingin menjawab…
bisa menjawab di sini atau kirim melalui email saya…terima kasih kk abu….^^
1. Animasinya itu menggunakan apa ? popular post atau recent post ?
2. Content slider ditempat saya buatan sendiri dan belum dipublikasikan, tap sebenarnya byk yg seperti, kalau ada waktu saya buatkan tutorial tentang itu
1. recent post itu kk abu….bisa kasi tutorial nya g? soalnya g mau bergerak recent post nya…
2. oh buatan sendiri…kasi tutorial nya ya kk abu…keren itu content slidernya….
terima kasih
Nice!!…
sudah jalan di webnya dah