Mempercantik Label Tag Cloud - Hai, kali ini saya akan membagikan sebuah tips, khususnya untuk para blogger. Label atau tag memang menjadi salah satu hal yang harus ada di dalam sebuauh blog, salah satu fungsinya yaitu memudahkan para pengunjung blog untuk mencari artikel berdasarkan topik atau bahasan tertentu, dan untuk para blogger bisa mengelompokkan postingan mereka berdasarkan topik atau bahasan tertentu.
Kenapa label tag cloud perlu dipercantik atau dirapikan?
Karena secara default tampilannya acak - acakan dan kurang enak dilihat.
Itu tag yang ada di blog saya. Jumlahnya masih sedikit, jadi tidak begitu terlihat acak - acakan. Lalu kalau tag di blog saya ada banyak, coba bayangkan, pasti akan lebih parah tampilannya. Nah, bagaimana cara mempercantik atau merapikannya? Simak caranya...
Pastikan kalian sudah memasang widget label tag, kalau belum,
Masuk ke dashboard blogger, klik menu "tata letak" di sebelah kiri, lalu "tambahkan gadget".
Kemudian pilih "label", setelah itu konfigurasikan seperti ini :
Judul : (terserah kalian)
Tampilkan : semua label
Menyortir : alfabetik (supaya lebih rapi dan mudah mencari tag atau label tertentu)
Tampilkan : cloud
Tampilkan jumlah entri per label (terserah kalian)
Setelah itu simpan. Jika kalian lihat di blog kalian, tampilan label atau tag cloud tadi masih acak - acakan, untuk merapikannya,
Klik menu "tema" di sebelah kiri, lalu "Edit HTML"
Kemudian kalian cari ]]></b:skin> dan paste-kan kode CSS berikut sebelum ]]></b:skin>
/*-----Custom label cloud widget----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:12px;
color:#666;
transition: .4s;
}
.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;
transition: .4s;
}
.label-size a:hover {
text-decoration: none;
}Kalau sudah, klik "simpan tema" dan lihat hasilnya di blog kalian.
Kalian bisa mengubah style atau CSSnya sendiri sesuai keinginan kalian.
Cukup itu dulu, sampai jumpa di postingan berikutnya.
Mempercantik Label Tag Cloud - Hai, kali ini saya akan membagikan sebuah tips, khususnya untuk para blogger. Label atau tag memang menjadi salah satu hal yang harus ada di dalam sebuauh blog, salah satu fungsinya yaitu memudahkan para pengunjung blog untuk mencari artikel berdasarkan topik atau bahasan tertentu, dan untuk para blogger bisa mengelompokkan postingan mereka berdasarkan topik atau bahasan tertentu.
Kenapa label tag cloud perlu dipercantik atau dirapikan?
Karena secara default tampilannya acak - acakan dan kurang enak dilihat.
Itu tag yang ada di blog saya. Jumlahnya masih sedikit, jadi tidak begitu terlihat acak - acakan. Lalu kalau tag di blog saya ada banyak, coba bayangkan, pasti akan lebih parah tampilannya. Nah, bagaimana cara mempercantik atau merapikannya? Simak caranya...
Pastikan kalian sudah memasang widget label tag, kalau belum,
Masuk ke dashboard blogger, klik menu "tata letak" di sebelah kiri, lalu "tambahkan gadget".
Kemudian pilih "label", setelah itu konfigurasikan seperti ini :
Judul : (terserah kalian)
Tampilkan : semua label
Menyortir : alfabetik (supaya lebih rapi dan mudah mencari tag atau label tertentu)
Tampilkan : cloud
Tampilkan jumlah entri per label (terserah kalian)
Setelah itu simpan. Jika kalian lihat di blog kalian, tampilan label atau tag cloud tadi masih acak - acakan, untuk merapikannya,
Klik menu "tema" di sebelah kiri, lalu "Edit HTML"
Kemudian kalian cari ]]></b:skin> dan paste-kan kode CSS berikut sebelum ]]></b:skin>
/*-----Custom label cloud widget----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:12px;
color:#666;
transition: .4s;
}
.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;
transition: .4s;
}
.label-size a:hover {
text-decoration: none;
}Kalau sudah, klik "simpan tema" dan lihat hasilnya di blog kalian.
Kalian bisa mengubah style atau CSSnya sendiri sesuai keinginan kalian.
Cukup itu dulu, sampai jumpa di postingan berikutnya.
Posting Komentar