Cara pasang Related Post atau Artikel Terkait di Blogspot
Senin, 05 Agustus 2013
0
komentar
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.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara pasang Related Post atau Artikel Terkait di Blogspot
Ditulis oleh miko seonobi
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://tutorialteknikseo.blogspot.com/2013/08/cara-pasang-related-post-atau-artikel-terkait-di-blogspot.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh miko seonobi
Rating Blog 5 dari 5
Categories:
SEO,
SEO On Page,
Tips,
Trik
0 komentar:
Posting Komentar