Bismillah, Alhamdulillah

Skip to Content

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



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


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

17 Responses to “Horizontal Accordion for Popular Post in Blogger”

  1. developer says:

    your solution is a crap, it looks horrible.

  2. sitiasma says:

    terima kasih admin sebab sudi berkongsi ilmu it ni..hope admin dmurahkan rezeki..insyallah…amin~~

  3. It looks really ugly on my blog

  4. free stuff says:

    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!!

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

  6. mAS itu scriptnya kira2 bikin load page jd tambah berat kagak ya??

  7. Assalammualaikum.
    Terima kasih banget nih mas, tuto ini sangat membantu, terimakasih sekali.

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

  9. Pinoybuzzter says:

    Assalamualaikum!

    Thanks for a great widget. It works great on my blog!

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

  11. Andre says:

    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?

  12. Assalammualaikum.
    Thanks a lot Mr. Abu, I tried to my blog n it’s work!!!

  13. bang jasmin says:

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

Leave a Reply


five − one =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen