?

Catatan

NULL

Tentang Blog Ini×

Blog ini adalah tempat Saya menuangkan hasil-hasil karya Saya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca. kom4 (seekor nyamuk kecil yang tak pernah berhenti menyebarkan wabah.!)

Tentang Saya

Salam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Sulawesi.

Berikut adalah data diri saya Dharla Ferdana, Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini. jika ada yang mengaku saya,namun mempunyai data yang berbeda dari yang ada dibawah, maka itu bukanlah saya. berikut data diri saya:

Nama : Muh. Dharla Ferdana Samudra
Email : dharlaferdana@yahoo.co.id
Invite My BBM : PIN : 2779647D

iklan
Bagikan kepada teman!

Menambahkan Button Baca Selengkapnya Pada Widget Popular Post

Popular Post Readmore Button
Button readmore pada widget popular post.

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

Baik langsung saja melangkah pada cara penerapan/pemasangannya.

  1. Masuk pada edit HTML template anda
  2. Temukan kode ]]></b:skin>
  3. Setelah ketemu letakkan kode CSS di bawah ini tepat diatas kode ]]></b:skin>

.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 == &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><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

iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com/ dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Iklan Murah

4 Komentar:

 Permalink
webnya keren :emo91:
 Permalink
kalau bikinnya sama kaya blo ini gmn ?
 Permalink
@Balasan hatur nuhun
 Permalink
untuk menampilkannya seperti di DHF kira-kira gimana mas?

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode <i rel="anchor">http://nama_situs.com</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p* Klik untuk melihat kode!

Konversi Kode di Sini (Jendela Munculan) Emoticon

Batal

Pasang IklanPasang IklanPasang IklanPasang Iklan

Terakhir Diperbaharui

Ke atas!