Cara Membuat Readmore

Sudah kita ketahui Readmore membuat postingan kita di homepage menjadi terlihat singkat, dan simple. Tanpa readmore, pengunjung blog langsung melihat semua isi posting pada homepage.. Supaya pengunjung blog tidak langsung melihat semua isi posting pada homepage, maka kita akan membuat Readmore. Berikut caranya:
1. Cari kode </head>, letakkan kode berikut di atas kode </head>

<!-- Auto read more script -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == "yes") {
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>
<!-- Auto read more script -->

2. Cari kode <data:post.body/>  , dan ganti kode <data:post.body/> dengan kode berikut:

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
</b:if>
<!-- Auto read more End -->

NB: KODE <DATA:POST.BODY/> ADA 3, GANTI YANG KE 3.

Semoga bermanfaat :)

Baca selengkapnya »

Cara Membuat Breadcrumbs SEO Friendly di Blog

Breadcrumbs SEO Friendly? Siapa yang tidak tahu Breadcrumbs... Yap, Breadcrumbs membuat blog kita menjadi SEO Friendly dan membuat robot Google akan mudah mencari blog kita dengan menggunakan SEO Friendly... Bagi anda yang ingin membuat Breadcrumbs SEO Friendly, simak berikut ini:

1.Login ke Blogger
2.Pilih Template
3.Klik Edit HTML
4.Cari kode ]]></b:skin>
5.Letakkan kode dibawah ini di atas kode ]]></b:skin>
 

.breadcrumbs{
padding:0px 5px 5px 0;
margin-bottom:20px;
font-size:11px;
color:#5B5B5B;
border-bottom:1px dotted #bbb;
}

7.Cari kode di bawah ini

   <b:includable id='post' var='post'>
  <div class='post'>

8.Letakkan kode dibawah ini diatas kode diatas

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url' title='Home'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' expr:title='data:label.name' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>

9.Pratinjau untuk melihat hasilnya
10.Jika sudah cocok, Simpan Template

Semoga Bermanfaat :)

Baca selengkapnya »

Cara Mengatur Jarak Sidebar Pada Blog

Tentu saja banyak para sobat blogger mengatur jarak sidebarnya masing-masing, supaya terlihat cantik, simple. dan tidak membingungkan bila sidebar dengan jarak yang dekat. Baik langsung saja ke caranya:

1.Login Blogger
2.Pilih Template > Edit HTML
3.Cari kode ]]></b:skin> (CTRL+F SUPAYA MUDAH DAN CEPAT)
4.Jika sudah ketemu , tambahkan kode berikut di atas kode ]]></b:skin>

.main-inner .widget {
margin: 15px 0px;
} 

NOTE: SESUAIKAN DENGAN SELERA ANDA

5.Klik Pratinjau untuk melihat hasilnya
6.Jika sudah cocok Simpan Template
7.Selesai

Semoga bermanfaat :)

Baca selengkapnya »