Iklan 300 x 250

Random Post

Recent Post

 

Membuat Related Posts Fungsi Scrolling

Text Resizer: Click for Resizer
Huuuh Setelah sebelumnya aku telah selesai menjelaskan tentang membuat related post blogger yang versi pertama.Pada Kesempatan kali ini aku akan menjelaskan lagi tentang membuat related post versi yang baru lagi.Related post kali ini sedikit berbeda dengan versi terdahulu yakni related post ini dilengkapi dengan scroll menu sehingga dapat menghemat isi halaman posting kita.

Related post fungsi srolling memangnya gimana sih? Oke, biar gampang bisa dilihat seperti gambar di bawah ini :


Di gambar tampak ada scroll yang bisa dinaik-turunkan untuk melihat posting-posting yang terkait. Oke, langsung saja ke cara pasang widget related posts dengan fungsi scrolling di bawah posting blog anda.
Sudah Paham khan Widget yang akan kita buat Check This Out..

1.Login ke blogger dengan id anda
    2.Pilih Rancangan
      3.Pada tab menu, pilih Edit HTML
        4.Jangan lupa Centang kotak kecil Expand Template Widget
          5.Setelah itu cari kode berikut ini <p><data:post.body/></p>  Setelah ketemu masukkan script berikut ini dibawah kode tadi.

            <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <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 = 50;
            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.Masih Belum selesai kawan, sekarang cari kode ]]></b:skin>
              7.Setelah itu letakkan kode Css berikut di atas kode tadi :
                .rbbox{border: 1px solid #D8D8D8;padding: 5px;
                background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
                .rbbox:hover{background-color: #EFFBEF;}

                8.Klik Simpan Template Selesai

                    Nb : Disana ada tulisan Related Post yang bisa diganti dengan teks favorit anda.Sama seperti yang sebelumnya ,Untuk kode warna juga demikian, sesuaikan dengan desain template anda. Sekarang coba lihat salah satu posting anda. Maka related posts dengan fungsi scroll akan berada di bawah posting. Untuk membuat scrollnya tampak lakukan posting sebanyaknya,Jika posting Blogmu sudah banyak pasti scrollnya ada .Mudah bukan, oke selamat mencoba Semoga Anda Berhasil


                    Artikel Terkait:

                    Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
                    Dalam Judul : Membuat Related Posts Fungsi Scrolling
                    Dalam Kategori :
                    Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

                    6 komentar:

                    Suriyaaceh mengatakan... Reply Comment

                    Kunjungan Perdana Untuk bersilaturahmi sesama blog walking,,,... Mantap ni triknya sob,,,...

                    ke blog gue yah, nice post sobat

                    Noubi noku mengatakan... Reply Comment

                    @suriyaaceh and Hazel hehehehehe Thankskawan to Hazel Meluncur Sob

                    kode yang harus di carinya ada 3
                    ada alternatif lain gak :g:
                    gak ketemu di blog saya :l:
                    thanks

                    cara membuat related post seperti blog ini gmana ya mas...thank..dari pembaca setia

                    mas nobi, biar ada backgroundnya kaya' punyaknya mas nobi
                    gimana?? tolong di jawab
                    :r:

                    :a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

                    Poskan Komentar

                    Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

                     
                     
                     

                    Temukan Kami Dalam FB

                    Sahabat Blogger

                    http://nobinoku.blogspot.com/

                    Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
                    Saya akan segera link balik..!! Link & Banner Teman
                    powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
                    Check Google Page Rank
                    Cerita Seks Panas Dewasa 17Tahun
                    free counters
                     
                    Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
                    Template Name : Evolution Magazine Template | Modification by : Argabluesky