Pada postingan kali ini saya akan membagikan cara membuat atau menambahkan button Baca Selengkapnya pada widget Popular Posts atau biasa di...
Pada postingan kali ini saya akan membagikan cara membuat atau menambahkan button Baca Selengkapnya pada widget Popular Posts atau biasa di sebut juga dengan (Entri Populer) atau apapun namanya yang jelas itu yang ada populernya, Postingan ini saya buat karena ada beberapa rekan blogger yang menanyakan tentang bagaimana cara membuat widget popular post seperti pada blog DHF ini di antaranya rekan blogger kita yaitu Fherdy Vernando admin dari blog http://stylentz.blogspot.com/ kalau tidak salah, tapi kalau salah ya mohon di protes ya biar nanti qu perbaiki hehehe..
.widget.PopularPosts .widget-content {
font-size:96%;
line-height:normal;
}
.widget.PopularPosts li {padding:.5em 0 .8em}
.widget.PopularPosts .item-title a {
display:block;
font-weight:bold;
margin:0 0 .2em;
}
.widget.PopularPosts img {
padding:0;
margin:5px 10px 0 0;
border:none;
background-color:#111;
float:left;
}
.widget.PopularPosts a.more-link,.widget.PopularPosts a.more-link:hover,.widget.PopularPosts a.more-link:focus {
display:block;
float:right;
color:#333;
background-color:#999;
line-height:100%;
margin:1em 0 0;
padding:2px 6px 4px 5px;
font-size:10px;
font-style:italic;
text-decoration:none;
text-shadow:none;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.widget.PopularPosts a.more-link:hover,.widget.PopularPosts a.more-link:focus {background-color:white}Pastikan anda sudah memasang widget Popular Post pada blog anda. Jika sudah terpasang, silahkan cari kode script widget Popular Post pada template anda kira-kira kodenya seperti ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
Setelah ketemu hapus kode tersebut beserta kode yang ada dibawanya hingga kode </b:widget> kemudian ganti dengan kode berikut.
<b:widget id='PopularPosts1' locked='false' title='Popular Post' 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><a class='more-link' expr:href='data:post.href'>Baca Selengkapnya</a>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Terakhir simpan template anda dan lihat hasilnya. Semoga artikel tersebut bermanpaat bagi anda semua. Selesai
Sumber : Dharla
