Cara Memasang Tracker atau Sitemeter

Tracker adalah sebuah alat yang berfungsi untuk mencatat jumlah pengunjung yang datang ke blog kita. Dengan adanya alat ini, maka kita bisa mengetahui ada berapa banyak pengunjung yang datang ke blog kita dalam satu hari, satu minggu, dan satu bulan. Salah satu tracker yang cukup bagus dan banyak digunakan oleh blogger saat ini adalah Sitemeter.

Sitemeter ini tergolong komplit karena selain bisa melacak jumlah pengunjung yang datang dalam satu hari, satu minggu, satu bulan maupun satu tahun. Kita juga bisa melihat dari mana asal pengunjung, menggunakan browser apa, domain apa, lamanya berkunjung dan lain-lain. Selain itu, kita juga bisa melihat pengunjung kita berdasarkan peta dunia, lokasi, entry pages, exit pages, dan lain-lain.

Bagi anda yang tertarik untuk memasang tracker ini. Silahkan ikuti langkah-langkah berikut:

1. Masuk ke situs http://www.sitemeter.com.

2. Klik Sign Up


3. Klik Sign Up lagi pada Site Meter Basic Free

4. Isi data blog anda lalu klik Next

5. Isi data pribadi anda lalu klik Next

6. Klik Next lagi jika data yang anda isi sudah benar

7. Kemudian anda akan mendapat pesan Success! Thank You dan username dan password anda sudah dikirim ke email anda. Anda bisa mengubah passwordnya di menu manager -> password bila perlu.

8. Klik menu manager lalu klik meter style

9. Pilih bentuk sitemeter yang anda inginkan lalu klik Select

10. Klik menu HTML Code

16. Copy semua kode HTML pada kotak "Site Meter Regular HTML" lalu pastekan ke blog anda.

17. Selesai.

Untuk melihat statistik pengunjung blog anda. Anda bisa langsung klik gambar sitemeter pada pada blog anda untuk melihatnya.

Selamat mencoba.

Read More

Memasang Profil Facebook Di Blog

Siapa sih yang tidak kenal dengan Facebook? Social network yang satu ini sedang naik daun belakangan ini terutama di Indonesia. Saya yakin kebanyakan dari anda pasti sudah pernah mendengarkannya. Bahkan banyak diantara anda yang sudah mempunyai account disana.

Ketika anda melakukan blogwalking pasti pernah melihat blogger yang memasang profil Facebook di blognya. Ini agar pengunjung mudah untuk menghubunginya dan sekaligus membangun komunitas.

Bagi anda yang memiliki akun di Facebook dan ingin memasang profil Facebook anda di blog. Silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Facebook. Lalu pilih menu Profile

2. Kemudian klik Create a Profile Badge yang terletak dibawah menu "Notes"

3. Klik Create Badge

4. Setting tampilan yang anda inginkan dengan memilih Layout, Format (dibiarkan image saja), dan Items yang mau ditampilkan.


5. Jika sudah klik Save kemudian copy kode HTML yang diberikan lalu pastekan ke blog anda.

6. Selesai.

Selamat mencoba.

Read More

Cara Membagi Sidebar Menjadi 2 kolom

Ok.
1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.

Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.

Sebagai contoh nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing-masing kolom akan kita beri margin sebesar 10px agar terdapat ruang jarak. Sehingga sekarang lebar masing2 sidebar menjadi 117px.

Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.

5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper2 {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

6. Ganti nilai width masing-masing kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper2 {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
margin:0px 20px 0px 0px;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

7. Setelah itu, cari kode

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>

8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.

9. Copy kode yang berwarna biru diatas lalu letakkan dibawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

10. Jika sudah klik Save Template.
11. Selesai. Klik Page Element untuk melihat hasilnya.


Selamat mencoba..

Read More

Menghilangkan Atau Menyembunyikan Nav Bar Blogger

Nav Bar atau navigation bar adalah sebuah toolbar yang disediakan blogger untuk mempermudah kita mencari atau menjelajah dunia blogger. Bagi yang menggunakan template standar dari blogger biasanya toolbar ini akan muncul di halaman atas blog. Jika anda merasa kurang nyaman dengan keberadaan nav bar ini, anda bisa menghilangkannya dengan cara berikut:

1. Login ke Blogger. Klik menu Layout -> Edit HTML
2. Letakkan kode dibawah ini diantara <head> dan </head>.

#navbar-iframe {
height:0px;
visibility:hidden;
display:none}

3. Jika kurang jelas, letakkan kodenya diantara dan body seperti yang ditunjukkan pada gambar dibawah ini


4. Jika sudah, klik Save Template.
5. Selesai

Read More

Cara Menghilangkan Link Subscribe To Post (Atom)

Biasanya pada template blogger akan terdapat tulisan subscribe to: post(atom) atau berlangganan : post(atom) yang terletak dibawah postingan. Tulisan ini berfungsi sebagai feed dari blog anda. Tujuannya agar pengunjung dapat berlangganan artikel blog anda. Tetapi jika anda sudah menggunakan layanan feed dari Feedburner. Maka kehadiran dari link ini sudah tidak terlalu penting lagi.

Bagi anda yang merasa tulisan ini tidak terlalu penting untuk ditampilkan, anda bisa menghilangkannya dengan cara berikut ini:

1. Login ke Blogger. Klik menu Design -> Edit HTML
2. Beri tanda centang pada "Expand Widget Template"
3. Lalu cari kode di bawah ini:

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

4. Kalau sudah ketemu, hapus kode tersebut lalu klik Save Template
5. Selesai. Silahkan klik View Blog untuk melihat hasilnya.

Read More

Cara Mengganti Link Older Post dan Newer Post Dengan Icon Gambar

Secara default, setiap template blogger akan dilengkapi dengan link older post dan newer post yang masing-masing berfungsi untuk menampilkan postingan lama dan baru.

Nah agar tampilannya lebih menarik, anda bisa menggantinya dengan icon-icon mungil. Contohnya seperti gambar dibawah ini.


Menarik bukan? Klu anda tertarik silahkan ikuti langkah-langkah dibawah ini

1. Pada menu klik Design -> Edit HTML
2. Biar aman backup dulu template anda dengan klik Download Full Template
3. Beri tanda centang pada kotak "Expand Widget Template"
4. Lalu cari kode <data:olderPageTitle/>5. Kalau sudah ketemu ganti kode tersebut dengan kode icon dibawah ini.


kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYxPmmKNtkG1dgtmi5fTDzM2oHUwIJo4i0vIitqAASBChb-gjjPfmj5L0QN1LfpDrO-mn6ZP1eC4GDQavazXah7cmSrPtZPOTp10qwfFKTCMGe9KAkNtoBX3lCU-gsESvBKkyGcD2OmFtJ/" border="0" >

kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPYC9wzTJp51cuPgGyeZY8kO6ZD6lTrVU5tUm0VFnN5N6jcS7SHe3OuXW6ekWGlVW5mMBSK4rCH89RkOm7VWtaOaiDZAvBqoyhTlMAU_7R2_y1iB3VoTUjSJclcN6s-vmuhF5BRqpG-kcX/" border="0" />

kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhExpoqNutcaKsWqPzoTDBe5xPU9nDJcKCSA5nqivWn60ALWQw7JUQrCtkofmjjv60HjTrjCSreWma6xmfeiIapzvvXasmj3PSI5LrBVdz7RJEw99uEI4S6cyTliwTYl51FQI1fPliLTsGg/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w-gIXWrr4Ojvdzt2uIMF8tA5pS_vSYgK8qh6R1sgTCkbiFvz9dQFUbewwEiDhZVJxKCGkMClD1puOH0hByIN9BKhLkDU4mxWPDI3LYHIulzzy8cWCkBtNTWoCa8Bvt9-bQBi-xt22t6h/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvQGwiOg2lJhyZNrChuKCdxki8uw7CLU5J5NncI3jB2KxDJp_Ngb_Ij89wp76PPhTypMZCOYJGzIokdUYj2H5sjOSjXuRjzC7FP2d1vbzJmH9J-Z7uCA4Ry_KKAPhEUNV1jbtujUJ-dIM/" border="0" />

6. Contohnya anda mau menggunakan icon maka ganti kodenya dengan <img src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/bt-right.png" border="0" />

7. Untuk mengganti link newer post. Cari kode <data:newerPageTitle/> lalu ganti dengan kode icon dibawah ini.


Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFdQU7hkHqldd-detQsiHkWZkQ2nnFIUyPKPVlOFSZtcarr45CYXj6Y5Fg9XHyO0xnnM7b4wQ8V2DGFPUZIWD1IlFYoCY-3N4Xawwixb55sqOSXODS_1RXpbASGTAQ52Zn6U8l1qNzhH-u/" border="0" /></a>

Kode:

&lt;img src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggE3e9HfVRj1rmBGpstM6PVm5e2WEG3fjGnN5sIZoV9WL2hvZ3Cf77Fcd9-MTIvguqZTG9HJGNfI1YOAar9G6t_CwyY5-cgeXT-m7lXZTRzYb4oyVaOqCl6R3f3LFXbFxPrH7h9okWHELc/&quot; border=&quot;0&quot; /&gt;

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXGExKoGIhAtGSqO7TzFxi3KscKDtDlnqZUl6Xy22ET0LbGE9f6vVYBlF3CzG3lyVSm9mk0J01f6i2XoUWqSGJthpnWlC8q_cDy8PbyQ7n6C18IrTQWlu1Xr-xdlvSYiPF_A3xbVoKxZWh/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJRsDScyT6YQo9kK7_xu428a6ngiQT7voVq4ffQpLqZPCctIVcTKjKBKyTs5EuHUPY4CzP7zlfmBBNz44nOkFMgaawf-ryKkfLA9pc3kRn8e-lHy7ElCxhyjKj8mQPyNFzHnzExDeBp7t/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivj7GQFfxpD7p_v0ry36CkKHlNEoV28hk4rJo26pmNo6hT2IH_gyVVGc9XCX5E8vr3ybEWIdJfHkQAJLidRMCyTb6L6AUfmoICwVSpYIIyeQoUEcTj82Va8OLhmBsl4fyDr0RIwMNGdd5z/" border="0" />

8. Sepertinya kurang maknyus jika tidak mengganti link home-nya. Ok, untuk mengganti link home cari kode <data:homeMsg/>. Biasanya ada 2 kode yang sama. Ganti kode yang pertama dengan kode icon dibawah ini.


Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA_TUc98OqLdm8quI-eb1sIeFifCeHhBJrDizfZBiNqAuwNpLCRF3dJ2Tnl_YyxNw7TkiqGv5CfY_yvmxaMEUI7mCXbvkFbYDrZfv59InnC3SMd8G-PHltIduh-uG7Er1Ay63BWgZBiCrr/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG9vu66xW8QTBsmkax5imFNswUAz52T-5z6uGVkR2IwUlCzJ1J4v15bOQOR5XGoJpJ8TSCK0hvhb9Dhs4hc0o7pMfoZ7_cPCKkbz6pPkKR3a2y-fFEQQI78hrNHB4qcfglqv8Nff_cYqgy/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-DDUgoPPajVAdjnD6Qz9DpY1Gh9ujbqpxpytvx0CqDSbECQG70Tzb7ZHemn1l-cl05mGyJEoN8ZXos-XOlBWZI05vhSLvlCo4J6csh_3w-YzEelch-0MO44DF84CsDi700X07uNszwzz9/" border="0" />

Kode:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6mWVNlFIdwI5s4055itwKS8PyqgCkc0r3B016f_qBi8qtFJ8yNnkwoRy39mo5a3Gi5iWyZpCnnh3ATfHXfOPDP5iqFyOImzDLFiHjPQ40kJVTQotl9hqIshsV0hLOh7JgbNXemUIM8KO/" border="0" />

9. Setelah itu, klik Save Template.
10. Selesai. Silahkan klik View Blog untuk melihat hasilnya.

Untuk mendapatkan icon-icon cantik lainnya. Coba kunjungi http://www.iconarchive.com. Disana tersedia ribuan icon yang bisa anda download secara gratis.

Selamat mencoba..

Read More

Cara Memasang Recent Comment via Script

Karena sebelumnya saya sudah memposting tentang cara memasang recent post via script. Maka nggak komplit rasanya kalau saya tidak membahas tentang cara memasang recent comment via script.

Bagi anda yang pernah membaca postingan saya tentang cara memasang recent comments via feed. Mungkin akan bertanya apa perbedaan antara recent comment via feed dan script.

Untuk menjawab pertanyaan ini silahkan baca postingan saya tentang cara memasang recent post via script. Anda akan tahu jawabannya.

Ok tanpa panjang lebar, bagi anda ingin memasang recent comments via script langsung saja ikuti langkah-langkah dibawah ini:

1. Login ke Blogger lalu klik Design -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript
3. Copy dan paste kode dibawah ini ke dalam kotak "content".

<script style=text/javascript src=http://hbhost.googlecode.com/files/recent-comments.js></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://namabloganda.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script> <style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} </style>

Keterangan:
Angka 5 pada a_rc menunjukkan jumlah komentar yang muncul. Ganti nilainya bila perlu.

false pada m_rc menunjukkan tanggal komentar tidak ditampilkan. Ketik "true" jika anda ingin menampilkan tanggalnya.

true pada n_rc menunjukkan judul postingan ditampilkan. Ketik "false" jika anda tidak mau menampilkannya.

Jangan lupa ganti tulisan yang dicetak tebal dengan nama blog anda.

4. Kalau sudah klik Save dan lihat hasilnya.

Selamat mencoba..

Read More

Cara Memasang Recent Post Via Script

Pada postingan sebelumnya saya pernah membahas mengenai cara memasang recent posts via feed. Nah pada postingan ini saya akan membahas tentang cara memasang recent post via script.

Apa perbedaan antara recent post via feed dengan recent post via script?
Kedua cara ini masing-masing memiliki keunggulan dan kelemahan.
Kalau recent post via feed, keunggulannya adalah tidak memberatkan loading page tapi loading postingannya sangat lama sedangkan recent post via script, loading postingan cepat tetapi sedikit memberatkan loading blog.

Bagi anda yang mengutamakan kecepatan loading blog, gunakan recent post via feed. Tetapi jika anda ingin postingan terbarunya lebih cepat nongol maka gunakan cara ini.

1. Login ke Blogger lalu klik Layout -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript
3. Copy kode dibawah ini dan paste ke dalam kotak "content".

<script style="text/javascript" src="http://hbhost.googlecode.com/files/recent_posts.js"></script><script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 50;var standardstyling = true;</script><script src="http://namabloganda.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Keterangan:
Angka 5 pada numposts menunjukkan jumlah postingan yang muncul. Ganti sesuai keinginan.
false pada showpostdate menunjukkan tanggal postingan tidak ditampilkan. Ganti "true" jika anda ingin menampilkan tanggal postingan.
false pada showpostsummary menunjukkan isi postingan tidak ditampilkan. Ganti "true" jika anda ingin menampilkannya.
Angka 50 pada numcharts menunjukkan jumlah huruf yang tampil. Ini hanya berlaku jika showpostsummary=true.
Ganti tulisan yang dicetak tebal dengan nama blog anda.

4. Kalau sudah, klik Save. Selesai

Read More

Cara Membuat Recent Post Via Feed

Pada postingan sebelumnya saya sudah pernah membahas tentang cara memasang recent comments di blog via feed. Dan kali ini saya akan membahas tentang cara memasang recent posts via feed. Hampir sama dengan recent comments, hanya saja recent post untuk menampilkan postingan terbaru di blog.

Dengan memasang Recent posts di blog maka pengunjung dapat dengan cepat mengetaui topik apa yang sedang dibahas di blog anda.

Untuk memasang recent post via feed, caranya hampir sama dengan cara memasang recent comment. Bedanya adalah pada kotak "Feed Url" isi dengan

http://namabloganda.com/feeds/posts/default (jika menggunakan feed standar dari blogger)

atau

http://feeds.feedburner.com/NamaFeed (jika menggunakan feed dari feedburner)

Ingat:
Ganti teks yang dicetak tebal dengan nama blog atau nama feed anda.

Selamat mencoba.

Read More

Cara Membuat Recent Comment Via Feed

Recent comment atau komentar terbaru adalah sebuah fungsi untuk menampilkan komentar terbaru secara real-time pada blog kita. Jadi jika ada pengunjung yang berkomentar di postingan kita maka kita bisa langsung tahu dan bisa langsung untuk menanggapinya. Cara ini sangat berguna bagi blog yang sering mendapat komentar.

Sebenarnya ada cara lain untuk mengetahui komentar masuk yaitu dengan fasilitas pemberitahuan komentar via email yang disediakan oleh blogger. Namun cara ini kurang efektif karena kita harus selalu login ke email untuk mengeceknya.

Nah bagi anda yang tertarik untuk memasang recent comment pada blog anda silahkan ikuti langkah-langkah dibawah ini:

1. Pada menu Blogger. Klik Layout -> Page elements
2. Klik Add a Gadget lalu klik Feed
3. Pada kotak "Feed Url" masukkan

http://namabloganda.com/feeds/comments/default

Ingat:
Ganti tulisan yang dicetak tebal dengan nama blog anda

4. Setelah itu, klik Continue kemudian akan muncul preview komentar anda.
5. Ganti titlenya jika perlu, jika tidak silahkan klik Save
6. Selesai.


Selamat Mencoba.

Read More

Cara Memasang Related Posts atau Artikel Yang Berkaitan

Related post atau artikel yang berkaitan merupakan sebuah cara untuk menampilkan link-link artikel yang berkaitan dengan artikel utama dan biasanya terletak dibawah artikel utama.

Pemasangan related post ini biasanya dikelompokkan berdasarkan label atau kategori. Jadi jika ada salah satu artikel dari label tertentu ditampilkan maka artikel-artikel lain yang mempunyai label sama juga akan ikut muncul dibawah artikel tersebut.

Tujuan pemasangan related post ini agar pengunjung lebih mudah untuk mencari artikel yang berkaitan dengan artikel utama. Sehingga pengunjung tidak perlu report untuk mencari satu persatu artikel dalam menu label atau kategori.

Bagi yang masih bingung, silahkan lihat contohnya dibawah ini.


Gmn uda jelaskan? Nah bagi yang tertarik memasang related posts di blog anda, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger. Pilih menu Design -> Edit HTML
2. Back-up terlebih dahulu template Anda dengan cara klik Download Full Template.
3. Setelah itu, beri tanda centang pada kotak "Expand Widgets Template".
4. Cari kode <data:post.body/>
5. Jika sudah ketemu, letakkan kode dibawah ini dibawah <data:post.body/>

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

<div class='widget-content'>
<h3>Artikel yang berkaitan</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Catatan:
Jika blog anda menggunakan kode read more maka biasanya ada 2 kode <data:post.body/> Letakkan kode diatas pada kode yang pertama.

6. Kalau sudah, klik Save Template lalu klik View Blog untuk melihat hasilnya.

Anda bisa mengganti teks "Artikel yang berkaitan" pada kode diatas dengan teks lain sesuai dengan keinginan anda.


Selamat mencoba..

Read More

Yahoo Messenger Emoticons

Bagi anda yang suka bermain dengan smile icon atau emoticon. Berikut saya sudah siapkan semua kode yahoo emoticons disini. Anda tinggal copy kode emoticon yang anda inginkan ke blog atau situs social network yang mengsupport HTML seperti MySpace.com, Friendster, Yuwie, dll maka icon-icon lucu ini akan muncul.

Selamat berekspresi ria..

: senang
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" />

: sedih
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" />

: mengerlingkan mata
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" />

: tersenyum lebar
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" />

: mengedipkan mata
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" />

: peluk erat
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif" />

: bingung
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" />

: jatuh cinta
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" />

: pipi memerah
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" />

: menjulurkan lidah
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" />
: cium
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" />

: patah hati
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" />

: terkejut
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" />

: marah
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" />

: bangga diri
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" />

: keren
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" />

: cemas
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" />

: whew
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" />

: setan
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" />

: menangis
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" />

: tertawa
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" />

: wajah tanpa emosi
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" />

: menaikkan alis
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" />

: berguling dilantai
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" />

: malaikat
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" />

: kutu buku
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" />

: jangan bicara kesaya
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" />

: tidur
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif" />

: mata berputar
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif" />

: pecundang
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/30.gif" />

: mual
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif" />

: jangan bilang siapapun
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif" />

: ngambek
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif" />

: badut
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif" />

: konyol
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif" />

: pesta
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif" />

: mengantuk
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif" />

: ngiler
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif" />

: berpikir
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif" />

: waduh
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif" />

: tepuk tangan
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif" />

: ketakutan
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif" />

: terhipnotis
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif" />

: pembohong
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif" />

: menunggu
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif" />

: berkesah
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/46.gif" />

: phbbbt
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif" />

: koboi
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif" />

: babi
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif" />

: sapi
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/50.gif" />

: monyet
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/51.gif" />

: ayam
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/52.gif" />

: bunga mawar
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif" />

: daun
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/54.gif" />

: bendera
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/55.gif" />

: labu
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/56.gif" />

: kopi
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif" />

: ide cemerlang
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif" />

: tengkorak
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/59.gif" />

: serangga
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/60.gif" />

: alien
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/61.gif" />

: frustasi
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" />

: berdoa
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif" />

: mata duitan
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/64.gif" />

: bersiul
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif" />

: babak belur
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" />

: damai
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/67.gif" />

: nggak boleh
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif" />

: menari
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif" />

: siapa takut
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/70.gif" />

: hi hi hi
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" />

: hiro
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/72.gif" />

: billy
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/73.gif" />

: april
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/74.gif" />

: yin yang
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/75.gif" />

: cerewet
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/76.gif" />

: salut
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif" />

:-j ah bisa saja
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif" />

: bintang
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/79.gif" />

: sedang menelepon
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif" />

: telepon saya
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif" />

: putus asa
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif" />

: melambaikan tangan
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif" />

: time out
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif" />

: melamun
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif" />

:-?? saya tidak tahu
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif" />

: tidak mau dengar
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/107.gif" />

: anak anjing
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif" />

: tidak mau lihat
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif" />

: ayo cepat
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif" />

: metal
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif" />

: payah
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif" />

: hebat
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif" />

: bukan saya
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif" />

: lebah
<img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/115.gif" />

Read More