Berbicara masalah Blog / Web sudah pasti tidak akan terlepas dengan yang namanya Penggalan Artikel yang lazim disebut Read more / Baca selengkapnya atau nama lainnya yang serumpun, dan letaknya ada di kiri maupun dikanan diatas footer blog yang tujuannya untuk memotong / memenggal tampilan pada single post :#
Tahap Pertama :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor - Design/Perancang Template pilih Edit HTML
- Copas kode berikut diatas ]]></b:skin>
.jump-link a{-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;float:right;padding:2px 12px; border:none; background:#236c95; color:#FFF;font-style: normal;border:1px solid #0FF;margin-top:10px;text-decoration:none;}
.more a:hover, .jump-link a:hover{background:#000;color:#FF0;border:1px solid #F00;text-decoration:none; }
- Simpan Template kawan dan lihat hasilnya [seperti image diatas]
- Read more tersebut adalah berupa text,
- Kawan bisa merubah warna-warnanya sesuai keinginan
Tahap kedua :
Sesuai dengan Judul Artikel saya ini, sekarang mari bersama-sama kita Berkreasi pada Read more agar tampil Auto Hidden [akan kelihatan jika mouse kita taruh pada Post Artikel :z dan akan hilang bila mouse kita geser kepinggir] Bagaimana, apa kawan tertarik :O
Caranya :
- Beri tanda centang / cek pada radio disamping Expand Template Widget
- Copas Kode berikut diatas ]]></b:skin>
.post .hidebego {display:none;}.post:hover .hidebego {display:inline;float:right;}
- Selanjutnya scroll ke bawah dan Copas Kode berikut dibawah <data:post.body/> atau diatas <b:if cond='data:post.hasJumpLink'>
<div class='hidebego'>
- Karena struktur template berbeda-beda, dan untuk menghindari kesalahan, simplenya copas Kode berikut tepat diatas <b:if cond='data:post.hasJumpLink'> maka selengkapnya akan menjadi seperti berikut :
<div class='hidebego'><b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a></div></b:if></div>
- Simpan Template kawan dan selesai sudah pekerjaan kita untuk ber-Kreasi pada Read more
ampuh gak nih sob? saya udah sering kecewa sama trik seperti ini.
BalasHapusampuh gak nih sob? saya udah sering kecewa sama trik seperti ini.
@Said Arsyad saya kurang paham maksudnya :#
BalasHapusfollow back ya gan ;)
BalasHapus@ku2nt PASTI KAWAN :z
BalasHapustips nya bagus mas ... sekalian ijin numpang backlink yak .
BalasHapusnb:mudah2an dofollow
trims
@Health Partners trims kembali, dofollow pasti :O
BalasHapusmaksudnya trik ini bener2 berhasil gak ya.
BalasHapusmaksudnya trik ini bener2 berhasil gak ya.
@Said Arsyad semua artikel di blog ini sudah saya uji coba dan berhasil :z
BalasHapuswih makin mantep nih,saya cobayah kang nanti kalau ada salah saya balik lagi soalnya beda di template saya :y
BalasHapus@Raindra silahkan mas :x
BalasHapusmantap gan dicoba dan berhasil :@
BalasHapusPada templete blog saya tutorial ini tidak bisa berfungsi kawan
BalasHapus@irwan efendi setelah saya cek blog kawan, bisa langsung pakai ke tahap kedua dan cari <div class="readmore-wrap">
BalasHapus