Kemudian pastekan script di bawah ini di dalam box HTML/Javascript

Ganti tulisan berwarna merah howfreeblogs.blogspot.com dengan alamat blog atau web anda dan terakhir lihat hasilnya. 

   

Ada pilihan untuk memasukan username, warna background, dan jumlah follower. Button ini banyak manfaatnya, dengan tampilan yang tidak menyita banyak tempat tapi fungsional, dengan mudah pembaca blog kita bisa mem-follow atau sekedar melihat profil kita di twitter dengan membuka tab baru yang minimize. Siapa tahu, follower kita bertambah dengan pesat.

-Cari tag 

 susah carinya? tekan CTRL+F untuk memudahkan

Biasanya ada diatas tag 

<!-- feed links -->

<b:include name='feedLinks'/>

Kurang Lebih Seperti ini

-Kemudian hapus kode merah dan simpan template dan lihat hasilnya

Setelah Anda ditetapkan pada lokasi after the jump dalam  waktu  posting,   Anda   siap    untuk  mempublikasikan      posting     Anda.        Setelah     penerbitan,  Anda akan melihat bahwa link  ditempatkan di mana Anda mengatur after the jump.
  

Penjelasan form :

Jika sudah selesai, klik tombol Get Code.

Akan muncul pop-up window berisi kode yang harus anda letakkan di blog. Ada kode HTML5, XFBML dan Iframe yang bisa anda pilih. Saya pilih format iframe agar mudah diletakkan di widget wordpress. Copy paste kode itu ke tempat yang anda inginkan.

 
1. Loging pada blog anda
2. Rancangan >> Edit HTML (centang "Expand Template Widget")
3. Masukan kode dibawah ini tepat dibawah kode ]]></b:skin>

<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>

4. Kemudian cari kode yang mirip seperti dibawah ini :

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

5. Terus ganti kode tersebut menjadi seperti ini :

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<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=15&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

NB : kode yang berwarna merah menyatakan banyak artikel terkait yang akan ditampilkan.

6. Simpan atau Save.

7. Selanjutnya buka menu tata letak >> tambah gadget (HTML/JavaScript) lalu masukkan kode dibawah ini.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

8. Beri judul dan simpan.

* Karena artikel terkait ini masih muncul di postingan dan homepage, jadi kita akan mensettingnya agar muncul hanya pada postingan saja.

Caranya :
1. Buka menu edit HTML (centang "Expand Template Widget")
2. Cari kode yang seperti ini :

<b:widget id='HTML10' locked='false' title='Artikel Terkait Sidebar' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

Keterangan : kode yang berwarna biru adalah judul widget artikel terkait tadi yang sobat buat. Kode HTML10 abaikan saja, karena tergantung pada banyak widget kita, kode yang berwarna merah adalah kode yang harus sobat sisipkan.

Optimasi kali ini sebenarnya bertujuan untuk mengurangi pesan kesalahan ketika browser melakukan rendering pada suatu halaman. Logikanya yaitu semakin sedikit kesalahan tentu akan semakin baik karena ini akan mengurangi kerja berat dari Browser atau paling tidak kita berusaha menghemat pemakaian Bandwith.

Google Page Speed

Untuk Tools Optimasi yang pertama,  biasanya menggunakan Google Page Speed, selain karena tools ini besutan langsung dari Google, tools ini juga memberikan informasi cukup lengkap mengenai laporan kesalahan pada halaman. Setiap halaman blog yang kita analisa secara otomatis akan dilaporkan kedalam tabel list. Page Speed akan memilah dan menginformasikan secara rinci apa saja kesalahan yang ditemukan, selain pesan kesalahan, disitu juga di informasikan pesan kebenaran, yang berarti ditemukan sebagian element halaman yang tidak perlu lagi diperbaiki karena dianggap sudah benar.

Halaman yang selesai dianalisa Google Page Speed biasanya akan diberi nilai (score). Nilai score terbaik adalah 100, ingat!! tidak mudah untuk bisa mencapai nilai 100,  saran saya cukuplah mencapai score antara 80-90/100, inipun sudah terbilang angka yang lumayan bagus. 

Lalu bagaimana memperbaiki kesalahan?

Setiap pesan error yang ditampilkan dalam list semuanya tentu sudah ada solusinya, misalkan pesan tersebut menampilkan "Remove unused CSS" yang berati kita diminta untuk membuang kode CSS yang tidak digunakan. Silahkan klik link yang  menampilkan kesalahan, secara otomatis Google akan memberikan solusi terbaik untuk mengatasi masalah tersebut. Nah, tugas kita tinggal pelajari saja intruksi dan tips optimasi dari Google.

Yahoo! YSlow

Selain Google Page Speed ada satu lagi tools yang biasanya saya gunakan yaitu Yahoo! YSlow. Pilihan pada YSlow karena saya menyadari tools ini dikembangkan langsung oleh Yahoo, tentu saja keakuratannya gak perlu diragukan lagi. Sebenarnya cara kerja YSlow mulai dari informasi laporan kesalahan dan tetek bengeknya hampir sama saja dengan Google Page Speed, keduanya sama-sama memberikan informasi perbaikan dan tentu saja cara menangani kesalahan. Perbedaan yang mecolok terletak pada pemberian Nilai halaman, jika Google Page Speed berdasarkan pada Score, Yahoo YSlow sendiri berdasarkan pada Grade A-F dimana nilai Grade A adalah nilai terbaik dan Grade F adalah nilai yang terjelek. Seperti saya bilang diatas tentu sulit sekali untuk mencapai nilai sempurna, saran cukup diantara Grade B-C saja.

Sekarang terserah anda untuk memilih dari kedua tools diatas, keduanya sama bagusnya. Hemat saya pilih salah satu saja, karena kedua tools diatas sudah pasti memberikan nilai score yang berbeda.

Cara Installasi:

Sebelum mencoba kedua Tools diatas pastikan rekan sudah menginstall firefox plugin untuk Firebug, Baiklah kalau sudah, silahkan install plugin untuk Google Page Speed dan Yahoo! YSlow.