Memperbaiki Menu Drop-down (widget blogger)

Rabu, 09 Februari 2011
Sebelum membaca posting ini saya harap sobat mengecek dahulu apakah Widget Blogger (BlogArchive) untuk tampilan Menu Drop-down tetap berfungsi dengan baik, jika iya maka sobat tidak perlu meneruskan scroll di halamn ini sampai selesai.

Widget blogger untuk pilihan Menu Drop-down ini saya ketahui tidak berfungsi untuk browser-browser Mobile/Hp seperti, Opera Mini dan Bolt browser, Sedangkan untuk browser-browser computer saya belum tahu.

Proses
[...] setelah berada di laman edit html [...]
centang Expand Template Widget, cari dan temukan kode html dari Widget BlogArchive berikut:

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
     <!-- Pastekan kode dibawah tepat disini -->
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  </div>
</b:includable>
<b:includable id='flat' var='data'>
  <ul class='flat'>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id='menu' var='data'>
  <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
      <ul class='hierarchy'>
        <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
  <b:if cond='data:interval.toggleId'>
  <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy toggle-open'>&#9660;&#160;</span>
    </a>
  <b:else/>
    <a class='toggle' href='javascript:void(0)'>
      <span class='zippy'>
        <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
          &#9668;&#160;
        <b:else/>
          &#9658;&#160;
        </b:if>
      </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
</b:widget>

Perhatikan kode yang bercetak tebal Hitam dan Merah.
    Keterangan
    Hitam » kode yang akan di hapus. Merah » Hapus juga kode tersebut, kemudian ganti dengan kode berikut:
<select onchange=''document.location.href=this.options[this.selectedIndex].value;'
style='background:#ddd;
       width:100%;
       height:26px;
       margin-top:5px;
       margin-bottom:15px;
       border:1px solid #666;'>
    <option>-Arsip blog-</option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
Kode diatas telah saya ubah agar tampilannya lebih menarik, untuk contoh saya menggunakan width:300px, sedangkan kode diatas memakai width:100%.
    Preview
Clue
sesuaikan kode cssnya dengan template sobat, agar terlihat menarik.
Terahir klik SIMPAN TEMPLATE.

14 komentar (Memperbaiki Menu Drop-down (widget blogger))

Posting Komentar
  1. Penghuni 60 » Februari 16, 2011 11:11 AM | permalink

    busyeet deh, panjang amat sob...
    aku save dulu deh bwt diplajari

  2. Tihang karas » Februari 16, 2011 10:36 PM | permalink

    ini dia salah satu widget yang bikin blog lemooo...t

  3. Anonim

    It's always nice when you can not only be informed, but also get knowledge, from these type

    of blog, nice entry. Thanks

    Web Designing

  4. Merliza » Februari 20, 2011 2:50 PM | permalink

    wow... panjang :p
    yg pendek aja saya gak menguasai, bagaimana dengan yang satu ini :(

  5. Tihang karas » Maret 14, 2011 5:41 AM | permalink

    @Merliza
    cara di atas tidak sepenuhnya benar, mungkin dalam kaca mata para master posting diatas hanyalah sampah.

  6. H S Consultants » Mei 07, 2011 8:36 PM | permalink

    This is not the first of your posts I've read, and you never cease to amaze me. Thank you, and I look forward to reading more.

    UK Education Consultants

  7. Tihang karas » Mei 10, 2011 5:06 PM | permalink

    @kamran
    maaf ! komentar anda saya hapus, karena link yang anda cantumkan tidak benar.

  8. 7007805@gmail.com » Mei 19, 2011 6:08 PM | permalink

    buuuusyettttt panjang banget...sob...

  9. H S Consultants » Juli 11, 2011 5:09 PM | permalink

    Incidentally, I like the way you have structured your site, it is super and very easy to follow. I have bookmarked you and will be back regularly. Thank you



    Web Hosting | Web Design

  10. Tihang » Juli 17, 2011 5:34 PM | permalink

    thank's

  11. andika priyanto » Mei 15, 2012 6:11 PM | permalink

    artikel anda baik sekali, dan bagus besok akan berkunjung kembali

  12. Saad ali » November 28, 2012 1:25 PM | permalink


    Another great article. I like that you are very honest and direct to the point.
    Architectural Walkthrough
    Architectural Visualization
    Architectural Rendering
    3D Animation
    Product Animation
    3D Modeling
    Corporate Presentation
    3D Images
    Real Estate Publicity
    Multimedia Presentation

  13. Atta Rehman » April 02, 2013 1:15 PM | permalink

    I can see that you are putting a lot of time and effort into your site and detailed articles! I am deeply in love with every single piece of information you post here
    Surgical instruments
    Dental Instruments
    Beauty instruments
    Neurosurgery Instruments
    ENT instruments
    Gynecology instruments
    Orthopedic instruments
    Ophthalmology
    Hollow wear Utensils
    Veterinary instruments
    Surgery Sets

  14. Rameez Raja » April 09, 2013 4:28 PM | permalink

    Another great article. I like that you are very honest and direct to the point.
    CCTV karachi
    Security equipment
    Surveillance System

Back to form

Mohon berkomentar sesuai topik posting di atas !