Cara meringkas home page atau halaman pertama blog agar enak dipandang, Biasanya ada template yang home page/halaman home/atau halaman pertamanya memuat seluruh isi artikel jadi halaman pertama menjadi terlihat rusuh dan tidak enak dipandang. dan biasanya template bawaan blogger seperti itu.
Kali ini saya akan mebagikan cara meringkas halaman depan atau home page yang barang kali bermanfaat bagi shobat blogger yang ingin merapikan template yang shobat miliki.
Inilah contoh halaman yang yang home pagenya sudah di ringkas, pada halaman ini artikel sudah tertata rapi dengan tulisan "read more" dibawahnya. Untuk membuatnya silakansimak cara dibawah ini
1. Masuk ke dashboard blogger shobat.
2. Klik Template kemudian klik Edit Html
3. Cari kode </head> dengan cara ctrl + F kemudian ketikkan </head> lalu klik enter agar mencarinya lebih mudah dalam mencarinya.
4. Setelah ketemu kode </head> Copy dan pastekan kode dibawah ini tepat diatas / sebelum kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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>
5. Selanjutnya silakan shobat cari kode <data:post.body/> pada html shobat seperti biasa agar lebih mudah mencarinya dengan cara Ctrl+F
6. Jika sudah ketem ganti kode tersebut dengan kode ini
<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
7. Jika sudah klik Simpan Template, kemudian lihat perubahan yang terjadi pada blog shobat.
Jika cara ini tidak berhasil silakan shobat tanyakan atau langsung saja berkomentar melalui kolom komentar dibawah ini. Tapi seharusnya cara yang saya bagikan diatas berhasil. karena saya sudah mempraktekan cara yang saya bagikan di atas dan hasilnuya berhasil.
Salam sukses ^_^
Kali ini saya akan mebagikan cara meringkas halaman depan atau home page yang barang kali bermanfaat bagi shobat blogger yang ingin merapikan template yang shobat miliki.
Inilah contoh halaman yang yang home pagenya sudah di ringkas, pada halaman ini artikel sudah tertata rapi dengan tulisan "read more" dibawahnya. Untuk membuatnya silakansimak cara dibawah ini
1. Masuk ke dashboard blogger shobat.
2. Klik Template kemudian klik Edit Html
3. Cari kode </head> dengan cara ctrl + F kemudian ketikkan </head> lalu klik enter agar mencarinya lebih mudah dalam mencarinya.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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>
5. Selanjutnya silakan shobat cari kode <data:post.body/> pada html shobat seperti biasa agar lebih mudah mencarinya dengan cara Ctrl+F
6. Jika sudah ketem ganti kode tersebut dengan kode ini
<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
7. Jika sudah klik Simpan Template, kemudian lihat perubahan yang terjadi pada blog shobat.
Jika cara ini tidak berhasil silakan shobat tanyakan atau langsung saja berkomentar melalui kolom komentar dibawah ini. Tapi seharusnya cara yang saya bagikan diatas berhasil. karena saya sudah mempraktekan cara yang saya bagikan di atas dan hasilnuya berhasil.
Salam sukses ^_^
oke gan, salam knl jg
ReplyDeleteberhasil, thx gan
ReplyDeleteboleh juga dicoba, moga berhasil juga...
ReplyDeletesolder uap