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 Style H3 Bergaris Tengah

 

Ada berbagai macam style heading terutama h3 title pada Template Blogger, mulai dari model kotak, dua warna, icon diujungnya dan yang bergaris tengah seperti yang akan saya bagikan ini. Model bergaris seperti ini bisa di bilang trend dikalangan Blogger tahun 2020 kemarin, termasuk disitus kompas juga menggunakan style model ini meskipun tahun 1945 juga mungkin sudah ada yang menggunakan ini, hehe.

Sekilas membuat style semacam ini lumayan mudah jika diterapkan pada situs pribadi tapi lain cerita jika dipasang di Template Blogger, percayalah lumayan rumit, bikin jadi keringat dingin, hehe.

Letak rumitnya karena Heading h3 pada Blogspot ibaratnya semacam sudah ditentukan tidak bisa ditambah atau dikurangi lagi kode HTMLnya namun memang harus ditambahi htmlnya agar style ini terwujud.

Secara default heading h3 pada setiap widget Blogger format htmlnya sebagai berikut.

<b:include name='widget-title'/>

Apanya yang mau di edit coba, Nah agar dapat ditambahi maka kodenya perlu dipecah/diurai atau membuat includable baru seperti berikut ini.

<b:includable id='widgetHeading'>
<div class='widget-heading'>
<b:include name='widget-title'/>
</div>
</b:includable>

Dari hasil pecahan/uraian diatas kita bisa mengapit 'widget-title' dengan element serta menyisipkan div class. Jadi kode diatas harus dimasukkan kedalam widget dan...

Kode defaulnya yang seperti berikut.

<b:include name='widget-title'/> diubah menjadi <b:include name='widgetHeading'/>

Namun yang 'widget-title' dalam 'widgetHeading' jangan diubah.

Dalam setiap widget kode seperti ini <b:include name='widget-title'/> hanya ada satu buah.

Karena kita menambahkan ini.
<b:includable id='widgetHeading'>
<div class='widget-heading'>
<b:include name='widget-title'/>
</div>
</b:includable>

Maka <b:include name='widget-title'/> menjadi dua buah yang satunya default/asli dan yang satunya yang sengaja kita tambahkan baru, Naaaaah.. yang satunya harus diubah menjadi <b:include name='widgetHeading'/>

Teks "widgetHeading" ini bisa diganti nama apapun, bebas.

***

Dalam kondisi tertentu tak jarang 'widget-title' menyatu dengan kode Sinppet. Ini lebih rumit lagi dan solusinya adalah.

Sebagai contoh berikut ini kode Titel yang menyatu dengan kode Snippet.

<b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>

Agar tidak menyatu maka kode <b:include name='super.main'/> ubah saja menjadi <b:include name='snippetedPosts'/>

Cara diatas berlaku untuk semua widget, FeaturedPost, PopulerPosts, maupun yang lainnya.

***

Lupakan penjelasan diatas. Kesimpulannya adalah: Anggap saja kita ingin mengubah style heading FeaturedPost dengan style h3 bergaris tengah, jika anda mahir mengubah FeaturedPost ini maka anda juga akan mahir mengubah widget lainnya.

Yang perlu dilakukan hanyalah, pada default FeaturedPost bagian <b:include name='widget-title'/> ubah menjadi <b:include name='widgetHeading'/>

Lalu, tambahkan kode dibawah ini ke dalam widget FeaturedPost.

<b:includable id='widgetHeading'>
<div class='widget-heading'>
<b:include name='widget-title'/>
</div>
</b:includable>

Jika ingin selain FeaturedPost, misal ingin mengubah heading Related-posts maupun Comments, html headingnya juga harus diubah, hanya saja cara mengubahnya lebih mudah karena kodenya terbuka tidak terbungkus seperti FeaturedPost.

Contoh:
Pada <h3 class='title'>Comments</h3>.. misalnya.

Tinggal ubah saja menjadi.
<div class='widget-heading'>
<h3 class='title'>Commments</h3>
</div>

Selesai.

Selanjutnya pasang css berikut pada bagian skin dalam Template anda, khususnya Template Essensial, Contempo, maupun Notable.

.FeaturedPost .widget-heading h3.title, #comments. widget-heading h3.title, .Feed .widget-heading h3.title, .PopularPosts .widget-heading h3.title, .related-posts .widget-heading h3.title{
z-index:2;
background-color:$(posts.background.color);
display:inline-block;
font-size:$(posts.stream.title.font.size);
line-height:initial;
position:relative;
padding:0 15px 0 0
}
.FeaturedPost .widget-heading, #comments .widget-heading, .PopularPosts .widget-heading, .Feed .widget-heading, .related-posts .widget-heading {
z-index:1;
font:$(posts.stream.title.font);
font-size:$(posts.stream.title.font.size);
line-height:initial;
position:relative;
display:block
}
.FeaturedPost .widget-heading::before, #comments .widget-heading::before, .PopularPosts .widget-heading::before, .Feed .widget-heading::before, .related-posts .widget-heading::before{
content:'';
z-index:1;
position:absolute;
font-size:$(posts.stream.title.font.size);
line-height:initial;
top:0;
right:0;
bottom:$(posts.stream.title.font.size / 2);
left:0;
display:block;
border-bottom:1px solid $(posts.boxshadow.color)
}

Keterangan:
1. Ubah dan sesuaikan variabel nama warna background, border, font dengan Template anda.
2. Font-size harus sama tinggi dengan bottom.
3. Bottom harus setengah tinggi ukuran font atau font-size.
4. Font-size titel harus sama tinggi dengan widget-heading dan font. Ini penting mengingat kadang font-size tampilan desktop berbeda dengan mobile, jadi font-size harus ditentukan ukurannya.
5. Warna background titel harus sama dengan warna dimana dia diletakkan. Misal: background titel dari FeaturedPost harus sama dengan background di FeaturedPost.

Jika masih gagal juga alias garis tidak mau ketengah, kemungkinan ada kode css yang bertabrakan dalam Template anda yang mengendalikan heading h3.titel ini. Jika ada maka harus dihapus karena cukup kode css diatas saja yang bekerja. Atau ditentukan, misal yang mengganggu adalah heading dari h3.titel yang ada di Sidebar, maka ubah heading tersebut bekerja hanya untuk sidebar saja agar tidak mengganggu kode css diatas.

Jika berhasil pada tampilan mobile tapi pada tampilan desktop tidak, maka coba cara ini. Tambahkan css ini.

@media screen and (max-width:800px){
.widget.FeaturedPost .widget-heading{
margin:auto
}
.widget.FeaturedPost h3.title{
margin:auto
}
}

***

Jika tidak ingin repot mungkin bisa juga menggunakan gambar garis, cukup di float kekanan maka akan langsung jadi tanpa melakukan semua hal diatas. Misalnya.

.FeaturedPost h3.title{
display:block
}
.FeaturedPost h3.title::after{
content:'isi-dengan-url-gambar-garis';
float:right
}
<h3 class='title'>Commments</h3>

Selamat mencoba!

Komentar

Popular Posts

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

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 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