Membuat Related Post

Artikel Terkait (Related Post) adalah suatu daftar beberapa judul artikel yang masih ada hubungannya dengan judul artikel yang sedang dibaca pada saat itu. Dan biasanya terletak langsung dibawah artikel tersebut.

Tanpa panjang lebar lagi. Ikuti langkah-langkahnya berikut ini :

• Seperti biasa Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang expand template widget )...
• Backup dahulu template widget-nya ke notepad ( untuk antisipasi )...
• Cari script ini "</head>" jika sudah ketemu copy script dibawah ini di atas kode "</head>" 

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

• Kemudian Cari lagi script ini  "<data:post.body/>" lalu Copy lagi script dibawah ini sesudah script "<data:post.body/>"..

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4><i>Related Post..!!</i></h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

membuat auto read more

Berbeda dengan yang sebelumnya yaitu cara memberi read more pada posting. Cara membuat auto read more kali ini agak ribet dibanding dengan cara sebalumnya karena agak membutuhkan ketelitian untuk menempatkan script-script tersebut (hehehe). Membuat auto read more kali ini memang dibilang lebih praktis karena apa, jika read more terdahulu harus menggunakan cara manual untuk memasang fungsi auto read more tersebut ke setiap posting.

Kelebihan dari fungsi auto read more kali ini yaitu kita bisa mengatur berapa banyak karakter yang akan ditampilkan. Ada karakter yang bisa ditampilkan jika ada sebuah gambar dalam postingan yang anda buat. Dan adapula yang tanpa menampilkan gambar. Memang cara membuat fungsi auto read more kali ini agak rumit tapi ada sisi positifnya juga yaitu kita tidak perlu lagi membuat fungsi read more pada setiap posting .

Tidak perlu membahas terlalu panjang lebar, mungkin alangkah baiknya jika langsung ke tkp. jika anda sudah membuat fungsi read more sebulumnya maka dikembalikan lagi ke bentuk semula. 

Pertama-tama beri tanda centang pada "Expand widget template".

Cari kode </head> (untuk lebih mudah tekan ctrl+f) kemudian letakan script dibawah ini di atas 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> 

kemudian cari kode dibawah ini <data:post.body/>. Jika sudah ketemu, maka ganti kode <data:post.body/> dengan semua kode dibawah 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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Setelah selesai tekan save template.

NB :
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel).

Dengan keterangan di atas anda dapat merubah script fungsi auto read more sesuka hati.
Selamat mencoba.. :-)
 

Menambah Emoticon di Kotak Komentar

Cara memasang emoticon pada kotak momentar blog tidaklah sulit walaupun ada banyak kode yang harus ditanam kedalam template anda, saya yakin anda semua pasti bisa melakukanya, berikut ini saya akan menjelaskan cara memasang emoticon lucu pada kotak komentar di blog teman.

Caranya sebagai berikut :

• Login ke akun blog kalian
• Pilih tata letak
• Pilih edit html dan centang expland template widget.
• Cari kode </body> , kemudian
• Anda copy kode dibawah ini dan letakan diatas kode  </body>

<script src='http://sites.google.com/site/gudangfathur/kode/emoticon-trik.js' type='text/javascript'/>

• Anda download dulu kode emoticonnya
  
• Lalu cari kode seperti ini <b:if cond='data:post.embedCommentForm'>
• Terakhir copy semua kode yang sudah anda download tadi dan letakkan di atas kode <b:if cond='data:post.embedCommentForm'> 

-Selamat Mencoba-