Cara Membuat Readmore di Sidebar

Waduhh..bingung mau buat judul apaan, jadi kalau anda tidak mengerti maksud dari judulnya, lihat gambar dibawah ini:

Berawal dari iseng mau membuat fitur read more di sidebar yang mirip dengan website ini » www.filehippo.com. Dan sayapun mencari tutorialnya di Google, tapi sekian lama bolak balik dari web ke web, dari blog ke blog namun hasilnya nihil. Entah kata kunci yang saya ketik tidak baku atau memang belum ada yang share...

Sempat frustasi, soalnya saya gak mengerti banget dengan namanya CSS apalagi JS/JQuery Huft....sangat membingungkan bagi saya.

Dengan bermodalkan nekad dan pengetahuan sedikit tentang CSS, saya coba otak atik sendiri.

Wow..dan akhirnya sukses..betapa bangganya diri ini..hahahaha..

Baiklah, langsung saja saya coba bagikan sedikit ilmu yang saya dapat.

1. Login ke Blogger.

2. Masuk ke Rancangan.

3. Pilih tab HTML. Jangan lupa centang "Expand Template Widget". Oya, backup dulu template anda.

4. cari kode #sidebar-wrapper (gunakan ctrl + f)

5. Masukan kode berikut setelah kode #sidebar-wrapper

.more a,.more a:link,.more a:hover {float:left;text-align:left;font-style: italic;  normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;}

6. Kemudian cari kode widget anda yang ingin dipasangkan fitur read more, disini saya umpakan widget "Download" di blog saya ini.

<b:section class='sidebar2' id='sidebar2' preferred='yes'>
<b:widget id='HTML7' locked='false' title='Download' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>

7. Setelah ketemu anda sisipkan kode dibawah ini tepat diatas "<b:include name='quickedit'/>"

<div class='more'><a href='/search/label/Download/'>Lihat lebih lanjut...</a></div>

Jadinya akan seperti ini:

<b:section class='sidebar2' id='sidebar2' preferred='yes'>
<b:widget id='HTML7' locked='false' title='Download' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
<div class='more'><a href='/search/label/Download/'>Lihat lebih lanjut...</a></div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

9. Terakhir, simpan template anda

Catatan: Warna Biru bisa anda tulis sesuai selera anda.

Dan warna Hijau anda masukan alamat kategori/label pada postingan anda, disini saya menggunakan widget yang menampilkan berdasarkan kategori/label posting. Untuk membuat widget berdasarkan kategori posting bisa anda copy kode berikut:

<script type="text/javascript" src="http://naughtyric.googlecode.com/files/recentpost.js"></script><script type="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script>

<script type="text/javascript" src="http://alika-blog.blogspot.com/feeds/posts/default/-/Download?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Masuk ke Rancangan, klik "Add gadgets"
Pilih  "Add HTML/JavaScript"
Copy paste code di atas tadi.
Jangan lupa ganti  "http://alika-blog.blogspot.com" dengan URL blog anda.
Selamat mencoba....