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.
28 Responses to “Horizontal Accordion for Popular Post in Blogger”
Leave a Reply
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 [...]
Hello Abu, GOOD NEWS FOR YOU!
After much trials and time spent to get your scripts working on my blogger blog, I have finally managed to get your ACCORDION FOR POPULAAR POST explained on this page working.
Please see http://lastingrose.blogspot.com/
I had to put your styles in the style section and your code at the very end of BODY in the html of the page and remove an earlier version of your recent post which was in a widget but not working.
though other versions of jquerry are called before, putting your call to 1.6.1 at the last meant your object was created properly and passed on to your accordion script.
Anyway I am glad it works well .
Hi Brother Abu,
Excusme..
This tuts I review too in “Best Popular Post for Blogger” http://www.dbestlists.com/featured/best-popular-post-for-blogger/.
Thanks so much and very useful for us. :)
[...] tuts from Abu Farhan again. He is programmer, hack and trick for blogger from Indonesia. Popular Post with Horizontal [...]
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 there
Great work. I just wonder whether u can do customization of the blogger template, which I bought previously. Please let me know.
Thanks
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
Also images are shown very pixelated.
Assalamualaikum!
Thanks for a great widget. It works great on my blog!
Assalamualaikum.
Maaf pertanyaan saya keluar dari tema. Beberapa waktu yang lalu saya mendownlod diary template yang widget nya dari Abu Farhan.
Bisakah saya mendapatkan JS untuk menampilkan kolom komentar dan navbar bawaan blogger.
Terimakasi atas bantuan Abu Farhan.
not bad
not working friend
My demo can work maybe you not follow all steps
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….
coba cek css nya menggunakan firebug, blog nya mana ?
trima kasih (http://bangjasmin.blogspot.com/)
I tried changing the size, but it won’t work unless it’s 900px?
you have to change all size in css and Javascript
Saya udah coba, tapi gambar nya jadi ga bagus / kepanjangan.
Gimana ngatur gambar nya biar proporsional kalau ukuran nya kecil (tidak panjang), terus penggalan text nya biar keluar gimana ya…
mohon pencerahan, maklum masih baru belajar…..
gambar itu otomatis ambil dari gambar yg di upload ke blogger jadi tidak bisa memilih2, harus disesuaikan waktu upload gambarnya jangan sampe tidak proposi.
Bisa juga diatus pada Size di javascript atau di CSS nya
[...] 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