Cara Membuat Read More Dengan Gambar Snippet Pada Halaman Home Blog

Read More adalah teks link yang berfungsi untuk menampilkan semua halaman posting dari teks yang muncul pada bagian atas halaman posting yang ditetapkan dengan teks read more (baca selanjutnya). Bagi Blogger pengguna template gratis blogger blogspot umumnya pada bagian atas teks yang ditetapkan sebagai teks Read More tidak terdapat gambar.

Untuk mendapatkan hasil Read More dengan gambar snippet ini memang sangat menguras waktu dan pikiran khususnya bagi kita blogger pemula. Akan tetapi walaupun demikian akhirnya bisa juga terwujud di Ronamasa.Com, he,he,he. Dan pada kesempatan ini Ahyar ngucapin terima kasih buat Blogger-Blogger yang sudah menyediakan tutorialnya walau kode-kodenya harus saya diracik ulang sedikit khususnya penempatannya. Ini saya lakukan agar bisa tampil seperti saat ini. Udahan dulu ah ceritanya, sekarang kita ngomonginya lagi tentang Read More aja yah. Okey ...

Gambar: Tampilan Read More (baca selanjutnya)

Teks Read More (baca selanjutnya) dibuat dengan kode ini disamping gambar kecil juga terdapat redaksi postingnya. Tampilan gambar kecil (Snippet) ini hanya akan muncul pada halaman Home (beranda) saja.

Walaupun Gambar kecil ini terlihat pada halaman Home namun jika pengguna membuka halaman postingnya  gambar tersebut akan langsung berubah otomatis sesuai ukuran gambar ditetapkan oleh pembuat posting. Sementara untuk membuka halaman posting dari halaman Induk (home) media online internet blog dapat dilakukan melalui teks judul posting maupun teks read more.

Cara membuat teks link Read More supaya tampilan dengan Gambar Snippet dapat dilakukan dengan langkah-langkah sebagai berikut:

1. Sign in diblog
2. Klick Template
3. Backup template bila diperlukan
4. Klick Edit HTML
5. Centang Kotak kecil pada teks Expand Template Widget
6. Cari kode ]]></b:skin>. Untuk mudah menemukannya gunakan Ctrl F
7. Copy lalu paste kode yang terdapat dibawah step ini pas di atas kode ]]></b:skin>
8. Cari lagi kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>.
9. Hapus mulai dari kode tersebut hingga tag penutup </div> atau pas di atas kode <div class='post-footer'>
10. Copy lalu paste kode dibawah ini sebagai pengganti kode yang dihapus di atas
11. Klick Simpan Template
12. Klick Pratinjau untuk hasil sementara
13. Klick Tutup untuk kembali pada halaman sebelumnya

Ini kode yang ditempatkan diatas kode ]]></b:skin> (kode step ke 7)
.thumb img{float:left;margin:0 10px 10px 0}

Ini kode yang dicopy dan paste sebagai pengganti kode dihapus pada step 8-9  <div class='post-body entry-content' expr:id='"item" + data:post.id'> <b:if cond='data:blog.pageType != "item"'>           <b:if cond='data:post.snippet'>           <b:if cond='data:post.thumbnailUrl'>               <div class='Image thumb'>                 <img expr:src='data:post.thumbnailUrl'/>               </div></b:if>             <data:post.snippet/> <b:if cond='data:post.hasJumpLink'>       <div class='jump-link'>         <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>       </div></b:if>           <b:else/>             <data:post.body/>           </b:if>       <b:else/>       <data:post.body/>       </b:if> </div>

Untuk diketahui oleh Blogger bahwa kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'> terdapat dua buah. Silahkan merubah kode yang atas saja. 

Sementara jika ingin melihat tampilan aslinya di sini

Artikel lainnya

Cara Tepat Terbitkan Posting Blog Terjadwal
Cara Membuat Menu Dropdown Dibawah Header Blog - Menu Blog/Website Menjorok Kebawah
Cara Menempatkan Trio Gadget Blog Dibawah Header Blog
Cara Membuat Menu Horizontal Blog Pada Header Blog
Cara Membuat Url Link Open New Window Posting Blog
Istilah Yang Wajib Diketahui Blogger Untuk Menata Tampilan Media Online Blog
Cara Tepat Terbitkan/Publikasikan Entri Posting Blog Antarmuka Blogger Baru (New Blogger Interface)