Cara Membuat Read More Otomatis di Homepage,Cara Menampilkan Menyembunyikan Elemen atau Widget,Cara Membuat Read More Otomatis

Cara Membuat Read More Otomatis Artikel Di Homepage

Update Terkahir: 17 Mei 2017
Aura Ilmu » Blog » Cara Membuat Read More Otomatis Artikel Di Homepage
(No Ratings Yet)
Loading...

Read More Otomatis. 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.

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.

blogging

Image: blogging

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:100px;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='//2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>
<a class='button' expr:href='data:post.url'>Baca Selengkapnya ยป</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.
Baca Selengkapnya” 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.

42 Komentar: Cara Membuat Read More Otomatis Artikel Di Homepage

  1. niko billy

    mau tanya mas,
    punya saya kok gx bisa disave y,
    kalau pas dipratinjau berhasil tetapi setelah itu kembali seperti semula lagi…
    mohon pencerahannya mas.?

    Reply
  2. Anonim

    @ ari kuswanto >> kode diatas bisa digunakan tanpa thumbnail, karena otomatis thumbnail di replace… seandainya tidak ingin pake gmbr maka hapus kode baris 3-10 pada kotak kode yg kedua

    Reply
  3. Anonim

    @ Warung Jasa STNK BPKB >> sebaiknya jangan disave dulu tapi preview dulu, kalo berhasil lalu di save… sama juga untuk..

    @ sikkahoder >> biasanya kesalahan terletak pada langkah no 7.. cari kode Ctrl+F – Masukan kode – enter 2 kali – itulah kode yang kedua yang dicari

    @ Aep Saepuloh >> yg diatas sebenarnya unuk demo yang kedua

    Reply
  4. Warung Jasa STNK BPKB

    Saya sudah coba beberapa kali tapi tetap ga bisa, dimana salahnya ya? sampai-sampai kotak templatenya jadi semakin panjang, karena setiap klik SIMPAN TEMPLATE dan diulang lagi dan diulang lagi yang sudah di paste tidak hilang

    Reply
  5. Muhammad Nafarin

    Thanks banet, mantapp.. saya keliling2 google ternyata punya anda yang jujur gak ngeboongin..
    yang pengen nyoba silahkan.. pasti berhasil..

    Follow back blog saya mnafarin.blogspot.com

    Reply
  6. Anonim

    @ don juan >> Artikel diatas sudah diupdate, dan untuk versi read more yang dimaksud ada link tautannya diatas

    Reply
  7. don juan

    tulisan cuma 2 baris bisa gak buat 5 atau 6 baris termasuk gambarnya gede sediitki dimn harus ganti
    winkomnet.blogspot.com

    Reply

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *