Artikel tentang Cara Membuat Read More pada Blog
Ada
berbagai macam cara yang biasanya digunakan untuk memperindah tampilan
pada website kita. Salah satunya adalah dengan cara membuat Read More
pada setiap post dari website kita. Melalui bolg Berbagai Artikel Menarik ini saya
akan membagi pengetahuan tentang Bagaimana membuat atau mengaplikasikan
Read More pada blog kita.
Post yang saya beri judul Artikel tentang Cara Membuat Read More pada Blog
ini akan membahas tentang tutorial membuat Read More yang bekerja
secara otomatis pada blog. Bisa kita bayangkan apabila setiap artikel
yang kita posting tidak dibatasi dengan aturan Read More. Apa lagi jika
artikelnya panjang. Disamping membutuhkan waktu yang lama untuk memuat
halaman tersebut, menurut saya juga bisa membuat tampilan website kita
kurang indah kelihatannya.
Oleh karena itu, menggunakan aturan Read More, menurut saya adalah hal yang harus kita lakukan atau terapkan pada blog atau website kita. Nah sekarang, Bagaimana tutorial membuat Read More pada blog kita ? Salah satu caranya adalah anda bisa mengikuti tata cara seperti di bawah ini :
Oleh karena itu, menggunakan aturan Read More, menurut saya adalah hal yang harus kita lakukan atau terapkan pada blog atau website kita. Nah sekarang, Bagaimana tutorial membuat Read More pada blog kita ? Salah satu caranya adalah anda bisa mengikuti tata cara seperti di bawah ini :
- Login pada akun Blogger anda.
- Klik “ Template “, lalu klik “ Edit Template “.
- Copy kode yang ada dibawah ini, lalu pastekan atau masukkan tepat di atas kode </head> pada template blog Anda. Kodenya adalah :
4. Masih pada “Template “ blog Anda, silakan anda mencari kode : <data:post.body/><!--ReadMore http://satu-untuk-semuanya.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-->
( Gunakan atau tekan Ctrl+f, untuk mempercepat pencarian. )
5. Setelah Anda menemukan kode <data:post.body/> , hapus kode tersebut, kemudian Anda gantikan dengan kode seperti di bawah ini :
6. Klik “ Save Template “, untuk menerapkan perubahan pada template Blog.<!-- 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'>Read More »</a>
</div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->
Jika semua pengaturan yang anda terapkan pada template blog anda telah anda lakukan dengan benar, maka Aturan Read More akan berjalan dengan baik pada Blog Anda.
Catatan :
- Tulisan “ Read More “ yang berwarna merah di atas, bisa Anda ganti dengan kata-kata yang lain sesuai keinginan Anda. Misalnya “ Baca lebih lanjut “ atau mungkin anda mau ganti dengan “ Baca selengkapnya “. ( Ganti sesuai dengan keinginan Anda )
- Jika pada Blog Anda sebelumnya telah terpasang aturan Read More, dan Anda ingin menggantinya dengan
Aturan Read Moreyang ada pada Blog Berbagai Artikel Menarik ini, maka hapuslah terlebih dahulu aturan Read More yang lama sebelum anda memasang kode-kode di atas. Setelah anda menghapus Aturan Read More yang lama, maka akan muncul 2 ( dua ) kode <data:post.body/> pada template blog anda. Hapuslah kode <data:post.body/> yang kedua, lalu anda ganti dengan kode yang ada pada Nomor 5 di atas.