Membuat Artikel Terkait Dengan Scroll



Membuat Artikel Terkait Dengan Scroll - artikel terkait dengan scroll ini berbeda dengan artikel terkait sebelumnya (baca: cara membuat artikel terkait) yang tidak mempunyai scroll. Contoh artikel terkait dengan scroll dapat anda lihat pada blog Deny ini.

Seperti yang dijelaskan pada artikel sebelumnya, bahwa artikel terkait fungsinya adalah agar setiap post/artikel yang terkait atau terbit dalam kategori yang sama, dapat ditampilkan juga dalam post yang sedang dibaca pengunjung.

Artikel Terkait Dengan Scroll

Selain itu, artikel terkait dengan scroll ini dapat menghemat tempat dan juga memasukkan berpuluh-puluh postingan tanpa batas. Jadi, dengan menggunakan artikel terkait memudahkan para pengunjung untuk melihat posting atau artikel lain yang berkaitan dengan artikel yang sedang dibaca, dalam hal ini artikel yang berkaitan sesuai dengan label atau kategori.

Cara Membuat Artikel Terkait Dengan Scroll

  • Pertama Login ke akun blog Anda.



  • Pilih Layout / Tata Letak / Rancangan.



  • Klik tab Edit HTML.



  • Kemudian klik Expand Template Widgets.



  • Cari kode yang seperti ini :



  • <data:post.body/>

    Gunakan Ctrl + F untuk mempermudah pencarian.

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



  • 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 = 9999;
    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>
  • Untuk kata Artikel Terkait, Sobat bisa menggantinya dengan kata yang lain.



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

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



  • Catatan:
    Ganti kode-kode yang berwarna dengan kode warna yang sobat mau. Jika tidak tahu kode warnanya, silakan ke artikel tabel dan kode warna html.
    #D8D8D8: warna border
    #E0F8E0: warna background
    #EFFBEF: warna background juga, namun akan terlihat jika disorot dengan pointer

  • Terakhir klik Simpan Template.




  • Sekian dulu artikel Deny ini mengenai cara membuat artikel terkait dengan scroll. Semoga dengan widget artikel terkait dengan scroll ini pageviews blog anda makin meningkat karena klik di artikel terkait dari pengunjung. Semoga bermanfaat.

    Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

    Tidak tahu cara berlangganan? Klik disini

    Related Post:

    Anda sedang membaca artikel tentang Membuat Artikel Terkait Dengan Scroll dan anda bisa menemukan artikel Membuat Artikel Terkait Dengan Scroll ini dengan url http://daw-xp.blogspot.com/2011/10/membuat-artikel-terkait-dengan-scroll.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Artikel Terkait Dengan Scroll ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Membuat Artikel Terkait Dengan Scroll sumbernya.


    31 comments

    Musa October 5, 2011 at 6:53 PM

    Mantaff sob,udah ane praktekin tutorialnya :D,sekalian pertamax

    Reply delete
    Nurul Imam October 5, 2011 at 8:42 PM

    Saya udah lama ga urusin blogspot nih.

    Reply delete
    Rama88 October 5, 2011 at 10:28 PM

    thx atas infonya sob,, sudah saya praktekin,, hehhe,,

    Reply delete
    Admin - Sc zone October 7, 2011 at 12:35 PM

    hhi mantep ^_^ nice share master Deny

    Reply delete
    Laptop tablets October 7, 2011 at 4:22 PM

    untuk blog dengan artikel yang kaya saya kira tips ini sangat cocok, tapi kurang cocok jika blog yang berbasiskan gambar.. :D thanks

    Reply delete
    efan.ganteng October 7, 2011 at 5:43 PM

    makasih gan infonya

    Reply delete
    rendracyber October 28, 2011 at 1:17 PM

    siip makasih infonya saya coba,bila berkanan kunjungi blog saya http://rendraaloneae.blogspot.com/ minta masukannya dari senior bloger,makasih sebelumnya

    Reply delete
    Muhammad October 31, 2011 at 10:46 PM

    Terima kasih infonya... salam...

    Reply delete
    KetuaKelasPojok November 6, 2011 at 11:43 AM

    thanks mas bro ..

    http://kelaspojok.org/

    Reply delete
    admin of kuntil December 19, 2011 at 10:52 PM

    tq masssssssss, mantap infonya...

    http://www.kuntil-lepas.com

    Reply delete
    peluang January 25, 2012 at 5:11 PM

    thanks bgt gan, otak-atik sampe kepala pening...... :))

    Reply delete
    intensifer February 2, 2012 at 10:14 AM

    makasih banget,, setelah keliling-keliling dan nggak berhasil. ternyata di sini ane nemu yang pas. its work! thanks sob...

    Reply delete
    imanarsyad February 3, 2012 at 7:27 PM

    makasih tutorialnya mas hehe

    Reply delete
    Akbar Rizki February 6, 2012 at 9:44 AM

    Mantap gan artikelnya, sangat membantu.....trims

    Reply delete
    roby-gen February 12, 2012 at 10:25 PM

    Langsung dipraktekin...hohohohohooo

    tengkyu gan,,,

    Reply delete
    An Nahal March 3, 2012 at 1:13 PM

    mantaph om..
    sy olah TKP dulu
    thanks

    Reply delete
    Dunia Dalam Blog March 16, 2012 at 2:53 PM

    terimakasih..
    sudah saya aplikasikan di blog saya

    Reply delete

    thanks... dah q prakteki broo...

    Reply delete

    kok gak kerja mas broo... g jalan..

    Reply delete

    ada empat.. gimana?

    Reply delete
    Mas Pray May 1, 2012 at 12:59 AM

    Makasih banget tipsnya mas, sudah saya terapkan di blog saya dan berhasil. Alhamdulillah sekarang udah ada artikel terkait...hehehe...

    Reply delete
    MILANISTI | Expression Blog July 7, 2012 at 10:54 PM

    langsung ah ke TKP., mantap gannn

    Reply delete
    Fullmediafiredownload July 11, 2012 at 5:38 AM

    Wiiih Makasih sob Infonya

    Reply delete
    LaNo Saputra August 18, 2012 at 12:23 AM

    THANKS SOB..UDAH ANE PASANG DAN BERHASILL

    Reply delete
    abang August 24, 2012 at 12:08 PM

    untung mas ngepost artikel kaya begini, jadi saya bisa ngeganti tampilan artikel terkait yang lama (nggak ada scrollnya)

    makasih mas.

    Reply delete
    MAU ANDA September 18, 2012 at 10:45 PM

    thank's gan, ijin copas

    Reply delete
    Artabez.Cam Berita dan Informasi November 25, 2012 at 1:33 PM

    saya coba dulu kawan. mudah2an sukses...hehehe

    Reply delete
    Ujielly le Chéile December 15, 2012 at 6:42 PM

    Tkz,
    http://hikmahtaubat.blogspot.com/

    Reply delete
    Terjemahan Lirik Lagu Barat January 24, 2013 at 1:36 PM

    keren... tengkyu mas

    Reply delete
    Desain Company Profile July 10, 2013 at 11:33 AM

    Terimakasih banyak atas tipsnya

    Reply delete
    hezty tatawarna December 20, 2013 at 10:23 AM

    yay , dapet juga ... :D

    Reply delete

    Post a Comment

    Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

     

    Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors