Membuat Read More Berada Di Kanan Pada Blogger Baru

Lagi-lagi bahasan mengenai Read More. Tetapi kali ini yang akan saya tulis adalah bagaimana cara membuat tulisan read more atau baca selengkapnya atau baca selanjutnya atau apalah terserah anda nanti mau di ganti dengan apa tulisan read more nya, berada di sebelah kanan.Tapi ini di buat untuk anda pengguna blogger baru atau template baru blogger.

                                   

 Gambar 1

Coba lihat gambar 1 berikut, perhatikan tulisan Baca selanjutnya atau read more yang ditunjuk tanda panah. Tulisan Baca selanjutnya itu penempatannya berada di sebelah kiri. Sekarang anda lihat gambar 2, kelihatan kan bedanya. Pada gambar 2, tulisan Baca selengkapnya muncul di sebelah kanan.

Gambar 2

  Jika pada postingan saya terdahulu yaitu mengenai "Pasang Read More Di Blogger Baru",( jika anda belum membacanya silahkan baca disini), anda hanya menempatkan kode yang berwarna merah dibawah kode berwarna biru seperti ini :

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

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

Nah, untuk memindahkan tulisan "Read More" atau Baca selanjutnya berada di sebelah kanan, anda cukup memindahkan kode yang berwarna merah jadi diatas kode berwarna biru, kemudian tambahkan kode berikut

<div style='float:right;padding:10px 0px 5px 0px'>

 Jika anda bingung ikuti saja langkah berikut :

Log In di Draft Blogger

Dalam Dasbor masuk Tata Letak --> Edit HTML

Kemudian centang Expand Template Widget

Hapus kode yang ini :

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

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

 Ganti dengan kode yang ini :

<div class='post-body entry-content'>

      <data:post.body/>

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

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Simpan Template. Sekarang lihat hasilnya.

**** Semoga Bermanfaat ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS