Xivanki Share !!: Cara Modifikasi Label Cloud Menjadi Keren

Cara Modifikasi Label Cloud Menjadi Keren - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Modifikasi Label Cloud Menjadi Keren !! Semoga tulisan dengan kategori Desain Blog !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Modifikasi Label Cloud Menjadi Keren ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Widget Label di Blogger memiliki dua macam jenis, yang pertama Daftar dan yang kedua Cloud. Kali ini saya akan membahas tentang Label Cloud.

Umumnya label cloud di blog pasti memiliki tampilan yang kurang enak dipandang, kenapa saya bilang demikian ? Karena tampilannya sangat jelek, mulai dari Huruf, background dan lainnya. Oleh karena itulah, pada postingan kali ini saya akan membagikan sebuah cara untuk memodifikasi label cloud tersebut menjadi sedikit keren.

Pasti sobat sudah pernah kan melihat label cloud yang keren-keren di blog orang lain. Salah satu label cloud yang menurut saya keren adalah pada template Evo Magz. Ya, template buatan Mas Sugeng ini memang memiliki label cloud yang sangat keren.

Jika sobat ingin mempunyai label cloud yang keren di blog sobat, silahkan lihat cara modifikasinya dibawah ini.

Pertama-tama kita harus memasang widget Label Cloud terlebih dahulu, jika sobat belum tau cara memasangnya, silahkan cek dibawah.

1. Masuk ke Blogger, pilih blog sobat

2. Lalu klik menu Tata Letak dan add gadget pada bagian Sidebar

3. Pilih widget Label. Dan pilih yang Cloud.

4. Klik Simpan dan klik Simpan Setelan

Setelah selesai memasang widgetnya. Maka langkah selanjutnya adalah memodifikasi tampilan dari Label Cloud tersebut. Silahkan lihat caranya dibawah.

1. Klik menu Template > Edit HTML

2. Cari kode ]]></b:skin>. Dan letakkan salah satu kode CSS berikut ini tepat diatasnya. Silahkan pilih style yang sobat suka.

Style 1

/* Label Cloud Style 1 */
.label-size{margin:0;padding:0;position:relative}.label-size a,.label-size span{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-bottom:9px;margin-left:20px;padding:0 10px 0 12px;background:#2493C4;color:#fff;text-decoration:none;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px}.label-size a:before,.label-size span::before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent #2493C4 transparent transparent;border-style:solid;border-width:12px 12px 12px 0}.label-size a:after,.label-size span::after{content:"";position:absolute;top:10px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #2493C4;-webkit-box-shadow:-1px -1px 2px #2493C4;box-shadow:-1px -1px 2px #2493C4}.label-size a:hover,.label-size span::hover{background:#333}.label-size a:hover:before,.label-size span::hover::before{border-color:transparent #333 transparent transparent}

Style 2

/* Label Cloud Style 2 */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{

text-align:left
}
.label-size {
background:#2288bb;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#222222;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}

Style 3

/* Label Cloud Style 3 */
.label-size{display:block;float:left;background:#ffffff!important;margin:0 3px 3px 0;color:#222222;font-size:100%;transition:all 0.20s ease-in-out 0s;opacity:10;border:1px solid #66bbdd}
.label-size:hover,.label-size a:hover,.label-size span:hover{background:#0f7ea6}
.label-size a,.label-size span{display:inline-block;color:#222222;padding:4px 4px}

Style 4

/* Label Cloud Style 4 */
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Open Sans;
color:#fff!important;
}

.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

Style 5

/* Label Cloud Style 5 */
.Label a{ padding-left: 5px; padding-right: 31.5px; color: #fff!important; height: 32px; background: #5797bf; margin-right: 2px; line-height: 32px; text-decoration: none; border: none !important; transition: all .3s ease-in-out !important; float: left; margin-top: 2px; font-size: 13px; text-align: left; } .Label a:hover{ color:#fff !important; background:#4c80a1; } .Label a:after{ content: " "; position: absolute; width: 0px; height: 0px; border-width: 16.5px; border-style: solid; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent; } #BlogArchive1 .widget-content{ height: 300px; margin: 10px; width: auto; overflow: auto; }

3. Setelah itu, klik Simpan Template dan lihat hasilnya.


Dengan memodifikasi label cloud, tentu saja akan membuat tampilan blog sobat menjadi tambah cakep dari sebelumnya.

Sekian dulu postingan kali ini, semoga bermanfaat.