Cara Membuat Artikel Yang Berhubungan

Tip Trik Blogger sebelumnya saya telah membahas bagaimana Cara Membuat Kotak Link Exchange dan kali ini saya akan menjelaskan bagaimana Cara Membuat Artikel Yang Berhubungan atau Related Post dengan Fungsi Scroll
Berikut langkah-langkahnya :

Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap

Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
Kemudian cari <data:post.body/>

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

Jika sudah ketemu silahkan Copy kode berikut dan letakkan dibawahnya
Kalau ada dua kode pilih yang pertama

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2> Artikel Yang Berhubungan </H2>
<div class='artikel'>
<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 = 10;
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>

Untuk menambahkan efeknya cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

.artikel{border: 1px solid #87CEEB; padding: 5px; background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.artikel:hover{background-color: #ffffff; border: 1px solid #ff6100;}

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

Cara membuat artikel terkait di blogspot

Membuat navigasi blog adalah hal penting untuk meningkatkan page view web/blog, salah satunya adalah Membuat link artikel terkait, artikel yang berhubungan, Related post atau nama lain yang berdasarkan kategori atau label yang diberikan tiap postingan.

Cara membuatnya di blogspot, disini kita akan menempatkannya tepat dibawah postingan :

1. Login ke blogmu
2. Klik Layout lalu pilih Edit HTML
3. Untuk keamanan sebelum mengedit template backup dulu templete mu klik Download Full Template.
4. Centang Expand Widget Templates
5. Cari kode <data:post.body>
6. Copy kode dibawah ini letakkan dibawah <data:post.body>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<span class='box'>
<div class='widget-content'>

<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 6;
maxNumberOfLabels = 100;
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;data2007&#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>
</span></div>
</b:if>
Save Template dan lihat hasilnya

Head " Artikel Terkait " dapat anda ganti dengan kata yang disukai contohnya Related Post, Related Articles, Baca Juga dan sebagainya.

Cara mudah menambahkan Artikel Terkait dengan Widget "LinkWithin"

Cara mudah menambahkan Artikel Terkait dengan Widget "LinkWithin"

Mencari tampilan yang bisa memunculkan artikel terkait dan relevan dengan judul postingan di blogspot sangat banyak sekali di internet, dan rata-rata kita harus extra hati-hati memasukkan kode-kode html atau javascript, ke dalam tag html blog kita. Walhasil terkadang code yang dipasang tidak selalu sama atau berbeda dengan template yang sudah ditambal sulam. Bisa jadi malah blog kita hancur dan berantakan serta beberapa link menjadi non-aktif.

Daripada pusing-pusing lebih baik mencari widget yang simple dan mudah untuk diinstalkan ke dalam blog kita.

Ada satu widget yang menarik, karena selain tidak perlu membayar alias gratis juga bebas dari iklan. Widget tersebut adalah LinkWithin.

Tampilkan Berita Terkait Dalam Setiap Post!LinkWithin adalah sebuah widget blog

LinkWithin adalah sebuah widget blog yang muncul di bawah setiap posting, link ke cerita terkait dari arsip blog Anda. Dan tidak membiarkan posting-positng lama menjadi terbuang!

Kelebihan lainnya :

1. Mampu mengambil dan mengindeks semua posting dari arsip blog kita, bukan hanya cerita baru, membuat mereka dapat diakses oleh pembaca baru atau langganan dari blog kita yang tidak dapat menemukannya dengan cara biasa.

2. link widget untuk postingan yang relevan dan menarik untuk pembaca posting tertentu, membuat mereka terlibat dengan blog Anda, dan meningkatkan trafik web kita.

3. widget minimal yang ditata dan menyatu dengan desain situs kita.

4. Gratis dan Mudah Instal

yang terpenting widget ini gratis dan bebas iklan. Ini membutuhkan satu menit untuk mendapatkan widget dan berjalan di blog, tidak ada pendaftaran rumit yang diperlukan disini!

Untuk menginstal LinkWithin Widget di Blogger, cukup ikuti langkah-langkah di bawah ini.
1. Klik ke web LinkWithin

2. Klik Install Widget Blogger untuk membuka di jendela browser baru, dan ikuti langkah-langkah berikutnya dalam jendela itu. Silahkan login jika perlu.

3. Pilih sebuah blog jika anda memiliki lebih dari satu, kemudian klik pada Tambah Widget.

4. (Optional) Untuk kinerja yang lebih baik, Drag dan Drop kotak LinkWithin di bawah kotak "Blog Posts".

5. Klik Simpan.

Dan Anda sudah selesai!, Widget seharusnya sekarang muncul di blog Anda.