Cara Membuat Readmore Otomatis di Blog Versi 2

Posted by Nicki Hermanto Putro On Thursday 24 January 2013 0 komentar
Hai sobat nickizoner, setelah mengurusi dan memperbaiki beberapa artikel yang error di blog ini, kali ini saya akan menyempatkan diri untuk memposting artikel lagi, kali ini saya akan memposting tentang lanjutan tutorial atau pengembangan dari tutorial yang pernah saya posting yang berjudul :

Membuat “Read More…” atau “Baca Selengkapnya..” di Blogger

Nah, bedanya, kali ini scriptnya cukup mudah diterapkan pada template dan tidak perlu menambah script lagi ditiap entri pos secara manual, hanya tulisan yang akan diberi background. Tapi, kelebihan readmore jenis ini adalah dapat diberikannya fitur highlight yaitu fitur yang ketika disorot mouse akan berubah background. Penasaran ? Tertarik untuk mencoba ? mari kita bahas dan kupas tuntas di sini. Ikuti beberapa langkah di bawah ini

1.) Baca Basmallah
2.) Login ke akun blogger anda
3.) Masuk ke Template > Edit Html
4.) Centang tanda expand template widget
5.) Cari kode ]]></b:skin>, lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

Kode 
.readmore-wrap{margin-bottom:5px;float:right;-moz-border-radius:4px 4px 4px 4px;-khtml-border-radius:4px 4px 4px 4px;-webkit-border-radius:2px 4px 4px 4px;border-radius:4px 4px 4px 4px;overflow:hidden;}a.readmore{color:#666;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpGuI5kEuhvKoSKZ4saCt_7DHSHjTwVIcjn9Ha1lLVAsT7fXid9UtlKo7Z-lYUHLOVkrw4w8MplDJyivGRnKxZQcxDmFmS-nXfh9H5HlwZiJWnxL5Gce7HqNTgNCjA-sCxRb1Tql5hdjpv/s1600/readmore-bg.png) left top repeat-x;border:1px solid #C4C4C4;padding:5px 14px;font-size:11px;line-height:11px;display:block;text-decoration:none;text-shadow:0 1px 0 #fff}a.readmore:hover{color:#fff;background:#1A90CB left -124px repeat-x;border:1px solid #333;text-decoration:none;text-shadow:0 1px 0 #222}
6.) Setelah itu, anda cari lagi kode </head>. Letakkan kode dibawah ini tepat diatas kode </head>
Kode 
<script type='text/javascript'>
summary_noimg = 550;
summary_img = 500;
img_thumb_height = 150;
img_thumb_width = 200;
</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:0px 10px 5px 0px;"><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>
7.) Sekarang anda tinggal memasangkan script readmore di bagian blog anda, silahkan cari kode <data:post.body/> ( Jika anda menemukan 2 kode, pilih kode yang pertama saja ) . Lalu ganti kode <data:post.body/> dengan kode dibawah ini
Kode 
<p><b:if cond='data:blog.pageType != &quot;static_page&quot;'><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><div class='readmore-wrap'><a class='readmore' expr:href='data:post.url'>Baca Selengkapnya &#187;</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></p>
8.) Ganti Baca Selengkapnya dengan kata yang anda sukai
9.) Simpan Template dan lihat hasilnya

Sumber:
http://rizaldipriantama.blogspot.com/2012/12/cara-membuat-readmore-di-blog-versi-2.html   diakses hari Kamis, 24 Januari 2013, 10:19 WIB.

0 komentar:

Post a Comment

Silahkan isi komentar dengan baik dan sopan, tidak mengandung unsur SARA, provokatif, dan tanpa SPAM / iklan. Pesan / Komentar yang tidak layak akan dihapus. Terimakasih.