Cara Membuat Label Dua Kolom Tampak Stylish

Cara Membuat Label Dua kolom Tampak Stylish
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.


  1. Login ke akun Blogger Sobat
  2. Klik Template lalu klik Edit HTML
  3. Ceklis kotak kecil disamping tulisan "Expand Template Widget"
  4. Cari kode ]]></b:skin> (Cara cepat tekan Ctrl + F)
  5. 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
    }
  6. Angka berwarna merah bisa anda sesuaikan dengan lebar sidebar blog anda.
  7. Setelah selesai klik Simpan Template
  8. Selanjutnya Klik Tata Letak > Tambah Gadget pilih Label lalu setting seperti ini
  9. setelah selesai klik Simpan dan lihat hasilnya.
Demikian Tutorial tentang Cara Membuat Label Dua Kolom Tampak Stylish, Semoga bermanfaat.
    Previous
    Next Post »

    3 komentar

    Click here for komentar
    softwikia
    admin
    30 Juli 2013 pukul 16.35 ×

    ijjin di terapin , Thx infonya :)

    Reply
    avatar
    Unknown
    admin
    30 Juli 2013 pukul 17.14 ×

    Ok gan...thanks udh berkunjung..

    Reply
    avatar

    # Silahkan Anda Berkomentar dengan Baik dan Sopan
    # Pesan dilarang Mengandung SARA dan Spam
    # Terima Kasih Telah berkunjung di Blog Sederhana ini ConversionConversion EmoticonEmoticon

    Thanks for your comment