Minggu, 14 Oktober 2012

Cara Membuat Readmore pada Postingan Blog

Setelah beberapa jam berkutik dengan yang namanya blog, buat gue blog bikin pusing banget.
Soalnya blog mainan sama yang namanya HTML dan gue pusing buat baca kode-kode HTML yang bkin otak gue mengecil

tapi untungnya di mbah google banyak ngasih-ngasih info, itu mempermudah sih tapi tetep aja kalo otak gue lola alhasil blog yang gue kerjain jadi lama ck
Kenapa tuhan ngasih gue otak yang pentiumnya lebih parah dari komputer pentium 1? -_-
Bersyukur cha, lo masih punya kelebihan walaupun lo ngga tau kelebihan lo apa? ampun ampun

Next, STOP tentang curhat gue yang otaknya lola.
Gue mau berbagi ilmu nih, lumayan bisa nambah pahala, kalo postingan gue bermanfaat buat orang lain, mudah-mudahan bermanfaat yah :)

Langsung. Cara Membuat Readmore papa Postingan Blog

Yang pertama :
Masuk ke Dashboard -> Template -> edit HTML -> Proceed -> Kemudian Centang "Expand Widget Templates "


Kedua :
Cari kode </head>. Copy paste kode di bawah ini, tepat di atas kode </head>.
nb : biar pala lo pada ga pusing nyarinya, mending lo ketik CTRL + F nanti dipojok kanan atas bakal keluar tampilan semacem search.
terus, lo paste kode HTML dibawah, tepat diatas kode </head>


<script type='text/javascript'>
//<![CDATA[
var thumbnail_mode   = "float",
summary_noimg    = 350,
summary_img      = 350,
img_thumb_height = 100,
img_thumb_width  = 120;

/******************************************
Script Posting Read-More versi 2.0 (blogspot)
(C)2008 oleh Anhvo
********************************************/
function createSummaryAndThumb(a) {
var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";b.innerHTML=f}function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var c=a.split("<");for(var d=0;d<c.length;d++){if(c[d].indexOf(">")!=-1){c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length)}}a=c.join("")}b=b<a.length-1?b:a.length-2;while(a.charAt(b-1)!=" "&&a.indexOf(" ",b)!=-1)b++;a=a.substring(0,b-1);return a+"...";
}
//]]>
</script>

nb : Kamu bisa mengubah pengaturan (yang berwarna abu-abu)
summary_noimg = 350, (jumlah kata yang ditampikan saat dalam postingan tidak ada gambar)
summary_img = 350, (jumlah kata yang ditampikan saat dalam postingan ada gambar)
img_thumb_height = 100, (tinggi gambar yang ditampilkan)
img_thumb_width = 120; (lebar gambar yang ditampilkan)
Kamu cukup mengubah angka yang dicetak tebal di atas

Ketigaaa :
Cari lagi kode <data:post.body/>. Ganti kode tersebut dengan kode di bawah ini.
nb : nah skali lagi biar pala lo pada ga pusing nyarinya, mending lo ketik CTRL + F nanti dipojok kanan atas bakal keluar tampilan semacem search.

<!-- mulai kode readmore otomatis -->
<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'><a expr:href='data:post.url'>read more &#187;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
</b:if>
<!-- akhir kode readmore otomatis -->

Terakhir :
Klik Preview untuk melihat perubahan. Kalau sudah berhasil klik Save template


Selamat Mencoba teman-teman :) Kalo kata temen gue jangan lupa baca BISMILLAH :D

Tidak ada komentar:

Posting Komentar