Beranda » Trik » Widget » Widget popular post readmore

Widget popular post readmore

Popular posts pasti selalu terpasang dalam blog, sebab dengan widget popular post inilah kita bisa menunjukkan pada pengujung untuk membaca artikel yang banyak di baca. 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, sebenarnya ini tidak begitu penting karena pengunjung tanpa tombol readmore di popular post ini langsung bisa membuka artikel lewat mengeklik judulnya saja namun ini di buat hanya agar tampilan popular post yang ada di blog anda berbeda.

Demo

untuk sobat yang ingin menerapkan ikuti Tata cara pemasangannya seperti ini.

Masuklah ke halaman editor HTML template Anda, letakkan kode CSS dibawah ini di atas kode kode ]]></b:skin> atau </style>

.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 ini di widget Popular Post pada template Anda dan kodenya seperti ini.

<div class='item-snippet'><data:post.snippet/></div>

Setelah itu letakkan kode di bawah ini dibawahnya atau setelahnya.

<a class='more-link' expr:href='data:post.href'>Baca Selengkapnya</a>

Langkah terakhir simpan template anda dan lihat hasilnya.

Silahkan ubah css dan "Baca Selengkapnya" dengan tampilan dan teks yang anda inginkan.

Tombol ini akan menghilang jika pada widget popular post di blog sobat hanya menerapkan untuk menampilkan judul saja.

Demikian saja semoga bermanfaat...

Widget popular post readmore

Belum ada tanggapan untuk "Widget popular post readmore"

Post a Comment