Mengedit Tampilan Read More atau Baca Selengkapnya

Secara default, tampilan Read more » atau Baca Selengkap » dilihat dari ukuran hurufnya akan mengikuti ukuran font yang telah tersetting dalam template. Begitu pula warna link. Tampilan itu sebenarnya dapat dirubah menjadi bentuk lain agar supaya Rad More atau Baca Selengkapnya lebih menarik dilihat.

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 Read More dapat dimodifikasi. Contoh-contohnya sebagai berikut:

I. 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 lebih suka memasang pada CSS, simpan kode berikut ini di atas kode: ]]></b:skin>

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

kemudian pasang kode berikut 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>

II. Read More tampil tebal

Agar tampilan Read more » atau Read more » tampil dengan huruf tebal, 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>

III. Read more tampil plus Judul Posting

Tulisan read more dapat tampil bersama judul posting. 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>

IV. Read more diganti dengan banner seperti contoh di bawah ini:

Jika menganggap tampilan huruf kurang menarik, anda bisa menggantinya dengan tombol atau banner. Contoh Read more menggunakan gambar menggunakan kode:

    <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/AVvXsEiVWZQ51f5irzxoXalyXWabI8hnGvCSZoU5ehSFomdPGX7qfsPVpf3krAUCoJWY6P4n06glMy8bnZANSmQVHAAk5o_-ux0XRYq2HxtIxqXMcwbx11iDeWqo9FmYYt3_d7sYVM6c09xHzy8/[1].png' alt='read more'/></a>
    </div>
    </b:if>
Masih belum paham di mana letak penempatannya? Berikut ini cara-caranya:

1. Login Blogger
2. Klik Tata Letak dan Edit HTML.
3. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "


4. Untuk mengganti Read More menggunakan gambar, carilah kode yang mirip seperti Ini :

    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

5. Silahkan ganti kode tersebut dengan kode-kode HTML di atas atau kode-kode hasil kreasimu.
6. Preview dan save.
7. Selesai.

Selamat mencoba dan semoga berhasil. Enjoy with BER-BAGI.blogspot.com