Widget Post Kategori Ala Template Plus UI

Table of Contents

Widget Kategori Seperti Template Plus UI - Lama tidak pos pada kesempatan kali ini saya akan share lagi tutorial lagi pada kalian semua. Tentu jika kalian melihat blog ini ada kategori di bawah yang mana itu bisa di sesuaikan sesuai milik kalian. 

Script ini saya ambil di Template Plus UI yang mana dari anda mungkin berminat untuk memakai pada template agar lebih menarik lagi. 

Masuk ke Blogger

Langkah pertama kalian adalah masuk ke akun blogger kalian, setelah itu masuk ke Tema > Edit Tema. 

Apabila sudah, kalian ikuti langkah yang kedua ini.

Tambahkan CSS

Sekarang cari kode </style> atau bisa cari kode ]]></b:skin> masukkan CSS berikut ini di bawah ini tepat di atas kode tersebut.

/* Category posts */ .ctgC{margin-bottom:20px} .ctgC.loaded{animation:opaC .5s 0s;-webkit-animation:opaC .5s 0s} .ctgC .blogPg >*{margin-left:auto;margin-right:auto} @keyframes opaC{0%{opacity:0}100%{opacity:1}} @-webkit-keyframes opaC{0%{opacity:0}100%{opacity:1}}

Kemudian Ikuti langkah selanjutnya, oh ya jangan di save dulu karena itu belum selesai. 

Tambahkan Widget Kategori

Setelah menambahkan CSS sekarang menambahkan Widget Kategori yang mana bisa kalian letakkan di mana aja kalian mau. 

<b:widget cond='data:view.isHomepage' id='TextList035' locked='true' title='Categorised Post' type='TextList' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='shownum'>6</b:widget-setting>
    <b:widget-setting name='item-3'>Product</b:widget-setting>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='item-2'>Features</b:widget-setting>
    <b:widget-setting name='item-1'>Art</b:widget-setting>
    <b:widget-setting name='item-0'>Adventure</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <!--[ Categorised Posts by Fineshop Design (fineshopdesign.com) ]-->
    <b:loop index='ctgry' values='data:items' var='item'>
      <div class='ctgW'>
        <h2 class='title'><data:item/></h2>
        <div class='ctgC' data-title='' expr:data-home='data:blog.homepageUrl.canonical' expr:data-label='data:item' expr:id='&quot;categoryId&quot; + data:ctgry'>
          <div class='note'>Loading Posts...</div>
        </div>
      </div>
    </b:loop>
    <script>/*<![CDATA[*/ Defer.js('https://cdn.jsdelivr.net/gh/fineshopdesign/blogger@main/assets/categoryPosts/js/categoryPosts.min.js','cPts-js',10,function(){for(var cId=document.querySelectorAll('[id^=categoryId]'),i=0;i<cId.length;++i){categoryPost({home:cId[i].getAttribute('data-home'),title:cId[i].getAttribute('data-title'),label:cId[i].getAttribute('data-label'),id:cId[i].id,time:'published',ldCl:'loaded',pstNm:6,thmbSize:600,snptLnth:120,pgn:true})};}); /*]]>*/</script>
  </b:includable>
</b:widget>

Jangan lupa ganti kategori sesuaikan dengan punya blog kalian. 

Faq

Apakah Widget Berlaku Untuk Semua Template?

Yup semua template bisa gunakan widget ini untuk kalian yang mempunyai tempate Jagodesain akan lebih bagus

Apa tidak memberatkan blog?

Tentu tidak karena ini hanya memakai CSS dan HTML widget saja jadi aman.