Mau Sewa Space Iklan?


PASANG IKLAN DISINI
*Hanya Rp50.000

Contact Us : WebBudi.com

Thanks :)


Advertisement

Translate

Cara Menambahkan Fitur Read More Otomatis Pada Situs dan Blog




Cara Menambahkan Fitur Read More Otomatis Pada Blog

 




Pada halaman utama blog-blog profesional, teman-teman blogger pasti sering melihat postingan-postingan yang terdapat diblog tersebut tersusun rapih dan menarik ditambah lagi dengan adanya pemengalan-pemengalan posting yang tertata rapih yang sering kita dengar dengan sebutan fitur read more atau baca selengkapnya. Daripada seluruh isi artikel dari setiap postigan, kita tampilkan dihalaman utama yang belum tentu artikel tersebut merupakan artikel pilihan yang menarik atau ingin dibaca oleh pengunjung blog. Lebih baik kita sisipkan fitur read more pada halaman utamanya. Dengan adanya fitur read more pada halaman sebuah blog dapat membuat postingan-postingan diblog terlihat lebih efisien dan akan sangat membantu pengunjung blog dalam memilih artikel yang akan dibacanya. Karena pengunjung blok cukup mengklik read more / baca selengkapnya apabila ingin membaca lengkap keseluruhan isi artikel yang dipilih.

Pada artikel sebelumnya saya pernah membahas tentang Cara Sederhana Membuat fitur Read More Pada Postingan Blog dengan menggunakan fasilitas insert jump break, tetapi pada artikel kali ini saya akan membagikan cara lain membuat fitur Auto Read More secara otomatis pada semua postingan yang ada di blog kita hanya dengan menambahkan kode-kode html pada template blog.

Langsung saja kita pelajari cara dan kode-kode penting htmlnya :
  1.  Login ke Dasbor Blogger masing-masing
  2. Buka Settingan Tempalte Blogger, klik Edit HTML
  3. Jangan lupa Backup semua kode HTML Template terlebih dahulu untuk berjaga-jaga, jika diperlukan untuk menghindari apabila terjadi kesalahan disaat percobaan
  4. Klik kiri 1x dimana saja pada kotak template, gunakan fungsi Ctrl+F (untuk menampilkan kotak pencarian agar mempermudah pencarian kode HTML) dan cari kode berikut </head> , masukan kode tersebut pada kotak pencarian, kemudian tekan Enter untuk mencari kode
  5.  Masukkan kode html berikut diatas kode </head>
  6. <!--ReadMore http://WebBudi.com-->

    <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:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
    .grow img{height:165px;width:250px;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 = 250;

    </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-->
  7. Lanjutkan dengan mencari kode berikut <data:post.body/> , pada template bawaan blog kode HTML tersebut biasanya jumlahnya 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
  9. <!-- 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 -->
  10. Terakhir pilih Simpan Template dan silahkan lihat hasilnya
 Untuk informasi saja, bahwa sebenarnya kode javascript diatas bisa anda atur sesuai kebutuhan, 
- summary_noimg = banyaknya huruf jika tidak ada gambar
- summary_img = banyaknya huruf jika ada gambar
- img_thumb_height = ukuran tinggi gambar
- img_thumb_width = ukuran lebar gambar
- kata link Baca Selengkapnya >> juga bisa teman-teman ganti sesuai kebutuhan bisa dirubah menjadi Read More >> dan lain sebagainya

Sebagai tips tambahan jika blog yang teman-teman kelola memiliki banyak kumpulan artikel dan pada halaman utama ingin teman-teman tampilkan banyak potongan dari macam-macam judul artikel, teman-teman juga harus memanfaatkan atau menambahkan fitur read more manual pada setiap artikel postingan yang ada di blog. Yaitu dengan menyisipkan fitur "Insert Jump Break" pada setiap artikel yang telah diposting maupun untuk artikel baru yang nantinya akan diposting. 

Mengapa kita harus menambahkan fitur "Insert Jump Break" pada read more otomatis yang sudah berjalan ? 
Karena fitur read more otomatis ini menggabungkan 2 fungsi pemotongan artikel yaitu pemotongan untuk artikel yang memiliki gambar dan artikel yang seluruh kontennya hanya berisi teks. Sehingga seringkali pada blog yang telah memiliki banyak kumpulan artikel dengan halaman utama yang telah disetel menampilkan jumlah postingan yang banyak. Atau dengan jumlah postingan yang melebihi ukuran yang diwajibkan untuk halama utama malah mengakibatkan jumlah postingan yang telah disetel untuk ditampilkan pada halaman utama blog tidak sesuai dengan jumlah yang telah diatur. 

Contohnya teman-teman sudah mengatur jumlah postingan yang akan tampil pada halaman utama blog adalah 20 post tetapi saat dibuka hanya ada 10 post yang tampil pada halaman utama. Hal ini disebabkan karena 10 post yang tampil sudah terhitung sebagai ukuran maksimal yang bisa ditampilkan pada halaman utama blog. Oleh sebab itu kita bisa memanfaatkan fitur "Insert Jump Break" untuk menentukan batas paragraf terakhir yang akan dihitung fitur read more otomatis sehingga ukuran baca setiap artikel akan lebih ringan dan jumlah artikel post yang telah diatur dapat tampil sesuai jumlahnya di halaman utama blog. 

Berikut ini cara untuk menambahkan fitur "Insert Jump Break" pada artikel yang telah kita posting sebelumnya. Caranya masuk ke blogger menggunakan akun teman-teman seperti biasa >> Buka menu Pos pada blog yang ingin diedit >> Pilih menu Edit pada postingan artikel yang telah dipublikasikan sebelumnya >> Tempatkan kursor mouse pada akhir paragraf ke-1 atau ke-2 pada postingan yang ingin dipotong >> Kemudian pilih menu Insert jump break yang berbentuk seperti ikon kertas putus disebelah ikon insert a video >> Jika berhasil maka pada akhir paragraf ke-1 atau paragraf ke-2 yang dipotong akan tampil garis pemisah berwarna putih (insert jump break) >> Setelah selesai pilih pilihan Perbarui pada artikel postingan yang telah diedit. Lakukan langkah-lagkah insert jump break yang sama pada semua arikel postingan yang telah dipublikasikan.





Untuk tutorial lebih lengkap cara penggunaan fitur insert jump break telah saya bagikan pada artikel sebelumnya, silahkan teman-teman mempelajarinya pada artikel tentang Cara Membuat Read More Pada Postingan Blog Dengan Fitur Insert Jump Break .

Mungkin itu saja penjelasan dari saya mengenai cara membuat read more di blog, jika teman-teman menemukan error atau ada hal yang ingin ditanyakan seputar cara menambahkan fitur auto read more otomatis di blog ini, jangan sungkan-sungkan untuk menanyakannya melalui kolom komentar dibawah.

8 Responses to "Cara Menambahkan Fitur Read More Otomatis Pada Situs dan Blog"

  1. Balasan
    1. Sorry bos sebelumnya, ada kesalahan pada kotak script yang kita pos kemarin sehingga kode script yang dishare kemarin tidak sepenuhnya berjalan.
      Tapi sekarang sudah kita update, silahkan dicoba lagi script "read more otomatisnya" semoga berhasil.
      Terima kasih bos sudah berkunjung di blog "gudang-pengetahuanmu.blogspot.com" dan sudah memberikan informasi dan kritik pada blog kita.

      Hapus
  2. Agan Darwin terima kasih banyak tipsnya, dari sekian banyak tips yang saya temukan, tips dari agan yang jalan di blog saya...
    http://swampforex.blogspot.co.id/....nubie mohon bimbingannya....

    BalasHapus
  3. Siip, sama-sama pak Abi, Kita juga senang jika postingan blog yang kita bagikan dapat membantu.

    BalasHapus
  4. work gan thanks infonya sukses selalu,,

    BalasHapus
    Balasan
    1. siip, sama-sama agan Rhiezky Oktori.
      Terima kasih juga telah mengunjungi blog kita, Sukses Juga buat agan

      Hapus
  5. Terimakasih ilmunya Mas, keseringan download template free nih jadi gx tau cara memotong di template yang bawaan :)

    BalasHapus
    Balasan
    1. sama-sama mas Awen Fals, terima kasih juga telah mampir di blog gudang-pengetahuanmu.blogspot.com .

      Jika berkenan, silahkan ikuti update artikel gudang-pengetahuanmu.blogspot.com lainnya dengan cara ikuti melalui Google Plus yang ada dibawah.

      Hapus

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.