Rounded popular post widget

Posted on | January 13, 2013 | 2 Comments

Membuat Rounded Popular Post

Menambahkan widget popular post di blog bermaksud untuk mengetahui postingan mana yang sering di kunjungi atau di baca oleh pengunjung,banyak ragam dan jenis popular post yang telah saya buat,salah satunya adalah rounded popular post.

Rounded popular post

Demo ronded popular post


Intruksi:
  1. Log in blogger.com.
  2. Dari Dashboard>Layout-Page elements.
  3. Klik "Add Gadget" Pilih "Popular Post" (Jika anda pernah menambah gadget ini,silahkan abaikan langkah ini).
  4. Klik "Template" download template untuk back up template anda.Kemudian klik "Edit HTML"
  5. Beri tanda tick pada box expand widget.
  6. Tekan CTRL + F dan temukan ]]></b:skin> di tempplate anda.
  7. Copy CCS Script dan tambahkan di atas  ]]></b:skin>
  8. .Klik "Save"
CCS Script


KETERANGAN:
  • {max-width:300px;} : Untuk mengatur lebar widget.
  • width: 77px ;height:77px :Untuk mengatur labar dan tinggi image dalam ronded box
Jika anda sudah menambahkan popular post gadget,silahkan cari kode seperti di bawah ini,hapus dan ganti dengan HTML & Javascript :

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



HTML Javascript


<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'>
<dd>
<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 -->
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='http://i1353.photobucket.com/albums/q664/Yudhik_Laros/rP7noimagegzi.jpg'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Terima kasih Anda telah membaca artikel Rounded popular post widget, Mencuri konten adalah melanggar hak cipta,baca PRIVACY POLICY,Jika anda memiliki saran dan kritik silakan tinggalkan komentar atau Kontak Kami.

Related Post



Comments

2 Responses to “Rounded popular post widget”

  1. mariyanto widodo
    February 3, 2013 at 10:23 AM

    Thank's gan.

  2. Gubug Cinta
    March 3, 2013 at 11:04 AM

    sukses mas, makasih banyak yah :)

Leave a Reply

Search This Blog

Enter your email address:

Delivered by FeedBurner

Popular Post

Recent Post

Protected by Copyscape DMCA Copyright Search