Cara buat Hierarchy widget Blog Archive.

 Update: 26 Jun 2024


Seperti yang dijanjikan. Aku nak share sikit tutorial macam mana nak jadikan widget Blog Archive menjadi versi Hierarchy.

Mulanya aku pun bingung macam mana nak ubah. Default template aku hanya ada widget Blog Archive dalam versi Flat List. Entah kenapa developer buat macam tu, aku tak pasti.


Nak edit template senang je sebenarnya kalau tahu cara. Tapi yang paling penting, kena buat step by step. Tak boleh gopoh. Nanti silap langkah, terus murung.

Step 1: Edit HTML


Mula-mula, pergi ke Theme > klik anak panah tepi CUSTOMIZE > Backup. Kena klik benda tu dulu sebagai langkah berjaga-jaga kalau-kalau ada problem nanti. Kemudian baru boleh klik Edit HTML.

Akan muncul code yang sangat memeningkan kepala. Dah lah tengah panas. Makin panas pulak kepala tengok semua code tu. Apa-apa pun, kena cari satu code culprit yang jadi penyebab Hierarchy tak muncul atau problem.

Step 2: Cari dan edit b:css='false'


Kat bahagian atas permulaan code banyak-banyak tu, cari code b:css='false'. Jumpa tak? Kalau jumpa, tukar perkataan false kepada true supaya jadi macam ni: b:css='true'. Klik Save dan keluar dari situ. Kalau tak jumpa code ni, terus pergi ke Step 3.

Code dalam bulatan merah tu lah yang penting.

Setting nya macam tu sebab masa kita guna template yang bukan asalnya dari Blogger, developer template tu buat false supaya dapat buang default CSS milik Blogger dan nak bagi blog tu loading lebih laju.

Tapi malangnya, mana-mana default widget milik Blogger mungkin akan terkesan. Bila disable default CSS, akan ada problem. Contohnya sidebar widget jadi senget. Nak betulkan, kena tambah CSS baru.

Jadi, bila kita enable default CSS (true) milik Blogger, masalah tu semua dapat elak. Cuma akan ada lah beberapa widget yang terkesan dek customization yang developer template buat.

Macam aku, bila aku enable default CSS milik Blogger, widget Blog List dan contact form terkesan. Lintang-pukang kedudukannya. Aku betulkan apa yang boleh.

Step 3: Pastikan ada widget Blog Archive



Step seterusnya, pergi ke Layout > Blog Archive. Kalau widget Blog Archive tu takde, sila tambah dengan klik Add a Gadget > Blog Archive. Cara setting boleh refer gambar atas. Lepas siap, klik SAVE.

Step 4: Cari kedudukan code widget Blog Archive



View blog macam biasa. Kalau widget Blog Archive yang kita add tadi tu tak elok atau ada problem, pergi ke Theme > klik anak panah tepi CUSTOMIZE > Edit HTML dan klik icon Jump to widget yang ada kat bahagian atas kanan. Srcoll cari BlogArchive1 atau BlogArchive2. Klik.

Step 5: Gantikan dengan code baru


Sebelum tekan nombor belah kiri.

Selepas tekan nombor belah kiri.

Akan muncul bahagian code widget Blog Archive. Kat barisan <b:widget id='BlogArchive1' locked='false'... tu ada nombor ribuan. Klik nombor tu dan perasan tak anak panah berubah daripada menghala ke bawah jadi menghala ke kanan? Sini penting. Bila anak panah tu menghala ke kanan, delete semua code yang anak panah tu tunjukkan dan gantikan dengan code bawah ni:

          <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='showStyle'>HIERARCHY</b:widget-setting>
              <b:widget-setting name='yearPattern'>yyyy</b:widget-setting>
              <b:widget-setting name='showWeekEnd'>true</b:widget-setting>
              <b:widget-setting name='monthPattern'>MMMM</b:widget-setting>
              <b:widget-setting name='dayPattern'>MMM dd</b:widget-setting>
              <b:widget-setting name='weekPattern'>MM/dd</b:widget-setting>
              <b:widget-setting name='chronological'>false</b:widget-setting>
              <b:widget-setting name='showPosts'>true</b:widget-setting>
              <b:widget-setting name='frequency'>MONTHLY</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:include cond='data:style == &quot;HIERARCHY&quot;' data='data' name='interval'/>
    <b:include cond='data:style == &quot;FLAT&quot;' data='data' name='flat'/>
    <b:include cond='data:style == &quot;MENU&quot;' data='data' name='menu'/>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
            <b:includable id='content'>
  <div class='widget-content'>
    <div id='ArchiveList'>
      <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
        <b:include cond='data:this.style == &quot;HIERARCHY&quot;' name='hierarchy'/>
        <b:include cond='data:this.style in {&quot;FLAT&quot;, &quot;MENU&quot;}' name='flat'/>
      </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='hierarchy'>
  <b:include data='data' name='interval'/>
</b:includable>
            <b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='interval'>
    <ul class='hierarchy'>
      <li expr:class='&quot;archivedate &quot; + data:interval.expclass'>
        <b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
        <a class='post-count-link' expr:href='data:interval.url'>
          <data:interval.name/>
        </a>
        <span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
        <b:include cond='data:interval.data' data='interval.data' name='interval'/>
        <b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
      </li>
    </ul>
  </b:loop>
</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='posts' var='posts'>
  <ul class='posts'>
    <b:loop values='data:posts' var='post'>
      <li><a expr:href='data:post.url'><data:post.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
            <b:includable id='toggle' var='interval'>
  <a class='toggle' href='javascript:void(0)'>
    <span expr:class='&quot;zippy&quot; + (data:interval.expclass == &quot;expanded&quot; ? &quot; toggle-open&quot; : &quot;&quot;)'>
      <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
        &#9660;&#160;
      <b:elseif cond='data:blog.languageDirection == &quot;rtl&quot;'/>
        &#9668;&#160;
      <b:else/>
        &#9658;&#160;
      </b:if>
    </span>
  </a>
</b:includable>
          </b:widget>

Icon Preview.

Icon Save.

Klik Preview theme. Kalau takde masalah, boleh klik Save. Kemudian, view blog macam biasa. Kalau elok, tahniah! Kalau masih ada problem, cuba tengok balik step dari atas kot ada silap kat mana-mana.

Rupa widget Blog Archive jenis Hierarchy.

InsyaAllah kalau follow step yang aku bagi tu, akan muncul widget Blog Archive dengan jayanya. Kalau tak jadi jugak, alamatnya kena contact sendiri lah developer template yang korang beli atau guna tu. Diorang lebih pakar.

Update


In case kalau nak ubah warna arrow tu, boleh ambil code bawah ni dan letak atas ]]></b:skin> yang ada dalam Edit HTML:

.BlogArchive .zippy {
color: #93aaff;
}

Lepas siap. Klik Preview theme atau Save. Kalau nak tukar warna lain, cari code warna kat web HTML Color Codes. Dalam ni ada banyak warna yang boleh kita pilih.

Post a Comment

12 Comments

  1. mudah kan widget mcm ni. sy pun prefer yg ni

    ReplyDelete
    Replies
    1. Memang versi ni lagi elok dari yang lain. Senang nak refer entri lepas.

      Delete
  2. Tenkiu share tuto .. CCL bookmarks dulu . Ada masa lapang CCL nak try main coding html ni . Lama benorrr tinggal

    ReplyDelete
  3. ni mmg khas utk blog acheived shj ke? x boleh ke utk list yg lain? contoh, malaysia. sub topic dia ada melaka, KL, selangor etc...

    ReplyDelete
    Replies
    1. Betul tu. List lain tu maksudnya labels, tags atau search? Tak silap pernah ada tutorial tu kat blog mana entah. Tapi sekarang tak function dah setting tu.

      Delete
  4. Terima kasih share. Nanti boleh cuba kalau guna template yang jenis blog archive dia drop down tu.

    ReplyDelete
  5. Waaahhh best best.. Thank you sharing :D

    ReplyDelete
  6. mcm mana ya nak custom arrow archive list tu jadi warna lain? and saya try ubah kod ▼ ke ▾ untuk bagi kecik sikit, tapi bila klik dia still return yang asal. btw suka tgok design blog ni, sleek and simple.

    ReplyDelete
    Replies
    1. Untuk ubah code arrow tu, saya tak jumpa lagi caranya. Sebab sama lah macam tu. Dah ubah, bila click, jadi asal. Entah kat mana Blogger taruk coding asal tu saya tak pasti.

      Kalau nak ubah warna arrow, boleh tengok bahagian akhir entri tu. Saya dah update.

      Terima kasih atas komen pasal design blog ni. 😁

      Delete