Horizontal Accordion for Popular Post in Blogger
September 16th, 2011
Popular Post for Blogger is the Best widget 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 Jquery Kwikcs it can call Horizontal Acoordion. This jquery Plugin is easy to use and Implement it to popular post 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
- Done- your popular post now with animation
<style>
.popular-posts {
margin: 0px 0 30px 0;
padding: 0 0 0px 0;
position: relative;
width: 900px;
height: 363px;
overflow: hidden;
}
.popular-posts {
/* recommended styles for kwicks ul container */
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.popular-posts li{
/* these are required, but the values are up to you (must be pixel) */
width: 185px;
height: 363px;
/*do not change these */
display: block;
overflow: hidden;
padding: 0px; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.fadeout {
display: block;
position: absolute;
right: 0px;
width: 300px;
height: 365px;
z-index: 4;
background: url(overlay.png) repeat-y scroll top right;
}
.popular-posts li {
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-right: -4px; /*Set to same as spacing option. */
float: left;
}
.popular-posts .item-title {
background: #182424 !important;
color: #fff;
opacity: 0.77;
filter:alpha(opacity=77);
position: absolute;
padding: 10px;
top: 60px;
}
.popular-posts .item-title a:visited{
color: #fff;
font-size:16px;
text-transform:uppercase;
}
.popular-posts .item-snippet{
background: #182424;
color: #fff;
opacity: 0.77;
filter:alpha(opacity=77);
position: absolute;
padding: 10px;
top: 215px;
height:127px;
}
.popular-posts img {
margin: 0 !important;
padding:0 !important;
width:600px;
height:363px;
}
.popular-posts li a {
margin: 0 !important;
padding:0 !important;
background-color:#182424 !important;
}
.popular-posts .item-title a {
opacity: 0.77;
filter:alpha(opacity=77);
}
</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-template.googlecode.com/svn/trunk/jquerykwick.js"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
$('.popular-posts ul').kwicks({
max : 600,
min : 300,
spacing : -4,
duration: 200
});
});
/*]]>*/
</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.
16 Responses to “Horizontal Accordion for Popular Post in Blogger”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
your solution is a crap, it looks horrible.
terima kasih admin sebab sudi berkongsi ilmu it ni..hope admin dmurahkan rezeki..insyallah…amin~~
It looks really ugly on my blog
Hi, i believe that i saw you visited my site so i got here to return the want?.I’m attempting to in finding things to enhance my website!I assume its adequate to use a few of your ideas!!
[...] Previously I post about Horizontal Accordion for Blogger. Accordion effect is very good because we can hide some posts or other think and show again if we [...]
mAS itu scriptnya kira2 bikin load page jd tambah berat kagak ya??
I Like It. Nice info
Assalammualaikum.
Terima kasih banget nih mas, tuto ini sangat membantu, terimakasih sekali.
Hi, I don’t know why the effect caused to hover the mouse over one of the popular post don’t work. All the slider is static. And the description text is not show as your demo. I only copy and paste the code.
HEre is my blog: http://www.elbauldelprogramador.com/
Thanks
Assalamualaikum!
Thanks for a great widget. It works great on my blog!
[...] 17th, 2011 Previously I post about Horizontal Accordion for Blogger. Accordion effect is very good because we can hide some posts or other think and show again if we [...]
Cool !! thanks a lot.
Mr. Abu, Did you notice the problem with modal windows on Blogger blogs? the problem began two days ago. If you click any image, a modal windows appears in front. Look at one of your test blogs http://demo-abu-farhan-popular-post.blogspot.com and click any image from an article or from the main page and you’ll see the problem I’m talking about. There are many Blogger blogs affected. Do you know something about that?
I check already and all is ok
Assalammualaikum.
Thanks a lot Mr. Abu, I tried to my blog n it’s work!!!
Wa’alaikumsalam
Alhamdulillah
assalamu alaikum, bung farhan aku ngerombak template zinmag, nah sejak ganti template dari minima……sekarang semua postingan yang anda tampilkan bisa berfungsi dengan sempurna, tapi yang yang aneh recentpost/spy kadang nggak mau ngikutin aturan sidebar atau widget content. artinya posisinya selalu rapat ke kanan, padahal aku sudah paksa float left dlsb. tapi tetap bandel,….hehehe makasih….