Tuesday 14 December 2010

Tips Blogger | Cara Membuat Widget Artikel Terkait (Related Posts)Dengan Fungsi Scroll

S

udah lupa sepertinya Blog ini dengan Thema yang dulu pernah saya usung yakni Free software, namun apa boleh dikata ini adalah satu-satu pilihan yang harus saya ambil yakni menjadikan Blog ini campur-campur artikel daripada saya harus membuat Blog baru lagi dengan thema yang khusus, membuatnya memang mudah namun promosi dan cari traffiknya susah. Mohon maaf jika Tampilan Blog ini selalu berubah!


Kembali ke Judul artikel yuk! Pada posting terdahulu saya sudah pernah mensharing cara membuat widget artikel terkait/ Related post di Blog. Namun widget yang terdahulu itu tanpa menggunakan fungsi scroll, jadi banyak pembaca yang protes "kok widgetnya gak sama seperti yang ada di Blog Bli Wayan yang ada fungsi scroll nya" begitu katanya. Terus terang Widget ini juga saya dapatkan dari hasil copy paste di internet, maklumlah saya juga masih newbie dan masih harus banyak belajar.

OK langsung saja mulai memasang widget artikel terkait/ Related post di Blog sobat :



1). Login ke akun Blogger sobat.

2). Pilih Tata Letak >> Rancangan >> Edit Laman

3). Klik tab Edit HTML.

4). Kemudian klik Expand Template Widgets.

5). Cari kode yang seperti ini :

<data:post.body/>



Gunakan Ctrl + F3 untuk mempermudah pencarian.

6). Jika Sobat sudah menggunakan fungsi Read More, maka terdapat 2 kode <data:post.body/>. Dan jika Sobat sudah menggunakan Artikel Terkait, hapus saja kode artikel terkait yang lama.

7). Copy Paste kode di bawah ini setelah kode <data:post.body/> yang pertama (jika sudah menggunakan Read More).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</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>



8). Untuk kata Artikel Terkait, Sobat bisa menggantinya dengan kata yang lain.

9). Selanjutnya, masukkan kode ini di atas kode ]]></b:skin> .

.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);}



10). Terakhir klik Simpan Template.

11). Untuk Demonya bisa di lihat di bagian bawah Blog ini!

Artikel Terkait:



Languages : English French German Spain Italian Dutch Russian Japanese Korean Arabic Chinese Simplified


24 komentar:

sicantik said...

terima kasih mas atas tutorx,

Unknown said...

Wah, makasih deh mas buat tipsnya, langsung praktek nih..
hhehehe

TeamBV said...

TQ infonya...
http://freeallsoftware.blogspot.com/

Ruang usaha internet said...

makasih mas info n tutorianya... sangat membantu

Internet Marketing said...

Tips yang menarik,,, makasih ya gan! ^_^

blogonol said...

berkunjung sahabat...saya coba script seperti ini tapi ketika save template malah terjadi kesalahan saat edit atau waktu yang bentrok...kira-kira apa penyebabnya ya bro...makasih

timelessinfo.blogspot.com said...

Bli Wayan, suksme tipsnya rupanya artikel terkait bli wayan bisa lebih dari 5 dan sangat pas dengan tyang

bopfive5 said...

berhasil makasih

Unknown said...
This comment has been removed by the author.
Hans said...

Saya sudah mencoba langkah langkahnya dah emang sukses mengeluarkan widgetnya, tapi tidak ada isi artikel artikelnya (judul judulnya)

bagaimana biar artikelnya keluar ya??

trus untuk menganti max posting yang muncul di artikel terkait bagaimana ya caranya??

obat herbal sakit maag said...

tipsnya lengkap buat para blogger gan.. thanks yach

Unknown said...

langsung praktek gan.makasih tipsnya

muhaiminabdullah said...

Saya pernah coba tutorial ini berdasarkan petunjuk dari blog lain dan hasilnya, template saya hancur... Saya coba dulu tutorialnya... mudah-mudahan berhasil....

muhaiminabdullah said...

Gagal maning bro.... apanya yang salah yah???

Unknown said...

kenapa gagal ya .

Anonymous said...

blogwalking sob, salam kenal

pengobatan kanker payudaara said...

makasih gan atas infonya

Penyakit Flu Tulang said...

Makasih nih informasinya sangat berguna salam kenal....

Komplikasi said...

Salam kenal gan makasih mo berbagi ilmunya...

Mohamad Rivai said...

siap deh...
langsung praktek

Qi'syah Blog said...

thanks infonya gan
http://sauqisyahtia.blogspot.com/

karangan bunga banjarnegara said...

sangat membantu artikelnya

Grosir sprei Murah said...

makasih mas info n tutorianya... sangat memban

npselalu.com said...

sangat membantu sekali terutama bagi blogger yang kurang mampu bikin artikel

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

loading...