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.
100 Responses to “Moving Box Slider for Popular Post Blogger”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
visit me yahh
siiipppp
Hello, great post. Thank you.
thanks alot Farhan for the great post … i always impressed to see your great efforts..
web designer in uk
Wonderful PostMinimal SEO Premium Bloger template DownloadPlz visit this site and click on ads to support ..please..Though i know i shouldn’t be doing this
[...] [...]
apakah Moving Box Slider ini tak berbenturan dengan widget popular post… saya pernah mengalami kejadian ini dimana, moving box di artikle seperti Hot News tidak work karena bertabrakan dengan widget popular post dengan slidernya
Hello, great post. Thank you.
Is there a way not to strech the photos in the post?
Thank you in advance.
apa ini gk beratin blog mas abu?
apa ini gk menambah berat blog mas farhan?
The post is absolutely fantastic! Lots of great information and inspiration both of which we all need! Also like to admire the time and effort you put into your blog and detailed information you offer! I will bookmark your blog
waduh malah jadi rebet banget neh gan
Nice info, very useful information.
if you want to realy eanjoye then you must try my blog i hope you realy enjoyed here because here is best world poetry in English urdu punjabi Hindi And etc so i am thankx full to you if you visit my blog and do coment and vote in my blog
http://bestpakpoetry.blogspot.com/
[...] 300 en France dont 4 [...]
By forgoing the private option you can cut down costs and still be covered.
very nice tips. keep on sharing!
good thinking nice post usefull blog for every webmaster
SEO I like this post! Very Nice
masallah, veri nice
Amazing ؛ Your blog is very important
From all of that think in my new theme I used custom field for image and some of static think I write down in html tag. This method can reduce server side calculations.
thanksssssssss
http://mymor-b.blogspot.com/
Thats a cool slider!!! Many thanks for the code!!!
[...] At his high school near Minneapolis,ralph lauren pas cher,abercrombie and fitch,ralph lauren, Minn.-area high school,polo ralph lauren,abercrombie and fitch,polo homme,abercrombie pas cher Library Of Congress Releases, Ming Shiue was on the varsity football and wrestling teams and was voted “Most likely to succeed.” But behind closed doors,ralph lauren pas cher,abercrombie and fitch france,abercrombie france University of California, Los A,ralph lauren,First,abercrombie, the fine print, he was a loner who was isolated from everyone,polo ralph lauren,abercrombie and fitch france,ralph lauren italia, including his family. (Alexander Ramsey High School Yearbook 1965)First,abercrombie, the fine print [...]
[...] Tags: ralph lauren There was excitable Arizona junior Brigetta Barrett,borse louis vuitton,free festivities,polo ralph lauren,polo femme, clearing 6-7 to break the collegiate record for second place and a spot on the Olympic team.The country’s best female athlete is 31-year-old Hyleas Fountain of Daytona Beach,abercrombie,polo|polo|ralph lauren pas cher,ralph lauren pas cher,Litehouse Bleu Cheese Dressing – $1.98,polo ralph lauren pas cher,polo ralph lauren pas cher,louis vuitton sito ufficiale|louis vuitton borse|l,polo ralph lauren, Fla.,borse louis vuitton|ralph lauren pas cher|ralph lauren pas c,polo ralph lauren pas cher,ralph lauren pas cher,louis vuitton borse,So bask a little extra in the humiliation of my iPod Top 25, as she won the seven-event heptathlon with 6,ralph lauren italia,chanel borse,polo ralph lauren,419 points….free festivities [...]
Nice info gan ..
Hi! Farhan
how can I contact you? I don’t see any contact page.
Regards
Anonymous
[...] Tags: sac chanel, sacs louis vui ” Bogotá Mayor Gustavo Petro tweeted on Wednesday. Londo? — the plan I called my jobs recovery plan to get America working again the president on the other hand has only one thing going and that is constant attacks on me and you know they’re dishonest they’re misdirected and I think the American people recognize that kind of politics is something of the past it — work in Chicago but it’s not gonna work across America. She never released her tax returns somehow this was an issue.,sac chanel,vuitton pas cher The latest international oil prices,sac louis vuitton,vuitton pas cher “Unlike the traditional model of having a structured organization and taking it onto the space,sac Vuitton louis vuitton sito ufficale These experiments c,Louis Vuitton sac,louis vuitton borse Youth Paradise Lost Episode 5,louis vuitton sito ufficale sac louis vuitton S imports of charcoa,sacs Louis Vuitton,sacs Louis Vuitton,louis vuitton outlet Louis Vuitton pas cher He would have been,louis vuitton sito ufficale,vuitton pas cher A film of the youth of Paradise L,chanel magasin,When Rios started Being Latino he was working in advertising sales. The president chief of staff — to try to deny it was attacks just this morning as the Supreme Court it that the chief justice and made it clear its attacks. If passed would not a vote to spare every single democratic incumbent on the ballot this November was to be deciding vote to pass this bill. I thought what — way I can have a lot of fun with that not Chad Ochocinco came on and now we do with them we had a really good times good. Part I guess that’s fair I don’t it’s very fair group I want to answer — cool come and go. Arnold Schwarzenegger confirmed the good news during comic con telling the audience that producers are searching for writer for the film which reunited with Danny DeVito and director Ivan Reitman. Do you think he’d give up that reflector ball that you get from winning — the stars in those twenty million that watch you week in and week out. From nineteen in an ex — serious 126 in just about everywhere else. It was vetoed President Bill Clinton but helped form a bipartisan balanced budget two years later. S.vuitton pas cher The latest international oil prices [...]
Cool and elegant..
smart …!
thanks you..!
ok so i wanna host that js files on my own blogger template and also images so please tell me how to change image links with my picasa links or i’ll give links please do it for me :(
Nice Post… Thanks
30 + New Stunning Blogging Tips
really nice widget. thanks. its making my blog more advance and attractive.
intersting post…keep it up…
recent post:Customise About me
Regards,
ProBloggersTricks
good tips.. thank’s for share,.. :)
Nice tip, thanks for share :)
Really great and nice template. Your website has a great collection of nice and beautiful Blogger Templates
thanks for your tips..i will try for my new blog..
:)
very useful information.thanks
keren banget blog ente, ane kebetulan pengen bikin toko online di blogger, he..he..he..
salam kenal, dan numpang copas ya script ente, gak ane ilangin dah footernya :-D
Australian Finance and Lending company Brokers ink finance. We offer the best interest rates in Australia. Honest service and quick approvals. If you’re in the market for finance or require a loan to purchase a vehicle, boat, bike, truck, yacht, jet ski or farm and equipment lending please give our friendly staff a call. 7am – 7pm – 7 days a week
Car finance loan
wah lengkap banget tutorialnya :)
Awesome website…
[...]the time to read or visit the content or sites we have linked to below the[...]……
wah lagu lagi tips maknyus..
tengkyu gan
Tutorial-Tutorialnya keren-keren banget…
Lagi belajar design blogger neh gan…
Boleh request postingan gak??
Klo bisa bikin tutorial Jquery drag and drop widget content khusus buat blogger donk…
Bisa gak??
ijin share gan, sekalian dipraktekin juga, tengs..
Try to comment
thank you
wiih..mantep banget gan tutorialnya ijin share ya gan
last Two line of my script
gak ngerti bahasa inggris mas.. hehehehe