Cara membuat related post unik di blogspot

Cara membuat related post unik di blogspot - Hai sobat blogger seudah beberapa hari ini ane tidak update dan kini ane datang dengan postingan terbaru untuk berbagi tentang tips cara membuat related post unik di blogspot melanjutkan postingan yang sempet ane share tentang cara membuat related post thumbnail.

Mungkin sobat blogger bertanya-tanya mengapa ane memberikan judul cara membuat related post unik di blogspot, karena ane tidak tahu lagi harus memberi judul apa yang pasti menurut ane cara ini cara yang unik dalam hal membuat related post di blogspot. Untuk lebih jelasnya bagi yang penasaran silahkan ikuti langkah-langkah di bawah ini.

Berikut cara membuat related post unik di blogspot  


Cara membuat related post unik di blogspot yang ane maksudkan adalah related post yang nantinya akan nampak berdampingan dengan iklan/advertising yang sobat ikuti yang mana menurut ane hal ini memberikan dampak positif karena akan memberikan peluang lebih besar agar iklan yang ada pada blog lebih sering terlihat oleh pengunjung dan kemungkinan besar iklan tersebut akan di klik. 
Related post di blogspot
Cara membuat related post unik di blogspot sangat mudah hanya dengan memberikan tambahan kode script yang akan ane berikan di bawah ini tetapi ane sarankan agar terlebih dahulu untuk memback up template agar berjaga-jaga jika terjadi sesuatu hal yang tidak di inginkan. 

1. Silahkan masuk ke akun Blogger agan.
2. Klik "Template" -> "Edit HTML" -> centang "Expand Template Widget"
3. Cari kode ]]></b:skin> dengan menekan Ctrl + F untuk memudahkan proses pencarian.
4. Selanjutnya silahkan simpan kode berikut di atas kode  ]]></b:skin> 

#rbbox{float:left;width:275px;border-right:1px solid #ffaaff;margin:5px 0 0;padding:0 15px 0 0}
#rbbox .widget{margin:0;padding:0}
#rbbox .widget h2,#related-posts h2{font:bold 13px Droid Serif;color:#000;text-transform:none;margin:0 0 5px;padding:0}
#rbbox {color:#333;font:12px Droid Serif}
#rbbox:hover{color:#f9ab39}
#rbbox li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSgrGWy5oBeMDLMHsUIT83-qKsiFL-kzPSP01yC7SeemVGvpIhICPFks_61esIq7Qa6QhikF8ec2mWPJW5j8gMJ-gieG6_NdVhXcce-XXwaArJ9BmQxcsNy3cuVtFxdw6RsW1jlyMh8Fc/s1600/bullet-list.gif) no-repeat 0 8px;text-indent:0;line-height:1.2em;margin:0;padding:2px 0 2px 10px}
#banner-ads{float:right;width:300px;margin:5px 0}

Note:
  • float:left;width:275px : Posisi related post yang ada di kiri dengan lebar 275px
  • float:right;width:300px : Posisi banner-ads yang ada di sebelah kanan dengan lebar 300px
  • Silahkan sesuaikan dengan template yang agan gunakan.

5. Masih di bagian "Edit HTML"kemudian agan cari kode <data:post.body/>, apabila kode tersebut terdapat 3 atau 4, maka taruh kode berikut di bawah kode no 3. apabila kode <data:post.body/>, terdapat hanya 2 maka taruh kode berikut dibawah no.2 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H3>Artikel Terkait :</H3>
<div id='banner-ads'>
MASUKKAN SCRIPT HTML/JAVASCRIPT KAMU DISINI..!!!
</div>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:250px;overflow:auto;border:0px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 10 ;
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>
<script type='text/javascript'>RelPost();</script>
</div>
</div>
</b:if>

6. Langkah terakhir silahkan klik "Pratinjau" dan "Simpan" template jika dirasa sudah berhasil.

Itulah sharing kali ini tentang cara membuat related post unik di blogspot semoga sharing dari seorang nawbi ini dapat bermanfaat bagi agan-agan yang ingin mendapatkan peluang lebih besar dengan menempatan iklan berdampingan dengan related post yang ada di bawah postingan blog.

2 Responses to "Cara membuat related post unik di blogspot"

  1. Patut dicoba, insyaallah akan segera dipasang di blog. Salam kenal

    BalasHapus
  2. Bermanfaat, Mbak. Makasih udah berbagi.
    Izin simpan kodenya ya..

    Salam sukses,
    Dany

    BalasHapus