Horisontal Accordion Popular post

Posted on | January 8, 2013 | No Comments

Membuat dan menambahkan widget popular post slider

Banyaknya widget popular post yang telah saya bagikan merupakan opini saya untuk berbagi kepada teman-teman blogger.Hal ini saya lakukan agar mereka ada pilihan dengan model dan jenis widget popular post yang ingin di tambahkan di blog.
Beberapa fitur yang terkandung dalam widget popular post adalah:

• Mudah dalam pengaturan.
• SEO freindly (javascript tidak termasuk)
• Blog kelihatan lebih bagus.

Widget ini menggunakan jquery Kwikcs yang di namakan Horizontal Accordion.Jquery plugin tersebut sangat mudah di pasang di blogger,jadi anda bisa menambahkan widget horisontal accordion popular post di blog anda.




Intruksi:

1. Pergi ke blogger.com.
2. Dari Dashboard,arahkan ke Layout-Page elements.
3. Klik "Add Gadget"pilih Popular Post(Abaikan langkah ini,jika anda sudah pernah menambahkan widget tersebut)
4. Setelah anda menambahkan gadget popular post,Silahkan menuju ke Layout-page element>Add Gadget pilih HTML/Javascript.
5. Copy HTML Script dan tambahkan pada gadget HTML/javascript.
6. Klik "Save"

 HTML Code
<style type="text/css"> .cube { width: 200px; height: 200px;} a img { border: none; } #linksCube img { width: 100%; height: 100%; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"><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>

Comments