Label di blog merupakan suatu hal yang cukup penting, karena memudahkan pengunjung mencari sebuah informasi sesuai keinginan yang mereka. oleh sebab itu saya akan share tentang Cara Membuat Label Dua Kolom Tampak Stylish. Maaf ya sobat, jika judulnya tidak sesuai hasilnya nanti, karena bingung mau dikasih judul apa postingan kali ini. yang pasti hasilnya seperti gambar disamping. Nah, buat anda yang ingin mencobanya silahkan ikuti langkah-langkah dibawah ini.
- Login ke akun Blogger Sobat
- Klik Template lalu klik Edit HTML
- Ceklis kotak kecil disamping tulisan "Expand Template Widget"
- Cari kode ]]></b:skin> (Cara cepat tekan Ctrl + F)
- Copy Kode dibawah ini, kemudian paste 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:85px;
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
} - Angka berwarna merah bisa anda sesuaikan dengan lebar sidebar blog anda.
- Setelah selesai klik Simpan Template
- Selanjutnya Klik Tata Letak > Tambah Gadget pilih Label lalu setting seperti ini
- setelah selesai klik Simpan dan lihat hasilnya.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
3 komentar
Click here for komentarijjin di terapin , Thx infonya :)
ReplyOk gan...thanks udh berkunjung..
ReplyIjin gan ambil...
Reply# Silahkan Anda Berkomentar dengan Baik dan Sopan
# Pesan dilarang Mengandung SARA dan Spam
# Terima Kasih Telah berkunjung di Blog Sederhana ini ConversionConversion EmoticonEmoticon