CARA PASANG READ MORE OTOMATIS DI BLOG



Bagi para pemula membuat blog, ada tips untuk membuat penampilan tulisan kita kelihatan ramping dan minimalis, yaitu dengan memasang Read More.

Cara Pasang Read More Otomatis di Blogspot memang ada beberapa macam cara, tapi untuk kali ini saya ingin berbagi kepada kawan  seperti yang saya pakai sekarang. Saya akan berikan triknya buat kawan yang saat ini masih belum menemukan caranya, atau ingin kawan ingin mengganti cara lama dengan cara baru seperti yang saya punya ini. Semua orang awalnya pasti merasa sulit melakukannya, namun dengan mengikuti petunjuk dibawah ini, saya yakin kawan pasti bisa, hehehe kaya kampanye politik aja.


Langsung saja kita coba praktekan cara membuat read more otomatis seperti di bawah ini:

Oh ya, perlu diperhatikan juga bagi Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi kawan sesuaikan saja)

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>


<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>


<a expr:href='data:post.url'>Readmore</a>

</b:if>


<div style='clear: both;'/>

Jika kawan sudah lakukan langkah tersebut diatas, maka kita akan lanjutkan langkah-langkah selanjutnya :

PERTAMA, silahkan menuju menu DESIGN -> Edit HTML, Cari kode
</head>  kemudian letakan script dibawah ini di atas kode </head> jangan lupa save template terlebih dahulu.

Selanjutnya Copy kode dibawah ini :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</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 2px 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>

</b:if>
</b:if>



Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu cari kode seperti dibawah dengan menekan ctrl F : ketik <data:post.body/>

<data:post.body/>

Jika telah kawan temukan, ganti kode <data:post.body/> dengan semua kode dibawah ini dengan cara copas.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>



Jika langkah tersebut diatas sudah selesai dilaksanakan, tinggal klik Preview.
Sekarang sudah bisa dilihat hasilnya. Oc,,, moga bermanfaat....

Tidak ada komentar:

Poskan Komentar