Langsung ke konten utama

Highlight Post

Sejarah Kenapa 'K' Jadi Singkatan Ribu?

Saya pertama kali tau singkatan "K" ini sekitar 5 tahun lalu dan saya kira datang dari bahasa gaul dan ternyata ada sejarahnya yaitu berasal dari bahasa Yunani 'chilioi' yang berarti ribuan. 10K, 200K, 50K itu adalah angka-angka yang kerap kali ditemui ketika berbelanja. Tahukah Anda apa arti satuan 'K' di belakang angka tersebut? Huruf 'K' menjadi penting karena huruf itu merupakan pengganti ribu saat menyebutkan harga atau jumlah. Lalu, kenapa 'K' bisa mempunyai arti tersebut? Usut punya usut, Dikutip dari laman Merriam-Webster, satuan 'K' memiliki kepanjangan kilo. Kilo digunakan sebagai unit pengukuran dalam Sistem Satuan Internasional atau SI (Système international d'unités). Misalnya dalam mengukur jarak, 1 kilometer sama dengan 1.000 meter. Sedangkan untuk mengukur berat, 1 kilogram sama dengan 1.000 gram. Kata kilo berasal dari bahasa Yunani 'chilioi' yang berarti ribuan, digunakan untuk menyatakan banyak atau jamak.
💬

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>

Komentar

Popular Posts

Halaman Alternatif dengan Tag Kanonis yang tepat

Halaman alternatif dengan tag kanonis yang tepat dengan Status: Dikecualikan. Kurang lebih begitulah kalimatnya dari cakupan data blog kita jika dilihat di Search Console. Salah satu penyebabnya adalah komentar di blog. Dari misalnya url postingannya begini: https://jaeyzone.blogspot.com/2019/04/10-hal-seputar-mimpi-basah-yang-mungkin.html Berubah menjadi begini: https://jaeyzone.blogspot.com/2019/04/10-hal-seputar-mimpi-basah-yang-mungkin.html?showComment=1554698065783 Semakin banyak komentar dipostingan maka semakin banyak pula url semacam itu dengan ID berupa angka yang berbeda2 yang memicu semakin banyak "Halaman alternatif dengan tag kanonis yang tepat, Status: Dikecualikan" di Search Console. Pada dasarnya url beranak pinak dan berubah2 semacam itu kurang baik buat Seo blog jika tidak dicegah dengan "tag kanonis". Tapi tenang itu tidak membahayakan blog di mesin pencari karena hal ini sudah ditangani oleh Blogger yang artinya disetiap duplikat komentar semacam

Cara Membuat Efek Video Orang Menghilang, Pindah Tempat, atau Terbang

Beberapa tips dan trik berikut ini saya ketahui dari menonton di TV yang kemudian saya tulis disini yaitu cara membuat efek video orang yang seolah terbang, pindah tempat, dan menghilang seperti magic atau efek di film. Lumayan sebagai ajang kreasi buat yang hobi share video di medsos. Siapa tau dengan membaca ini bisa membuka inspirasi untuk menemukan hal yang lebih baru lagi daripada ini. 1. Cara membuat video orang yang seolah terbang. Caranya silakan buat video anda sedang melompat-lompat kedepan beberapa kali seperti Kanguru. Hasil video rekaman dari melompat itu kemudian di edit dan dipotong menggunakan aplikasi pada bagian kaki yang menapak ketanah lalu gabungkan kembali hasil bagian-bagian potongan video yang "tanpa kaki" tersebut dan lihat hasilnya tampak seperti seolah terbang. Itu karena kaki yang menapak ketanah sudah di potong menggunakan aplikasi jadi tampak seperti sedang melompat/terbang. 2. Cara membuat video orang yang seolah pindah tempat atau mengh

Cara kembalikan Pengaturan "Aksi lengkap memakai" ke Default di Android

Terkadang saat akan membuka suatu file misal ketika membuka video atau lainnya akan muncul tulisan "Aksi lengkap memakai" dan kita diminta memilih "Selalu" atau "Sekali saja". Kalau memilih Selalu, info tulisan tersebut tidak akan muncul lagi dan video akan selalu diputar dengan aplikasi pemutar video yang telah kita pilih. Namun, mungkin kita memiliki aplikasi pemutar video lebih dari satu dan ingin menggunakan pemutar video yang lainnya tapi karena telah memilih "Selalu" maka tidak bisa lagi. Untuk itu maka kita harus menghapus "Hapus Default" atau mengembalikan pengaturan tersebut seperti semula agar saat ingin memutar video akan muncul "Aksi lengkap memakai" dan kita bisa memilih ingin memutar video dengan pemutar video yang mana dari beberapa pemutar video yang ada. Haha.. Jujur saja saya pernah kesal lho gara2 itu. Sebetulnya petunjuknya sudah ada saat akan memilih "Selalu" tapi karena terburu2 biasanya tidak s