Halo !!! Saya Kang Ismet, ini adalah blog tentang AMP HTML dan cara penerapannya

Cara Membuat Widget Label Cloud dengan CSS









Langkah Pertama ( Membuat Label Cloud)


  • Login Ke Blogger Sobat.
  • Pilih Tata Letak >> Tambah Gatget >> Label.
  • Lalu Edit Pengaturan Labelnya menjadi seperti Gambar.


























  • Simpan.

Keterangan :
bila sobat sudah menambahkan label cloud pada blog sobat,Sobat tidak usah ikuti langkah pertama.

Langkah Kedua ( Menambahkan CSS )


  • Pergi Ke Tamplate  >> Edit HTML >> Lanjutkan
  • Cari Kode ]]></b:skin> Untuk Mempermudah Gunakan F3 atau Ctrl+F.
  • Copy Kode Di bawah ini lalu pastekan tepat di atas kode ]]></b:skin>

/* Code By www.blogsbaddy.com */
.list-label-widget-content ul
{
list-style-type:none;
padding-left:0px !important;
display:inline-block !important;
}
.list-label-widget-content li {
display:inline-block;
}
.list-label-widget-content li a {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background:
#f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0
#fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background:
#f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
border: solid 1px
#ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none;
}
.list-label-widget-content li a:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px
rgba(0,0,0,0.15);
}


  • Simpan dan Lihat Hasilnya 

10 komentar:

  1. Wahhh keren Sob,, udah ane Coba ,,

    salam BLOGWALKING

    http://srezky.blogspot.com
    http://vr-site.blogspot.com

    BalasHapus
  2. mampir kemari sambil meramaikan suasana :)

    BalasHapus
  3. paje pengaturan juga ada kan.. masalahnya gw belum belajar n belum ngerti css itu aapn.

    BalasHapus
  4. Blogwalking sobh... nice tutorial... :D

    Kunjungi juga http://coretan-coretanmaut-rizal.blogspot.com/...

    BalasHapus
  5. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  6. gagal gan gmana nihhh bingung, coba cek dehh

    BalasHapus
  7. Wah kode css nya ternyata singkat juga ya! Boleh nih dicoba.. :D

    BalasHapus
  8. untuk panjang dan lebar widget cloudnya bisa di edit gak sob?

    BalasHapus