Cara Modifikasi Widget Label Di Blog Ala RisenSimple

Cara mengganti tampilan widget label blog keren di blog adalah suatu cara untuk mempercantik widget pada blogspot. Nah pada saat anda merubah tampil widget label ini maka desain pada template blog anda akan mempunyai suatu kelebihan seperti daya tarik yang berbeda. Jika seandainya pada blog anda tampilan label terlihat biasa-biasa saja namun pada postingan kali ini saya akan memberikan tutorial cara merubah dan memodifikasi desain widget label pada blogspot agar lebih keren dan tentunya menarik lagi tentunya list dan mode clound juga akan terlihat menarik juga. Kali ini desainnya saya lihat dari template mas bungfrangki yakni template risen simple. Kalian bisa melihat demonya pada template tersebut atau anda juga bisa melihat demo gambar pada berikut ini.

Cara Modifikasi Widget Label Di Blog Ala RisenSimple

Tampilan diatas adalah bentuk desain atau tampilan yang nantinya akan muncul label jika dipasangkan pada blog anda. Sebenarnya didalam memodifikasi label ini sangat mudah dan cepat kita hanya perlu mengganti di bagian css nya saja. Jika anda berminat untuk menerapkan tutorial ini silahkan ikuti langkah-langkahnya pada berikut ini,

Cara Modifikasi Desain Widget Label Keren Di Blog

Langkah pertama – silahkan anda login dan masuk ke dashboard blog anda. Kemudian langsung pilih menu Template > Edit HTML.

Langkah berikutnya, silahkan anda cari kode label pada html tersebut atau gunakan tombol shortcut ctrl+f pada edit html ketikan label.


Langkah selanjutnya, ganti kode tersebut dengan kode css pada berikut ini.

/* CSS cloud label */
.cloud-label-widget-content {margin:15px 0 0;position:relative}
.label-size{background:#46506f;position:relative;margin:0 4px 3px 0;padding:0;font-size:12px;transition:all 0.3s;display:inline-block;text-transform:uppercase;height:28px;color:#fff;border-radius:2px;overflow:hidden}
.label-size a{color:inherit;text-decoration:none;font-weight:normal;padding:0 12px;margin:0;height:28px;line-height:28px;}
.label-count{font-size:10px;display:inline-block;background:#2d3759;color:#fff !important;transition:all 0.3s;white-space:nowrap;padding:0 5px;height:28px;line-height:27px;}
.label-size:hover{background:#333}
.label-size:hover .label-count{background:#222}
/* CSS list label */
.list-label-widget-content ul {padding:0 !important;margin:15px 2px 0!important;list-style:none !important;position:relative}
.list-label-widget-content li{position:relative;width:49%;display:inline-block}
.list-label-widget-content li a{color:#46506f;background:#fff;padding:5px;padding-left:10px;font-size:14px;border-radius:3px;border:1px solid #ddd;box-shadow:4px 0 0 #ddd inset;display:inline-block;margin-bottom:10px;}
.list-label-widget-content li a:hover{border-bottom:none;border:1px solid #C3C3C3;color:#2d3759}
.list-label-widget-content li span{font-size:11px;background:#eee;padding:5px;border-radius:2px}
.list-label-widget-content li:hover span{background:#46506f;color:#fff}

Kemudian simpan template. Lalu pilihlah menu tata letak tambahkan widget label dengan mode cloud label dan lihatlah hasilnya.

Ket.
Pada css anda bisa mengubah warna sesuai dengan selera anda, silahkan ganti semua kode yang sudah ditandai pada script diatas.

Nah, cukup sekian artikel mengenai cara membuat widget label keren di blogspot ala Risen Simple template.


Gambar Gravatar
"Seseorang Informan yang baru belajar"

3 thoughts on “Cara Modifikasi Widget Label Di Blog Ala RisenSimple

  1. I’m not that much of a online reader to be honest but your blogs really nice, keep it up! I’ll go ahead and bookmark your site to come back in the future. Cheers

  2. Gambar Gravatar estate financial planning berkata:

    I’ve been surfing on-line greater than three hours nowadays, yet I by no means found any fascinating article like yours. It’s beautiful price sufficient for me. In my view, if all web owners and bloggers made excellent content as you probably did, the net might be much more useful than ever before.

  3. Attractive section of content. I just stumbled upon your blog and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Anyway I’ll be subscribing to your feeds and even I achievement you access consistently quickly.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *