Blogger widget : Popular Post with Carousel Slider
January 23rd, 2012
Bismillah, Alhamdulillah
After long time I’m not post for new script. Now I post about Popular Post Widget for blogger, because this widget is the best from Blogger (in my opinion). Some Features of Popular Post for blogger are :
- SEO friendly (not javascript)
- Easy to custumized
- Can make for Feature Post
- Dynamic result based on real statistic
Because of those features I made many widget to show popular post in many way. Now I made new widget using Carousel slider it can show image and snipped in horizontal.
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>
#slider ol,#slider ul,#slider li
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
.popular-posts img {
margin: 0 !important;
padding:0 !important;
width:150px;
height:120px;
}
ol, ul {
list-style: none;
}
.wrapper {
width: 720px;
margin: 0 auto;
position:relative;
}
.clear {
clear: both;
}
.display-none {
display:none;
}
#slider {
position: relative;
top: -2px;
z-index: 1;
}
#slider .prev {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
top: 150px;
left: -51px;
}
#slider .next {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
top: 150px;
right: -51px;
}
#slider #slider-wrapper {
width: 720px;
height: 300px;
padding-top: 40px;
overflow: hidden;
z-index: 999;
position: relative;
}
#slider #slider-inner {
width:9780px;
height:300px;
position:absolute;
}
#slider .article {
width: 150px;
height: 300px;
float: left;
margin-right: 30px;
}
#slider .article img {
margin-bottom: 25px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}
#slider .article h2 {
margin-bottom: 15px;
line-height: 18px;
}
#slider .article h2 a {
font-size: 18px;
color: #404040;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
line-height: 23px;
}
#slider .article .meta-comments a {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}
#slider .article .item-snippet {
margin-left: 15px;
}
#slider .widget-item-control { display: none}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>
Don’t Copy This Post because this Original from my Blog (www.abu-farhan.com)
Please read Copyright of All post at the Footer.
17 Responses to “Blogger widget : Popular Post with Carousel Slider”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
hi abu farhan.
how can i use random posts with carousel slider ?
i will wait your answer.
thanks.
Aw, this was an incredibly nice post. Taking a
few minutes and actual effort to create a good article… but what can I say… I procrastinate a
lot and don’t manage to get nearly anything done.
Good for you! Sounds amazing and have tons of fun!
It’s great widget. Thank you very much. I have a question: how to put this widget under my post – not on the right column on my blog? Could you help me? Thanks.
That carusel widget for popular posts is great, can the background color be changed? Can you do the same with labels instead of popular posts?
Thanks
nah, seperti yang saya ungkapkan dikomentar sebelumnya,,, image tak terdeteksi di carosusel slider… itu karena apa ya sob, penyebabnya
Hello there! I know this is kinda off topic nevertheless I’d figured I’d ask.
Would you be interested in exchanging links or maybe guest writing a blog article or
vice-versa? My blog discusses a lot of the same subjects as yours and I think we
could greatly benefit from each other. If you happen to be interested feel free to shoot me
an email. I look forward to hearing from you! Superb blog by the
way!
I think this is Okay for me… thanks for sharing knowledge… :-) God Bless Guys!
i am Bookmark this,,
thank’s a lot,,
visit me
Punya-magna
thank bro
a great tricks but I do not like, thank you for sharing :)
hi buddy…
Hello there, You might have performed an incredible job. I will undoubtedly digg it and personally advise to my close friends. I’m assured they’ll be benefited from this internet site….
thankyu..informative.. [;)] Great post!.. keep the posts coming & i will keep reading them. thank for help them. Great blog dude! I just linked to this post on my Delicious. Keep it up!
By:http://www.batamia.com
Thanks. I’ll try to use this widget on my blogger blog.
This was so easy! I actually put mine at the bottom. So very easy and nothing is easy in blogging to me!! Thanks, ABU!
I try it at my blog, but it’s too big.. I remove it then.. can I customize the size?
I did, but no picture in the post text only. What should I do?