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

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

  1. Obat Penggugur Kandungan Usia 1 Bulan adalah obat penggugur janin alami untuk obat melunturkan kandungan anda di usia muda. cara menggugurkan kandungan dari usia 1 2 3 4 MINGGU ini yang paling aman dan ampuh sangat mudah untuk di tuntaskan. adalah toko penjualan secara online terpercaya yang membantu Anda untuk ” Cara Menggugurkan Kandungan usia 1 bulan dengan OBAT ABORSI CYTOTEC atau segala macam produk dari Misoprostol Pfizer USA Asli” banyaknya produk misoprostol untuk menggugurkan kandungan. namun untuk di usia muda ini lebih baik menggunakan cytotec asli pfizer seperti gambar di bawah ini.Sebelum anda aborsi kandungan anda terlebih dahulu hitung usia janin dalam kandungan anda, berapa usia kandungan anda dan kapan anda mengalami telat menstruasinya. jika sudah anda lakukan silahkan untuk membeli obat aborsi usia 1 bulan di ( obat aborsi yang kami jual seperti gambar yang tertera dalam artikel web ini. jika anda kurang yakin atau tidak berkenan membeli obat aborsi dari kami silahkan untuk cari di tempat lain. namun kami peringatkan ”HATI HATI TERHADAP PENJUAL OBAT ABORSI DI TOKO ONLINE ” Banyak dari penjual tidak mengirim cytotec obat penggugur yang asli karena obat penggugur cytotec pfizer sulit didapatkan karena bersifat tidak dijual belikan ditempat umum.

  2. tnks for information.. good job

  3. Gmail says:

    Really useful post bro…thanks

  4. cara says:

    terimakasih atas trik dan tipsnya mas. ini bisa menjadi suatu oilmu todidak bagi saya. sering sering share ilmu lagi ya mas

  5. Fernando says:

    Nice Tips.

    Blogger Template in CO-Template

  6. Pakde Zaki says:

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

  7. 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… :)

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

  9. 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.

  10. Ramdhan says:

    Nice Posting.. Thanks..

  11. basha says:

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

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

  13. Mudassir says:

    Really fantastic tut! I’m using it

  14. azure says:

    nice post about famous blogger
    thank you for sharing

  15. Brandi Gates says:

    Awesome thinking about programming
    thanks for sharing

  16. Cricket says:

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

  17. 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.
    . . . . .

  18. 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.

  19. Haroon Gul says:

    Amazing Post keep posting the great stuff

  20. yOu says:

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

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

  22. Khan says:

    great post and thanks for sharing

  23. Ahmad says:

    good post friend

  24. Haroon Gul says:

    thanks you solved my problem.

  25. JOJI JOSE says:

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

  26. 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.

  27. agney says:

    wonderful information bro.
    nice post.thanks

  28. nikita says:

    atikel yang membantu banged
    kapan2 mau di cobain ah
    makasih ya

  29. Techopera says:

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

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

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

Leave a Reply

− eight = zero

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen