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
34 Responses to “Popular Post for Blogger with Easy Slider (Featured Content Slider)”
Leave a Reply
Can you make an easy plug-and-play of the “recent” or random posts? I looked at your previous script and it asks me to modify my template.
I’m also looking for a nice slider, like yours, where I can just choose what to show in it.
Thanks for your great work, the demo’s are really nice and very close to what I would like to do – including the minimal mods.
Thanks,
L
Thanks for the gr8 tutorial. It works fine. I was wondering is there a way to make the slide show only on the home page?
wah…. blogku bisa makin bagus nih ^_^..
Your most of the widgets don`t work properly.Hope you saw your demo yourself in mozilla!
in my site dosn’t work…i am very sorry because i like it so much
tolong di buatkan yang pada template tata letak (2006)
minima dark
Thank you guy!
Click on my name to see my blog!
its awesome. i wanna try this with my blog
eu quero quadruplicar ele.
ex:
assim!
keren mas, it’s working perfectly, Syukron…
keren mas, It’s working perfectly. Syukran…
memang popular post salah satu trik seo juga klo kamu tahu….
popular post dibuat sebenarnya sangat baik untuk menarik pengunjung berlama-lama nongkrong diwebsite kita. Alasannya, karena setelah mereka membaca postingan kita yang dicari lewat mesin pencari, mereka akan melihat daftar artikel menarik tersebut dan mengkliknya dan lanjut deh bacanya…..
wow.. great abu farhan.. thanx very much to share knowledge
i have a problem with easy slider. please help
Esse é massa de mais!
thanks……………..
saya seperti ini slider.I telah terinstal di blog.Working Abu saya fine.Thanks Farhan
thankz buat mas abu-farhan….sangat cerdas dan cadas…..sangat bermanfaat buat saya…..
salam indonesia…..
Eu não consegui usar este código. Está com bug :(
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
Sudah saya coba tapi belum berhasil, mohon pencerahan nya….maklum masih newby…
sudah jalan di webnya dah
popular posts semua ;)
gak bikin yg no popular postnya sekalian bos..hihihi
no comments 2 … AWESOME 2
please tel me how blog post are stored in the google server and how web page retrive them to show as post on the page.Please help me in this…..
nah ini baru keren, ane bookmark dl ya ntar klo ada kesempatan ane praktekkan. trims bang abu ;)
i try put it on my website (techwales.com)
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!!…