Baru pertama kali dan belum sampai sebulan ngeblog jadi wajar masih utak-atik template biar pas di ati, setelah memilih template, dengan kemampuan yang sangat newbie pede abis utak-atik tampilan . Setelah di rasa pas meski jauh dari sempurna coba posting dan dilihat-lihat hmm... sepertinya ada yang kurang, tampilan artikel terlalu panjang untuk halaman depan, biar lebih elok harus di penggal dengan tulisan read more atau baca selengkapnya.

Bangun tidur belum sempat mandi dan gosok gigi dengan tergopoh-gopoh langsung meluncur ke rumah mbah Google buat nanya, weh ketemu banyak artikel yang kurang lebih sama yaitu dengan menggunakan

<div style="fullpost">
</div>

atau

<span style="fullpost">
</span>

tapi kok ribet ya, tulisan yang akan di penggal harus di tulis di antara kode di atas, pengennya sih ada penggalan yang otomatis, takon mbah Google lagi trus penasaran lihat penggalan pada template wp-boxed-tech untuk blogger, download templatenya buka di notepad++ tetap pede walau kemampuan masih newbie coba dan mencoba dan akhirnya berhasil. berikut gambar hasilnya

berikut caranya

langkah 1:
Login Blogger>Tata Letak>Edit HTML, cari kode berikut ]]></b:skin>
atau Ctrl+F ketik ]]></b:skin>, Copy paste kode css berikut di atasnya

span.rmlink a {
float: right;
text-align: center;
color: #FFFFFF;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitsH4Zv3SmU7vQpfK05CrAYOoJSUYB_UbD61qmUhLO2zlN9ogTnBGZLeo5r9UfzR7yLo4cFXQmcGb0Ox1DUAwcHNCVoXAwL2Ja6W_JtWiWHq3zzMfldYnKmp16Jls7JuVwFbv_HeUjAI2h/s1600/readon-bg.gif)no-repeat center left #cc0000;
width: 90px;
height: 20px;
line-height: 20px;
display: inline;
text-transform: uppercase;
font-size: 10px;
text-decoration: none;
margin-top:10px;
}

Langkah 2:
Cari kode </head> copy dan paste code berikut di atasnya

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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>

Langkah 3:
Cari kode berikut <data:post.body/> hapus kemudian copy dan paste kode berikut

<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...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>


Simplan template dan lihat hasilnya, postingan kita akan terpenggal dengan sendirinya tanpa memasukkan script apapun. Masuk ke pengaturan>Format pastikan pada kotak templat entri, kotak pada bagian paling bawah halaman kosong. Semoga berkenan..

0 Responses so far.

Post a Comment