Blooglog

Tutorial Ngeblog, Tips dan Trik Tentang Ngeblog

Cara Membuat Baca Selengkapnya pada Blogspot

Cara Membuat Baca Selengkapnya pada Blogspot – Fitur ini di gunakan untuk menyingkat atau bisa juga untuk memperindah tampilan halaman depan blog Anda. Cara ini tentu akan sangat bermanfaat jika diterapkan juga pada blog Anda. Baca Selengkapnya atau Read More, biasanya di pakai untuk blog yang berisi artikel yang cukup panjang di setiap postingannya.

Ada beberapa cara metode pembuatan fitur ini, salah satunya yang sudah disediakan oleh blogger pada menu toolbar di setiap entri post atau laman. Nah, disini saya akan membahas 2 cara manual dan otomatis.

Cara manual ini adalah cara yang sudah saya jelaskan diatas yaitu, menggunakan fitur toolbar yang sudah disediakan blogger atau bernama “Insert Jump Break“. Jadi setiap beberapa paragraf artikel yang Anda buat, Anda harus menggunakan fitur tersebut agar paragraf sebelumnya terpotong dan tampil sebagai deskripsi di halaman depan blog. Caranya adalah seperti dibawah ini.

Cara Manual Membuat Baca Selengkapnya / Read More

1. Pertama, login ke blogger Anda dan siapkan artikel yang ingin Anda buat menjadi deskripsi di halaman depan.

2. Tentukan jumlah karakter yang ingin Anda jadi kan deskripsi, setelah itu klik pada toolbar “Insert Jump Break” dan publish jika sudah.

Cara Membuat Baca Selengkapnya pada Blogspot

3. Lihat hasilnya untuk memastikan hasilnya.

Cara Membuat Baca Selengkapnya pada Blogspot

Nah, cara diatas adalah cara manual yang tentunya Anda harus melakukan klik pada toolbar “Insert Jump Break” setiap kali memposting artikel, walaupun lumayan ribet dan memakan waktu, tetapi cara ini lebih leluasa deskripsi mana yang ingin Anda tampilkan pada halaman depan blog, sedangkan cara otomatis karakternya sudah di dibatasi.

Oke langsung saja lanjut untuk Cara Membuat Baca Selengkapnya / Read More versi otomatis.

1. Pertama, login blogger Anda.

2. Lalu langsung saja menuju “Tema/Template” dan pilih “EDIT HTML”, backup template terlebih dahulu, agar saat gagal Anda bisa merestorenya lagi.

Edit HTML Template

3. Cari kode </head>, gunakan pencarian CTRL + F agar lebih mudah.

4. Copy kode dibawah ini tepat diatas kode </head>.

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

NOTE:

Warna Hijau untuk mengatur banyaknya kutipan dari artikel.
Warna Kuning adalah Pengaturan Lebar dan tinggi gambar.

7. Pada form pencarian, carilah kode <data:post.body/>. Biasanya kode tersebut akan terdapat 2 buah.

8. Ganti kode <data:post.body/> yang kedua dengan kode di bawah 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 -->

9. Jika sudah pertinjau terlebih dahulu untuk memastikan kode tersebut work atau tidak.

10. Simpan jika sudah.

Note:

Kode <data:post.body/> biasanya hanya terdapat 2 buah saja. Tetapi berdasarkan pengalaman ada yang 3 bahkan 4, Jadi Anda bisa mencobanya satu persatu mana yang berhasil di terapkan. Karena setiap template akan berbeda-beda.

Silahkan Anda pilih mana yang akan di gunakan. Kedua cara diatas memiliki fitur yang sama. Untuk demonya silahkan cek link Demo.

Sekian untuk tutorial Cara Membuat Baca Selengkapnya pada Blogspot ini, semoga dapat bermanfaat.

Tinggalkan Komentar

Blooglog © 2017 Frontier Theme