11/22/16

Cara Mudah Membuat Auto Readmore Gambar di Atas Teks Valid tanpa Javascript di Blogger

Membuat Auto Readmore Gambar di Atas Teks

Ada banyak sekali tutorial cara membuat auto readmore entah itu dengan menggunakan kode javascript ataupun tanpa Javascript. Mungkin saya blog ke berapa ratus juta yang membuat tentang tutorial cara membuat Auto Readmore ini.

Sebenernya Blogger sendiri telah menyediakan Insert Jump Break manual yang bisa sesuka hati kita menyimpannya, mau di tengah-tengah, mau di baris kedua atau juga mau di akhir, tetapi fitur Insert Jump Break itu jarang sekali di gunakan oleh para blogger termasuk saya sendiri.

Keuntungan dengan menggunakan auto readmore, blog kita akan terlihat rapih baik itu auto readmore yang menggunakan javascript ataupun tanpa Javascript. Tapi kebanyakan mencari auto readmore tanpa javascript karena dengan alasan tidak berat saat loading blognya.

Saat saya stalking ke beberapa blog dan sepintas saya membaca komentar mereka, ternyata masih ada yang kebingungan menyimpan kode auto readmore-nya persis kaya saya pertama kali kenal dengan dunia blogging, saya cari tutorial ke blog ini, cari lagi tutoral ke blog ini. dan itu hampir membuat saya putus asa, tapi beberapa hari kemudian akhirnya saya bisa menemukan caranya.

Baca juga : cara mudah mengganti share buttons bawaan blogger

Berikut di bawah ini tutorial lengkap cara memasang Auto Readmore khususnya di template default blogger.
  • Pertama sobat Login dulu ke blog. 
  • Kedua pilih Template lalu klik Edit HTML (Jangan lupa backup dulu sebelum mengedit).
  • Ketiga copy paste-kan kode di bawah ini tepat di atas kode tag penutup </head>. (gunakan Ctrl + F untuk memudahkan pencarian.). 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {background:#2c4584;padding:6px 10px;margin:20px 0 10px;color:#fff!important}
</style>
</b:if>
</b:if>
  •  Maka penempatan kodenya akan seperti gambar di bawah ini.
    Membuat Auto Readmore Gambar di Atas Teks 2
  • Selanjutnya cari '<data:post.body/>' yang ada di <b:includable id='post' var='post'>, hapus kode '<data:post.body/>' lalu gantikan dengan kode dibawah ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </div>
    <div class='rm-button-wrap'>
      <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Baca Selengkapnya &#187;</a></span>
    </div>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
  
  • Untuk lebih jelas penempatan kodenya silahkan lihat gambar di bawah ini.
Membuat Auto Readmore Gambar di Atas Teks 3
  • Terakhir silahkan klik Pratinjau untuk melihat perubahan jika telah berhasil silahkan sobat klik Simpan/Save.
Keterangan :
Yang di tandai warna merah :
  • 1px untuk merubah ukuran besarnya garis bawah, sobat bisa merubahnya dengan ukuran sesuai selera masing-masing. 
  • dotted sobat bisa merubahnya dengan model misalnya solid, dashed, silahkan pilih sesuai selera masing-masing.
  • #2c4584 untuk merubah warna pada garis bawah. Jika sobat tidak ingin ada garis bawahnya silahkan sobat bisa menghapusnya yang di tandai warna merah saja.
Yang di tandai warna biru :
  • #999 untuk merubah kode warna pada background readmore.
Yang di tandai warna hijau :
  • #fff' untuk merubah kode warna pada tulisan readmore.
Itulah tutorial cara mudah membuat auto readmore gambar di atas teks Valid tanpa Javascript di Blogger yang bisa saya berikan semoga postingan kali ini bisa membantu sobat yang masih kebingungan membuat Auto Readmore. Jika sobat masih memiliki kesulitan silahkan sobat bisa tinggalkan komentar dibawah.

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.