Menu Scroll Pada Artikel terkait

Rasanya sudah agak lama saya tidak membuat postingan tentang blogspot, pembahasan saya kali ini sebenarnya sudah lama di dunia per blogger an, tapi ga ada salahnya saya coba berikan buat sobat blogger pemula. Postingan sebelumnya, saya sudah pernah menulis tentang cara membuat artikel terkait atau related posts.

 

Nah, sama saja dengan yang itu, tapi akan saya tambahkan scroll down menu pada artikel terkaitnya. Ga usah panjang lebar ya, langsung aja menuju lokasi.

  1. Buka Blogger, login dengan ID sobat tentunya.

  2. Kemudian klik Tata Letak

  3. Pilih Edit HTML.
    Lagi - lagi berhubungan dengan template, jadi saya sarankan untuk membackup template sobat terlebih dahulu.

  4. Tambahkan kode berikut ini tepat dibawah <data:post.body/>
    Jika sebelumnya sobat sudah pernah menggunakan artikel terkait, hapus saja dulu kode artikel terkait yang lama milik sobat.
    Dan jika sobat sudah menggunakan read more, sobat akan menemukan 2 kode <data:post.body/>

  5. Letakkan kode dibawah ini setelah kode <data:post.body/>yang pertama.

    <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>


  6. Setelah itu, letakkan kode berikut ini diatas 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);}


  7. Simpan Template.

Semoga berhasil ! Jika ada pertanyaan jangan sungkan - sungkan tanya ke saya di kolom komentar, kalau saya sempat akan saya balas. Terima kasih telah membaca artikel - artikel saya.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

52 comments

31 Juli 2009 pukul 08.52

maksudnya apaan yak ini Menu Scroll Pada Artikel terkait...masih rada bingung nih ...

31 Juli 2009 pukul 09.09

Ooooooooooooooooooooooooooooo yg seperti dibawahnya itu yaaa contohnyaa yaa :p :D

31 Juli 2009 pukul 09.23

Bos ... izin mosting yach Bos ... ;) :-* yah yah yah ... :)

31 Juli 2009 pukul 22.52

Wajib dicoba niy untuk blog yang blogspot. Thanks infonya, langsung copas...
salam super sahabat

1 Agustus 2009 pukul 14.07

mantap sobat, nice blog :D

4 Agustus 2009 pukul 16.04

salam kenal....

5 Agustus 2009 pukul 03.21

Ternyata banyak sekali blogger yang 'terbiasa' dengan tips dan trik blogspot *ngiri* :))

7 Agustus 2009 pukul 20.51

maaf, klo bikin spoiler pada sidebar bisa gak?

8 Agustus 2009 pukul 18.50

Menarik bos infonya..

9 Agustus 2009 pukul 09.29

wah, pasti berguna banget buat blogspot user nih.. tapi aku ga punya blog disitu :(

23 Agustus 2009 pukul 06.21

maaf ni mas, aku msh g ngerti, trus abis itu gimana cara aplikasinya pas postingan ya? maaf aku gaptek nih :) btw aku do follow jg kunjungi blogku ya :)

24 Agustus 2009 pukul 22.28

Makasih Infonya Mas

It's Work !!!!
salam kenal
http://www.beternakjangkrik.co.cc

Regard
Lili R

25 Agustus 2009 pukul 14.34

nice tips friend
thanks for this article

26 Agustus 2009 pukul 05.48

gak berhasil... ~x( ~x(

19 Oktober 2009 pukul 00.26

mantep tutorialnya....

28 Oktober 2009 pukul 19.33

Kenapa kok di blog q ga bisa yaw???

1 November 2009 pukul 13.04

buat artikel terkait ku pake yg ini aja deh, lebih bagus.. tx sob..

16 Februari 2010 pukul 09.16

wow! berhasil, makasih infonya :D

http://depridhan23.blogspot.com/

16 Februari 2010 pukul 10.20

@ Depri23 : oke sama2 sobat

27 Februari 2010 pukul 09.53

thanks sobat tutorialnya mantab ! (he .he . kok jd ikut2an panggil sobat)

8 Maret 2010 pukul 10.24

ga muncul sob!!!

2 April 2010 pukul 19.23

mas, bisa tolong saia tidak atasi masalah pada template saia ?

2 April 2010 pukul 21.04

@ fajri : bukannya sy tdk mau bantu, tempo hari sy pernah bantu mas fajri ngedit templatenya tp skrg malah ganti template br..sia-sia dong

3 April 2010 pukul 06.46

mas, template yang mas edit saia pake kok, silahkan liat di zonapc-software.blogspot.com

saia mau tanya nih, bagaimana cara memperbaiki sexy sharing yang rusak seperti template saia yang dulu ?

terus bagaimana cara membuat posisi sidebar dengan kotak postingan sejajar/ sama rapinya ?

3 April 2010 pukul 22.55

@ fajri : gampang atuh mas fajri, u/ blog yg zonapc-software.blogspot.com, coba cari kode

#main-wrapper {
float: left;
width: 600px;
padding: 0 0 20px; }

dan

#main-wrapper {
width:372px;
float:left; }


sisipkan : margin-top:-12px; sehingga menjadi

#main-wrapper {
float: left;
width: 600px;
margin-top: -12px;
padding: 0 0 20px; }

#main-wrapper {
width:372px;
float:left;
margin-top: -12px; }

4 April 2010 pukul 04.10

mas, bentuk nya setelah saia tambahkan kode margin-top kok makin sempit yaa mas ?

9 April 2010 pukul 18.52

nggak tau kenapa saya menggunakan template baru nggak ada satupun yang bisa di pasang "artikel terkait" saya menggunakan template yang saya ambil dari http://draft.blogger.com
apa template nya yang nggak support ya?

sebelumnya, beberapa template yang saya unduh bisa dipasang artikel terkait. tapi yang dari draft.blogger.com ini saya selalu gagal, coba mas Dody gunakan juga template dari draft.blogger.com (untuk eksperimen) kalo sukses, bisa dijadikan bahan postingan, dan jangan lupa saya juga dikabari...!

9 April 2010 pukul 18.59

satu lagi mas, menggunakan cara ini saya hanya berhasil menampilkan kotak artikel terkaitnya saja, tapi isi dalam labelnya nggak keluar, mungkin ini ada kode yang harus ditambahkan, tapi saya ngga tau bahasa kode2an (bisanya cuma copas kode) :D

9 April 2010 pukul 19.46

@ markus ali : oke deh nanti saya uji coba gunakan template dr draft blogger, thanks..

9 April 2010 pukul 20.51

@ markus ali : saya sdh uji coba template sama persis dgn yg sobat markus gunakan saat ini, dan berhasil, silahkan baca betul2 tentang cara memasang artikel terkaitnya disini

15 Mei 2010 pukul 12.39

salam kenal nih...dari cahpare
sob saya menemukan masalah yang sama nih kotak artikel muncul tapi gak ada isi artikelnya...
Apa harus diedit secara manual ya...
mohon pencerahannya...
**cara ke I & II udah saya coba
ohya sob untuk lebih jelasnya coba liat blog ane...ditunggu jawabanya...

17 Juni 2010 pukul 22.06

langsung dipraktekkan dan sukses.... tutorial mudah dipahami, terimakasih mas..

28 Juni 2010 pukul 00.49

thx mas, saya sudah nyoba dan ternyata berhasil, mampir ke blog saya juga y mas..

19 Juli 2010 pukul 08.01

Beberapa x di coba ga2gal terus, Ternyata letakkan Kodenya di yang kedua baru bisa.Thanks mas dody Tutorialnya.

Anonim
24 Oktober 2010 pukul 09.54

Alhamdulillah... ma kasih bayak dah berhasil

7 Desember 2010 pukul 04.32

mantap gan saya mau idjin posting ya sekedar untuk menghapal saja tapi tentang ko om tidak akan copy paste ko.....

17 Desember 2010 pukul 00.07

aaaa ga berhasil :( malah kotak doang yg keluar :(

19 Desember 2010 pukul 13.47

hebat... lalu bagaimana jika kita menginginkannya utk WP self Hosting mas?

20 Desember 2010 pukul 00.53

ck...ck

2 Januari 2011 pukul 17.34

mas engga bisa

3 Februari 2011 pukul 10.27

@Dody FariaL aku juga g bisa nih, cuman muncul tulisan artikel terkait aja...

19 Maret 2011 pukul 14.36

di blogku berhasil, tapi yang tampil 9 link, gimana biar linknya lebih, misal jadi 15 link gitu? makasih kalau berkenan menjawab :)

30 Mei 2011 pukul 10.20

thanks,saya memang masih baru dlm dunia blogger.makasih ya..

Anonim
11 Juli 2011 pukul 18.16

muantap surantap jey....
oh ya , gmana carax meramaikan blog dari searc engine yang murni?

16 Juli 2011 pukul 04.23

thanks infonya gan :-)

4 Agustus 2011 pukul 17.22

Dipraktekkan gan..oh ya ijin juga pakai Template sini ya gan...
Terima kasih

10 Agustus 2011 pukul 04.58

Terimakasih

22 Agustus 2011 pukul 12.40

BErhasil!!!makasih bwt infonya gan,di tmpat lain prakteknya malah jadi error...jempol deh!!hehe

3 September 2011 pukul 19.56

mantapz gan
work 10000000000000000%
visit balik ya http://loekman-caem.blogspot.com/
thaxs

16 Desember 2011 pukul 15.48

mantab...makasih bang atas tutorialnya dan saya juga pakai yang ini. salam persahabatan blogger bang

13 Maret 2012 pukul 23.04

Mantappp!!! coba ah...

11 Mei 2012 pukul 22.49

var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;

udah ganti 100 kok tetep aja jumlah postingan tetep 25 yah ?
ane mau ngatur jumlah postingan nya

Posting Komentar

Reader Community

Recent Comments