Membuat Widget Label Keren (Black-Colour) dengan CSS

Salah satu cara membuat pengunjung betah di blog kita yaitu dengan cara mendesain blog kita sebagus mungkin sehingga enak dilihat dan terlihat professional. Kita bisa memodifikasi blog kita dengan menggunakan trik CSS. Jika sahabat sudah familiar dengan CSS maka tidak akan sulit bagi sahabat untuk mengubah blog sederhana menjadi blog yang enak dipandang dan terlihat profesional. Tapi, jika sahabat blogger tidak memiliki pengetahuan yang cukup tentang CSS, sahabat jangan khawatir, karena banyak expert blogger yang menyediakan widget-widget menarik untuk membuat blog sahabat enak dilihat. Ada banyak desainer yang memberikan tutorial dalam mendesain dan memodifikasi blog sahabat secara gratis. Pada kesempatan kali ini saya akan share cara menambahkan Widget Label keren dengan CSS seperti penampakan gambar disamping tulisan ini.

CSS3 Widget Label Black Color

Widget ini sangat mudah untuk diinstal pada blog sahabat. Sahabat hanya copy paste beberapa kode CSS maka sahabat akan melihat blog sahabat memiliki widget label black color keren. Silahkan simak tutorial berikut ini:

A.    Pergi ke Blogger >> Template >> Edit HTML  

B.   Sekarang cari ]]></b:skin>.

            Setelah ketemu silahkan Copy Kode berikut ini dan letakkan tepat diatas kode ]]></b:skin>

#Label1 a{float:left;

height:18px;

line-height:18px;

position:relative;

font-size:12px;

margin-bottom: 9px;

margin-left:10px;

padding:5px;

background: rgb(69,72,77); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

color:#fff;

text-decoration:none;

-moz-border-radius:4px;

-webkit-border-radius:4px;

border-radius:4px;}

#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}

.label-size{line-height:1.5;align:left;}

.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}

#Label1{width:320px;;border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #D8D8D8;}

C.   Simpan

Catatan:

Jika sahabat belum menambahkan widget Label maka silahkan pergi ke Tata Letak >> add Gadget dan Tambahkan widget label.

Jika Sahabat blogger memerlukan bantuan tentang tutorial ini atau masalah lain di blog sahabat silahkan tinggalkan pertanyaan di kolom komentar. Semoga bermanfaat. Happy Blogging.