Gambar di atas adalah contoh artikel terkait di bawah postingan / atau artikel sejenis yang muncul di bawah postingan / di akhir setiap postingan yang sedang kita baca, seperti yang bisa sobat lihat di akhir postingan yang sedang sobat baca ini. Lalu bagaimana cara membuat artikel terkait di bawah postingan blog seperti gambar di atas atau seperti di blog ini???? Tenang sob, caranya mudah banget ko', tips trik ini saya dapat dari blog nya hompimpaalaihumgambreng.blogspot.com.
Berikut ini cara membuat artikel terkait di bawah postingan:
1) Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget
2) Copy kode di bawah ini, kemudian letakkan tepat di atas kode </style> atau ]]></b:skin> pada edit html sobat:
#mamas-topik{margin-top:100px;}
.paling-ganteng{
border:2px solid #666;
padding:5px;
background-color:#efefef;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:inset 0 0 7px #666;
-moz-box-shadow:inset 0 0 7px #666;
-webkit-box-shadow:inset 0 0 7px #666;
}
.paling-ganteng:hover{background:#f9f9f9;}
.sedunia{
padding:10px;
border:1px solid #bbb;
height:165px;
overflow:auto;
}
3) Selanjutnya copy kode berikut:
<b:if cond='data:blog.pageType == "item"'>
<div id='mamas-topik'>
<H2>Tips tricks yang populer lainnya:</H2><div class='paling-ganteng'>
<div class='sedunia'>
<div id='hompimpa'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 7;var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 7;
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('hompimpa').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>
</div>
</b:if>
4) Kemudian letakkan kode tersebut tepat di bawah kode yang tampak seperti di bawah ini:
<data:post.body/>
atau seperti ini:
<p><data:post.body/></p>
atau seperti ini:
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
5) Klik Simpan Template dan lihat hasilnya (pada halaman item).
Note:
- ganti tulisan yang berwarna merah dengan kata-kata sobat sendiri yang sobat inginkan
- Jika sobat tidak ingin menggunakan scroll bar di elemen ini, hapus saja deklarasi overflow:auto; dan ganti value 165px dalam properti height: dengan auto sehingga hasilnya akan seperti ini:
.sedunia{
padding:10px;
border:1px solid #bbb;
height:auto;
}
Dengan demikian tampilan scroll bar akan hilang, sementara tinggi artikel / posting terkait sobat akan menyesuaikan diri dengan banyaknya daftar yang ada di dalamnya. - sementara untuk angka-angka yang berwarna biru yang ada pada kode no 3 di atas (7, 10, 50, 7) bisa sobat ganti, atau kalau tidak mau diganti juga tidak apa2.
