Cara membuat Label Blog Penuh warna

Navigasi Info - bukan hanya cerita yang menarik saja untuk menarik banyak pengunjung di blog agar mau datang berbondong-bondong ingin membaca setiap postingan blog kalian akan tetapi tampilan tamplate blog yang ciamik juga mendukung agar para pembaca betah untuk mencari dan membaca isi postingan artikel blog kita.

Salah satu caranya dengan membuat tampilan label widget blog kita yang mencolok dan keren dilihat supaya mudah di temukan oleh para pembaca ataupun visitor blog kita.

Keuntungan memasang label atau tag artikel di blog

Sedangkan untuk tag ataupun label blog sendiri mempunyai banyak keuntungan yang mana sebagai berikut :

Untuk memunculkan related post

Hal utama dalam fungsi label blog sendiri ialah untuk memunculkan related postingan blog kita yang satu label atau pun yang satu tema bahasan sebab jika kalian tidak memasang tag atau label blog pada postingan kalian related post tidak akan muncul disebabkan perangkat tidak dapat mengindeksifikasikan jenis atau golongan artikel apa isi postingan kita.

Menambah kata kunci dalam artikel postingan blog

Hal lainnya keutamaan label blog ialah untuk menambahkan kata kunci pada postingan blog kita sehingga mudah ditemukan di mesin pencari seperti google , Yahoo , bing dan yandex.

Sehingga sudah menjadi suatu kewajiban kita menambahkan tag atau label jenis apa artikel yang kita buat agar mudah digolongkan oleh mesin pencari.

Sebagai tambahan menu navigasi blog

Sebagai mana kita ketahui bahwa Sanya header pada blog tidak terlalu luas sehingga kita hanya bisa meletakan menu atau link apa saja yang paling banyak dicari oleh para pembaca blog kita.

Dalam arti lainnya tidak dapat memunculkan semua link atau menu apa saja yang terdapat dalam blog kita sehingga dengan adanya widget label pada blog kalian sangat membantu sekali untuk para pembaca blog kalian menemukan artikel postingan pada blog kalian.

Dari hal diatas dapat kita pastikan bahwa pemberian label pada postingan serta pemasangan widget label di blog kita sangat bermanfaat sekali oleh sebab itu tampilan widget label yang keren dan ciamik akan membuat pembaca kalian mudah menemukanya.

Cara Membuat Widget Label penuh warna

Sebagaimana kita ketahui bahwa tampilan menu widget blog bawaan tamplate terkadang terlalu sederhana dan tak menarik dilihat tak heran beberapa blogger malas untuk memasangnya oleh sebab itu saya akan membagikan kodingan CSS blog pada kalian sebagai berikut :

.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:12px;
font-family:Open Sans;
color:white!important;
font-weight:bold;
}

.sidebar .label-size-1 a
{background:silver;}

.sidebar .label-size-1 a:hover
{background: linear-gradient(45deg, silver 45%, #aaaaaa 50%, #cccccc 56%, gold 80%);}

.sidebar .label-size-2 a
{background: #F4A460;}

.sidebar .label-size-2 a:hover {background: linear-gradient(45deg, silver 45%, #aaaaaa 50%, #cccccc 56%, #FA8072 80%);}

.sidebar .label-size-3 a
{background: #ADFF2F;}

.sidebar .label-size-3 a:hover {background: linear-gradient(45deg, silver 45%, #aaaaaa 50%, #cccccc 56%, #7FFF00 80%);}

.sidebar .label-size-4 a {background: #faf60a;}

.sidebar .label-size-4 a:hover {background: linear-gradient(45deg, silver 45%, #aaaaaa 50%, #cccccc 56%, #f5f240 80%);}

.sidebar .label-size-5 a {background: #FFB6C1;}

.sidebar .label-size-5 a:hover {background: linear-gradient(45deg, silver 45%, #aaaaaa 50%, #cccccc 56%, #c0392b 80%);}

Langkah awal copy kodingan CSS diatas.
Selanjutnya kalian menuju dasbor blog kalian
Lalu klik edit html dan cari ]]></b:skin>
Kemudian paste kodingan tersebut tepat diatas]]></b:skin>
Dan simpan

Maka tampilannya kan seperti dibawah ini

Untuk tampilan label lainnya kalian dapat membaca pada Link berikut ini : Cara Membuat Label Tampil keren

Keterangan kodingan

Saya akan sedikit membagi pemahaman tentang kodingan CSS terutama mengenai fungsi atau kegunaannya sebagai berikut .

Kode tulisan label blog

Untuk keterangan kode tulisan pada kodingan CSS diatas akan kita jabarkan bersama supaya di mengerti bersama :

.sidebar .label-size {

position:relative;

text-transform: uppercase;

text-decoration:none;

font-size:12px;

font-family:Open Sans;

color:white!important;

font-weight:bold;

}

Kode diatas untuk mengatur ukuran huruf , jenis huruf dan berbagai hal tentang huruf di widget blog kalian.
.sidebar berfungsi untuk menargetkan kodingan pada widget yang berada pada sidebar kalian dapat menyesuaikan pada widget mana yang akan kalian targetkan.
position:relative; berfungsi untuk penyesuaiankan posisi tulis secara otomatis untuk semua perangkat.
font-family:Open Sans; berfungsi untuk menentukan jenis model huruf yang akan berada pada widget label.
color:white!important; untuk menentukan warna tulisan akan tetapi di beberapa perangkat kode warna tulisan ini kurang work.
font-size:12px; untuk menentukan ukuran huruf
text-decoration:none; untuk memberi dekorasi pada tulisan
font-weight:bold; untuk menentukan huruf tebalan , miring dan garis bawah bold sendiri menunjukan huruf tebal kalian dapat menggantinya sesuka kalian
text-transform: uppercase; untuk mengubah huruf secara otomatis menjadi huruf kapital atau huruf besar.

Kodingan back Background label

.sidebar .label-size-1 a

{background: #F4A460;}

.sidebar .label-size-1 a:hover {background: linear-gradient(45deg, silver 45%, #aaaaaa 50%, #cccccc 56%, #FA8072 80%);}

kode diatas berfungsi untuk membuat background widget label blog jadi lebih menarik untuk keterangannya sebagai berikut :

.sidebar .label-size-1 a kode ini berfungsi untuk menentukan ukuran Border serta jenis border dan juga untuk mengatur warna pada background label yang mana ditargetkan pada label no. 1 tinggal kalian sesuaikan saja target label nomor berapa dengan cara merubah angka di kode ini label-size-1
.sidebar .label-size-1 a:hover kode ini berfungsi untuk menargetkan label nomor 1 ketika telah di klik .
{background: #F4A460;} kode ini untuk menentukan background warna yang kalian inginkan untuk mengubahnya kalian tinggal ganti saja kode ini #F4A460 dengan kode warna yang kalian inginkan.
{background: linear-gradient(45deg, silver 45%, #aaaaaa 50%, #cccccc 56%, #FA8072 80%);} kode ini untuk membuat warna grasida pada kolom label tapi pada kode di atas ketika label disentuh atau di klik oleh orang sedangkan % pada kode tersebut untuk menampilkan kecerahan warnanya kode warnanya sendiri #FA8072 silver #aaaaaa dan lainnya kalian dapat ubah dengan kode warna yang kalian inginkan.

Selamat mencobanya jika ingin menambahkan dapat berkomentar dibawah terima kasih telah berkunjung di blog kita semoga bermanfaat buat kalian dan sukses selalu.

navigasiin navigasiin adalah portal Situs Berita Berbahasa Indonesia yang menyajikan berita terkini terpercaya sebagai petunjuk inspirasi anda

navigasiin