Beberapa kali saya menerima pertanyaan lewat email tentang bagaimana caranya membuat link "Read More" seperti yang pernah saya lakukan di blog lama. Jika "Read More" ini diklik maka blog akan menampilkan seluruh isi post tetapi dan blog tidak reload
Biasanya saya hanya menjawab dengan, silakan kunjungi blognya Ramani Dan diakhir email saya tambahkan
PS. Silakan hubungi Ramani langsung jika ada yang kurang jelas.
Setelah beberapa waktu, saya sempatkan melihat blog sipenanya, ternyata tidak ada perubahan. Apakah ini karena kendala bahasa ? Akhirnya setelah menimbang-nimbang maka saya putuskan untuk menerjemahkan hack-nya Ramani tersebut ke bahasa Indonesia dengan harapan akan lebih mudah untuk dimengerti.
Berikut step-step-nya.
1. Di dashboard blog kamu pilih blog yang akan dihack tadi, klik "Layout", klik "Template", klik "Edit HTML"
2. Klik "Download Full Template" dan simpan template kamu untuk backup/jaga-jaga.
3. Kemudian beri tanda centang/klik di "Expand Widget Templates"
4. Tekan Ctrl + F kemudian ketikkan </head>
5. letakkan kode berikut :
<script type='text/javascript' src=
'http://www.anniyalogam.com/widgets/hackosphere.js' />
diatas kode </head> tadi
6. tekan kembali Ctrl + F dan ketikkan <b:includable id='post'
7. Jika cek dulu apakah "Expand Widget Templates" sudah di tercentang. Jika belum kembali ke langkah nomor 3.
8. Perhatikan tulisan yang berwarna merah dibawah ini, select dan kopi pastekan tulisan yang berwarna merah ke template kamu tadi. Cek satu persatu dan perhatikan baik-baik apakah kamu sudah melakukan kopi paste dengan benar.
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'><p><data:post.body/></p>
<b:else/> <style>#fullpost {display:none;}</style> <p><data:post.body/></p> <span id='showlink'> <p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p> </span> <span id='hidelink' style='display:none'> <p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p> </span> <script type='text/javascript'> checkFull("post-" + "<data:post.id/>"); </script> </b:if><div style='clear: both;'/> <!-- clear for photos floats -->
</div>
9. Setelah yakin sudah melakukan kopi paste dengan benar, klik "Save template"
10. Apabila segala sesuatunya berjalan dengan baik, maka kamu akan melihat tulisan berikut:
11. Done. Disetiap postingan/artikel yang ingin buat summary-nya kamu hanya perlu menaroh kode berikut :
Ketikkan summary dari artikel/post kamu disini
<span id="fullpost">
Artikel versi panjang lebarnya disini
</span>
12. Contoh blognya bisa dilihat di
MaIDeNCobaBlogs.blogspot.com
Kamu memasang script Yahoo Emoticon di blogger, menulisi post-post kamu lewat template editor-nya blogger dan merasakan betapa kamu harus hafal yahoo emoticon sign atau kamu terpaksa bolak-balik tengok page Yahoo Smiley terus.
Dengan metode diatas, maka script yang dipasang pada tutorial ini: Yahoo Emoticon menjadi tidak berguna/perlu lagi karena dengan metode baru diatas, program/script lewat grease monkey akan langsung meng'attach image dari yahoo messenger ke post editormu.
No comments yet