Membuat Popular Post Dengan Bentuk Bulat di blog| Pada artikel kali ini, akan saya bagikan sebuah widget yang berbentuk Bulat di widget popular post, artikel ini saya bagikan karena pada artikel sebelumnya Yang membahas popular post.
Ada salah satu komentar yang ingin mengganti kotak dengan bentuk bulat pada gambar artikel popular post, Langsung saja kita mencoba membuat artikel seperti tutorial nya di bawah ini
Langkah Pertama : Memasang widget artikel ter populer
- Login ke blogger
- Pergi ke menu ''Tata Letak''
- klik ''Tambah Gagdet''
- Cari Gadget ''Popular posts''
- Pasang settingan nya Dengan gambar, Dan Simpan Gadget nya
Langkah Kedua : Memasukkan Kode Css Ke dalam Template
- Pergi ke menu ''Template''
- Klik ''Edit HTML''
- Cari kode ]]></b:skin> Dengan mengunakan Tombol (CTRL+F) Setelah ketemu taruhlah kode dibawah ini di atas kode di atas
.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;}
.popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;}
#PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}
Langkah Ke Tiga : Edit HTML
- Masih di menu ''Template''
- Cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> Sampai Yg Terakhir </b:widget> di template, Hapus kode tersebut
- Ganti dengan 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"'>
<!-- (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 == "false"'>
<!-- (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>
- Setelah itu Simpan Template
Gimana Tutorial mudah, Di pratekkan bukan ? Kalau sobat masih bingung Cara membuat, langsung saja berkomentar di kolom komentar dibawah ini Untuk Tanya sama Saja, Pasti saya bantu, Terima Kasih...
