Memasang Popular Post Multi Color di Blog

Posted on | January 7, 2013 | No Comments

Multi Colored Popular Post Widget

Popular post adalah posting yang sering dibaca oleh pengunjung 7 hari terakhir,satu bulan dan setiap waktu.Popular post dapat di tampilkan dengan tiga metode yaitu,menampilkan judul posting saja,Judul posting dan gambar dan menampilkan judul posting dengan post snippet.





Bagaimana caranya menambahkan widget multi colored popular post di blog?
Untuk memasang widget ini anda harus menambahkan variabel baru pada kode CCS di template blog anda.Berikut ini petunjuk untuk memasang widget di blogger:

• Log in blogger.com.
• Dari Dashboard pilih Layout>Add gadget,pilih Popular Post (Jika anda pernah menambahkannya,abaikan)
• Setelah anda menambahkan widget popular post dari blogger,BukaTemplate dan download template untuk backup template anda.
• Klik Edit HTML,beri tanda tick pada box Expand widget template.
• Tekan CTRL + F,cari dan temukan
  /* Variable definitions
  ====================

• Tambahkan Kode Variabel di bawah kode
  /* Variable definitions
  ====================

Kode Variabel
<group description="PopularPosts Backgrounds" selector="#PopularPosts1"> <variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/> <variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/> <variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/> <variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/> <variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/> </Group>

• Cari kode ]]></b:skin>
• Tambahkan Kode CCS diatas ]]></b:skin>

Kode CCS
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px} #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none} </script> <script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.js"></script>

• Jika anda sudah menambahkan gadget Popular Post,cari dan temukan kode
  <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
• Hapus kode tersebut sampai </b:widget>

----Seperti inilah kode yang harus anda hapus----

Popular Post Kode

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2> </b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'>  <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div>  </b:if> <b:else/>  <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails -->  <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>  </a>  </div> </b:if> <div class='item-title'> <a expr:href='data:post.href'><data:post.title/> </a> </div>  </div> <div style='clear: both;'/> <b:else/>  <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> div class='item-title'> <a expr:href='data:post.href'><data:post.title/> </a> </div>  <div class='item-snippet'><data:post.snippet/> </div> </div> <div style='clear: both;'/>  </b:if> </b:if> </li> </b:loop>  </ul> <b:include name='quickedit'/>  </div> </b:includable> </b:widget>

• Ganti dengan kode di bawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'> <h2> <data:title/></h2> </b:if> <div class='widget-content popular-posts'> <ul><b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <b:else/> <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <b:if cond='data:post.thumbnail'> <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBthIOm7DZU35Y7n0rrjcAl4piqOd9nYXGEzraqHgxoLqdIXwqgE2vBznrvr1cUjCsn7d-_7vkmWZJHL7tQU4u6XJP3Pm3k33R6Y1kRcochO07ZdcPtnttzMLgJV_rK8NsbHSVLMxkM6Y/s1600/default.jpg'/> </b:if> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <div class='clear'/> <b:else/> <b:if cond='data:post.thumbnail'> <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBthIOm7DZU35Y7n0rrjcAl4piqOd9nYXGEzraqHgxoLqdIXwqgE2vBznrvr1cUjCsn7d-_7vkmWZJHL7tQU4u6XJP3Pm3k33R6Y1kRcochO07ZdcPtnttzMLgJV_rK8NsbHSVLMxkM6Y/s1600/default.jpg'/> </b:if> <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a> <div class='clear'/> </b:if> </b:if> </li> </b:loop> </ul> </div> </b:includable> </b:widget>

• Agar widget ini bekerja dengan benar,tampilkan hanya 5 posting di widget ini.

• Jika anda ingin mengganti background widget popular post,anda dapat menuju ke Template>Costumize disitu anda mengatur warna yang anda inginkan.

Terima kasih telah membaca "Memasang Popular Post  Multi Color di Blog".Silahkan gunakan widget tersebut atau bagikan.Jika anda mengalami kesulitan silahkan tinggalkan komentar atau kontak kami.

Comments