Bermacam Kreasi 'Read More'

Secara default, tampilan " Read more » " atau " Baca Selengkap » " adalah 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 akan akan sedikit menambah keindahan tampilan blog anda.
Adapun kode dasar 'Read more' blogger adalah sebagai berikut :

     <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 kita mengetahui kode dasarnya, maka kita bisa mengkreasikan bentuk-bentuk read more.

*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 kode dibawah ini di atas kode ]]></b:skin>

    .readmore { float:right;padding: 10px 0px 5px 0px; }

dan pasang kode dibawah 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' TAMPIL TEBAL (BOLD)

Agar tampilan "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>

*MENAMPILKAN 'READ MORE' PLUS JUDUL POSTING.

Agar tulisan read more anda bisa tampil bersama dengan tulisan judul posting anda, contoh kodenya 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>

* 'READ MORE' DIGANTI DENGAN BANNER ATAU TOMBOL.

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

                  


Adapun 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>

Adapun untuk banner 'read more' diatas, kodenya sebagai berikut :

<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/AVvXsEgnhYyCv65AUHqTCwmvl0s4fHVSPE_Fxg_qkctV8zgkWL7MaVvYBufNZi75MqFbtUH2l4qludo74cQf2unPJ5yZyhekCg2YFkZi9Pg34ZUlbe39jFy_dAOxV3qwREhEcwtBf2c72oB5UTo/[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 "
5. Carilah kode yang mirip seperti Ini, untuk lebih memudahkan tekan ctrl F :

    <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.
7. Klik tombol SIMPAN TEMPLATE
8. Selesai.

Semoga artikel ini bermanfaat dan Selamat berkreasi!

Artikel Terkait: