Cara Membuat Auto Read More Untuk Blogspot

Oleh Asril Ambo

Tuesday, June 09, 2015

Bagikan :

Tweet

    Salam buat pembaca dimana pun berada. Inilah Cara Membuat Auto Read More Untuk Blogspot yang akan kita sajikan kali ini di blog Caro Awak ini terutama bagi Blogger pemula. Setelah beberapa hari yang lalu kita menerbitkan postingan yang berisi  Cara Membuat Kotak Scroll Di Blogspot untuk pembaca yang baru mengembangkan blog nya. Begitu juga jika ada yang mau pasang widget jadwal sholat dan puasa kami juga telah membagikan Cara Pasang Jadwal Sholat Dan Imsakiyah Di Blogspot di blog ini.

   Kembali lagi kita ke pokok pembicaran yaitu cara membuat Auto Read More yang bukan lah terbilang sulit. Yaa kita bisa memilih diantara dua cara berikut ini untuk membuat tombol baca selengkapnya untuk artikel atau postingan blog yang membuat tampilan blog agar lebih simpel dan elegan. Selain simpel Auto Read More ini juga akan membuat loading blog jadi ringan tanpa kelebihan beban. Selain itu juga akan mengurangi bounce rate atau pentalan pengunjung, karena mereka dari halaman depan musti membuka hlaman lagi untuk membaca artikel blog kita yang terkilas sebagian saja di halaman depan pada blog kita.

   Ada pun cara nya yang pertama yaitu mengguna kan java script dan inilah langkah langkah membuatnya, Silahkan di copy dulu kode script ini untuk di pastekan pada template blog sobat pembaca:

<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='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</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:if>

Setelah dicopy sekarang buka dashboard blogger dengan akun sobat ikuti langkah berikut: Pilih Template > Edit HTML > Cari kode <data:post.body/> pada HTML blog sobat, untuk mempermudah pencarian tekan Cltr+F. Setelah ketemu <data:post.body/> ganti kode tersebut dengan kode yang sobat copy diatas tadi. Jika ada dua atau lebih ganti <data:post.body/> yang kedua dan jika ada tiga ganti yang ke tiga.

   Kemudian cari lagi kode </head> dan copy kode dibawah ini,

  <script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

lalu pastekan tepat diatas kode </head>. Lalu kemudian tekan Simpan Template.
Sobat pembaca bisa mengubah ukuran gambar nya dengan mengganti angka120 untuk memperbesar dan memperkecilnya.

   Kemudian membuat Auto Read More dengan cara yang kedua yaitu tanpa menggunakan Java Script atau dengan menggunakan CSS/HTML. Dengan mengikuti langkah berikut ini, Buka Templat > Edit HTML > Copy kode ini:

.thumbnail-post {width:140px;height:80px;float:left;margin:0px 10px 0px 0px;padding-right:15px}

Lalu pastekan kode tersebut tepat diatas kode ]]</b:skin> di HTML Template sobat pembaca. Kemudian ganti kode <data:post.body/> seperti diatas tadi dengan kode dibawah ini:

<!-- Auto Readmore Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div> <div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Read More</a> </div> </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:if>
<!--Auto Readmore Codes End-->

Lalu jika ada <data:post.body/> nya dua, ganti saja kode <data:post.body/> yang keduanya. Terus sobat bisa mengganti tulisan Read More dengan Baca Selengkapnya.

   Kemudian tekan "Simpan Template" dan lihat hasilnya di berada depan blog sobat pembaca. Sekarang postingan blog yang tadinya numpuk semua di beranda depan, Sekarang tinggal kilasan doank lagi diberanda depan nya.

   Demikianlah dan cukup sampai disini kita sajikan Cara Membuat Auto Read More Untuk Blogspot semoga dapat sedikit membantu sobat pembaca dan terima kasih atas perhatian nya.

SILAHKAN BERBAGI:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Tag : Trik Blogger