Cara Mudah Membuat Read More Otomatis Di Blog

Bagi sebahagian orang yang berkecimpung di dunia blogging mungkin fitur read more hanyalah sekedar fitur yang membuat artikel yang panjang menjadi pendek di halaman homepage,yang hanya berisi judul artikel dan penggalan isi artikel, dll. Memang benar adanya demikian definisi dari fitur Read More. Tetapi menurut saya fungsi dari readmore bukan hanya seperti yang barusan saya ungkapkan. Read more bagi saya termasuk salah satu fitur yang dapat kita manfaatkan sebagai sarana untuk membuat tampilan homepage blog kita menjadi singkat, rapi dan cantik.
Coba anda bayangkan bentuk homepage blog anda jika mengikuti aturan google yang mensyaratkan minimal 7 post yang harus ditampilkan pada laman utama. Anda sendiri sebagai pemilik blog mungkin akan merasa tidak nyaman dengan postingan anda yang panjang berderet ke bawah, apalagi pengunjung blog anda, belum apa-apa mereka akan meninggalkan blog anda karena menganggap blog anda belum professional.
Sebenarnya untuk memasang fitur ini sangat mudah dan sederhana, namun masih banyak orang yang sangat kesulitan ntuk menerapkannya, terutama sobat-sobat newbie.
Baiklah sobat blogger, sekarang kita akan mulai proyek Cara Membuat Read More Otomatis Di Blog, mudah, terperinci dan siapa pun dapat membuatnya, bahkan seorang yang awam sekalipun. Apa yang akan anda pelajari pada pokok bahasan kali ini adalah apa yang saya terapakan pada blog saya. Demikianlah cara lengkapnya.
1. Login ke akun Blog sobat.
2. Pilih template di dashboard dank lick edit HTML.
3. Cari kode berikut ini </head>

( agar lebih mudah gunakan search box di dalam edit html, caranya klick dimana saja di dalam kolom

Kode dan gunakan CTRL+F agar search box-nya muncul dan pastekan kode didalamnya,enter. )

4. Setelah anda menemukan kodenya copy dan paste kode berikut di atas kode </head> :

<!--ReadMore http://tipsmudah-blog.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-morea{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:10pxsolid #fff;float:left;height:165px;width:250px;margin-right: 20px;marginbottom: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 gambarsummary_noimg = 300; //banyaknya huruf jika tidak ada gambarsummary_img = 250; //banyaknya huruf jika ada gambarimg_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(vari=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+'...';}functioncreateSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";varimg = 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.

Selanjutnya silahkan cari kode berikut <data:post.body/> , kalau sudah ketemu ganti kode tadi dengan kode dibawah ini. [ Setiap template terkadang jumlah kode <data:post.body/> bias 2 atau 3, silahkan anda coba pasang di kode no 2 atau no 3. ]

<!-- 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 -->

Sebelum anda simpan/save template, sebaiknya dicek dahulu melalui pratinjau untuk memastikan apakah semua kode yang telah dipasang tadi berhasil. Jika sudah maka silahkan simpan/save template anda. Semoga sukses dan bermanfaat bagi anda.

Judul: Cara Mudah Membuat Read More Otomatis Di Blog ; Ditulis oleh Unknown ; Rating Blog: 5 dari 5

Posted in: Tips Blog