» » Cara membuat readmore otomatis di blog versi 2

Cara membuat readmore otomatis di blog versi 2

Cara membuat readmore otomatis di blog versi 2


Hai sobat blogger, 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 Cara membuat read more bergambar otomatis di blog. Nah, bedanya, kali ini kita tidak menggunakan gambar, hanya tulisan yang akan diberi background. Tapi, kelebihan readmore jenis ini adalah dapat deberikannya fitur highlight yaitu fitur yang ketika disorot mouse akan berubah background. Penasaran ? Tertarik untuk mencoba ? mari kita bahas dan kupas tuntas disini. Ikuti beberapa langkah dibawah 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/AVvXsEhC_MVPDn5-mc1XFkhMedaYmfIuke3x8-07XQUueaIDOUvN81_GxM716FwJ3s08ho3wuAIzw3AG_vwFo9S435ktQ1D24GWojKFVBhPVc0iDuDPK8fum_vwXj-94fOGkfAa7JbUtt5almy-e/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

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Contact Us

Nama

Email *

Pesan *

Back To Top