Iklan

Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger

Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger

BLOGGINGPASURUAN - Label widget ini sangat berguna sebagai navigasi yang mudah. Kita semua tahu widget label Blogger tidak enak dipandang, untuk alasan ini saya telah membuat beberapa widget label cloud unik dengan sangat menarik dan jelas pengunjung Blog Anda akan menyukainya. Saya menggunakan kode CSS murni sehingga tidak akan menghambat waktu loading Blog Anda. Di sisi lain, dilihat dari bentuknya dapat menarik perhatian pengunjung. Untuk menambahkan widget ini silahkan ikuti langkah-langkah sederhana dari bawah ini :

SAYA AKAN MENYAJIKAN 7 DESAIN LABEL DAN ANDA DAPAT MEMILIH SESUAI SELERA


Cara Modifikasi Widget Label Bloggger ( cloud )

1.Masuk ke Akun Blogger Anda
2. Masuk ke menu Tata letak ( layout ) >> Add gadget


Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger


3. Setelah klik pada LABEL, lihat gambar dibawah ini cara memilih LABEL jenis CLOUD

Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger

4. Kemudian tekan Save, sampai disini proses pembuatan LABEL jenis CLOUD selesai namun masih dalam desain default-nya ( asli ), nah sekarang kita akan MODIFIKASI dengan desain yang kita inginkan.

Cara Modifikasi Widget Cloud Blogger >> DESAIN # 1

Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger


1. Masuk ke menu TEMPLETE >> EDIT HTML
2. Cari kode ]]></b:skin> : gunakan Ctrl+F untuk mempercepat pencarian
3. Letakkan kode script di bawah ini sebelum/diatas kode ]]></b:skin>


CSS - BLOGGINGPASURUAN

/* cloud label by http://bloggingpasuruan.blogspot.co.id*/
.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:#0dd7b4;
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:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}



Cara Modifikasi Widget Cloud Blogger >> DESAIN # 2

Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger



CSS - BLOGGINGPASURUAN

/* cloud label oleh http://bloggingpasuruan.blogspot.co.id */
.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 {
border-radius:30px;
background:#FA0830;
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 {
border-radius:30px;
background:#333333;
}
.label-count {
white-space:nowrap;
border-radius:30px;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}


Cara Modifikasi Widget Cloud Blogger >> DESAIN # 3

Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger



CSS - BLOGGINGPASURUAN

/* cloud label oleh http://bloggingpasuruan.blogspot.co.id */
.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 {
border:5px dashed #000000;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
background:#FA0830;
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 {
border:5px dashed #FA0830;
background:#000000;
}
.label-count {
white-space:nowrap;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}


Cara Modifikasi Widget Cloud Blogger >> DESAIN # 4

Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger


CSS - BLOGGINGPASURUAN

/* cloud label oleh http://bloggingpasuruan.blogspot.co.id */
.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 {
border: 8px inset #0572F8;
background:#0572F8;
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:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}

Cara Modifikasi Widget Cloud Blogger >> DESAIN # 5

Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger


CSS - BLOGGINGPASURUAN

/* cloud label by oleh http://bloggingpasuruan.blogspot.co.id */
.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:#08A2FA;
border-radius: 30px;
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:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}

Cara Modifikasi Widget Cloud Blogger >> DESAIN # 6

Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger



CSS - BLOGGINGPASURUAN

/* cloud label by oleh http://bloggingpasuruan.blogspot.co.id */
.Label a{  background: rgb(0,100,180);
background: -moz-linear-gradient(top,  rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1)));
background: -webkit-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -o-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -ms-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );
display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.Label a:hover{color:#000 !important; background:#123d60;}


Cara Modifikasi Widget Cloud Blogger >> DESAIN # 7

Cara Modifikasi Widget LABEL ( cloud ) Responsive Blogger


CSS - BLOGGINGPASURUAN

/* cloud label by oleh http://bloggingpasuruan.blogspot.co.id */
.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: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;
}



4. Save templete Anda, dan lihat hasilnya… ( sebaikkanya refresh blog Anda )

Jika Anda tertarik dengan artikel di atas mohon bantuannya untuk men- share di media sosial yang Anda miliki…. Terima kasih, semoga bermanfaat..

Next
Prev Post
Previous
Next Post

5 comments:

  1. Waw.. keren2 semua, apa lg yg desain #6. Terimakasih min..

    ReplyDelete
  2. Hallo, Kami dari situs online terpercaya lagiqq.Mari Gabung bersama kami di agen poker uang asli dan ajak teman-teman kamu untuk bermain bersama di Lagiqq Agen Dominoqq Dan judi Poker Online Uang Asli indonesia terpercaya.
    Ayo Bergabung Di Lagiqq Menangkan jackpot poker & domino yang sudah mencapai ratusan juta rupiah.
    PROMO DAHSYAT LAGIQQ :
    * BONUS TURNOVER 0.5%
    * BONUS REFERRAL 20% SEUMUR HIDUP
    Tersedia Games : Poker, Bandar Poker, BandarQ, Domino99, AduQ, Capsa Susun dan Sakong.
    Kelebihan LAGIQQ :
    - Proses Deposit dan Withdraw Hanya 3 Menit
    - Min. Deposit 20.000, Min. Withdraw 20.000
    - Layanan Live Chat 24 Jam Non-stop
    - Dapat dimainkan di android, iphone, dan ipad
    - Agen Poker paling FAIR, NO ROBOT (member vs member)
    - Tersedia ratusan meja untuk anda pilih
    - Cukup 1 User ID untuk 7 Games
    JOIN???... Klik Disini >>>
    https://goo.gl/1m3Y0T
    Info Lebih Lanjut Hub:
    LIVECHAT : WWW.LAGIQQ.COM
    CALL CENTER : +855963458413
    BBM : 3343686E
    FACEBOOK : Lagiqq@gmail.com
    WECHAT : Lagiqq

    ReplyDelete