Cara Mudah Membuat Readmore Otomatis di Blog

 
DEPRESI JURNALIS – Semakin pesatnya dunia blogging, mengharuskan pengguna blogger harus kreatif dalam mengatur halaman blognya demi dapat mendapatkan pengunjung.
Mereka berlomba-lomba untuk membuat tampilan blog sebagus mungkin, mulai dari tampilan yang sederhana hingga yang memiliki banyak efek-efek javascript yang bisa dibilang menakjubkan, namun menyadari semua itu banyak dari netter/ pengunjung blog yang tidak terlalu suka dengan blog atau website yang terlalu ramai widget ataupun efek-efek yang berlebihan pada blog karena selain mengganggu pengunjung juga dapat mengurungi pengunjung untuk datang di blog anda karena loading blog yang semakin berat yang menyebabkan pengunjung enggan datang dan membaca artikel di blog tersebut. Untuk itu bagi mereka yang telah lama menekuni dunia blogging pasti akan merasa dirugikan ketika pengunjung blog mereka menurun, demi mendapatkan pengunjung blog mereka kembali dan berharap penambahan pengunjung banyak dari blogger master kita yang mengurangi penggunaan widget yang dianggap dapat membuat berat blog, dan hal lainnya dengan mengkompres css agar tidak terlalu berat. Widget dan penggunaan css bukan saja faktor yang menentukan beratnya blog, artikel yang terlalu banyak gambar pun akan mengakibatkan loading blog semakin lama. Untuk itu dalam satu halaman utama yang biasa memuat 3 - 4 artikel agar lebih ringkas dan artikel tidak terlalu panjang dalam halaman utama maka dibuat sebuah readmore.

Readmore??? Apa itu readmore mungkin dikalangan para newbie banyak yang kurang paham terhadap penggunaan fungsi ini, Readmore adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll.

Seperti yang sudah dijelaskan diatas manfaat readmore sendiri yaitu untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.
Pada beberapa template mungkin fungsi readmore sudah disisipkan didalamnya, namun beberapa template tertentu seperti template default dari blogspot sendiri belum ada, sehingga demi membuat halaman utama menjadi lebih efektif kita harus menambahkan fungsi ini sendiri.

Cara Membuat Readmore Otomatis

  • Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
  • Cari Kode </head>
  • Copy paste kode dibawah ini tepat di atas kode </head>
<!--ReadMore http://gudang4rtikel.blogspot.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-->
  • Save Template anda.
  • Kemudian scroll template anda kebawah cari kode seperti berikut:

Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTING BLOG" jika anda menggunakan bahasa indonesia.
  • Jika sudah menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
  • Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut


  • Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
  • Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
  • selanjutnya akan terbuka kode kode yang lain.
  • geser atau scrol ke bawah dan cari kode 
 <data:post.body/>
  •  Setelah ketemu hapus kode diatas 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 -->
  • Klik SAVE/ SIMPAN dan lihat hasilnya. 
CATATAN:
  • Agar lebih mudah dalam mencari kode-kode tersebut gunakan tombol "CTRL+F" lalu masukan yang indeks kode yang dicari.
  • Dalam penerepannya masih banyak terjadi kegagalan dalam  membuat fungsi ini, masalah tersebut biasanya disebabkan saat anda mengganti  <data:post.body/> dengan script diatas. Karena <data:post.body/> tidak hanya ada satu dalam sebuah blog namun mungkin akan lebih dari satu, jika terjadi kegagalan seperti disebutkan saya sarankan untuk meletakan di <data:post.body/> yang kedua atau ketiga atau yang terakhir.
Sebenarnya selain cara diatas jika anda tidak mau pusing-pusing merombak template anda ada cara manual yang bisa digunakan dengan mudah dan dapat dipraktekan bagi pemula sekalipun, namun saya tidak akan membahas artikel tersebut sekarang, artikel untuk membuat readmore secara menual akan dibahas pada artikel berikutnya.

0 Response to "Cara Mudah Membuat Readmore Otomatis di Blog"

Posting Komentar

Berkomentarlah dengan bijak, relevan dan sesuai dengan pokok pembahasan. Thanks by Admin Ganteng 😎

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel