Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, October 12, 2013

widget label style

Widget label style merupakan modifikasi widget label dengan css saja, cara membuat widget label style ini tergolong mudah, sebab hanya memanfaatkan sistem CSS saja yang isematkan pada template blog anda. Widget label style khusus untuk blog dari blogspot. Jadi untuk anda yang suka dengan tapilan blog yang unik dan menarik serta elegan tentunya silahkan simak penjelasan tutorial widget label style dibawah ini, jangan lupa di lihat DEMO tutorial widget label style ini, tapi bila anda melihat tampilan label yang lain silahkan kunjungi link pada referensi artikel dibawah, oke langsung saja menuju TKP dan selamat mencoba.


Demo



Referensi Artikel


  • Widget label cloud blue
  • Cara membuat widget label drop down
  • Widget label hover style animasi

Tutorial

Bagi anda yang belum memasang widget Label atau belum mengetahui cara membuat widget label di blog silahkan simak penjelasan pada halaman ini : Cara memasang label di halaman blog

Bila anda sudah memasang widget label pada halaman blog anda silahkan setting dulu widget label anda menjadi tampilan " DAFTAR " bukan tampilan " CLOUD ". silahklan anda centang Tampilkan Jumlah entri per Label nya. agar tampilannya makin sempurna dan menantang hehehehe.

  1. Login to blog
  2. Pilih " Template " lalu klik " Edit HTML "
  3. Cari kode ]]></b:skin>
  4. Setelah dapat copy code dibawah ini lalu pastekan diatas code ]]></b:skin> tadi, atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
  5. Setelah selesai save template anda, dan lihat hasilnya.

/*****************************************
Name : Widget Label Style
By : Rivai Silaban | Blog Design
Update : Sabtu, 12 Oktober 2013
******************************************/
#Label1 .label-count{
margin-left:10px;
padding:3px 5px;
border:1px solid #ccc;
color:#666666;
background-color: #F8F8F8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
opacity:0.5;
}
#Label1 a{
position:relative;
padding:3px 20px 3px 10px;
margin:1em 0 3em;
border:1px solid #999;
color:#333;
background-color: #F8F8F8;
text-decoration: none;
border-radius:3px;
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
#Label1 a:hover{
color:#FFFFFF;
background-color: #DBDBDB;
text-shadow: 1px 1px 2px #000;
}
#Label1 a:hover:after{
top:3px;
right:-10px;
bottom:auto;
left:auto;
border-width:7px 0 7px 10px;
border-style:solid;
border-color:transparent #DBDBDB;
content:"";
display:block;
position:absolute;
opacity:1;
}/* End CSS code */


Kesimpulan

Widget Label Style ini merupakan hasil dari moifikasi CSS saja tanpa mengedit bagian kode html widget label tersebut. Dalam pemasangannya sangat simpel dan praktis, tapi bila anda ingin mengedit CSSnya kembali sesuai selera anda silahkan anda edit untuk mendapatkan tampilan yang menarik dan sesuai dengan thema template anda.

Bila teman teman mengalami kesulitan dalam memasang kode widget ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Semoga postingan ini bermanfaat buat teman teman.

Widget Label Style
Sabtu, 12 Oktober 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 7:25 AM

15 comments :

  1. Keren mas modifnya, jadi alternatif utntk modif label :D
    Makasih

    ReplyDelete
    Replies
    1. thx atas pendapatnya dan kunjungannya..
      salam..

      Delete
    2. heheh ngak jugala, masih sederhana gan....

      Delete
  2. sudah saya pasang di blog saya mas :D

    ReplyDelete
  3. keren bank coba dulu lah bang .. abang makin mantap saja bang

    ReplyDelete
    Replies
    1. silahkan sob...
      heheh ngak ah saya masih newbie..

      Delete
    2. mas saya mau tanya cara bikin footer sepeerti yang ada di blog mas ini gimana mas .. ada tutorialnya gak

      Delete
    3. hehhe bukannya malu tapi memang kenyataannya hehehhe

      soal footer style memang sudah saya buat tapi masih tahap finishing, sabar sob ntar juga akan di posting tunggu bertapa dulu ke gunung kidul cari ilmunya hehhehe ...

      Delete
    4. saya tunggu sob ..artikelnya .. selamat bertapa mas ..hehehee

      Delete
  4. kang kalo masangnya didalem laman begimana? bisa ga?

    ReplyDelete
    Replies
    1. tidak berfungsi sebab tutorial ini bawaan devault blogspot

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog