Cara Memasang Related Post Dengan Scroll

Cara Memasang Related Post Dengan Scroll - Related post memang menjadi suatu kewajiban tersendiri bagi para blogger Apalagi Dengan Menggunakan Scroll, Membuat Suatu widget berupa Related Post Yang menjadi ramping terlebih lagi tidak membuat tampilan suatu blog menjadi kurang memadai. Untuk itu disini saya terlebih dahulu akan menjelaskan kepada Anda sekalian. Pengertian Dari Related post tersebut.

Gambar : Contoh Related post menggunakan Scoll Pada widget di blog

Pengertian Dari Arti kata Related Post " Artikel terkait "
Artikel Terkait itu bahasa Indonesianya. Namun para blogger lebih familiar dengan sebutan RELATED POST. Blog ini menggunakan bahasa RELATED ARTICLE, kebenaran bawaan dari template yang diberikan oleh mas kolis secara cuma-cuma. Tujuan cuma satu membantu para Pembaca / Pengunjung / Visitor agar bisa lebih gampang mencari postingan /artikel kita yang menyerupai atau satu Kategori / Label dengannya (postingan).

Ada beberapa Cara Membuat Related Post Pada Blog

1. Dengan membuat Related Post tanpa gambar

2. Dengan membuat Related Post dengan gambar (thumbail)

Saya jelasin dulu yah satu-satu biar lebih paham.

1. Membuat Related Post tanpa gambar 

Membuat Related Post tanpa gambar pada blog biasanya dilakukan di bawah Postingan. Meskipun ada yang ditempatkan di sidebar, namun lebih sering kita temukan di bawah postingan.

Ada banyak cara para blogger membuat related post di dalam blog yang mereka kelola. Antara lain dengan menggunakan Scroll dan tanpa menggunakan Scroll. Semua tergantung selera masing-masing. Pada blog kali ini sementara menggunakan Related Post tanpa Scroll. Terlihat lebih simpel sih. Tanpa menggunakan Scroll biasanya paling banyak artikel terkaitnya 10 artikel (lebih banyak juga tidak apa-apa), dan hanya di kaitkan pada 1 label atau kategori. 

Apabila Label / Kategori yang anda buat didalam blog anda lebih dari 1 Label/Kategori biasanya yang di kaitkan hanya 1 label / kategori saja. Sedangkan yang menggunakan Scroll bisa lebih dari 1 kategori / label.

2. Membuat Related Post dengan gambar (thumbail)

Penjelasannya hampir sama saja dengan diatas, bedanya ya related post menggunakan Gambar. Kelemahannya adalah apabila dalam postingan kawan-kawan tidak menggunakan Gambar, maka gambarnya tidak muncul.

Membuat Related Post dengan gambar (thumbail) ada 2 cara juga, pertama dengan menyatukan script (kode) related post pada blog kita. Cara kedua adalah dengan memanfaatkan pihak ketiga. Yang paling populer adalah menbuat related post dengan Linkwithin. Linkwithin adalah salah satu penyedia script untuk memasang related post di dalam blog kita. Masih ada lagi situs-situs pihak ketiga yang menyediakan cara ini, tapi Linkwihtin lebih familiar di mata para blogger.

Menggunakan related post ini semua tergantung anda mau pilih yang mana. Yang penting anda paham apa fungsi dan kegunaan related post.

Di atas adalah untuk suatu pengertian dan pemahaman Mengenai Widget Related Post Pada Blog yang bisa kalian baca dan pahami tentunya. Sebagai seorang blogger harus mampu memahami dan mengerti sisi dari cara kerja suatu blog yang telah di kelola tersebut. Nah kembali pada topik pembahasan kita kali ini mengenai Cara Memasang Related Post Dengan Menggunakan Scroll. Untuk itu silahkan simak dan ikuti tutorial berikut yang akan saya jelaskan untuk anda.

Cara Memasang Related Post Dengan Scroll

Disini saya akan memberikan suatu tutorial yang tentunya untuk anda belum paham dan cara kerjanya, pada kesempatan kali ini adalah tutorial yang akan mengenai widget tersebut membuat tampilan blog lebih menarik. berikut ini adalah tutorial dan cara-cara nya.

Jika ingin mempelajari dan memahami cara kerjanya silahkan ikuti berikut ini.

• Terlebih dahulu anda wajib login ke dalam blogger
• Setelah itu Lihat Pada bagian Menu " Tema " Masuk ke Edit Template di blog Anda tersebut.
• Sekarang yang anda lakukan dengan cara mencari kode berikut ini dengan memakai CTRL +F :<div class='post-footer-line post-footer-line-1'>

Jika anda telah menemukan kode yang ada di atas, maka di bagian kode tersebut ada 2 kode yang sama, Maka anda pilih saja kode yang pertama sekali pada saat anda mau mencari kode di atas. selanjutnya ikuti lah pada bagian berikut ini.

Di bawah ini anda melihat kode yang sungguh banyak, Maka kode ini nantinya akan di pasang ke dalam blog anda. Copy dan pastekan di bawah kode yang ada di atas. Jika tidak tahu kode yang saya maksud disini adalah kode berikut ini :

•  <div class='post-footer-line post-footer-line-1'>

Pakailah kode ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;

maxNumberOfLabels = 3;

function listEntries10(json) {

var ul = document.createElement(&#39;ul&#39;);

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 == &#39;alternate&#39;) {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement(&#39;li&#39;);

var a = document.createElement(&#39;a&#39;);

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 == &#39;alternate&#39;) {

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(&#39;b&#39;);

h.appendChild(txt);

var div1 = document.createElement(&#39;div&#39;);

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById(&#39;albri&#39;).appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement(&#39;script&#39;);

script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;

+ label +

&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);

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>

<script type="text/javascript">RelPost();</script>

</Div>

</b:if>

Simpan di blog anda , setelah selesai lihat hasilnya di blog yang anda baru selesai pakai kode yang di atas tersebut. Setelah itu baru selesai.

Tambahan kepada anda :

1. <h2>Artikel Terkait:</h2> bisa anda ganti sesuai keinginan anda ( misal : Related post, artikel yang berhubungan dll ) atau anda juga bisa menghapusnya.
2. <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
3. maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan

Nah bagaimana menurut anda kira-kira ? Begitu mudah bukan mengetahui dan memahami cara kerja tutorial yang saya berikan pada artikel ini. Namun jika anda masih dalam kebingungan atau masih kurang paham, Silahkan anda bisa meninggalkan komentar yang saya sudah sediakan untuk anda, Saya akan coba bantu dimana permasalahan ketika sedang mengikuti dan mengetahui cara kerja tutorialnya. Sekian dan terimakasih.

Facebook

Twitter

Telegram

WhatsApp

Older Posts

Newer Posts

Reyvan Mustofa Assalamu'alaikum, Saya adalah seorang blogger newbie
Silahkan hubungi saya jika ada yang mau di pertanyakan. Klik DISINI