Tutorial Blogger

Cara Memasang Read More Otomatis di Blogspot


Inwepo Tutorial – Untuk para pengguna Blogger, kali ini penulis ingin berbagi cara sangat mudah untuk membuat read more otomatis di Blogspot.


Read More (Baca lebih lanjut) yang berfungsi untuk memotong postingan agar terlihat setengah di halaman depan atau beranda. Dengan memasukan kode Auto Read More di template, kamu tidak usah repot lagi membuat Read More secara manual. Berikut tutorialnya :


1. Login ke blogger dan masuk ke Template –> Edit HTML, kemudian centang Expand Template Widget.


2. Untuk mengantisipasi adanya kekeliruan atau kesalahan, sebaiknya lakukan backup template dahulu.


3. Untuk memudahkan pencarian kode HTML, tekan Ctrl+F. Dan selanjutanya cari kode </head> .


4. Kemudian copy paste kode berikut ini sebelum kode </head> .


<b:if cond=’data:blog.pageType != &quot;item&quot;’><script type=’text/javascript’>var thumbnail_mode = &quot;float&quot; ;summary_noimg = 450;summary_img =300;img_thumb_height = 110;img_thumb_width = 130;</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(img.length>=1) {imgtag = ‘<span style=”float:left; padding:0;margin:0 10px 0 0″><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px”/></span>’;summ = summary_img;}var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;div.innerHTML = summary;}//]]></script></b:if>



5. Kemudian cari dan hapus kode di antara <div class=’post-header-line-1’/></div> hingga <b:if cond=’data:post.hasJumpLink’>

6. Ganti dengan kode berikut ini


  <div class=’post-body entry-content’>     <b:if cond=’data:blog.pageType == &quot;static_page&quot;’><data:post.body/><b:else/><b:if cond=’data:blog.pageType != &quot;item&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:right;padding-top:5px;’><a expr:href=’data:post.url’>Readmore &#8594;</a></span></b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if></b:if>      <div style=’clear: both;’/> <!– clear for photos floats –>    </div>


7. Simpan Template dan selesai.









1 Comment

1 Comment

  1. fir ring

    December 24, 2013 at 23:27

    Mantap kang

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top