Widget Artikel Yang Bersangkutan Dengan Scroll

1.02.2009
Wah masih dalam suasana tahun baru 2009 nihcelebrate.Sebelum itu marilah kita semua sejenak merenungrindu dan berdoadoauntuk Indonesia semoga tidak di rundung kesedihan lagi akibat musibah yang dialami kita semua pada tahun-tahun sebelumnyagarupale.Mari juga kita berdoa doauntuk saudara kita semua yang berada di Palestina untuk diberi ketabahan dalam menghadapi musibah yang tak kunjung redadoa.Ya sudah mungkin itu saja..yang bisa ridwan atau tukang arsip katakansenyumkenyit..baiklah tanpa panjang bukan pendek,lebar bukan ramping..kenyitSaya mau ngasih hadiah ke kalian semuanya....peluk.nih ayo di baca...celebrate

Membuat Widget Artikel Yang Bersangkutan Dengan Scroll

Al kisah tengah malam saya berkeliling di dunia mayaihikhik.Eh saya sempat berhenti di Blog Scrapur.Saya menemukan artikel yang cukup menarik nih...judulnya...How to Put Related blog to your Post in Blogger.com atau artinya Bagaimana Cara Menaruh Artikel Yang Berhubungan Di Blogmu...rindu.Sebelumnya saya edit widget Widget Artikel Yang Bersangkutan yang punya Mas Scrapur menjadi Widget Artikel Yang Bersangkutan Dengan Scroll...
Langsung ajah langkah-langkahnya:
  1. Login ke Blogger
  2. Klik Tata Letak-->Edit HTML-->Jangan lupa di centang Expand Template Widget
  3. Anda cari Script ini:

    <data:post.body/></p>

    atau

    <div style='clear: both;'/>

  4. Kalau untuk widget dari Mas Scrapur yang tidak memakai scroll scriptnya disini
  5. Kalau untuk widget editan tukang arsip yang memakai scroll scriptnya ini :

    <b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>
    <!-- *****************http://blogger.com*****Jan,2007****************** -->
    <!-- *****************Related Articles by Labels - Take Two****************** -->

    <!--

    1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
    2. The current article will also be listed, now it's no more.
    -->

    <div class='widget-content'>
    <h3>Related Posts by Categories</h3>
    <div style='overflow:auto;width:600px;height:100px;padding:10px;border:3px;background:url(http://i497.photobucket.com/albums/rr334/ridwanox/animasi1.gif)top center #FFFFFF;'>
    <div id='data2007'/><br/><br/>
    <div id='Scrapur'>
    Widget edited by <u><a href='http://weblog-indonesia.blogspot.com/'>Weblog Indonesia</a></u>
    </div>
    <script type='text/javascript'>

    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 100;
    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;data2007&#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>
    </div>
    </div>
    </b:if>

  6. Taruh script di atas itu diantara:

    <data:post.body/></p>

    dan

    <div style='clear: both;'/>

    Hasilnya begini:

    <data:post.body/></p>

    <b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>
    <!-- *****************http://blogger.com*****Jan,2007****************** -->
    <!-- *****************Related Articles by Labels - Take Two****************** -->

    <!--

    1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
    2. The current article will also be listed, now it's no more.
    -->

    <div class='widget-content'>
    <h3>Related Posts by Categories</h3>
    <div style='overflow:auto;width:600px;height:100px;padding:10px;border:3px;background:url(http://i497.photobucket.com/albums/rr334/ridwanox/animasi1.gif)top center #FFFFFF;'>
    <div id='data2007'/><br/><br/>
    <div id='Scrapur'>
    Widget edited by <u><a href='http://weblog-indonesia.blogspot.com/'>Weblog Indonesia</a></u>
    </div>
    <script type='text/javascript'>

    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 100;
    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;data2007&#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>
    </div>
    </div>
    </b:if>

    <div style='clear: both;'/>

  7. Simpan Template dan Lihat hasilnya.
Keterangan:
Widget Artikel Yang Bersangkutan Dengan Scroll editan Weblog Indonesia

Kalau anda memilih Widget Artikel Yang Bersangkutan Dengan Scroll editan tukang arsip,maka yang harus anda edit yaitu:
  1. Pada langkah ke empat anda lihat ada tulisan berwarna merah width,height,dan border anda rubah terserah ukuran anda.
  2. Pada Langkah keempat juga anda lihat ada script begini:

    <div style='overflow:auto;width:600px;height:100px;padding:10px;border:3px;background:url(http://i497.photobucket.com/albums/rr334/ridwanox/animasi1.gif)top center #FFFFFF;'>

    yang warna merah http://i497.photobucket.com/albums/rr334/ridwanox/animasi1.gif anda ganti dengan gambar apa yang ingin dijadikan background widget itu.Kalau anda tidak mau ada background anda hapus maka anda bisa lihat hasilnya jadi begini:

    <div style='overflow:auto;width:600px;height:100px;padding:10px;border:3px;background:#FFFFFF;top center;'>

    Setelah itu anda ganti #FFFFFF dengan warna apa aja..Lihat Warnanya disini
  3. Kalau ada yang ditanya silahkan kasih komentar ya...sengihnampakgigi


Inspirasi : Mas Scrapur

21 komentar:

  • lookj

    Wes...keren banget cuy....tapi aku dah make yang gak scroll, met taun baru yah....

  • fata

    lhadalah...panjang amat widgetnya. anyway, tks ya.

  • Erik

    Bagus sekali tipnya, makasih mas

  • Hangga Nuarta

    Hebat tutorlanya... Keren..... :D

  • Rajaklik

    wah keren nih, pingin nyoba tapi masih lelet nih koneksinya :p

  • rio2000

    oke nih tutorialnya

    kalo sempat saya coba nanti :big:

  • rio2000

    oke nih tutorialnya

    kalo sempat saya coba nanti :big:

  • harry seenthing

    wah mantafff nih kang tipsnya kayaknya aku mau mencobanya kang.....

  • david
    Komentar ini telah dihapus oleh pengarang.
  • oyat

    wah keren tu ................truz berkarya memang tukang arsip sangat cocok dengan sebutannya ......truz ngeblog blogger indonesia

  • sandy

    wedew makin hari makin mantab aja nih bro..

  • Manan

    Freeeeenddddsss ada pr nih, kerjain yach :big:

  • Tips Blogging

    Wuih mantap, hasilnya keren bangets... :clp:

  • Syamsul Alam

    Hebat dan panjang.... Met kenal bro! Huehueheuhue........ moga panjang umur dan bahagia. (halah, emang ulang tahun...)

  • Pauls

    cukup panjang bos, tutornya jadi bingung

    hehe

    Maklum Pemula

  • Baka Kelana

    Di save dulu ya komandan buat dipelajari
    Thanks sharingnya

  • Posting Komentar

    Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

    Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

    Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

    Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

    Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)