Untuk lebih Lanjut,Ikuti Langkah - langkah caranya di bawah ini :
1.Pertama-tama Login Blogger anda.
2.Kedua Klik Template - Edit HTML - Lalu centang Expand widget Template ,Kemudian cari Kode ]]></b:skin> Untuk mempercepat proses pencarian Gunakan CTRL + F Lalu masukkan kode ]]></b:skin> .kalau sudah ketemu kemudian kopas kode di bawah ini tepat di atas kode ]]></b:skin> :
- .PopularPosts .widget-content ul li {
- background:none repeat scroll 0 0 transparent;
- float:left;
- list-style:none outside none;
- border-bottom:none;
- margin:0!important;
- padding:0!important
- }
- .PopularPosts ul {
- border:none;
- padding:0
- }
- .PopularPosts {
- border:0 solid #ccc
- }
- .PopularPosts .item-thumbnail img {
- width:146px;
- height:90px;
- margin:0;
- padding:0
- }
- .PopularPosts .item-content {
- position:relative;
- float:left;
- margin:0
- }
- .PopularPosts .item-title a {
- font-size:11px;
- color:#fff;
- display:block;
- float:left;
- width:136px;
- padding:0 5px
- }
- .PopularPosts .item-title:hover {
- background:#111
- }
- .PopularPosts .item-thumbnail {
- border:1px solid #666;
- overflow:hidden;
- margin:3px 5px 7px 6px
- }
- .PopularPosts .item-title {
- background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh5qPid-1zHgSPG6aIROH3TFMv0FKvDUSZGpSncRkN_h47JAVUAzrLhLr0U4jhHEitYyjkni7pTyeaBQ0P_z9O0Elfwvyj11UGZL3mQLsUBdKJQaU_gfuiAETqNC4_rCky29KvacHW03g/s1600/transparant.png);
- position:absolute;
- bottom:8px;
- right:6px
- }
Keterangan :
"Ganti Nomor Dari Kode width:136px; Ini dimaksudkan untuk menyesuaikan dengan Tata Letak Sobat.
3.Langkah Ketiga Masuk ke Tata Letak - Tambah Gadget - Pilih Populer Post ,Kemudian Setting/Atur Populer Post anda sesuai ScreenShot Atau Gambar di bawah ini :
ScreenShot Setting Populer Post |
- <b:widget id='PopularPosts' 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>
Kalau sudah Ketemu Ganti Kode di atas Dengan Kode di bawah Ini :
- <b:widget id='PopularPosts' locked='false' title='Most Product View' 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-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>
- <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>
5.Langkah Terakhir Simpan Template.
Jika dari Langkah -Langkah di atas anda jalankan dengan Tepat maka Hasil dari Cara memodif widget Populer Post di Blog Akan seperti Terpopuler Blog Facewoman.Itulah cara memodif Populer Post memang tutornya cukup panjang Tapi dengan ketelitian itu sangatlah mudah dan menyenangkan.
No Responses to "Cara Memodif Widget Populer Post Di Blog"