ILMU 212: Cara Membuat Widget Label Cloud dengan CSS

Langkah Pertama ( Membuat Label Cloud)

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

http://luhurfatah10.blogspot.com/2012/11/cara-membuat-widget-label-cloud-dengan.html

Selasa, 22 Januari 2013

Cara Membuat Widget Label Cloud dengan CSS

Artikel Terkait:

4 komentar: