Cara membuat artikel terkait berdampingan Dengan Benner

Hallo Sobat Blogger Saya Mau Bagi Tutorial Cara membuat artikel terkait berdampingan Denagn Benner Mantap Gan Ayu Praktekin Gan


  1.  Masuk Ke Akun Blogger Anda 
  2. Klik "Template" -> "Edit HTML" -> centang "Expand Template Widget"
  3. Cari Kode ]]></b:skin> Dengan Menekan CTRL + F 
  4. Selanjunnya Kita Ngopi Dulu Bukan Tapi Cari Kode Ini ]]></b:skin
  5. Letakan Kode Di Bawah Ini Di Atas Kode Ini ]]></b:skin> 

#hikam{float:left;width:275px;border-right:1px solid #ffaaff;margin:5px 0 0;padding:0 15px 0 0}
#hikam .widget{margin:0;padding:0}
#hikam .widget h2,#related-posts h2{font:bold 13px Droid Serif;color:#000;text-transform:none;margin:0 0 5px;padding:0}
#hikam {color:#333;font:12px Droid Serif}
#hikam:hover{color:#f9ab39}
#hikam li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/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}

Pesan
float:left;width:275px : Posisi related post ada di Sebelah kiri dengan lebar 275px
float:right;width:300px : Posisi banner-ads ada di sebelah kanan dengan lebar 300px

Jika  Posisi related Berada Di Kiri Post ingin Di Pindahkan Di Kanan Juga Bisa Ganti Kode Ini float:left;width:275px Denagn Kode  float:right;width:300px;margin:5px 0 Gampangkan

Jika  Posisi Benner Ads  Berada Dikanan Anda Ingin Pindahkan  Di Kiri Juga Bisa Ganti Kode Ini float:left;width:275px Denagn Kode  float:right;width:300px;margin:5px 0 Gampangkan
6. Masih di bagian "Edit HTML"kemudian anda  cari kode Ini <data:post.body/>  apabila kode<data:post.body/> terdapat 3 atau 4, maka Anda taruh kode Ini <data:post.body/> di bawah kode no 3. apabila kode <data:post.body/>, Jika terdapat hanya 2 maka Anda taruh kode berikut dibawah no.2 Gampangkan 

Letakan Kode Di Bawah Ini Di Bawah Kode Ini <data:post.body/> Gampangkan
<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='hikam'>
<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>



7. Langkah Terakhir tinggal Klik "Pratinjau"  Atau Langsung Simpan Gampangkan Tutorial Ya

Sekian Dulu Artikel Hari Ini Dan Jangan Lupa Tingglkan Komentra Anda Di Sini Agar Tidak Eror Terimakasih 



Pasang iklan anda Di ini

18 komentar

Makasih tutorialnya gan, mantap
ane coba nih :)

benar benar bermanfaat yang mula mula saya tidak tau tapi secara tidak sengaja saya menemukan tutorial untuk pertama kali

Anonim delete 18:13

mantappppppppp keren artikelnya..ditunggu kunjungannya + komen gan www.praz-info.blogspot.com

Kebetulan blog saya sudah ada widget artikel terkait mas :)
Tapi boleh juga nich tutorialnya :)

Terimakasih Sudah Berkunjung YA

Silahkan Asal Sertakan Link Ini

Terimakasih Sob Sudah Berkunjung

Wew,, langsung praktek gan!!

hehe

Makasih sob artikelnya jadi nambah ilmu nihh ijin nyoba ya

Wah, lumayan ini... patut di coba... & semoga bisa memodifikasinya..

thanks gan tutor nya,
agak ribet juga sih tapi patut di coba nih,
nice info gan

versi responsivenya ada sob? jadi saat diperkecil browsernya, itu iklan bisa pindah keatas atau kebawah gitu

info menarik ._. Comen'n follow back www.akhmadraauf.blogspot.com

Thank ya gan. Ini yang w cari :)


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>


EmoticonEmoticon