Cara Membuat Tombol Read More Pada Blog

Di tutorial kali ini DuniaNoob akan membahas tentang bagaimana cara membuat tmbol Read More di kebanyakan blog, Read More atau Baca Selengkapnya biasanya digunakan untuk meminimalis atau memperkecil tampilan halaman pada tampilan untama yang membuat halaman untuma kalia menjadi lebih rapi. Fungsi lebih jelasnya tentang penggunaan Read Moe adalah untuk memperkecil postingan kalian pada halaman untama blog kalian jadi isi postingan kalian akan menjadi sedikit dan untuk melihat semua isi postingan dengan meklik tombol read more tersebut. Berikut langkah langkahnya.

#Cara Membuat Tombol Read More Pada Blog

1. Buka Blogger 

2. Pasa Dashbor  Blogger Pilih Tema Lalu Edit

3. Cari Kode </head> Gunakan CTRL + F Agar Lebih Mudah

4. Letakan Kode Dibawah Ini Tepat Diatas Kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Keterangan :

• summary_noimg : Banyak Huruf Untuk Tidak Ada Gambar
• summary_img : Banyak Huruf Untuk Ada Gambar
• img_thumb_height : Ukuran Tinggi Gambar
• img_thumb_width : Ukuran Lebar Gambar

5. Selanjutnya Cari Kode <data:post.body/> Lalu Ganti Dengan Kode Dibawah Ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> &#8594; <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:

6. Pada Kata Read More Bisa Kalian Ganti Sesuai Keinginan
7. Simpan Template
8. Selesai

Cukup sekian tutorial saya kali ini tentang Cara Membuat Tombol Read More Pada Blog semoga bermanfaat dan selamat mencoba

Related Posts:

Tweet