Caranya adalah sebagai berikut :
1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Lalu cari kode : <data:post.body/> , bagi yang sudah memasang read more akan ada dua kode nah ambil kode yang pertama, lalu copy kode berikut ini , di bawah kode : <data:post.body/>
<!-- Related Posts Scroll Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait :</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>
<!-- Related Posts Scroll Code End-->
NB:
► Silahkan ganti tulisan yang berwarna merah sesuai kehendak sahabat..
► Jika Nanti Artikel Terkait diatas Tidak Muncul dibawah Posting anda, maka kode diatas sobat simpan dibawah Kode : <data:post.body/> yang 'kedua' (lebih tepatnya di bawah tag </b:if> ).
7. Selanjutnya cari kode : ]]></b:skin> lalu copy code di bawah ini dan letakkan di atas kode : ]]></b:skin>
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;NB:
background-color: #666;-moz-border-radius:5px; margin:5px;opacity:0.9; filter:alpha(opacity=40); this.style.opacity=6;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}
.rbbox:hover{background:url(http://i492.photobucket.com/albums/rr288/angger07/EmoExcited.gif) no-repeat right bottom #fff;-moz-border-radius:5px;margin:5px;padding:5px;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000;transform:rotate(-3deg); -moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -o-transform:rotate(-3deg)}
► Teks yang berwarna merah itu adlh gambar yg akan muncul saat 'Mouse' disorot.
► Teks yang berwarna Hijau itu adlh warna 'Box Shadow' sebelum atau saat 'Mouse' disorot , sobat bisa menggantinya dengan warna lain. Klik Disini untuk melihat warna. untuk lebih jelasnya sobat bisa lihat trik membuat Box Hover. disini.
► Sedangkan Teks yang berwarna Biru, itu adlh 'Rotate Miring' saat 'Mouse' disorot.makin besar angkanya, maka akan semakin Miring, sobat tinggal merubah angkanya. untuk lebih jelasnya mengenai 'Rotate Miring', sobat bisa lihat langsung disini.
8. Save
♂ Good Luck ♀
Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
Tips Blogger
- Scroll Tampil Dipostingan Jika Diperlukan
- Membuat background Pada Judul Sidebar
- Menambahkan Twitter Button di Blog
- Membuat Saving Energy Dengan Gambar Sendiri
- Fixed Guestbook Slide Effect With jQuery
- Naruto Emot Untuk Komentar
- Efek Animasi Dasar Pada Blog
- Cara Mudah Membuat Tool Tip Dengan CSS
- Cara Mudah Membuat Textarea
- Membuat Menu Iklan (jQuery Ads Popout)
- Cara Membuat Slideshow Gambar (with jQuery)
- Membuat Simple Menu
- Efek-efek Tulisan Menggunakan CSS3
- Membuat Menu Daftar Isi Jtoctree
- Image Zoom Effect With Jquery
- Shoutbox Light Effect
- Membuat Hover Image CSS3 Pada Blog (Seperti Blog ini )
- Bertabur Cinta
- Light Hover Horizontal Menu With CSS For Blogger
- Cara Memindah-Mindahkankan Gambar Dengan jQuery
- Cara mudah memasukkan banyak Tab Widget pada sidebar
- Cara Pasang Efek Kupu - Kupu Berterbangan
- Merobah Domain Menjadi CO.TV
- Cara Memasang Efek Bintang Berjatuhan di Blog
- Make Border-Radius