Skip to main content

Cara Membuat Widget Label dengan Style Horizontal Scrollable di BlogSpot



Di situs Detik, Kompas, PlayStore dan situs lainnya marak menggunakan Horizontal Scrollable di bagian header yaitu deretan menu kategori yang dapat digeser kekiri dan kekanan. Seolah menjadi trend yang sepertinya asik untuk ditiru. Di Blogspot kita mempunyai widget label yang dapat dibuat untuk meniru gaya itu dan kodenya bisa kita dapatkan di w3.school, tapi melalui posting ini kita tidak perlu kemana-mana lagi karena saya telah mengumpulkan semua bahan yang diperlukan untuk membuat semua itu dan membagikannya disini.

Sebelumnya perlu kita ketahui pada template Blogger khususnya deretan Template paling atas diantaranya Essensial, Contempo dan Notable sudah terdapat fitur Widget Label yang terpasang di Sidebar lengkap dengan style css-nya sendiri. Hal ini jika kita memasang style Horizontal Scrollable tentu css-nya akan berbenturan. Oleh karena itu sebelum memasang ini sebaiknya alokasikan css style yang terdapat pada template bawaan buat menjadi khusus untuk Sidebar saja.

Caranya, sebagai contoh misal ada selector .Label li maka tambahkan didepannya menjadi .sidebar-container .Label li, ini bertujuan agar css widget label bawaan template hanya bekerja pada Sidebar saja. Tambahkan .sidebar-container di depan semua selector yang berhubungan dengan Widget Label, saya sudah cek, tidak banyak hanya beberapa selector saja.

Setelah dipastikan semua selector label bawaan terkhusus bekerja untuk sidebar saja barulah kita tambahkan css style Horizontal Scrollable ini. Jadi intinya Widget Label di Header memiliki style sendiri begitu juga dengan Widget Label di Sidebar memiliki style tersendiri.

Berikut ini bahan yang diperlukan:
1. Variabel warna, silakan salin dan pasang kebagian Variable definition.
2. Style css, pasang ke bagian skin css.
3. Widget Label, pasang dibagian Header. 

Namun sebaiknya element html <header class='centered-top-container'> 

Diubah menjadi seperti ini <header><div class='centered-top-container'>

Sebab jika tag <header> disatukan dengan class centered-top-container, style dari categories/label akan terganggu.

<header>
<div class='centered-top-container'>
Widget Header
Widget FollowBlog
Widget Search
Hamburger Menu
</div>
Widget Label Disini
</header>

Silakan download Style Css dan Widget Label disini https://drive.google.com/file/d/149LL7kiypZJM6UaI5-6k5eXXwf0ZbMvp/view?usp=drivesdk atau silakan salin kodenya dibawah ini dan Selamat mencoba!

<!-- Variabel Warna Label -->

<Group description="Category" selector=".categories">
<Variable name="category.text.color" description="Category text color" type="color" default="#fff" value="#ffffff"/>
<Variable name="category.link.color" description="Category link color" type="color" default="#fff" value="#ffffff"/>
<Variable name="category.background.color" description="Category background color" type="color" default="#25a186" value="#25a186"/>
<Variable name="category.item.color" description="Category item title color" type="color" default="#186857" value="#186857"/>
<Variable name="category.icon.color" description="Category icon count color" type="color" default="#e5f0ee" value="#e5f0ee"/>
</Group>

<!-- Style Widget Label -->

.categories{
clear:both;
display:block;
background:$(category.background.color)
}
.categories .Label h3.title{
float:left;
display:inline-block;
margin-right:0;
border-radius:5px;
padding:0 5px;
background-color:$(category.item.color);
color:$(category.text.color);
font-size:14px;
-webkit-flex:none
}
.categories .Label{
margin:0;
padding:7px 0;
font:$(body.text.font);
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
justify-content:space-between;
background-color:0 0;
overflow:auto;
white-space:nowrap
}
.categories .Label ul{
display:flex;
margin:0;
padding:0;
list-style:none
}
.categories .Label ul li{
padding-left:5px;
margin-left:10px;
-webkit-flex:none
}
.categories .Label ul li .label-count{
display:inline-block;
border-radius:5px;
margin-left:3px;
padding:0 3px;
background-color:$(category.icon.color);
color:$(category.item.color)
}
.categories .Label ul li a.label-name{
color:$(category.link.color);
text-decoration:none
}
.categories .Label ul li a:visited, .categories .Label ul li a:hover{
display:inline-block;
border-radius:5px;
margin:auto;
padding-left:5px;
background-color:$(category.item.color);
font-weight:600;
color:$(category.text.color)
}
.categories .Label .remaining-items, .categories .Label .expanded, .categories .Label .show-more, .categories .Label .show-less, .categories .Label .flat-button{
display:none
}
.categories{
padding-$startSide:136px;
padding-$endSide:136px
}
@media screen and (max-width:1168px){
.categories .Label{
margin:0 24px;
max-width:920px
}
}

<!-- Widget Label -->

            <b:section class='categories' id='categories' name='Categories' showaddelement='false'>
                    <b:widget id='Label2' locked='true' title='Category' type='Label' version='2' visible='true'>
                      <b:widget-settings>
                        <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
                        <b:widget-setting name='display'>LIST</b:widget-setting>
                        <b:widget-setting name='selectedLabelsList'/>
                        <b:widget-setting name='showType'>ALL</b:widget-setting>
                        <b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
                      </b:widget-settings>
                      <b:includable id='main' var='this'>
            <b:with value='data:messages.labels' var='defaultTitle'>
              <b:include name='super.main'/>
            </b:with>
        </b:includable>
                      <b:includable id='cloud'>
          <b:include name='list'/>
        </b:includable>
                      <b:includable id='content'>
  <div class='widget-content'>
    <b:class expr:name='data:this.display + &quot;-label-widget-content&quot;'/>
    <b:include cond='data:this.display == &quot;list&quot;' name='list'/>
    <b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/>
  </div>
</b:includable>
                      <b:includable id='list'>
          <b:include data='{ items: data:this.labels, itemSet: &quot;labels&quot;, itemsMarkup: &quot;super.list&quot; }' name='extendableItems'/>
        </b:includable>
                    </b:widget>
            </b:section>

Comments