Edit Label Menjadi 2 Kolom Cantik Dengan CSS

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.

Referensi : http://blogcunayz.blogspot.com/2012/10/cara-membuat-widget-label-dua-kolom.html

Share Please :

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.

<a href="http://republicofnote.blogspot.com/2012/11/edit-label-menjadi-2-kolom-cantik-dengan-css.html" target="_blank">Edit Label Menjadi 2 Kolom Cantik Dengan CSS</a>

Baca Yang Ini Juga Boz :

Blog

Tips and Tricks

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

Ian Knightwalker mengatakan...: Ijin save page, kalo ke warnet baru saya coba; 25 November 2012 pukul 17.01
Unknown mengatakan...: ok bro..; 25 November 2012 pukul 17.21
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. :); 25 November 2012 pukul 18.04
Unknown mengatakan...: @ayahe : sama-sama gan, terimakasih juga sudah berkunjung, salam kenal, salam berbagi dan salam berkunjung ya.. :D; 25 November 2012 pukul 18.19
Ian Knightwalker mengatakan...: Hohohoh, tadi saya liat komentarnya

kalo mau, boleh kok ^.^; 25 November 2012 pukul 18.27
Unknown mengatakan...: hehe okok...; 25 November 2012 pukul 18.33
Ngocop16 mengatakan...: ni mas floating menunya http://cobalahuntuksetia.blogspot.com/; 25 November 2012 pukul 19.57
Unknown mengatakan...: @firman : wah terimakasih mas...
hehe; 25 November 2012 pukul 20.08

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...