Cara Membuat Read More Otomatis di Blog

Dalam posting artikel berikut ini menunjukkan bagaimana Cara Membuat Read More Otomatis Artikel Di Homepage. Ada beberapa cara untuk membuat Read More otomatis (Auto Read More). Biasanya Fitur Auto Read More ini ditambahkan di bawah postingan artikel blog Di Homepage/Beranda.

Fungsi dari Read More Otomatis itu sendiri merupakan salah satu teknik untuk membuat halaman homepage lebih terlihat simple dan dinamis, dengan menampilkan judul, gambar dan sedikit uraian sehingga memudahkan pengunjung untuk memilih judul artikel yang diinginkan.

DEMO

Jika sudah berpengalaman edit template, maka versi ini dapat sedikit dimodifikasi. Untuk menambahkannya hanya memerlukan waktu beberapa menit saja. Read More Otomatis Artikel ini memiliki beberapa versi, dan untuk postingan berikut, akan diuraikan versi yang memiliki loading tercepat, sehingga sangat baik bagi Mesin Pencari.

Untuk Versi Auto Read More dengan Efek Gambar Di Link ini.

Kekurangan versi ini adalah ukuran gambar terbatas, jadi kalo diperbesar kurang jelas, dan juga kutipan singkat artikel terbatas pula, tidak bisa dikurangi atau ditambah. Tentu saja Auto Readmore Artikel tersebut dapat sedikit di modifikasi sesuai kebutuhan, Seperti Merubah Ukuran Gambar, Read More diganti menjadi Baca Selengkapnya dan lain-lain.

Berikut langkah-langkah Cara Membuat Read More Otomatis Artikel Di Homepage (Beranda).

Perhatian: bagi yang sudah memasang auto read more yang ada sebelumnya harus dihapus terlebih dahulu versi terdahulu.

1. Login Ke Blogger.

2. Klik Template, Backup template untuk jaga2 bila diperlukan,

Atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.

3. Klik Edit HTML.

4. Klik Kiri 1 x Dimana saja dalam kotak template.

5. Klik Ctrl+F (Supaya mempercepat pencarian kode),

Dan cari kode berikut  ]]></b:skin>

Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.

6. Masukan Kode berikut diatas  ]]></b:skin>




/* Gambar autoread more

----------------------------------------------- */

.post-thumbnail {width:70px;height:70px;float:left;margin:0px 10px 0px 0px;}

Warna ungu adalah pengaturan ukuran tinggi dan lebar gambar

7. Kemudian Cari Kode <data:post.body/>

Kode tersebut diatas jumlahnya biasanya ada 2 atau 3 , Cari yang versi web,

biasanya yang kedua (ke-2).

8. Hapus Kode <data:post.body/> yang kedua (salahsatu) dan Ganti 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.thumbnailUrl'> <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9r3N43NPVtTmOMYtkXTWF_ZvwequWSf1Rm05wFVFNXd0Fq2D8GxsEvzRxezuRy5n2JJ7_VTfAQL-lxUDjANEMKenSOYtZuBE9Z6I0QO_7J6qAQkEK36Sx7DtG1XsrjiVT-6-F9EDWuSQ/s1600/no+image.jpg'/></a> </b:if> <div class='post-snippet'><data:post.snippet/></div> <a class='button' expr:href='data:post.url'>Read More</a> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> </b:if> </b:if>

Keterangan membuat read more otomatis:

warna hijau adalah gambar pengganti jika dalam artikel tidak ada gambar dan bisa diganti dengan url gambar sesuai keinginan.

"Read More" juga bisa diganti kata-katanya.

9. Untuk Merubah Ketinggian deskripsi atau kutipan singkat artikel (Optional)

Cari Kode .post-body { ...} atau .post { ...}

Masukan atau Ganti { line-height: 1.8; ...

bisa juga ditulis line-height: 23px; atau disesuaikan ketinggiannya.

10.Save Template, dan lihat hasil read more otomatisnya.

Demikian Tutorial Cara Membuat Read More Otomatis Artikel Di Homepage, mudah-mudahan bisa bermanfaat.