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 beberapawidget 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

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

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

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

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

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

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

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

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

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..

Related Posts