Edit Label Menjadi 2 Kolom Cantik Dengan CSS

Diposting oleh Keiruchan Agatha on Minggu, 25 November 2012

Markup Validation Service

Edit Label Menjadi 2 Kolom Cantik Dengan CSS - halo semua kembali lagi di R.O.N, kali ini saya mau membahas bagaimana caranya agar tampilan pada label sobat lebih menarik, yang sebelumnya saya pernah posting bagaimana caranya membuat label menjadi 2 kolom bagian yang pertama, nah kali ini kita akan membahas sedikit lebih menarik contoh ada pada gambar dibawah ini

Markup Validation Service
Markup Validation Service

atau kalian juga bisa lihat pada blog saya ini, bagaimana? menarik bukan?
ingin tahu caranya? ok simak saja langsung langkahnya dibawah ini
  1. Login ke akun Blogger sobat
  2. Masuk ke Menu Template
  3. Klik Edit HTML
  4. Lalu pilih Lanjutkan
  5. Kemudian letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> 
.label-size {
position: relative;
float:left
}
.label-size::before {
content: ' ';width: 0;
height: 0;top: 2px;
position: absolute;
right: -4px;
border: 14px solid transparent;
border-left-color: #DDD
}
.label-size a{
float: left;
font-size: 14px;
padding: 5px 10px;
background: white;
margin: 3px 24px 15px 1px;
position: relative;
width:108px;
outline: 1px solid #DDD;
color: #222
}
.label-size a::before {
content: ' ';
width: 0;
height: 0;
top: 0;
position: absolute;
right: -26px;
border: 13px solid transparent;
border-left-color: white
}
.label-size a::after {
content: ' ';
position: absolute;
background: #F6F6F6;
border-radius: 10px;
height: 10px;
right: -1px;top: 7px;
width: 10px;
border: 1px solid #DDD
}
.label-size a:hover {
color:#5D73B5; !important
}

Catatan : Lihat tulisan yang berwarna biru, itu adalah lebar kolom yang harus sobat edit, sesuaikan dengan lebar sidebar pada blog sobat.

      6.  Selanjutnya klik Edit Tata Letak » Tambah Gadget » Label » Lalu Setting seperti pada gambar    berikut
Markup Validation Service
      7.  Terakhir klik simpan/save dan lihatlah hasilnya.

Share Please :

Posted by : Keiruchan Agatha ~ / Portal Media Informasi Pilihan

Markup Validation Service
Anda telah membaca artikel Edit Label Menjadi 2 Kolom Cantik Dengan CSS Ditulis oleh Keiruchan Agatha pada Minggu, 25 November 2012. Kritik dan saran dapat disampaikan via kotak komentar. Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link yang ada di bawah sebagai sumbernya. Atas perhatiannya saya ucapkan terimakasih. Salam blogger and Happy blogging.

Baca Yang Ini Juga Boz :

{ 8 komentar... read them below or add one }

Ian Knightwalker mengatakan...

Ijin save page, kalo ke warnet baru saya coba

Keiruchan Agatha mengatakan...

ok bro..

AYAHE MELA mengatakan...

Kunjungan balik dari ELTELU -:[SEMAR BINGUNG'S WEBLOG]:- Sob.

Saya sampaikan terimakasih atas kunjungan serta berkenannya mengeposkan komentar di blog saya. Dab tidak lupa saya sampaikan pula salam kenal dan salam berbagi. :)

Keiruchan Agatha mengatakan...

@ayahe : sama-sama gan, terimakasih juga sudah berkunjung, salam kenal, salam berbagi dan salam berkunjung ya.. :D

Ian Knightwalker mengatakan...

Hohohoh, tadi saya liat komentarnya

kalo mau, boleh kok ^.^

Keiruchan Agatha mengatakan...

hehe okok...

Firman Ngocop mengatakan...

ni mas floating menunya http://cobalahuntuksetia.blogspot.com/

Keiruchan Agatha mengatakan...

@firman : wah terimakasih mas...
hehe

Posting Komentar

Silahkan tinggalkan komentar anda dengan tidak meninggalkan link. Jika ada kesalahan dalam artikel ini dan jika ada saran dan kritik silahkan tulis komentar anda dibawah dengan baik dan sopan... ;)
Dan jika kedapatan link yang mati dalam penempatan software atau game harap beritahukan agar segera diperbaiki...

 
Markup Validation Service Markup Validation Service Markup Validation Service Markup Validation Service Markup Validation Service