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.

Baca juga

• Berjaya tukar jadi Hierarchy Blog Archive widget.

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.