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 :
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>
6.) Setelah itu, anda cari lagi kode </head>. Letakkan kode dibawah ini tepat diatas kode </head>
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
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.
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 ini1.) 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}
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>
Kode
<p><b:if cond='data:blog.pageType != "static_page"'><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><div class='readmore-wrap'><a class='readmore' expr:href='data:post.url'>Baca Selengkapnya »</a></div></b:if></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if></p>
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.