Button Read More pada Widget Popular Post
Popular posts pasti selalu terpasang dalam blog atau website, sebab dengan terpampangnya artikel tekait inilah bisa menarik pengujung untuk membaca artikel yang banyak di baca (most view). Dari itu kita bisa memanfaatkan PopularPost Widget biasa berkode PopularPosts1
dalam template blogger untuk dimodifikasi dengan baik dan menarik. Salah satu yang bisa dilakukan adalah memasang tombol Read More
pada widget Popular Posts seperti yang diterapkan dalam blog Id Tutor Plus ini
Tata cara pemasangannya mungkin seperti ini.
Pertama-tama masuklah ke halaman editor HTML template Anda
lalu temukan kode ]]></b:skin>
dan letakkan kode dibawah ini sebelum kode tersebut
.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}
Setyelah selesai, silahkan cari kode script widget Popular Post pada template Anda dan 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
Sejauh ini belum ada komentar yang masuk. Mulailah memberikan saran, kritikan yang bersifat membangun.