Thursday 15 August 2013

Cara Mempercantik Tampilan Label Dengan CSS Pada Blog

Soree Gunn,,,Pasti udah gak sabar kaaan nunggu postingan2 baru blog ini,,,heheh..Padaa kesempatan ini saya akan posting sebuah artikel tentang cara Mempercantik tampilan label di blog...(wuiihh,,dijamin blog sobat makin kerenn)....contoh tampilan label yang akan kita buat kira kira seperti gambar di bawah ini (cekidoottt) :


Gambar di atas mungkin bisa menjadi penawar rasa ingin tahu sobat seperti apa tampilan label yang akan kita buat ini, (pasti sobat pngen bgt kan punya label seperti diatas) jika Sobat berminat  silahkan ikuti langkah berikut ini :

1. Pertama login ke blogger lalu pergi ke tata letak > add gadget > lalu tambahkan gadget label, atur seperti gambar di bawah ini :


2. Simpan
3. Edit template Htmlnya. lalu cari code ]]></b:skin> jika sudah ketemu letakkan kode css di bawah ini tepat di atas kode ]]></b:skin> tadi, kemudian Save templatenya.
/*------------- Start label nyanlon.blogspot.com -------------*/.label-size{margin:0;padding:0;position:relative;.label-size a{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-bottom: 9px;margin-left:20px;padding:0 10px 0 12px;background:#0089e0;color:#fff;text-decoration:none;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px; border-top-right-radius:4px; .label-size a:before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent #0089e0 transparent transparent;border-style:solid;border-width:12px 12px 12px 0;  .label-size a:after{content:"";position:absolute;top:10px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #004977;-webkit-box-shadow:-1px -1px 2px #004977;box-shadow:-1px -1px 2px #004977;.label-size a:hover{background:#555;} .label-size a:hover:before{border-color:transparent #555 transparent transparent;}/*------------- End of label nyanlon.blogspot.com -------------*/
Jika udah selesai, Lihat Hasilnya...
waw,,,kerenn bgeettt...!!! hahaha
Jangan Lupa Komentar ya gunn...!!

BAGIKAN ARTIKEL : Facebook Twitter Google+ Linkedin

Unknown

Perhatian : Semua artikel blog ini sudah diprotect, Bagi yang ingin copy-paste artikel ini, mohon lampirkan sumber linknya. Terima Kasih!

8 komentar:

  1. Lalu bagaimana cara membuat label yang berisi akun kita di social media, dan membuat label yang ketika di sentuh kursor, labelnya ngeluarin daftar ke bawah?

    ReplyDelete
    Replies
    1. waduhh,,Mf Gan, Ilmu ane belum nyampe kesitu, Coba agan cari tutorial diblog lain,,thanks..

      Delete
  2. makasih gan , ane copy scriptnya

    ReplyDelete
  3. kunjungan persahabatan ya gan, jangan lupa mampir ya, tutorialnya keren keren nih..

    ReplyDelete

 

Copyright @ 2015 INFORMASI DAN TEKNOLOGI.

Designed by Deddy De Gazaa | Boh Jak