Bismillah, Alhamdulillah

Skip to Content

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 :

Popular Post for Blogger with Easy Slider

Demo

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


Categories: Popular Post for Blogger

Tags: , , , ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

26 Responses to “Popular Post for Blogger with Easy Slider (Featured Content Slider)”

  1. sonbilly says:

    keren widgetnya gan, ijin mencoba ya…

  2. Hassan says:

    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

  3. film terbaru says:

    nice information,,, happy blogging,,

  4. Thanks for sharing like this beautiful templates …….keep on continue…..

  5. Zack says:

    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.

  6. ary widodo says:

    Izin untuk mencobanya ya mas.

  7. strass says:

    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.

  8. nice information its working good for me….

  9. very very useful i tried this idea’s in my site called http://www.qizvook.com

  10. Jos says:

    Asalamualaikum Abu
    Bagaimana caranya menampilkan lebih dari 1 post, misal 4 post

    Makasih

  11. 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???

  12. Akansh says:

    Your most of the widgets don`t work properly.Hope you saw your demo yourself in mozilla!

  13. Miguel says:

    Thank you guy!
    Click on my name to see my blog!

  14. i have a problem with easy slider. please help

  15. pravin says:

    thanks……………..

  16. Get Educated says:

    saya seperti ini slider.I telah terinstal di blog.Working Abu saya fine.Thanks Farhan

  17. Asalam-o-Alikum Brother this is not working, when I add the first Code it shows on the top of the Blog.

  18. Beben Koben says:

    popular posts semua ;)
    gak bikin yg no popular postnya sekalian bos..hihihi

    no comments 2 … AWESOME 2

  19. nice share information my friend :) thanks

  20. william says:

    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….^^

    • Abu Farhan says:

      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

      • william says:

        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

  21. Hesti says:

    Nice!!…

  22. Abu Farhan says:

    sudah jalan di webnya dah

Leave a Reply


six − two =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen