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



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


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

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

  1. wooc says:

    Hello, great post. Thank you.

  2. Shahzaib Hussain says:

    thanks alot Farhan for the great post … i always impressed to see your great efforts..
    web designer in uk

  3. Anz Joy says:

    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

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

  5. Mario says:

    Hello, great post. Thank you.
    Is there a way not to strech the photos in the post?
    Thank you in advance.

  6. Samehadaku says:

    apa ini gk beratin blog mas abu?

  7. Samehadaku says:

    apa ini gk menambah berat blog mas farhan?

  8. AKHIL says:

    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

  9. perez says:

    waduh malah jadi rebet banget neh gan

  10. Nice info, very useful information.

  11. Rana Sgeel says:

    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/

  12. healthcare says:

    By forgoing the private option you can cut down costs and still be covered.

  13. very nice tips. keep on sharing!

  14. Abdul Rahman says:

    good thinking nice post usefull blog for every webmaster

  15. Ambar says:

    SEO I like this post! Very Nice

  16. shahi says:

    masallah, veri nice

  17. Amazing ؛ Your blog is very important

  18. kaspersky says:

    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.

  19. Thats a cool slider!!! Many thanks for the code!!!

  20. [...] 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 [...]

  21. [...] 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 [...]

  22. upiL Gue says:

    Nice info gan ..

  23. Anonymous says:

    Hi! Farhan
    how can I contact you? I don’t see any contact page.
    Regards
    Anonymous

  24. [...] 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 [...]

  25. kibagus says:

    smart …!
    thanks you..!

  26. Hardeep says:

    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 :(

  27. really nice widget. thanks. its making my blog more advance and attractive.

  28. intersting post…keep it up…
    recent post:Customise About me
    Regards,
    ProBloggersTricks

  29. Imad says:

    good tips.. thank’s for share,.. :)

  30. Nice tip, thanks for share :)

  31. Really great and nice template. Your website has a great collection of nice and beautiful Blogger Templates

  32. Arickszone says:

    thanks for your tips..i will try for my new blog..
    :)

  33. nuwan says:

    very useful information.thanks

  34. nurman says:

    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

  35. rabiul says:

    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

  36. ino putro says:

    wah lengkap banget tutorialnya :)

  37. dj mel says:

    Awesome website…

    [...]the time to read or visit the content or sites we have linked to below the[...]……

  38. wah lagu lagi tips maknyus..
    tengkyu gan

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

  40. ijin share gan, sekalian dipraktekin juga, tengs..

  41. AA says:

    Try to comment

  42. binkbenk says:

    wiih..mantep banget gan tutorialnya ijin share ya gan

  43. abu farhan says:

    last Two line of my script

  44. binkbenk says:

    gak ngerti bahasa inggris mas.. hehehehe

Leave a Reply


three + five =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen