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
<style>
* {
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(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y;
}
#right-shadow {
position: absolute;
top: 0;
right: 0;
width: 12px;
bottom: 0;
background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) 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;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" 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.
93 Responses to “Moving Box Slider for Popular Post Blogger”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
[...] ainsi que de la [...]
artikelnya mantap bang… nice share ^_^
ah mantap artikelnya ^_^ perlu dicoba
thanks da share kawan :shakehand2
salam cupux-movie
Wow nice artikel mas, blognya keren abis.Sip banget infonya sangat bermanfaat.#Kunjungan baliknya yaa
Good Articel
Brother this is an Excellent Slider Popular Post widget for blospot. I like it. Thanks for Shearing :)
[...] est désormais chargée de mettre en place le projet. [...]
[...] promesse de Marie [...]
[...] promesse de Marie [...]
perlu di coba ini…. terima kasih atas tutorialnya
perlu dicoba nih mas..
[...] 7412 votants [...]
Plis make translator for me, i’m from indonesia
Thanks… It helps us… Visit us back
moving box slider is very help full to website because it attract the peoples
di coba dulu gan, semoga berhasil…
Hi there! I have just tested this out and its awesome!! The design is really sleek. The size is super easy to customise and the image automatically adjusts accordingly!
I just have one question…what part of the code would I need to remove to get rid of the image preview/summery in the corner of the slider? Really appreciate if you can help me with this. Thank you!!
Thanks for sharing :)
feel free to visit my page
info menarik dan bermanfaat, terimakasih..
salam,
thanks this helped me a lot
Thanks for sharing this awesome collection of slider. I am going to integrate “Automatic Image Slider w/ CSS & jQuery” in my blog.
Assalamu Alikum,
Sudah lama saya menunggu posting terbaru di blog ini, tapi belum nampak juga, jangan terlalu lama liburan bang, kami rindu tutorial dari blog ini.
Salam,
Beautiful New Page Navi For Blogger With Scroll
in this your script is not working..please upload again ..
[...] ジョーダン4 （2013年2月25日時点）今だけ特別価 [...]
Misi mas Admin. Saya pengin masang Widget Sitemap/Daftar isi dari sini,,tp javascript yang di Googlecode ada pass-wordnya.
Kira-kira,,bagaimana saya masang-nya ya?? Soalnya, tiap buka halaman yang ada tuh script diminta password. Ntar kalo gak diisi, script gak aktif.??
thank you Abu-farhan this is So helpful, I will try it !!
It’s very nice and will beautify the appearance of our blogs. Thanks for the information.
Thanks, this is exactly what i was looking for
Script saya ambil ya Mas.Mantap ini,Trims Mas.
Thank you so much.
It’s working very well
Thank you so much.
It’s working very well only with few adjustments on the sizes (i put 100%) to make it bigger. realy great job.
maa salama
cris
your blog is very interest yes
جزاك الله كل خير ؛ وننتظر مواضيعك الرائعه
شكراااااااااا
Thanks
I think it is very nice web site for web designer
Thanks a lot for sharing with us.
Didn’t know this before. Thanks a lot for sharing with us.
Nice one ! i Like it …
Don’t forget to visit back ^_^
oke di coba kang mas…pengin jadi blogger yang beneran hehe
Nice Share,…
[...] il aurait suivi les traces de son père dans le football. [...]