Cara Memasang Related Post di Bawah Postingan




Kali ini kita akan membahas cara membuat related post yang cukup fungsional, efektif dan menarik bagi blog kalian. Fungsi dari pada related post sebetulnya sangat banyak dan bermanfaat sekali dalam menambah jumlah pageviews sebuah blog. Semakin banyak visitor yang membuka halaman blog melalui related post maka akan semakin banyak pula pageviews yang artinya semakin memperbesar kemungkinan terjadinya klik adsense pada blog kalian. Secara fisik memang penampilan related post sungguh menarik, namun jangan dinilai dari sisi estetikannya saja melainkan fungsi dan kegunaan serta manfaatnya yang jauh lebih dari sekedar kata menarik. Mungkin buat para sobat Blogger yang kebetulan belum memakai Tutorial ini barang kali bermanfaat buat Anda, baiklah saya tidak akan panjang lebar bicara masalah Tutorial ini, sebab saya sendiri juga masih pemula. ok silahkan di coba.....


Berikut langkahnya..
 
 - Log in  ke blogger anda
 - Masuk ke Template > Edit Html
 - Centang Expand Template Widget
 - Tekan Ctrl + F, lalu cari kode <data:post.body/>
 - Copy kode dibawah ini dan pastekan dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</H2>
<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 = &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;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>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

- Bagi kamu yg sudah memasang Readmore otomatis. cari kode <data:post.body/></b:if> lalu letakkan kode diatas diantara kedua kode tersebut.

<data:post.body/>Letakkan kode diatas disni</b:if> 

- Seterusnya cari lagi kode : ]]></b:skin> , kemudian copy kode dibawah ini dan letakkan diatasnya.
rbbox{border:1px solid #F00; padding:5px; background-color:transparent; -moz-border-radius:5px; margin:5px}
.rbbox:hover{background-color:transparent}

- Setelah itu simpan template kamu dan lihat hasilnya.


NB : Kalau mau copas jangan lupa cantumkan sumbernya...

~Selamat Mencoba~

Editor by : Adithya putra
Credit : deny 4stroom


Related Post:

25 comments

May 25, 2012 at 8:40 AM

gan kok punya ane di atas postingan ya.... ada solusinya ngga gan

May 25, 2012 at 6:07 PM

@Orlando De CheaterZ

uda bener gk tempat letak kodenya, coba cek lagi...

May 25, 2012 at 7:00 PM

udah gan.... template blog ane chibi transparent

June 6, 2012 at 10:23 PM

gan kalau gk ada..

June 6, 2012 at 10:23 PM

gan kalau gk ada.. di html punta ku..

June 7, 2012 at 2:31 AM

@dedi sinaga

pasti ada, tapi Centang Expand Template Widget dulu, baru cari kodenya...

June 9, 2012 at 8:38 PM

gan buat dlu video nya ...

June 10, 2012 at 8:48 PM

mas adit ko punya aq malah jadinya di atas nya ya bukan di bawah posting ada solusinya ga mas?

June 10, 2012 at 10:44 PM

@asep andry

coba letakkan di bawah yg lain

July 4, 2012 at 9:43 PM

duh gw blom memasang Readmore otomatis jdi di mana nie nyimpennya
:drummer:

July 4, 2012 at 11:15 PM

@nauval kocak

ya uda letakkan aja di bawah
data:post.body

July 6, 2012 at 8:37 PM

gan kalo buat yg simbol maouse jadi kayak agan gumana ?

July 6, 2012 at 8:43 PM

ama buat kode banner gmana ?

July 6, 2012 at 11:09 PM

@nauval kocak

Cari aja di mbah google caranya...

July 8, 2012 at 2:39 AM

share donk

July 8, 2012 at 8:22 PM

@nauval kocak
banyak orng yg uda share cara buat Link Exchange. cari aja di google pasti ketemu. kalau gk ada *bang*

July 17, 2012 at 2:01 AM

kok kalau di sentuh realated post nya jadi warna putih coba liat http://b-syndicate.blogspot.com

July 17, 2012 at 3:59 AM

@Faby Fahrizal
coba ganti kode

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

dengan kode ini

rbbox{border:1px solid #F00; padding:5px; background-color:transparent; -moz-border-radius:5px; margin:5px}
.rbbox:hover{background-color:transparent}

letaknya diatas ]]>

December 9, 2012 at 12:49 AM

rock gann :drummer: kunjungi balik ya http://rizky-4rt.blogspot.com

December 9, 2012 at 1:12 AM

oki,... \m/

February 5, 2013 at 5:38 AM

wah gan ane bingung nih yg - Bagi kamu yg sudah memasang Readmore otomatis. cari kode lalu letakkan kode diatas diantara kedua kode tersebut.:P

February 5, 2013 at 6:51 PM

blog kamu uda pakei read more otomatis blum, coba mana link blog kamu...

March 25, 2013 at 1:26 AM

Data post bodynya yang mana gan?? ada 3

October 6, 2013 at 12:44 AM

Gam Maksudx

October 6, 2013 at 12:45 AM

Maksudx Ini apa gan

Post a Comment - Back to Content

Peraturan :
• komentar Dilarang Berbau SARA
• komentar Dilarang FLODDING,SPAM Dan Lain Lain
• komentar Dilarang Berbau Link Hidup
• Gunakan URL kalian utk berkomentar