Cara Membuat Label Cloud Keren

  • dunia hitam
  • kata
    • kata lucu
    • kata bijak
    • kata mutiara
    • kata cinta
    • kata gokil
  • lucu
    • gambar lucu
    • pantun lucu
    • tebakan lucu
    • kata lucu
    • cerita lucu
  • berita
    • berita unik
    • berita politik
    • berita artis
    • berita aneh
  • kesehatan
    • asam urat
    • kanker
    • jantung
    • hepatitis
    • ginjal
    • asma
    • lambung
  • gambar
    • gambar unik
    • gambar lucu
    • gambar aneh
    • gambar animasi
    • video lucu
  • hoby
    • burung
    • ikan
    • piaraan
  • contoh
    • surat lamaran
    • recount text
    • descriptive text
    • curriculum vitae
    • deskripsi
  • video
    • video lucu
    • video hantu
    • video polisi
    • video totorial
    • video panas
    • video lagu
  • blog
    • SEO
    • template
    • script
    • widget
    • backlink
    • imacros
  • komputer
    • excel
    • macro excel
Home » blogging » Tips dan Trik » Cara Membuat Label Cloud Keren

Cara Membuat Label Cloud Keren

Label Cloud Keren
Halo semua,, blog Bangiz kali ini akan berbagi tutorial.  Seperti yang tampak pada judul dan gambarnya, kalau Anda suka ngeblog atau membuat website pasti sudah bisa menebak. Tutorialnya yaitu cara membuat label cloud. Meskipun di internet sudah banyak yang membahas dengan hasil tampilan yang berbeda-beda, tapi tidak apa-apa siapa tahu Anda tertarik dengan tabel cloud yang akan saya bahas.
Oke langsung saja beri tahu cara pembuatannya.

1. Masuk ke dashboard blogger

2. Klik Template > Edit HTML 

3. Klik Ctrl + F, cari kode ]]></b:skin>


4. Copy kode CSS di bawah sebelum/diatas ]]></b:skin>

.label-size {
float: left;
margin: 0 0 7px 20px;
position: relative;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.75em;
font-weight: bold;
text-decoration: none;
color: #996633;
text-shadow: 0px 1px 0px rgba(255,255,255,.4);
padding: 0.417em 0.417em 0.417em 0.917em;
border-top: 1px solid #d99d38;
border-right: 1px solid #d99d38;
border-bottom: 1px solid #d99d38;
-webkit-border-radius: 0 0.25em 0.25em 0;
-moz-border-radius: 0 0.25em 0.25em 0;
border-radius: 0 0.25em 0.25em 0;
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
-webkit-box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
z-index: 1;
}
.label-size:before {
content: '';
width: 1.30em;
height: 1.39em;
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
position: absolute;
left: -0.69em;
top: .2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-left: 1px solid #d99d38;
border-bottom: 1px solid #d99d38;
-webkit-border-radius: 0 0 0 0.25em;
-moz-border-radius: 0 0 0 0.25em;
border-radius: 0 0 0 0.25em;
z-index: 1;
}
.label-size:after {
content: '';
width: 0.5em;
height: 0.5em;
background: #fff;
-webkit-border-radius: 4.167em;
-moz-border-radius: 4.167em;
border-radius: 4.167em;
border: 1px solid #d99d38;
-webkit-box-shadow: 0 1px 0 #faeaba;
-moz-box-shadow: 0 1px 0 #faeaba;
box-shadow: 0 1px 0 #faeaba;
position: absolute;
top: 0.667em;
left: -0.083em;
z-index: 9999;
}
#Label1 {
height: 210px;
}
.label-size:hover {
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}
.label-size:hover:before {
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}

5. Simpan Template dan lihat hasilnya

Catatan:
  • Pastikan Anda telah menambahkan gadget label di blog.
  • Pilih tampilkan sebagai cloud (lihat gambar). Pengaturan lainnya bebas.

Selamat mencoba!!!!
Ditulis oleh Unknown, Senin, 29 April 2013 20.31- Rating: 4.5

Judul : Cara Membuat Label Cloud Keren

Deskripsi : Halo semua,, blog Bangiz kali ini akan berbagi tutorial.  Seperti yang tampak pada judul dan gambarnya, kalau Anda suka ngeblog atau me...
keyword :Cara Membuat Label Cloud Keren, blogging, Tips dan Trik
Posting Lebih Baru
Posting Lama
Beranda
Postingan Populer
  • Jasad Mayat Terkubur 19 Tahun Masih Utuh
    Masyarakat Ciomas Bogor dan sekitarnya digemparkan dengan utuhnya jasad dari mayat Triyani binti Kartomulyo, perempuan ahli shadaqah yang ...
  • Hotel Bawah Tanah Terdalam di Dunia
    Hotel Bawah Tanah Terdalam Di Dunia Ingin merasakan tinggal di hotel yang lain dari biasanya? Jika ya, mungkin inilah saatnya anda mengunjun...
  • Foto: Uniknya Kendaraan Anti Banjir di Thailand
    Banjir yang melanda kota besar terkadang menyulitkan kita untuk melakukan transportasi darat perlu kendaraan khusu untuk menembus genangan b...
  • Foto Bus Persib yang di Lempar Oknum Jak Mania
    Foto Bus Persib yang di Lempar Oknum Jak Mania .- Selamat malam sahabat sebagin info kali ini mimin akan share foto-foto bus persib yang ter...
  • 5 Aksi Jokowi Mata-matai Anggaran
    Jangan coba-coba bermain menyelewengkan anggaran DKI Jakarta. Gubernur DKI Jakarta Joko Widodo (Jokowi) punya beragam cara mengontrol APBN 2...
  • Kata Mutiara, Kata Bijak, Kata Cinta, Kata Motivasi, Kata Lucu dan Kata Galau dengan Gambar
    Pada kesempatan kali ini saya berbagi tentang kata-kata mutiara. Maklumlah hampir semua orang khususnya mulai dari orang yang beran...
  • Aneh, Orang Ini Merasa Nyaman Tinggal di Kuburan
    Seorang warga miskin pindah dan menempati sebuah kuburan berumur 100 tahun setelah kehilangan rumahnya. Pria tersebut bernama Bratislav Stoj...
  • Membuat Komentar Facebook dan Blogger Berdampingan
    Pada kesempatan kali ini Bangiz mau berbagi tentang tips dan trik blogging. Yang akan kita bahas kali ini yaitu tentang komentar ...
  • Seperti inilah Wajah Bumi Di Malam hari Jika Di Lihat Dari Antariksa
    acapkali disebut Planet Biru karena citranya yang tampak biru saat diambil pada siang hari. Tapi, apakah Bumi juga biru pada malam hari? Cit...
  • Tanda-Tanda 100 Hari Menjelang Kematian
    Setiap manusia pasti akan melewati pintu kematian. Bahkan semua yang hidup di dunia ini pasti akan mati. Dan Allah sebelum mencabut ruh sese...

Info dunia hitam © Cara Membuat Label Cloud Keren