Tutorial Cara Membuat Read More Otomatis Di Blog
Baca Juga
Tutorial Cara Mudah Membuat Read More Otomatis di Blogspot
- Tidak sedikit blogger yang masih kebingungan untuk membuat readmore
secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel
yang mebahas bagaimana cara membuat readmore otomatis. Hal ini
disebabkan karena banyaknya artikel yang copas padahal si pemilik blog
sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara
membuat readmore otomatis secara detail sehingga blogger pemula
sekalipun bisa membuatnya.
Ngomong-ngomong mungkin blogger pemula atau newbie masih bingung apa itu
readmore?. Read more adalah penggalan dalam sebuah artikel, biasanya
hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan
kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll.
Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang
panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya
menampilkan gambar dan beberapa kalimat saja.
Contoh Read More:
Cara membuat readmore otomatis dengan thumbhail/gambar
- Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
- Cari Kode </head>.
- Copy paste kode dibawah ini tepat di atas kode </head>
<!--ReadMore http://synasmedseo.blogspot.com-->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 = "yes"; //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 / POSTINGAN 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 seperti 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 == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='read-more'>
<a expr:href='data:post.url'>Baca Selengkapnya »</a>
</div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->
- Klik SAVE / SIMPAN dan lihat hasilnya.
Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena
ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin
para blogger pemula tidak akan mengerti atau kesusahan membuatnya.
sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan
jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya
melalui kotak komentar di bawah ini.
Tidak ada komentar: