S
ebelumnya di blog ini telah dibahas mengenai cara memasang artikel terkait di blog. Bila kita sudah mempunyai artikel dengan label yang sama sebanyak lebih dari 25 buah misalnya, maka artikel-artikel yang ditampilkan akan terlihat panjang ke bawah sehingga terkesan memakan tempat. Nah, untuk menghemat ruangan pada area di bawah posting tersebut, kita dapat memberi atau membuatkan scroll box atau kotak berpenggulung pada widget artikel terkait tersebut.Untuk membuat scroll box yang dimaksud, kita perlu menyisipkan kode tertentu dalam kode script widget artikel terkait tersebut. Kode yang dimaksud adalah <div style=margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;> dan </div>.
- height:200px merupakan tinggi scroll box sebesar 200 piksel, Anda dapat menggantinya sesuai selera Anda.
- overflow:auto jika banyaknya artikel terkait telah melebihi tinggi scroll box, maka akan terbentuk scroll atau penggulung secara otomatis.
- border:1px solid #ccc merupakan atribut untuk kotak atau box yang terbentuk dengan tebal 1 piksel bergaya solid dan berwarna #ccc, silakan disesuaikan bila Anda menginginkannya.
Bila kode tersebut disisipkan pada script artikel terkait maka hasilnya akan seperti di bawah ini.
<b:if cond=data:blog.pageType == "item">
<div class=similar>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<div class=widget-content related-by-cat>
<h3>Related Posts / Artikel Terkait :</h3>
<div class=similar>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<div class=widget-content related-by-cat>
<h3>Related Posts / Artikel Terkait :</h3>
<div style=margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;>
<div id=data2007/><br/><br/>
<div id=hoctro style=display:none;>
Widget by <u><a href=http://hoctro.blogspot.com>Hoctro</a></u> | <u><a href=http://www.jackbook.com/ title=Related Posts on Blogger Modified by JackBook.Com. Read More?>Jack Book</a></u>
</div>
<script type=text/javascript>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 40;
maxNumberOfPostsPerLabel = 40;
maxNumberOfLabels = 40;
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('data2007').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 id=data2007/><br/><br/>
<div id=hoctro style=display:none;>
Widget by <u><a href=http://hoctro.blogspot.com>Hoctro</a></u> | <u><a href=http://www.jackbook.com/ title=Related Posts on Blogger Modified by JackBook.Com. Read More?>Jack Book</a></u>
</div>
<script type=text/javascript>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 40;
maxNumberOfPostsPerLabel = 40;
maxNumberOfLabels = 40;
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('data2007').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>
</div>
</div>
</b:if>
</div>
</div>
</b:if>
Hal penting yang harus dipersiapkan adalah sebuah blog dari blogger, jika belum mempunyai blog gratis dari blogger anda bisa membuatnya terlebih dahulu (lihat cara : panduan membuat blog di blogger). Setelah itu, yang harus dilakukan ialah membuat subdomain di cpanel hosting. Apabila kedua hal tersebut sudah dilakukan, maka berikut ini langkah langkahnya :
Alasan yang pertama adalah kita mampu menulis. Memang... salah satu syarat menjadi blogger adalah suka menulis. Banyak sekali orang yang tidak suka menulis, melainkan hanya suka membaca ataupun menonton, dalam hal ini otomatis kita lebih unggul dari mereka. Walaupun tulisan kita tidak sebagus wartawan, sastrawan, bahkan pujangga, namun sekali lagi kita tetap lebih unggul dari mereka, dan inilah kelebihan kita sebagai blogger.
