Mengenal dan Membuat Daftar Blog

3.09.2009
Daftar Blog merupakan salah satu widget yang dikembangkan oleh blogger.com.fungsi dari widget ini yaitu teman bisa melihat dan mengetahui sahabat yang update blognya.Widget ini sangat berguna menurut saya sihsengihnampakgigi.

Bagaimana cara membuatnya?

ikuti langkah-langkah berikut :

  • Login ke Blogger.com
  • Klik Tata Letak/Layout
  • Klik Elemen Halaman/Page Elements
  • Klik Tambah Gadget/Add Gadget
  • Klik Widget"Daftar Blog Baru"
Lihat gambar ini,Isi sesuai dengan yang digambar :
  • Judulnya harus : SAHABAT BEKEN UPDATE
  • Terus klik Tambahkan blog ke Daftar Anda
  • Klik tambah.
  • Hasilnya begini :

Bagaimana Cara Membuat Widget daftar blog menggunakan scroll?

Menjadi seputar pertanyaan dari para sahabat blogger,baiklah ikuti langkah-langakah berikut :
  • Klik Layout/Tata Letak
  • Klik Menu Edit HTML
  • Klik Edit HTML → Sebelumnya terlebih dahulu teman backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.
  • Klik Expand Widget Template
  • Teman cari kode ini
    <b:widget id='BlogList1' locked='false' title='SAHABAT BEKEN UPDATE' type='BlogList'>
  • Atau cari judulnya yaitu : SAHABAT BEKEN UPDATE
  • Ketika teman menemukan scriptnya secara lengkapnya begini :

    <b:widget id='BlogList1' locked='false' title='SAHABAT BEKEN UPDATE' type='BlogList'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <div id='blog-list-title'>
    <h2 class='title'><data:title/></h2>
    </div>
    </b:if>

    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:200px;'>
    <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
    <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
    <b:loop values='data:items' var='item'>
    <li expr:style='data:item.displayStyle'>
    <div class='blog-icon'>
    <b:if cond='data:showIcon == &quot;true&quot;'>
    <input expr:value='data:item.blogIconUrl' type='hidden'/>
    </b:if>
    </div>
    <div class='blog-content'>
    <div class='blog-title'>
    <a expr:href='data:item.blogUrl' target='_blank'>
    <data:item.blogTitle/></a>
    </div>
    <div class='item-content'>
    <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
    <b:if cond='data:item.itemThumbnail'>
    <div class='item-thumbnail'>
    <a expr:href='data:item.blogUrl' target='_blank'>
    <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
    </a>
    </div>
    </b:if>
    </b:if>
    <b:if cond='data:showItemTitle == &quot;true&quot;'>
    <span class='item-title'>
    <b:if cond='data:item.itemUrl != &quot;&quot;'>
    <a expr:href='data:item.itemUrl' target='_blank'>
    <data:item.itemTitle/></a>
    <b:else/>
    <data:item.itemTitle/>
    </b:if>
    </span>
    </b:if>
    <b:if cond='data:showItemSnippet == &quot;true&quot;'>
    <b:if cond='data:showItemTitle == &quot;true&quot;'>
    -
    </b:if>
    <span class='item-snippet'>
    <data:item.itemSnippet/>
    </span>
    </b:if>
    <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
    <div class='item-time'>
    <data:item.timePeriodSinceLastUpdate/>
    </div>
    </b:if>
    </div>
    </div>
    <div style='clear: both;'/>
    </li>
    </b:loop>
    </ul>

    <b:if cond='data:numItemsToShow != 0'>
    <b:if cond='data:totalItems &gt; data:numItemsToShow'>
    <div class='show-option'>
    <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
    <a href='javascript:void(0)'><data:showNText/></a>
    </span>
    <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
    <a href='javascript:void(0)'><data:showAllText/></a>
    </span>
    </div>
    </b:if>
    </b:if>

    <b:include name='quickedit'/>
    </div></div></div>
    </b:includable>
    </b:widget>


  • Yang berwarna merah adalah kode yang harus ditambahkan di script itu.
  • Teman bisa merubah height: 200px dengan tinggi yang diinginkan.
  • Hasilnya begini :
Ya begitulah sedikit tutorial singkat dari saya,semoga bermanfaatpeace.

27 komentar:

  • DeeDee

    weks..aku yang pertamax plus ya????
    hehehehe....trimakasih pak guru...jadi tambah semangat buat belajar kalau ada hal yang kelihatanya kecil tapi sangat menarik ini dibahas....
    saluuut buat pa guru

  • Cengeng-ngesan T_^

    thx, infonya mas, keren euy :)

  • Hangga Nuarta

    Mantap Wan... Lengkap banget tutorialnya...

  • Diary Pink

    kemarin blog saya gak mau updet di blog list. saya tanya kesana kemari gak ada yang mau kasih jawaban. giliran tanya serius malah gak ditanggapin. kesian deh saya...dicuekin hiks...

    untung ada kang Gus yang mau bantuin saya...

  • aR_eRos

    saya pakai simple nya aja de, pakai blogger follower untuk mengetahui apdet terbaru :)

  • sandy

    mantab nui,dicoba ahh... sip mas..

  • iskandaria

    Wah, untung banget mas udah duluan membuat tutorial ini. Padahal saya rencananya pengen buat tutorialnya. Ada yang nanya ke saya sih soalnya (gimana bikin scroll pada menu blogroll kayak di blog saya). Syukur deh udah mas buat. Jadi saya gak perlu repot lagi :-)

  • boyke satria negara

    wah..TOP nih..saya ikut ya......
    he...

  • TUKANG ARSIP

    @DeeDee :trims mg jd inspirasim ya
    @orangapatiang :ok gan sip,,,
    @Cengeng-ngesan T_^ : wah biasa ajah mas,,
    @beat2ws : ok deh,,,
    @Hangga Nuarta : sip mas lg ingin memberi tutor yang lebih lengkap,,,
    @Diary Pink : oh ya mbak trims ya,,
    @aR_eRos : hahaha ok mas...
    @Rusa Bawean : sip mas ibnu,,
    @Kristina Dian Safitry : ok deh mbak...
    @sandy : ayo dicoba..
    @iskandaria : iya mas mg berguna ya,,,

  • TUKANG ARSIP

    @boyke satria negara :ok deh ikutan deh..
    @Sang Cerpenis bercerita : sama2 mbak mg brhsl

  • Erik9320

    nah ini dia, saya cari yang scrollnya.
    Tks Wan

  • Erik93922

    Wan, kalau scroll untuk blog archive gimana caranya. Diposting ya

  • TUKANG ARSIP

    @david : sama2 mas
    @erik : pasti saya posting mas tunggu ya...

  • anggi

    mantab daahh...
    coba dlu aahhh...

    salam kenal ^-^

  • jafar

    barusan pindah rumah ya mas..
    hehhehhe..

  • aprie

    mantafff tuh infonya..
    soalnya aku belum pasang yang beginian,
    hehehe..

    mampir ya...

  • Kin

    Makasi ilmunya.. langsung saya terapkan :) dan sukses

  • youfue

    Itu Kalo Membuat Artikel Terkait Kaya Gimana????????????

  • youfue

    Itu Cara Membuat Artikel TErkait Kaya Gimana ????????????????????????????????????????????????????????????????????????????????????????????????????

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