Related post cantik untuk meningkatkan pageviews

Related post cantik untuk meningkatkan pageviews

Related post atau artikel terkait alias posting pada kategori yang sama dan sebutan lainnya adalah daftar link artikel yang berhubungan dimana dihubungkan karena dalam kategori atau label yang sama. Hampir semua blogger sudah memasang, tapi sudahkah anda mengoptimalkan pemasangannya berkaitan dengan fungsi yang juga memperhatikan faktor keindahan agar page view meningkat?

Dengan related post anda dapat memudahkan pembaca diblog anda menemukan artikel-artikel sejenis yang disukainya. Agar fungsinya semakin meningkat usahakan related post memiliki sifat-sifat dibawah ini:

1. Rapi, Karena manusia sehat pasti suka akan kebersihan dan kerapian


2. Tampilannya menarik perhatian, anda beri warna yang mencolok juga menarik perhatian, tapi sudahkah menyatu dengan keseluruhan warna blog?


3. Ada efek tertentu saat bagian tersebut disorot mouse, ini berkaitan juga dengan point dua yaitu "CAPER" alias cari perhatian.


4. Penempatan yang benar, karena saya pernah mencoba dulu menempatkan related post ini di sidebar dan ternyata kurang efektif karena menjadi kurang diperhatikan. Atau penempatan yang terlalu kebawah juga kurang efektif, karena terlalu jauh dari artikel.

Kalau belum memenuhi kriteria diatas berarti belum maksimal optimasinya dalam mengusahakan tingginya page views. Tapi ngomong-ngomong ada yang belum tahu page views ga? oo sudah tahu semua rupanya, ya sudah.

Oleh karena itu bagi yang belum teroptimasi saya coba sharing bagaimana membuat related post seperti di blog ini. Bukannya meng-klaim bahwa related post di blog ini bagus tapi karena ada 3 kawan yang mengirim email pada saya menanyakan cara pembuatannya. Jadi saya posting aja karena kalau balas satu-satu ke 3 kawan sama saja juga banyak ngetiknya, bahkan lebih banyak. Lebih baik diposting agar kalau ada pertanyaan yang sama jadi tinggal kasih alamat artikelnya. Eh iya cara pemasangannya untuk blogspot lho ya.

Related post yang saya maksud seperti gambar dibawah ini: (klik kiri untuk perbesar)

Untuk mencoba silahkan dibawah ada yang asli, coba sorotkan mouse anda pada area related post, apa yang anda lihat?, dan jika artikel terkait banyak maka tidak akan memanjang kebawah seperti kereta api. Tapi akan muncul scroll disebelah kanan kotak.

Bagaimana memasangnya? Ikuti penjelasan berikut ini:

Jika anda belum memasang related post sebelumnya:
Cari kode dibawah ini pada template anda, ingat sebelumnya centang "Expand Widget Templates".
<p><data:post.body/></p>
kalau sudah ketemu silahkan copy kode berikut ini kemudian paste dibawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <br /><H2>Artikel Terkait:</H2><br /><DIV class='rbbox'> <br /><DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'><br /><DIV id='albri'/><br /><SCRIPT type='text/javascript'><br />var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;<br />var maxNumberOfPostsPerLabel = 4;<br />var maxNumberOfLabels = 10;<br />maxNumberOfPostsPerLabel = 100;<br />maxNumberOfLabels = 3;<br />function listEntries10(json) {<br />var ul = document.createElement(&#39;ul&#39;);<br />var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? <br />json.feed.entry.length : maxNumberOfPostsPerLabel;<br />for (var i = 0; i &lt; maxPosts; i++) {<br />var entry = json.feed.entry[i];<br />var alturl;<br />for (var k = 0; k &lt; entry.link.length; k++) {<br />if (entry.link[k].rel == &#39;alternate&#39;) {<br />alturl = entry.link[k].href;<br />break;<br />}<br />}<br />var li = document.createElement(&#39;li&#39;);<br />var a = document.createElement(&#39;a&#39;);<br />a.href = alturl;<br />if(a.href!=location.href) {<br />var txt = document.createTextNode(entry.title.$t); <br />a.appendChild(txt);<br />li.appendChild(a);<br />ul.appendChild(li); <br />}<br />}<br />for (var l = 0; l &lt; json.feed.link.length; l++) {<br />if (json.feed.link[l].rel == &#39;alternate&#39;) {<br />var raw = json.feed.link[l].href;<br />var label = raw.substr(homeUrl3.length+13);<br />var k;<br />for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);<br />var txt = document.createTextNode(label);<br />var h = document.createElement(&#39;b&#39;);<br />h.appendChild(txt);<br />var div1 = document.createElement(&#39;div&#39;);<br />div1.appendChild(h);<br />div1.appendChild(ul);<br />document.getElementById(&#39;albri&#39;).appendChild(div1);<br />}<br />}<br />}<br />function search10(query, label) {<br />var script = document.createElement(&#39;script&#39;);<br />script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;<br />+ label +<br />&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);<br />script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);<br />document.documentElement.firstChild.appendChild(script);<br />}<br />var labelArray = new Array();<br />var numLabel = 0;<br /><b:loop values='data:posts' var='post'><br /><b:loop values='data:post.labels' var='label'><br />textLabel = &quot;<data:label.name/>&quot;;<br />var test = 0;<br />for (var i = 0; i &lt; labelArray.length; i++)<br />if (labelArray[i] == textLabel) test = 1;<br />if (test == 0) { <br />labelArray.push(textLabel);<br />var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? <br />labelArray.length : maxNumberOfLabels;<br />if (numLabel &lt; maxLabels) {<br />search10(homeUrl3, textLabel);<br />numLabel++;<br />}<br />}<br /></b:loop><br /></b:loop><br /></SCRIPT><br /></DIV><br /><script type="text/javascript">RelPost();</script><br /></DIV><br /></b:if><br /><br />

Kalau sudah silahkan dicari lagi kode dibawah ini:
]]></b:skin>

Kalau sudah ketemu copy kode dibawah ini kemudian paste " diatas" kode ]]></b:skin> tadi.

/*----------------------------- <br />kode related post optimal <br />visit http://www.ateonsoft.com <br />------------------------------*/<br />.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;<br />background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}<br />.rbbox:hover{background-color: rgb(255, 255, 255);}<br />

Setelah itu copy kode dibawah ini kemudian paste "dibawah" kode ]]></b:skin> tadi:

<SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>'

Kalau sudah silahkan disimpan templatenya. Lihat hasilnya dengan membuka salah satu artikal anda.

Jika anda sudah memasang related post sebelumnya:

Selamat mencoba........