Customisasi Tampilan Read more

mengganti read more dengan gambar
Customisasi Tampilan Read more - Mumpung masih anget tentang tersedianya sistem read more di blogger, maka posting seputar inipun masih dianggap menarik untuk di bahas. Pada kesempatan ini kang Rohman mencoba untuk memberi gambaran bagaimana cara customisasi tulisan " Read more » " atau " Baca Selengkapnya » " agar menjadi sesuatu bentuk lain yang bisa dianggap lebih menarik dari tampilan sebelumnya.

Secara default, tampilan " Read more » " atau " Baca Selengkap » " adalah seperti ini
Besarnya huruf ( font ) akan mengikuti besarnya font yang di setting dalam template anda, begitupun dengan warna link akan sama dengan warna link yang dipakai. Tampilan tersebut sebenarnya bisa anda kreasikan menjadi bentuk lain yang mungkin akan dianggap lebih menarik sehingga akan sedikit menambah keindahan tampilan blog anda.

Sebagai dasar pengetahuan, kode read more blogger adalah seperti ini :


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
Dengan mengetahui kode dasarnya, maka tentu saja kita dapat membuat berbagai kreasi.

* Agar read more tampil di sebelah kanan

Secara default " Read more " akan tampil di sebelah kiri. Jika anda berkeinginan agar read more tampil di sebelah kanan, anda bisa menambahkan kode tambahan seperti ini :


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>




<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>




</div>
</b:if>
Atau jika anda lebih suka memasang pada CSS, bisa seperti ini ;

Simpan ini di atas kode ]]></b:skin>


.readmore { float:right;padding: 10px 0px 5px 0px; }
dan pasang ini di bagian body nya ;


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class='readmore'>




<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>




</div>
</b:if>
* Agar Read more ditampilkan tebal

Agar tampilan "Read more »" atau " Read more » " bisa tampil dengan huruf tebal, anda cukup menambahkan kode <strong>Read more »</strong> atau <b>Read more » </b>. Contoh :


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<strong><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </strong>
</div>
</b:if>
* Agar Read more tampil plus Judul Posting

Tulisan read more anda bisa tampil bersama dengan tulisan judul posting anda, contoh kodenya bisa seperti ini :


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>




<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/>&#160;&#8594;&#160;
<data:post.title/></a>
</div>
</b:if>
* Agar Read more diganti dengan banner

Apabila anda menganggap tampilan huruf kurang menarik, anda bisa menggantinya dengan dengan tombol atau banner, misal banner seperti ini :


mengganti read more dengan gambar
Format kodenya seperti ini ;


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img src='URLgambarmu' alt='read more'/></a>




</div>
</b:if>
Contoh nyata seperti ini :


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0mWZWnxdiqMiliyHKvmZWBcllwS9DgJL8BjKe48FTFJdWHomOJC90tb-EW_-oN7vjuo5gKhfsyqDvy3l2LiJkWe9ZuqCvAGgm8mzK54iMvgxMRvWIewU-Cmidm5cEFLZB7gtVvM1bVGo/[1].png' alt='read more'/></a>
</div>
</b:if>
Dan anda bisa menciptakan puluhan atau bahkan ratusan kreasi untuk tampilan read more ini agar blog anda tampil menarik.

Masih pusing dimana menempatkan hasil kreasi read more mu? berikut gambaran langkah-langkahnya :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "


mengganti read more dengan gambar
5. Carilah kode yang mirip seperti Ini :


<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
6. Silahkan ganti kode di atas dengan hasil kreasimu seperti yang di contohkan kang rohman tadi di atas.
7. Klik tombol SIMPAN TEMPLATE
8. Selesai.

Selamat berkreasi!

(Sumber = http;//kolom-tutorial.blogspot.com)

22 komentar:

  1. yang pakai banner perlu dicoba tuh!

    BalasHapus
  2. ternyata banyak juga macamnya.

    BalasHapus
  3. keren tutorialnya lengkap Euyyyyyy

    BalasHapus
  4. Mengucapkan SELAMAT HARI RAYA IDUL FITRI 1430H untuk KUMPULAN BLOG TUTORIALS, ISLAM RELIGION AND FREE TEMPLATE - on KUMPULAN BLOG TUTORIALS, ISLAM RELIGION AND FREE TEMPLATE, Tengku Nauf dan Seluruh pengunjung blog ini :)

    BalasHapus
  5. aku kurang suka read moree...soalnya widget2nya waktu aku kasih read more jadi ke bawah semua...aneh gituu.. :h:

    BalasHapus
  6. HATUR TANK U KANG....

    BalasHapus
  7. @made gelgel : Silakan dicoba
    @narti : Yap
    @IHSAN : Iya Coyyyy
    @Bang Del : Selamat hari raya iedul fitri juga. jangan bosan berkunjung ya...
    @-Syifa Aulia : O...gitu ya, tapi kalau postingannya panjang kan dapat merusak penampilan blog (blognya melorot gitu).
    @TULUS JAYA LOGAM : sami-sami...

    BalasHapus
  8. matur suwun kawan infonya, aq kan coba semoga berhasil, berkali2 aq ggl pasang readmore. readmore muncul d akhir postingan, g bisa menggal d tengah postingan, kalau ky gt percumakan d pasang resdmore, cz sama aja

    BalasHapus
  9. Rizky2009 : Sama-sama sobat. Alhamdulillah... Sekarang kita ndak usah susah-susah hack blogger tuk buat read more. karena sekarang blogger sudah support tuk fungsi readmore. I LIKE BLOGGER...!

    BalasHapus
  10. Assalamu 'alaikum warahmatullah, syukran akhi atas infonya, afwan baru bs brknjung lg

    BalasHapus
  11. "pangeran datang. bukan dengan kekuatan tapi dengan senyum" Coment balas Coment Follow Blogku juga ya

    Coment Balik sob"

    Download 3 E-book Gratis : oh kyak yang di KR yah

    BalasHapus
  12. @Cahaya Salaf ---> Wa'alaykumus salam wa rahmetullah wa barokatuh. ga' pa2 akhi, jangan bosan berkunjung ya...hehehe

    @Trik-tips Blog ---> "pangeran datang dengan senyum. sunyuman yg indah lagi berpahala" ^_^

    Okey ntar isya Allah quw comment balik.

    Yap...artikel diatas quw copas dari blognya blog master (KR)

    BalasHapus
  13. Bos kok gak pake berhasil sih....:g:

    BalasHapus
  14. as.bang nauval minta izin copy tutorialnya yah!!!! :i:

    BalasHapus
  15. mas ijin copas artikel sama gambar readmore nya... forantum inspirasiku !!!!! top bgt...

    BalasHapus
  16. gmn ya,, supaya text read more ini,,,text nya bisa rata kanan dan kiri>> biar kelihatan rapi gitu,,,,

    ada yang tahu

    BalasHapus
  17. caranya rumit banget sihhh...
    tapi gak apa2 pak, karna aku cinta blog inihttp://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emothttp://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gificon-013.gif

    BalasHapus
  18. alhamdulillah web antum sangat membantu saya dalam mempercantik blog saya.tp sya mencari ttg membuat sidebar di kiri dan kanan kok ga ada ya artikelnya slnya dari yang saya dapat itu tidak berhasil.kl sudah ada artikelnya mohon kiranya mau berkunjung dan memberi tau kalo sudah ada postingan ttg sidebar di kanan dan kiri

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.