Cara Memasang Widget Related Post Dengan Scroll. Tips blog yang akan saya share kali ini adalah membuat atau memasang widget related post di bawah postingan blog dengan tambahan fungsi scroll sehingga memungkin bagi admin suatu blog untuk menampilkan lebih banyak lagi artikel yang terkait pada artikel yang sementara dibaca oleh pengunjung blog. Berbeda dengan widget related post yang pernah saya share sebelumnya yaitu Cara Memasang Widget Related Post Dengan Thumbnails, widget related post kali ini mungkin akan sedikit mengurangi waktu loading blog bila dibandingkan dengan yang sebelumnya. Jika ingin memasang widget related post ini pada blognya, silahkan baca dan praktekkan langkah-langkahnya di bawah ini.
Langkah Pertama
Silahkan login ke akun bloggernya. Pada halaman dasbor silahkan klik nama blog Anda yang akan dipasangkan widget related post ini. Setelah masuk pada halaman ikhtisar atau overview, pilih menu template lalu klik perintah edit html kemudian pilih perintah lanjutkan dan centang pilihan expand widget template.
Langkah Kedua
Pada halaman edit Html template blog, silahkan cari kode ]]></b:skin>. Supaya lebih mudah pencariannya, tekan ctrl+f atau F3 pada keyboard pada komputer Anda terus masukan kode tadi pada kotak pencariannya. Setelah ketemu kodenya, silahkan letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>.
Kode CSS Pertama :
.rbbox {border:1px solid #d8d8d8; padding:3px; background-color:#e0f8e0; -moz-border-radius:5px; margin:5px}Hasilnya nanti seperti gambar di bawah ini :
.rbbox:hover {background-color:#effbef}}
Kode CSS Kedua :
.rbbox {border: 1px solid #333; padding: 5px; background-color: #F2F2F2;-moz-border-radius:0px; margin:5px;}Hasilnya nanti seperti gambar di bawah ini :
.rbbox:hover {background-color: #F2F2F2;}
.rbbox ul li {display : block; background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png) no-repeat 0px 0; margin-left : -10px; padding-top : 0; padding-right : 0px; padding-bottom : 1px; padding-left : 10px; margin-bottom : 5px; line-height : 1em; border-bottom:1px dotted #cccccc;}
Silahkan pilih salah satu dari kedua kode CSS di atas lalu letakkan tepat di atas kode ]]></b:skin>.
Langkah Ketiga
Masih pada halaman edit html, silahkan cari lagi kode <data:post.body/> dan letakkan kode di bawah ini tepat di bawah kode <data:post.body/> tadi. Perlu diingat bahwa biasanya blog yang sudah dibuatkan readmore otomatis, kode <data:post.body/> ini akan terdapat dua sampai tiga kode. Jadi letakkan saja kode di bawah ini tepat di bawah kode <data:post.body/> yang kedua pada kode template blog Anda.
<b:if cond='data:blog.pageType == "item"'>Kalimat yang saya kasih warna biru, sobat bisa ganti dengan kalimat yang lain sesuai dengan selera sobat. Setelah kodenya diatur sesuai dengan keinginan sendiri, silahkan klik perintah simpan template.
<b>Artikel Lain Yang Berkaitan :</b>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 4;
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>
Demikian informasi dari saya tentang Cara Memasang Widget Related Post Dengan Scroll. Semoga bisa dipraktekkan pada blognya dan silahkan tanyakan bila ada kendala dalam proses pemasangan widget ini.
Jika ada pertanyaan lebih lanjut tentang permasalahan komputer dan internet, saya bisa dihubungi lewat akun Facebook dan Twitter saya.
Bagikan :
Jika Anda menyukai informasi yang ada di blog ini, silahkan daftarkan email Anda untuk berlangganan informasi terbaru via email dengan begitu Anda akan mendapat kiriman informasi setiap ada postingan terbaru yang terbit dari blog Tips Trik Komputer. Sebelum berlangganan artikel terbaru dengan blog ini, silakan baca dulu Cara Berlangganan Artikel Blog. Terima kasih sudah berlangganan postingan terbaru dari blog ini.
 |
