BREAKING NEWS

Lokomedia

Tips dan Trik

Template Balitbang

Monday, November 26, 2012

Edit Label Menjadi 2 Kolom Keren Dengan CSS

Markup Validation Service

Kali ini IT Sasak akan share tentang cara membuat tampilan untuk label di blog menjadi 2 kolom yang keren tentunya,,,
Langsung saja dah,,, berikut screenshotnya:

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
  • Login ke akun Blogger sobat
  • Masuk ke Menu Template
  • Klik Edit HTML
  • Lalu pilih Lanjutkan
  • 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
}
  • Selanjutnya klik Edit Tata Letak » Tambah Gadget » Label » Lalu Setting seperti pada gambar berikut
Markup Validation Service
  • Terakhir klik simpan/save dan lihatlah hasilnya.



Post a Comment

Peraturan dan Tata Cara Berkomentar di IT Sasak


1) Berkomentarlah Secara Sopan dan Tidak Melakukan Spaming

2) Berkomentar Sesuai Dengan Tema Artikel

3) Dilarang Menyertakan Link dalam Komentar

4) Beri Nama Jelas (jangan menggunakan nama Anonim)

 
Copyright © 2011 IT Sasak
Powered by Blogger