Cara Membuat Widget Label Dua Kolom

Sudah lama nampaknya saya tidak update Blogcunayz, Nah pada kesempatan ini saya akan membagi sedikit trik yang saya dapat dari blog teman saya "UT2A-WEB.INFO™" triknya yaitu Cara Membuat Widget Label Dua Kolom. Mungkin bagi para Blogger yang sudah tingkat dewa trik ini biasa,tapi bagi saya yang masih awam trik ini sangat bagus. Selain unik trik ini juga bisa memperpendek widget Label yang bisasanya memanjang kebawah dengan trik ini widget label menjadi setengah dari panjang awalnya "karena di bagi dua" ok langsung saja ke triknya cekeprot...

Eits ada yang lupa rupanya saya belum kasih SSnya, ok nih saya kasih SSnya :

Widget Label Dua Kolom

Bagaimana keren gak tuh? Jika sobat ingin menerapkannya di blog sobat silahkan ikuti langkah-langkah berikut :

1. Pertama tentunya Login dulu ke akun Blogger
2. Masuk menu Template
3. Klik Edit HTML
4. Lalu pilih Lanjutkan
5. Kemudian letakan kode CSS berikut diatas kode ]]></b:skin> atau kode </style>

.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 : Silahkan sesuaikan kode yang berwarna Biru  dengan lebar sidebar sobat.

6. Selanjutnya Klik Edit Tata Letak >> Klik Tambah Gadget >> Pilih Label >> lalu setting seperti gambar di bawah ini :

 7. Terakhir klik simpan dan lihat hasilnya

Original Posted by : akaUTta...

Share this history on :

Tweet

CSS

• Membuat Related Post dengan Efek Ceklis
• Blockquote dengan Efek Hover
• Membuat Breadcrumb Terindex Google
• Cara Membuat Buttons Keren dengan CSS
• Experiment with CSS3 - System Tatasurya
• Beberapa Efek Transisi Pada Gambar
• Load Page Blog Lebih Keren Dengan Keyframes
• Trik Mempercepat Loading Home Page Blog
• Cara Membuat Efek Rotate Miring Dengan CSS3
• Menyembunyikan Obyek Dengan Kode Overflow:hidden
• Pasang About Author Box dengan CSS
• Cara Memasang Facebook Like Otomatis di Posting
• @font-face CSS di Blogger Template
• Membuat Gambar Melayang di Blog
• memberi efek blur pada gambar
• Membuat Slide Headlines
• Membuat Menu Slide Show Tab View
• Comment Owner Berbeda dengan Pengunjung
• Mengubah Ukuran Template Blog
• Membuat Footer 3 Kolom dengan Background
• Membuat Link Berkedip Pada Saat Disorot Mouse
• Mengganti Tampilan Cursor (Mouse)
• Pasang Jam Animasi Colorfull With CSS & jQuery

Widget

• Follow Twitter Bird dengan Excellent Flash
• Cara Mempercantik Widget Profil
• Cara Mudah Membuat Tombol Share Melayang di Blog
• Buku Tamu Show/Hide Di Sidebar
• Cara Pasang Widget (Buku Tamu) Facebook
• Cara Memasang Widget Followers di Pojok Blog
• NONTON TV | TV STREAMING ONLINE
• Cara Pasang TV Streaming Online Indonesia
• Cara Pasang Text Berjalan Recent Post dan Total Comment
• Cara menampilkan total post dan comment
• Cara Memasang Widget Follow Tersembunyi
• Agar amung.us pada widget sidebar tidak melayang
• Google Translate Versi Baru
• Menghilangkan Sidebar Saat Membuka Posting
• Cara Membuat Search Engine Di Blog
• Cara Membuat Related Post Thumbnail/You Might Also Like di blogger
• Cara Memasang Widget Animasi Entri Populer Pada Blog
• Cara Pasang Follow me Twitter di Blog
• Background Buku Tamu
• Pasang Counter Di Blog
• Cara Membuat Buku Tamu Blog Show/Hide di Bagian Atas
• Membuat Chatbox Bergaya Absolute Vertical Sliding Panel
• Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka
• Cara mudah membuat Scroll pada widget

Title : Cara Membuat Widget Label Dua Kolom
URL : http://blogcunayz.blogspot.com/2012/10/cara-membuat-widget-label-dua-kolom.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Membuat Widget Label Dua Kolom sebagai Sumbernya.