Cara Membuat Artikel Terkait Dengan Atau Tanpa Scroll

Cara Membuat Artikel Terkait Dengan Atau Tanpa Scroll Pada Blogspot ~ Artikel terkait sudah banyak digunakan oleh banyak blogger, baik blogger yang masih baru maupun blogger yang sudah lama. Memasang artikel terkait di tujukan kepada pengunjung untuk membaca artikel-artikel yang berhubungan dengan yang dibaca oleh pengunjug. Tentu saja ini sangat menguntungkan karena dapat meningkat Pageview blog anda.

Artikel terkait pada tutorial saya kali  ini bisa anda modifikasi dengan memberikan scroll pada artikel terkaitnya. Jadi jika artikel terkait anda di rasa terlalu memanjang ke bawah, anda bisa memberikan scroll pada artikel terkait tersebut sehingga tidak menghabiskan banyak  tempat, dan artikel terkaitnya pun akan terlihat lebih rapih. Jika anda tertarik untuk membuatnya, silahkan ikuti langkah-langkah di bawah ini

• Login dengan akun blogspot anda
• Pilih Menu TEMPLATE, kemudian klik Edit HTML
• Cari kode ]]></b:skin>
• Untuk mencari kode ]]></b:skin>, Arahkan cursor pada kolom template kemudian tekan Ctrl + F untuk mempermudah pencarian kode ]]></b:skin>
• Simpan CSS di bawah ini tepat di atas kode ]]></b:skin>

/* Related Post */
.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#EEEEEE;}
.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}
.related_posts a{color:#000;}
.related_posts ul{padding:0;}
.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background: #EEEEEE;}

• Kemudian cari kode <data:post.body/>
• Simpan script di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Artikel Terkait</h4>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='data2007'/><br/><br/>
<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;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>
</div>
</div>
</b:if>

• Kemudian simpan template dan lihat hasilnya

Catatan :

1. Kode yang berwarna merah adalah kode warna HTML silahkan ganti sesuai keinginan anda.
2. Jika anda ingin menggunakan scroll maka kode yang berwarna Biru jangan dihapus
3. Jika tidak ingin menggunakan scroll maka hapus kode berwarna Biru tersebut.
4. Untuk kode yang berwana ungu silahkan ganti sesuka hati
5. Jika kode <data:post.body/> lebih dari satu, silahkan lanjut ke kode <data:post.body/> selanjutnya sampai artikel terkaitnya terlihat di bawah postingan artikel.

Baca juga : Cara Membuat Artikel Terkait Vertikal Dengan Gambar Pada Blog

Semoga bermanfaat . . . .

Tweet

Terima Kasih Atas Kunjungan Anda
Judul: Cara Membuat Artikel Terkait Dengan Atau Tanpa Scroll
Ditulis Oleh Unknown
Artikel ini dipatenkan pada www.myfreecopyright.com, Jika mengutip harap berikan link balik yang menuju artikel Cara Membuat Artikel Terkait Dengan Atau Tanpa Scroll ini. Jika tidak akan diproses secara DMCA Takedown yang tentu saja tidak baik akibatnya bagi blog saudara. Terima kasih atas perhatiannya