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
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
}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
7. Terakhir klik simpan/save dan lihatlah hasilnya.
Posted by : Keiruchan Agatha ~ / Portal Media Informasi Pilihan
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.
{ 8 komentar... read them below or add one }
Ijin save page, kalo ke warnet baru saya coba
ok bro..
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. :)
@ayahe : sama-sama gan, terimakasih juga sudah berkunjung, salam kenal, salam berbagi dan salam berkunjung ya.. :D
Hohohoh, tadi saya liat komentarnya
kalo mau, boleh kok ^.^
hehe okok...
ni mas floating menunya http://cobalahuntuksetia.blogspot.com/
@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...