Bismillah, Alhamdulillah

Skip to Content

Moving Box Slider for Popular Post Blogger

February 15th, 2012

Bismillah, Alhamdulillah
Now I made one more Popular Post widget for blogger Using Moving Slider from CSS Tricks. I made many Blogger widget to show Popular Post widget for blogger in many way. Now I made new Blogger widget using Moving Box Slider for Blogger.

You can see demo from below link


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
  • If you have already jQuery in your Template please delete from my script
  • Done- your popular post now with animation

* {
	margin: 0;
	padding: 0;

body { 
    font: 11px Helvetica, Arial, sans-serif;

#wrapper {
    width: 800px;
    margin: 60px auto;

#intro {
    padding-bottom: 10px;

#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
	border: 10px solid #ccc;

.scroll {
	overflow: hidden;
	width: 800px;
    margin: 0 auto;
    position: relative;

.scrollContainer {
	position: relative;

.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
	height: 318px;

#left-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	bottom: 0;
	background: url( repeat-y;

#right-shadow {
	position: absolute;
	top: 0;
	right: 0;
	width: 12px;
	bottom: 0;
	background: url( repeat-y;

.inside {
	padding: 10px;
	border: 1px solid #999;

.inside img {
	display: block;
	border: 1px solid #666;
	margin: 0 0 10px 0;
	width: 250px;

.inside h2 {
	font-weight: normal;
	color: #111;
	font-size: 16px;
	margin: 0 0 8px 0;

.inside p {
	font-size: 11px;
	color: #ccc;

a {
	color: #999;
	text-decoration: none;
	border-bottom: 1px dotted #ccc;

a:hover {
	border-bottom: 1px solid #999;

.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;

.scrollButtons.left {
    left: -45px;

.scrollButtons.right {
    right: -45px;

.hide {
    display: none;

	<script type="text/javascript" src=""></script>
	<script src="" type="text/javascript" charset="utf-8"></script>

Don’t Copy This Post because this Original from my Blog (Blogger Widget)
Please read Copyright of All post at the Footer.

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!

Leave a response

134 Responses to “Moving Box Slider for Popular Post Blogger”

  1. Fernando says:

    Nice Tips.

    Blogger Template in CO-Template

  2. Pakde Zaki says:

    Oh God, this source have been looking for this . Big Thanks for the sharing, brother..

  3. idblogger says:

    I am glad to visit your blog, and I really like your writing this, it is very interesting to read and helpful as well. I want to learn a lot from you.
    Thank you… :)

  4. terimkasih kang abu farhan… template yang sangat bagus…

  5. What happens fifteen years or more after the fifteen minutes of fame fades.
    I recommend whipping up single use portions, but
    if you make too much, store the product in a recycled sanitized
    glass container with lid and be sure to refrigerate
    quickly. It’s important to bear in mind that bleaching doesn’t always result in the whiteness that
    you expected.

  6. Ramdhan says:

    Nice Posting.. Thanks..

  7. basha says:

    Nice trick .. thanks.. but please tell me .. this trick can work with my template or not ..

  8. do you want to know ferrera weight loss?or weight loss trick ..? then click on mee :)

  9. Mudassir says:

    Really fantastic tut! I’m using it

  10. azure says:

    nice post about famous blogger
    thank you for sharing

  11. Brandi Gates says:

    Awesome thinking about programming
    thanks for sharing

  12. Cricket says:

    Thanks alot buddy ! I relly loving you blog nice sharing but this slider will also benefit us in seo ?

  13. what is gout says:

    Hey very nice site!! Man .. Beautiful .. Wonderful .. I’ll bookmark your site and take
    the feeds additionally? I’m glad to find numerous useful information right
    here in the put up, we’d like work out more techniques on this regard, thank you for sharing.
    . . . . .

  14. Rabbi says:

    A thoroughly grateful reading feel you are having reading this blog. Constantly on cue is what the author is. Writer offers excel recommendations to commenters and in short time. Awesome reads. Everyone who desires to know on this topic should subscribe to this blog. Pick thing is the archive feature serves as a fast recommendation to old and relevant things. Any last gossip is covered in this blog, says a lot about sources in high places. I enjoy the quick references helpful in the blog. The details in the visual air of this blog are to be appreciated. I cannot help but question why such reflections were not said previously.

  15. Haroon Gul says:

    Amazing Post keep posting the great stuff

  16. yOu says:

    I will try this trick .. Good luck and add to my skills in blogging

  17. Nice share brother, Thanks a lot for your information. :D

  18. Khan says:

    great post and thanks for sharing

  19. Ahmad says:

    good post friend

  20. Haroon Gul says:

    thanks you solved my problem.

  21. JOJI JOSE says:

    how can i decrease it’s size???????????

  22. Now I created an added standard Post gadget for blogger victimisation Moving Slider from CSS Tricks. I created several Blogger gadget to point out standard Post gadget for blogger in several manner. currently I created new Blogger gadget victimisation Moving Box Slider for Blogger.

  23. agney says:

    wonderful information bro.
    nice post.thanks

  24. nikita says:

    atikel yang membantu banged
    kapan2 mau di cobain ah
    makasih ya

  25. Techopera says:

    Hello Farhan, this information is really wonderful, i will make sure to add a slider to my blog, thank you.

  26. hmm, so creating a slider is this simple? maybe i might create a theme myself, thanks Farhan.

  27. Wonderful tricks bro, thank you, wow, i can create a slider myself now!!!!.

Leave a Reply

eight − one =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen