cara mengubah/mengkustomisasi label di Blogger dengan tampilan Cloud menggunakan CSS3 | blog91919
Diberdayakan oleh Blogger.

Translate This Blog

Home » » cara mengubah/mengkustomisasi label di Blogger dengan tampilan Cloud menggunakan CSS3

cara mengubah/mengkustomisasi label di Blogger dengan tampilan Cloud menggunakan CSS3

Diposting oleh | |
Pada posting kali ini blog91919 akan membagikan artikel tentang cara mengubah/mengkustomisasi label di Blogger dengan tampilan Cloud menggunakan CSS3. Dengan menggunakan cara ini anda dapat dengan mudah mengganti tampilan asli label/tag pada blog anda hanya dengan menerapkan beberapa kode CSS dibawah ini kedalam label blog anda. Dan sekarang mari kita ikuti bagaimana caranya menambahkan kode CSS tersebut kedalam widget label blog anda.
Dan berikut ini adalah tutorialnya.
  1. Login ke account blogger Anda
  2. Klik rancangan = =>Edit HTML
  3. Download template anda terlebih dulu untuk berjaga-jaga jika nanti terjadi kesalahan
  4. Jangan lupa centang pada kotak kecil yang bertuliskan Expand Template Widget
  5. Setelah itu, cari kode  ]]></b:skin>  (tekan tombol ctrl+f untuk mempermudah pencarian)
  6. Kalau sudah ketemu maka masukkan kode berikut ini diatas/sebelum kode ]]></b:skin>
.label-size { float: left; margin: 0 0 7px 20px; position: relative; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-decoration: none; color: #996633; text-shadow: 0px 1px 0px rgba(255,255,255,.4); padding: 0.417em 0.417em 0.417em 0.917em; border-top: 1px solid #d99d38; border-right: 1px solid #d99d38; border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0; border-radius: 0 0.25em 0.25em 0; background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47'); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); z-index: 1; } .label-size:before { content: ''; width: 1.30em; height: 1.39em; background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47'); position: absolute; left: -0.69em; top: .2em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-left: 1px solid #d99d38; border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0 0 0.25em; -moz-border-radius: 0 0 0 0.25em; border-radius: 0 0 0 0.25em; z-index: 1; } .label-size:after { content: ''; width: 0.5em; height: 0.5em; background: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; border: 1px solid #d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; box-shadow: 0 1px 0 #faeaba; position: absolute; top: 0.667em; left: -0.083em; z-index: 9999; } #Label1 { height: 210px; } .label-size:hover { background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color: #e1b160; } .label-size:hover:before { background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c'); border-color: #e1b160; }
Nah demikian itulah turialnya, semoga dapat bermanfaat bagi Anda semua bagi yang ingin mencoba mengeditnya. Terimakasih.

Ditulis Oleh : bayu naxtegal

Artikel cara mengubah/mengkustomisasi label di Blogger dengan tampilan Cloud menggunakan CSS3 ini diposting oleh bayu naxtegal pada hari Kamis, 14 Februari 2013. Terimakasih atas kunjungan kalian semua serta kesediaan Anda membaca artikel ini, Kritik dan saran dapat Anda sampaikan melalui kotak komentar . Terimakasih Anda sudah mau membaca

Share this article :
Komentar dari Facebook
7 Komentar dari Blogger

7 komentar:

  1. Nahhhhh ini yang saya cari izin ya mas ntar kapan2 mau saya pasang.

    BalasHapus
  2. wah boleh juga nih d coba. hehehe mkasih mas sudah berbgai !! :e:

    #Happy Blogging !! Salam Sukses.

    BalasHapus
  3. Wih bagus ya.. Coba dulu ah master :D

    BalasHapus
  4. keren tuh labelnya.. bisa di coba nih.

    BalasHapus
  5. Nahhhhh ini yang saya cari izin ya mas ntar kapan2 mau saya pasang

    BalasHapus
  6. Di-bookmark dulu. Kalo sempat inshaAllah akan saya coba. Tampilannya lebih keren dan beda. Terima kasih banyak...

    BalasHapus

:a: :b: :c: :d: :e: :f:
:g: :h: :i: :j:


Emotion lainnya?

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. blog91919 - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger