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

Cara Membuat Read More Otomatis di Blog

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

Cara Membuat Read More. Didalam posting artikel yang satu ini menjelaskan bagaimana cara membuat auto “Read More” di Halaman Depan Blog. Ada beberapa cara untuk membuat Auto Read More otomatis, atau popular juga dengan sebutan “Baca Selengkapnya”. Biasanya Fitur otomatis posting artikel ini ditambahkan di bawah postingan artikel blog Di Homepage, Beranda atau halaman depan.

Fungsi dari Read More Otomatis itu sendiri merupakan salah satu cara untuk membuat halaman homepage lebih terlihat simple dan dinamis, dengan menampilkan judul, gambar yang mempunyai efek transisi dan uraian singkat yang dapat diatur panjangnya sehingga memudahkan pengunjung untuk membaca artikel yang diinginkan.

DEMO

Namun kekurangannya bahwa gambar dan deskripsi singkat terbatas untuk dimodifikasi (namun tetap ideal). Sedangkan versi auto read more otomatis yang ini, ukuran gambar mempunyai efek transisi menarik serta panjang deskripsi dapat diatur sesuai kebutuhan. Sebaiknya Posting mempunyai gambar meskipun hanya 1, kalo tidak ada gambar nanti kosong tampilannya.

blogging

Image: blogging

Read More Otomatis di Blog. Untuk menambahkannya memerlukan waktu beberapa menit saja. Auto Read More di halaman depan Blog ini memiliki beberapa versi, dan untuk postingan berikut, akan diuraikan versi yang memiliki loading cepat setelah versi sebelumnya ada yang tercepat, sehingga sangat baik bagi Mesin Pencari.

Auto Read more Artikel dapat di modifikasi sesuai kebutuhan, diuraikan di dalam keterangan.
Berikut langkah-langkah Cara Membuat Auto Read More Otomatis Di Blog. Perhatian: bagi yang sudah memasang read more otomatis yang ada sebelumnya harus dihapus terlebih dahulu. Versi Ini telah Direvisi.

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 </head>
Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas </head>

<!--Auto Read More Mulai-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

Perhatian: Cobalah terlebih dahulu tanpa diedit.
Warna Biru untuk mengatur banyaknya kutipan dari artikel.
Warna Hijau adalah Pengaturan Lebar dan tinggi gambar

7. Kemudian Cari Kode <data:post.body/>
Kode tersebut diatas jumlahnya biasanya ada 2, Cari yang versi web,
biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian.

8. Hapus Kode <data:post.body/> yang ke-2 dan Ganti dengan kode dibawah ini.

<!-- Auto read more Mulai -->
<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:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

Warna Biru Mudaย boleh dihapus boleh tidak, bedakan saja.
“Baca Selengkapnya” juga bisa diganti bebas.

Perhatian:ย Jika sudah menggunakan fitur read more otomatis sebelumnya, maka harus dihapus yang versi sebelumnya, dan mungkin jumlah pada langkah 7 bukan 2 tp mungkin 3 (mungkin juga script diatas pada langkah 6 berbeda.. ya harus dihapus jg script versi sebelumnya), anda harus dapat memperkirakan dari mana ke mana yang harus di hapus, contoh pada langkah 8 (petunjuknya warna Oranye – ini petunjuk bagi yg sdh pake versi lain)

9. Preview terlebih dahulu, kalo bagus ya terus Save Template, dan lihat hasilnya.

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

121 Komentar: Cara Membuat Read More Otomatis di Blog

  1. Ishaq Asri

    Kotak keterangan tanggal, reaksi, dan share ada ada di bagian bawah artikel tidak disembunyikan. Cara mengatasinya bagaimana ya gan?

    Reply
    1. Fantastis Post author

      Ada di bagian setting dashboard atau di bagian thema widget blogger untuk menampilkan dan menyembunyikan

      Reply
    1. Fantastis Post author

      seharusnya bisa muncul, kalo pake blogger, kuncinya pelajari cara menampilkan dan menyembunyikan elemen di postingan, atau di suatu link yang mana saja

      Reply
    1. Fantastis Post author

      Coba hapus baris ini (sekitar 8 baris) mulai dari
      atau coba klik update posting lamanya biar bisa menyesuaikan

      Reply
  2. Anonim

    pasti aneh keliatanya… kalo ada 3 berarti sudah menerapkan readmore otomatis sebelumnya, jadi harus dihapus dulu yang model sebelumnya

    Reply
  3. Anonim

    Blognya apa? kalo perkiraan saya mungkin readmore otomatis dari bloggernya dipake waktu buat artikel, fitur diatas justru untuk menjadikan otomatis tanpa membuat readmore sewaktu buat artikel… atau coba readmore otomatis dari bloggernya dihapus.. cari di web caranya

    Reply
  4. @dry yantoro

    lam kenal gan sebelum ya…..
    ane udah coba tapi napa tampilya setelah isi artikel baru muncul Read More mohon pencerahanya gan apa ada yang salah dalam penempatan code ya

    Reply
  5. Anonim

    blog saya sudah saya seting untuk tampilan posting di halaman depan/home sebanyak 9
    tapi setelah dijalankan kok yang tampil cuma 7
    penyetingannya di bagian pos dan komentar
    sedang untuk penyetingan di edit tata letak posting blog tidak bisa/dilock
    padahal di bagian templatenya sudah saya ubah untuk widget posting blog menjadi "locked=false"

    kira2 kenapa ya.. kok tampilan postingan home ndak sesuai dengan penyetingan dibagian pos dan komentar….

    Reply
  6. Tatang Gunawan S

    mungkin ada kode yang ga ke copy… coba perhatikan langkah2 dan keterangannya, waktu pengalaman awal saya juga suka gagal tp terus dipelajari, jadi mengerti

    Reply
  7. Indri Lidiawati

    Ijin praktek n kunjungan perdana =)

    Warna Oranye boleh dihapus boleh tidak, bedakan saja. warna oranye itu yg mana mas? @@, makasih infonya :-bd . Silakan mampir digubuk saya, hmmmm ๐Ÿ™‚

    Reply
  8. Tatang Gunawan S

    Maksudnya mungkin mirip "artikel terkait" seperti contoh diatas, di blog ini ada beberapa macam artikel terkait, tinggal di modif sedikit artikel terkaitnya kalo mau ada read morenya… Atau mungkin seperti "Tombol Jelajah" di Blog ini, kalo Halaman Jelajah disini cukup rumit buatnya ๐Ÿ˜€ saya juga lama banget settingnya…

    Reply
  9. zetred budz

    gan kalo buat halaman baru misalnya game di dalam game tersebut terdapat beberapa artikel dan ada read more nya gimana gan ?

    Reply
  10. Anonim

    @ Kie Marx >> apa nama blognya, pake template model apa, nanti dilihat, terus dikasih petunjuk… sebaiknya kalo read more otomatis ga usah disimpen dulu tp dipreview dulu.. kalo benar baru save, kalo g jalan jgn disave…

    Reply
  11. Anonim

    @ Rya Wulandari >> kalo ada error pesan xml, ada sesuatu yg salah, error diatas biasanya salahnya di saat menghapus dan mengcopy paste, pastikan menghapus kode yg benar… dan pastikan mengcopy-paste semua kodenya, kalo sudah biasa edit template nanti juga jadi tau dimana letak salahnya.

    Reply
  12. Rya Wulandari

    admin, kok ketemunya kayak gni si Kesalahan saat mengurai XML, baris 1347, kolom 45: The element type "div" must be terminated by the matching end-tag /div. Sembuny yg data post itu lhooo. pengennya si efek gambar sndri gtu

    Reply
  13. Anonim

    Jika acak-acakan biasanya kesalahan terletak pada langkah no.7, harap diperhatikan

    Reply
  14. Anonim

    Yang gagal >> coba di sebutkan nama blognya apa, biar nanti dilihat dulu.. soalnya dari demo itu memakai template asli Blogger dan bisa…

    Reply
  15. Transhive Usane

    Gan, kan gue coba preview lewat pratinjau template ya gan, itu tulisan artikel'nya kok jadi acak kadut gitu gan?
    Gue udah utak atik tapi hasilnya same aje, soal read more sih gue ga ada masalah, itu doang gan, bantu gan…

    Reply
  16. Anonim

    @ akbar manac >> pastikan yang dihapus itu adalah yang kedua, yg pertama jangan dihapus… enter 2x pada pencarian

    Reply
  17. Anonim

    @ Hamzah Abdullah >> aneh sekali seharusnya yang berbasis blogspot pasti ada… apa langkah 3-5 sdh benar, search-nya harus di kotak templatenya, bukan di browsernya, coba editnya pake browser chrome…

    Reply
  18. Anonim

    @ anonim harus benar nulisnya, copy paste aja.. kalo pake blogspot pasti ada

    Reply
  19. Anonim

    @Nur Afiffah >> Kalo ga ada gambar juga bisa, yg muncul nanti textnya aja, tapi kotak gambarnya kosong

    Reply

Tinggalkan Balasan

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