Membuat Related Post Dibawah Posting Dengan Scroll

Related Post atau artikel terkait sering kita temui di blog-blog yang kita kunjungi. Ada yang meletakkannya di sidebar, di atas artikel dan ada juga yang meletakkan related post dibawah artikel/posting.

Disini ane ingin menulis cara membuat related post / artikel terkait / similiar post. terserah ente aja mau bilangnya apa.

Lalu apa bedanya dengan cara membuat related post di bawah artkel yang sudah ane tulis sebelumnya? bedanya yang kali ini kita membuat artikel terkait dibawah posting yang dilengkapi dengan fungsi scroll.

Memasukkan Tabel Ke Blog Dengan Kode HTML

Jika ingin memasukkan tabel dalam artike maupun di dalam widget yang ada di sidebar, pemilik blog di Blogspot harus menggunakan kode script atau HTML.

Entah dengan alasan ingin mempercantik tampilan, atau juga memang kebetulan artikel yang ditulis lagi memerlukan sebuah tabel, tidak ada salahnya untuk mempelajari cara-caranya.


Kode HTML untuk tabel bisa dibuat seperti berikut :

1 - Untuk table yang tidak pakai border (garis kotak) :

Membuat Spoiler Berisi Teks

Sering kita temui spoiler yang berisi teks. berbagai macam bentuk dan ukuran.

Spoiler berfungsi shor and hide (menampilkan dan menyembunyikan) elemen di posting maupun tempat lainnya Ini bisa menghemat tempat, dan juga bisa membuat blog kita bisa sedikit lebih ringan saat dibuka.


Selain teks biasa, spoiler juga bisa menyembunyikan file yang berbentuk kode HTML, seumpama tabel dll. namun di artikel ini saya cuma memberi contoh spoiler berisi teks. Sohib bisa mengganti isi spoiler dengan kreatifitas sohib sendiri.

Kalau ingin memasukkan spoiler yang berisi teks bisa ikuti caranya di bawah ini :

   1 - Spoiler sekali tampil (tidak bisa disembunyikan lagi setelah dibuka).

Kode :

<div style="border: 0px inset green; padding: 0px;"><div><button class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler." type="button"><span style="color:black;"><span style="color: black; font-weight: bold;"><blink>Nama Spoiler</blink></span></span></button></div><div id="spoiler" style="display: none;"><span>Masukkan teks atau apapun yang ingin di sembunyikan disini.</span></div></div>

Contoh jadi No 1 :

Masukkan teks atau apapun yang ingin di sembunyikan disini.

   2 -Spoiler biasa dengan border tanpa background.

Kode :

<div id="Spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Lihat lagi'; }" name="button" type="button" value="Nama Spoiler" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><p style="text-align: justify;">Masukkan teks yang ingin disembunyikan disini</p></div><div id="Tutup"></div></div></div>

Contoh jadi No 2 :

Masukkan teks yang ingin disembunyikan disini

   3 - Spoiler show hide biasa.

Kode :

 <div id="spoiler">

<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Lihat lagi'; }" name="button" type="button" value="Nama Spoiler" /></div>

<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">

<p style="text-align: justify;">Masukkan teks atau apapun yang ingin disembunyikan disini.</p>

</div><div id="hide"></div></div></div>

   Contoh jadi No 3 :

Masukkan teks atau apapun yang ingin disembunyikan disini.

   4 -Spoiler show hide dengan border dan background berwarna.

Kode :

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="Nama Spoiler" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">Masukkan teks atau apapun yang ingin disembunyikan disini.</p>
</div><div id="hide"></div></div></div>

Contoh jadi No 4 :

Masukkan teks atau apapun yang ingin disembunyikan disini.

*Keterangan :
 <div style="color: #000000 = Kode warna teks.
#ebf3fb = Kode warna background
1px solid #aaccee = Kode ukuran dan warna border.

    5 -Spoiler dengan judul dan tombol

Kode :

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 5px;">
<span style="font-weight: bold;">Judul Spoiler Kamu Disini</span><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 80px;" type="button" value="Nama Spoiler" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">Masukkan teks atau apapun yang ingin disembunyikan disini.</div>
</div>
</div>
</div>

Contoh jadi No 5 :

Judul Spoiler Kamu Disini

Masukkan teks atau apapun yang ingin disembunyikan disini.

Membuat Related Post Di Bawah Artikel

Related post atau artikel terkait akan mempermudah pengunjung untuk mencari artikel yang berkaitan dengan artikel yang sedang dibacanya.
Widget ini akan terpasang dibawah artikel kita. Dan tentu saja ini bisa menambah angka PV blog tersebut.

Inilah Caraku membuat Widget Realted Post/Artikel terkait di Blogspot :

• Masuk ke beranda blog.
• Pilih menu “Template”  -> “Edit HTML”
• Tandai/centang “Expand Widgets Template”
• Untuk jaga-jaga, jangan lupa simpan dulu Template kita. Caranya klik Download All Template.
• Cari kode

<data:post.body/>

• Bila kesulitan mencarinya, langsung saja klik “F3″. Sudah ketemu? sekarang letakkan kode dibawah ini tepat dibawah kode yang tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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('ul');
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 == '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 &lt; 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&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
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&amp;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 = &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> 

• Selesai. Klik “Simpan” atau “Save Template”. Dan lihat hasilnya.