Membuat Widget Grid Kategori Style di Homepage Blogger

Membuat Widget Grid Kategori Stylet di Homepage Blogger

A. Widget Grid Kategori Style

Widget Grid Kategori Style yang dibuat ini hanya menggunakan script CSS dan HTML tanpa Javascript, sehingga saat loading widget grid kategorinya terasa ringan dan tidak memberatkan.

Keuntungan dari "Widget Grid Kategori Style" sebagai berikut.

Fitur mode gelap

ikon SVG

Widget bergaya grid/kisi

Mudah disesuaikan

Dapat menambahkan "kategori tambahan"

Mobile Friendly

Tutorial

Bagaimana cara membuat Grid Kategori ? Cara membuat Widget Grid Kategori Style di homepage blog, ikuti langkah-langkahnya berikut di bawah ini.

Pertama masuk ke Dashboard Blogger, pilih Tema dan dan masuk ke Edit HTML.

Langkah I - Copy Paste CSS

Cari kode ]]></b:skin> terus salin dan tempelkan kode script CSS berikut ini, di atas nya dan kemudian Simpan

/* Category layout by Engineer Abusufian*/
.engineerabusufian{padding:5px;text-align:center;position:relative}.engineerabusufian h2{font-size:1.6em;line-height:1.6em;margin-bottom:0;padding-bottom:0}.engineerabusufian ul{clear:both;margin:15px 0 20px;width:100%;display:flex;padding:0;flex-wrap:wrap;justify-content:space-between}.engineerabusufian.icon-p-2 li{position:relative;width:30%;list-style:none;line-height:1.3em;text-align:center;border-radius:10px;margin:6px 0;background:var(--contentB);box-shadow:0 5px 35px rgb(0 0 0/7%);padding:6px 0 12px;display:flex;align-items:center;justify-content:center}.engineerabusufian li a{display:block;text-decoration:none;color:var(--fontC)}.engineerabusufian li svg{margin:3px 0;width:35px;height:35px;display:inline-block}.engineerabusufian li span{display:block;padding:0 3px}.drK .engineerabusufian li{background:var(--darkBa)}

Langkah II - Copy Paste HTML

Copy paste script di bawah ini, letakkan di widget HTML/Javascript di menu Tata Letak Blogger.

<div class="engineerabusufian coll-3 icon-p-2">
<h2><span>Today you are looking for?</span></h2>
<ul>
<li onclick='vibRate(50)' >
<a href="#" title="tutorial">
  
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.17,2.06A13.1,13.1,0,0,0,19,1.87a12.94,12.94,0,0,0-7,2.05,12.94,12.94,0,0,0-7-2,13.1,13.1,0,0,0-2.17.19,1,1,0,0,0-.83,1v12a1,1,0,0,0,1.17,1,10.9,10.9,0,0,1,8.25,1.91l.12.07.11,0a.91.91,0,0,0,.7,0l.11,0,.12-.07A10.9,10.9,0,0,1,20.83,16a1,1,0,0,0,1.17-1v-12A1,1,0,0,0,21.17,2.06ZM11,15.35a12.87,12.87,0,0,0-6-1.48c-.33,0-.66,0-1,0v-10a8.69,8.69,0,0,1,1,0,10.86,10.86,0,0,1,6,1.8Zm9-1.44c-.34,0-.67,0-1,0a12.87,12.87,0,0,0-6,1.48V5.67a10.86,10.86,0,0,1,6-1.8,8.69,8.69,0,0,1,1,0Zm1.17,4.15A13.1,13.1,0,0,0,19,17.87a12.94,12.94,0,0,0-7,2.05,12.94,12.94,0,0,0-7-2.05,13.1,13.1,0,0,0-2.17.19A1,1,0,0,0,2,19.21,1,1,0,0,0,3.17,20a10.9,10.9,0,0,1,8.25,1.91,1,1,0,0,0,1.16,0A10.9,10.9,0,0,1,20.83,20,1,1,0,0,0,22,19.21,1,1,0,0,0,21.17,18.06Z" fill="#6563ff"/></path></svg>    
<span>Tutorial</span>
</a></li>

<li onclick='vibRate(50)'>
<a href="#" title="Telegram">
<svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewbox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x33_35-telegram"><g><g><path d="M484.689,98.231l-69.417,327.37c-5.237,23.105-18.895,28.854-38.304,17.972L271.2,365.631     l-51.034,49.086c-5.646,5.647-10.371,10.372-21.256,10.372l7.598-107.722L402.539,140.23c8.523-7.598-1.848-11.809-13.247-4.21     L146.95,288.614L42.619,255.96c-22.694-7.086-23.104-22.695,4.723-33.579L455.423,65.166     C474.316,58.081,490.85,69.375,484.689,98.231z" style="fill:#20A0E1;"/></path></g></g></g><g id="Layer_1"/></g></svg>  
<span>Telegram</span>
</a></li>

<li onclick='vibRate(50)'>
<a href="#" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>  
<span>Tools</span>
</a></li>

<li onclick='vibRate(50)'>
<a href="#" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>  
<span>Tools</span>
</a></li>

<li onclick='vibRate(50)'>
<a href="#" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>  
<span>Tools</span>
</a></li>

<li onclick='vibRate(50)'>
<a href="#" title="Tool">
<svg data-name="Layer 1" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.9,12.66a1,1,0,0,1,0-1.32L21.18,9.9a1,1,0,0,0,.12-1.17l-2-3.46a1,1,0,0,0-1.07-.48l-1.88.38a1,1,0,0,1-1.15-.66l-.61-1.83A1,1,0,0,0,13.64,2h-4a1,1,0,0,0-1,.68L8.08,4.51a1,1,0,0,1-1.15.66L5,4.79A1,1,0,0,0,4,5.27L2,8.73A1,1,0,0,0,2.1,9.9l1.27,1.44a1,1,0,0,1,0,1.32L2.1,14.1A1,1,0,0,0,2,15.27l2,3.46a1,1,0,0,0,1.07.48l1.88-.38a1,1,0,0,1,1.15.66l.61,1.83a1,1,0,0,0,1,.68h4a1,1,0,0,0,.95-.68l.61-1.83a1,1,0,0,1,1.15-.66l1.88.38a1,1,0,0,0,1.07-.48l2-3.46a1,1,0,0,0-.12-1.17ZM18.41,14l.8.9-1.28,2.22-1.18-.24a3,3,0,0,0-3.45,2L12.92,20H10.36L10,18.86a3,3,0,0,0-3.45-2l-1.18.24L4.07,14.89l.8-.9a3,3,0,0,0,0-4l-.8-.9L5.35,6.89l1.18.24a3,3,0,0,0,3.45-2L10.36,4h2.56l.38,1.14a3,3,0,0,0,3.45,2l1.18-.24,1.28,2.22-.8.9A3,3,0,0,0,18.41,14ZM11.64,8a4,4,0,1,0,4,4A4,4,0,0,0,11.64,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,11.64,14Z" fill="#6563ff"/></path></svg>
<span>Tools</span>
</a></li>
</ul></div>

Terakhir Simpan.

B. Demo Grid Widget Style

Today you are looking for?

Demikian Cara membuat Widget Grid Kategori Style di halaman homepage Blogger, semoga bermanfaat.

Source:
engineerabusufian

Go to Link

Sentra Bloggers

Membuat Kategori Grid Widget di Homepage Blogger

A. Widget Grid Kategori Style

Tutorial

Langkah I - Copy Paste CSS

Langkah II - Copy Paste HTML

B. Demo Grid Widget Style

Today you are looking for?

Posting Komentar

Tutorial Bootstrap 5 platform Blogger - Bagian #1 Modal

Kode Icon SVG

Template Blogger Plus UI + Bootstrap

Sentra Bloggers