Seperti diketahui
related post atau
artikel terkait digunakan untuk dapat memudahkan pengunjung atau visitor dalam menjelajahi blog atau situs kita. Sebenarnya ada cara selain trik ini, yakni kita bisa memasang daftar label atau
daftar arsip di blog kita. Namun kelemahan dari trik ini adalah dapat membuat pengunjung merasa cepat bosan bila artikel yang dicari tidak sesuai dengan minat dan keinginannya.
Sehingga apabila ini terjadi maka otomatis hal itu akan meningkatkan
bounce rate pada blog kita. Oleh karena itu trik ini bisa diterapkan untuk dapat mengatasi kebosanan dan membuat betah para pengunjung tersebut.
Cara pasang related post atau artikel terkait di blogspot.
Untuk menyesuaikan dengan loading blog ,
related post atau artikel terkait itu sendiri saya bagi menjadi 3 macam. Diantaranya:
* Related Post atau Artikel Terkait bentuk Sederhana
Dengan bentuk model yang sederhana akan lebih ringan dalam me-load label ketika akses halaman posting. Bentuknya yang friendly dan simpel dapat diterapkan dengan mudah di blog sobat blogger. untuk langkah langkah pembuatannya pada
Blogspot bisa diikuti intruksi di bawah ini:
1. Sebelumnya Log in dahulu ke akun
Blogger.
2. Saat muncul Dasbor, pilih ke
Template dan pilih menu
Edit HTML,
3. Kemudian Muncul kotak editor template, kemudian tekan Ctrl F,
cari kode
</head>,
4. Letakkan kode css dan script di bawah ini sebelum kode
</head>,
<style>
#related-posts { float : left; width: auto; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; }#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }#related-posts .widget h2,#related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; }#related-posts a:hover { text-decoration : none; }#related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(" http://1.bp.blogspot.com /-MdK_HE-8LR8/T8Dw9Nzau6I /AAAAAAAABQM/EHAoPvg5pbc /s1600/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }
</style>
<script src='
http://yourjavascript.com/1251182355/rel-post-txt.js
' type='text/javascript'/>
5. Setelah itu cari kode di bawah ini:
<data : post.body/> atau <div class='post-body>
6. lalu letakkan kode script berikut ini di bawahnya:
<b:if cond='data:blog.pageType== "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b>
</font><font color='#FFFFFF'><b:loop values='data : post.labels' var='label'><data: label.name/>
<b:if cond='data:label.isLast !="true"'>,</b:if><b:if cond='data:blog.pageType =="item"'>
<script expr:src='"/feeds/posts/default/-/" + data: label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div></b:if>
lalu klik
simpan template untuk dapat segera melihat hasilnya.
* Related Post (Artikel Terkait ) Bentuk Scroll
Untuk tips selanjutnya kali ini kita akan membuat
Related Post dalam bentuk Scroll, Sedang kelebihan dari
related post yang satu ini kita bisa menampilkan jumlah artikel tiap label sebanyak-banyaknya tanpa mengganggu halaman posting karena telah diatasi dengan menggunakan scrolling.
Sehingga pengunjung tentu dapat dengan leluasa melihat dan menelusuri Blog kita.
1. Sebelumnya Log in dahulu ke akun
Blogger.
2. Saat muncul Dasbor, pilih ke
Template dan pilih menu
Edit HTML,
3. Kemudian Muncul kotak editor template, kemudian tekan Ctrl F,
cari kode
]]></b:skin>,
4. Letakkan kode css dan script di bawah ini di atas kode tersebut:
/* Artikel Terkait */
.rbbox{border: 1px solid#D8D8D8;padding: 5px;
background-color:#E0F8E0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color:#EFFBEF;}
Keterangan:
1.#E0F8E0= kode warna kotak background Related Post (bisa diganti sesuai selera),
2.#EFFBEF= kode warna kotak background 'hover' related post muncul pada saat disorot mouse (ubah dengan warna kesukaan).
5. Kemudian Cari kode
<data : post.body/> atau
<div class='post-body>, letakkan script berikut ini di bawah kode tersebut:
<b:if cond='data:blog.pageType== "item"'>
<H4>Related Post:</H4>
<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 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel= 5;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel =50;
maxNumberOfLabels = 3;
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>
* Related Post dalam Bentuk Thumbnail
Bentuk
artikel terkait selanjutnya selain terdapat gambar thumbnail yang menarik, juga dilengkapi screenshoot gambar tentunya akan menambah nilai plus ketertarikan pengunjung. Hanya saj kekurangannya, jumlah tampilan artikel per label relatif sedikit dan tidak seperti
Related Post dengan menggunakan scroll. Di samping itu
artikel terkait ini juga cukup modis dan sangat disarankan perlu diterapkan pada Blog.
Untuk langkah langkah pemasangannya :
1. Log in dahulu ke akun
Blogger.
2. Ketika muncul Dasbor, pilih ke
Template dan pilih menu
Edit HTML,
3. Kemudian Muncul kotak editor template, kemudian tekan Ctrl F,
cari kode
</head>,
4. Letakkan kode css dan script di bawah ini sebelum kode
</head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType== "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.3em;
font-weight: bold;
color: #000000;
font-family: Georgia,“Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src=' http://eflianda- blogzzz.googlecode.com/files /relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
5. Langkah selanjutnya cari kode
<div class='post-footer'> atau
<div class='post-footer-line post-footer-line-1'/> dan letakkan script dibawah ini di atas kode
tersebut.
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType== "item"'>
<div id='related-posts'>
<b:loop values='data : post.labels' var='label'>
<b:if cond='data:label.isLast !="true"'>
</b:if>
<b:if cond='data:blog.pageType== "item"'>
<script expr:src='"/feeds/posts/default/-/" + data: label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data : post.url/>";
var maxresults=5;
var relatedpoststitle="Artikel Terkait";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Keterangan:
Angka yang di blok berwarna
biru muda adalah jumlah posting artikel di dalam related post
6. Dan yang terakhir klik
Simpan Template lalu lihat hasilnya.
Jadi sampai di sini
Tutorial SEO tentang
Cara pasang Related Post atau Artikel Terkait di Blogspot. Silahkan di coba dan semoga bisa bermanfaat.
