Widget Post Kategori Ala Template Plus UI

Create Category Post Widget like template plus ui

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. 


2 comments

  1. tumben blom update lagi mas
    1. Masih main mobile lagends mas dan belum ada topik yang pas
1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.