Cara Membuat Label Unik Berbentuk Cloud

Label pada blog adalah suatu postingan artikel tertentu, banyak ragam orang menampilkan label sesuai selera masing-masing ada yang tetap bertahan dengan standar blogger dan tidak sedikit yang menggunakan sentuhan artistik dengan menambahkan script tertentu di tubuh Blog sehingga tampilan label benar-benar keluar dari aslinya. Banyak sekali keuntungan yang didapat dengan menampilkan label/kategori pada blog selain memberikan navigasi kepada pengunjung juga memberikan gambaran umum kepada mesin pencari untuk melakukan crawl/index dari label. Dan sangat diperlukan sekali keberadaan label bagi blog yang memiliki banyak posting.

Pada Gambar di samping mungkin bisa menjadi gambaran hasil dari modifikasi widget Label yang sekarang akan saya bahas. Mau tahu bagaimana bagaimana cara membuatnya? Silakan simak lebih lanjut dan bila perlu coba pada Blog sobat.

Nah untuk membuat gambar yang seperti diatas caranya cukup mudah dan juga simpel. caranya adalah sebagai berikut :

Login ke akun Blogger sobat.
Masuk pada bagian Tata Letak.
Klik Tambahkan gadget di posisi yang sobat inginkan.
Pilih Widget Label dan silakan sobat bisa atur sendiri tampilanya. Namun jangan lupa, sobat harus memilih tampilan cloud

5. Klik simpan, sobat telah berhasil memasang widget Label Cloud pada Blog sobat.

Kini sobat mulai untuk mengedit tampilanya agar lebih unik dan menarik.

6. Masuk ke bagian Template dan klik Edit HTML.

7. Dengan tombol ctrl+F carilah kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin> tersebut.

.label-size{

margin:0 2px 6px 0;

padding: 3px;

text-transform: uppercase;

border: solid 1px #B22400;

border-radius: 3px;

float:left;

text-decoration:none;

font-size:10px;

color:#666;

}

.label-size:hover {

border:1px solid #6BB5FF;

text-decoration: none;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

-moz-transform: rotate(7deg);

-o-transform: rotate(7deg);

-webkit-transform: rotate(7deg);

-ms-transform: rotate(7deg);

transform: rotate(7deg);

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');

zoom: 1;

}

.label-size a {

text-transform: uppercase;

float:left;

text-decoration: none;

}

.label-size a:hover {

text-decoration: none;

Ubahlah kode berwarna merah dengan kode warna yang sobat inginkan. Kode ini merupakan warna awal border yang melingkari nama Label.
Ubahlah kode berwarna biru dengan kode warna yang sobat inginkan. Kode ini merupakan warna pada nama Label yang sedang disentuh kursor.

8. Klik Simpan Template, selesai.

Comments

0 Comments

0 komentar:

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n:

Posting Komentar

Terimakasih Telah Berkomentar di Blogruanginformasi ini. Silahkan Berikan Komentar Dengan:
1. Bahasa yang baik dan sopan .
2. Tidak disarankan menaruh link aktif .
3. Tidak mengandung unsur SPAM, SARA dan POR*O.

	«		»
	«		»
	«		»