Blog Tutorial Pelabagi Gaya Kategori Label Untuk Blog


Boleh lihat demo dekat laman hadapan blog ini.

Cara pemasangan adalah sangat mudah,hanya perlu letakkan kod label pilihan anda dibawah sebelum/di atas kod ]]></b:skin>

Klik save template setelah anda meletakkan kod pilihan dan lihat perubahan pada widget label

*pastikan anda telah meletak gajet/widget label terlebih dahulu supaya memudahkan anda melihat perubahan kotak label tersebut

Kod 1:style label seperti di blog ini-Dengan sedikit animasi hover



.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;
}
Kod 2



/*-----fitri1986.blogspot.com----*/

#Label1 a{outline: 1px rgba(255,255,255,0.4) dashed;
border: 1px rgba(0,0,0,0.3) dashed;
padding: 4px 10px 4px 20px;
text-decoration: none;
color:#000000;
white-space: nowrap;
font-family: Arial;
font-size: 12px;
font-weight: bold;
position: relative !important;
background: #8dc63f;
float: left;
padding: 5px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:4px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover{color: rgba(0,0,0,0.5);}
.label-size{line-height:1.5;align:left;}
Kod 3



.label-size a {
display: inline-block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 7px;
font-family: 'Helvetica Neue', helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
height: 14px;
vertical-align: middle;
margin-bottom: 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
.label-size a {
color: #996633;
border: 1px solid #DDA13C;
background: rgb(238,177,75);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
}
.label-size a:before {
content: '\2022';
color: #FFFFFF;
margin-right: 4px;
font-size: 15px;
line-height: 13px;
height: 13px;
vertical-align: text-top;
text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.label-size a:hover {
text-decoration: none;
background: rgb(240,183,86);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
}
Kod style 4



/*-----fitri1986.blogspot.com----*/

#Label1 a{float: left;
font-size: 11px!important;
line-height: 1em!important;
display: block;
margin-right: 7px;
margin-bottom: 7px;
padding: 7px;
background: #ffd964 url(http://1.bp.blogspot.com/-RDR_7KpQdY4/UVHGMTNoZ9I/AAAAAAAABRs/wX3rK8TRpdg/s1600/yellow-btrix.png);
border: 1px solid #F9B653;
color: #9C6533!important;
text-shadow: 1px 1px 0px rgba(255,255,255,0.4);
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#Label1 a:hover{background: url(http://3.bp.blogspot.com/-gGx35EnLtls/UVHGMahuryI/AAAAAAAABRk/wmUqPUHxMNA/s1600/yellow-btrix-hover.png);}
#Label1 a:active { background: url(http://3.bp.blogspot.com/-LWGrYIKfFxk/UVHGMXN71iI/AAAAAAAABRo/yP2mm8CfBug/s1600/yellow-btrix-active.png); }
Kod Style 5




.label-size{
display: inline-block;
padding: 0px 10px;
height: 29px;
line-height:29px;
border-radius: 5px;
font-weight:bold;
font-size:12px;
text-decoration:none;}
.label-size{
border: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #6ea23b;
color: #fff;
background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}
.label-size:hover{
background-color: #b7fa66;
background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
}
.label-size:active{
background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}
.label-size{
display:inline-block;
border-radius: 5px 0 0 5px;
border-right-width:0;
position:relative;
z-index:5;
margin-right: 20px;
margin-bottom: 10px;
}
.label-size:after{
content: " ";
width: 22px;
height: 22px;
line-height: 18px;
font-size:25px;
border-top: 1px solid #769e42;
border-right: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #7eac46;
border-radius: 3px 7px 3px 0;
color: #fff;
background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
position:absolute;
top: 3px;
right: -12px;
z-index:-3;
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(45deg); /* FF3.5+ */
-ms-transform: rotate(45deg); /* IE9 */
-o-transform: rotate(45deg); /* Opera 10.5 */
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
zoom: 1;
}
.label-size:hover:after{
background-color: #b7fa66;
background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
}
.label-size:active:after{
background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}
.label-size:before{
content: " ";
height:5px;
width:5px;
display:block;
position:absolute;
right:-3px;
top:11px;
background-color: #fcfdf5;
border: 1px solid #83ab52;
border-radius:5px;
box-shadow: 0 1px 0 #b2ddd83;
}
.label-size span{
padding:2px 5px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
background-color: #ed943f;
text-shadow: 0px 1px 1px #000;
margin-left: 10px;
background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}
#Label1 {height:210px !important;}

Kod Style 6




.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
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{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a: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 #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}


Artikel ini hanyalah simpanan cache dari url asal penulis yang berkebarangkalian sudah terlalu lama atau sudah dibuang :

http://fitri1986.blogspot.com/2018/12/blog-tutorialpelabagi-gaya-kategori.html

Kempen Promosi dan Iklan
Kami memerlukan jasa baik anda untuk menyokong kempen pengiklanan dalam website kami. Serba sedikit anda telah membantu kami untuk mengekalkan servis percuma aggregating ini kepada semua.

Anda juga boleh memberikan sumbangan anda kepada kami dengan menghubungi kami di sini
Pelbagai Pilihan Gaya Untuk Label Pada Blog

Pelbagai Pilihan Gaya Untuk Label Pada Blog

papar berkaitan - pada 23/12/2018 - jumlah : 435 hits
Boleh lihat demo dekat laman hadapan blog ini Cara pemasangan adalah sangat mudah hanya perlu letakkan kod label pilihan anda dibawah sebelum di atas kod b skin Klik save template setelah anda meletakkan kod pilihan dan lihat perubahan pada...
Ungkap 4 Tipe Kepribadian Dari Gaya Selfie

Ungkap 4 Tipe Kepribadian Dari Gaya Selfie

papar berkaitan - pada 25/12/2018 - jumlah : 227 hits
Ungkap tipe kepribadian dari gaya selfie Bagaimana caranya memotret wajah sendiri Sambil tersenyum dengan pose duck face atau dari sisi atas
7 Personaliti Gaya Jalan Boleh Kenal Perwatakan Seseorang Itu Rileks Media

7 Personaliti Gaya Jalan Boleh Kenal Perwatakan Seseorang Itu Rileks Media

papar berkaitan - pada 23/12/2018 - jumlah : 619 hits
Banyak cara yang dapat dilakukan untuk membaca karakter seseorang salah satunya adalah melihat caranya berjalan Pakar bahasa tu buh dan penulis buku Snap Making the Most of First Impressions Patti Wood mengatakan Keperibadian tak selalu bis...
15 Gaya Patung Model Baju Yang Sudah Bosan Dengan Rutin Harian

15 Gaya Patung Model Baju Yang Sudah Bosan Dengan Rutin Harian

papar berkaitan - pada 23/12/2018 - jumlah : 844 hits
Jika patung peraga boleh bernyawa mungkin ia akan berkata Hidup saya sungguh membosankan Setiap hari ia berdiri di tempat yang sama dan memperagakan pakaian dengan posisi yang sama Pekerja bahagian jualan yang juga bosan akan sesuka hati me...
Muat Naik Foto Bersama Arrian Di Instagram Gaya Rambut Baru Anak Tomok Buat Ramai Melting

Muat Naik Foto Bersama Arrian Di Instagram Gaya Rambut Baru Anak Tomok Buat Ramai Melting

papar berkaitan - pada 22/12/2018 - jumlah : 373 hits
Sejak lahir anak sulung Tomok nbsp Arrian Shah Akid sering menjadi perhatian netizen gara gara memiliki rupa paras yang sangat comel persis wajah anak golongan berdarah kacukan Kecerdikan dan kepetahannya dalam berkata kata juga sudah terse...
Perubahan Gaya Hidup Pria Selama 3 Bulan Bisa Langsung Perbaiki Kualitas Sperma

Perubahan Gaya Hidup Pria Selama 3 Bulan Bisa Langsung Perbaiki Kualitas Sperma

papar berkaitan - pada 27/12/2018 - jumlah : 315 hits
Perubahan gaya hidup yang dijalani pria dapat mengubah secara total kondisi sperma yang dimilikinya Walau pada setiap hari pria menghasilkan jutaan sperma baru namun ternyata membutuhkan waktu yang lama untuk matang secara sempurna
Mengapa Orang Memiliki Gaya Busana Yang Berbeda

Mengapa Orang Memiliki Gaya Busana Yang Berbeda

papar berkaitan - pada 29/12/2018 - jumlah : 542 hits
Istilah gaya busana hanya merujuk pada cara seseorang mengenakan pakaian sepatu tas dan aksesori lainnya Hal ini juga dapat ditentukan oleh jenis barang pakaian yang
Tutorial Recent Comment Style 5

Tutorial Recent Comment Style 5

papar berkaitan - pada 13/12/2018 - jumlah : 306 hits
1 Blogger Layout Add gadget Edit HTML2 Copy Paste code script type text javascript function showlatestpostswiththumbs document write for var r n t feed entry e i n title t ifbreak for ifvar l n link o title m n link o href if r n link o hre...
Flood Evacuees Increase In Sabah Decline In Perak And Selangor As At 4pm

Are Foreign Students Displacing Locals In Public Universities

The Colours Of Life Selamat Menyambut Hari Malaysia 2025

Malaysians Rally Online To Aid Flood Victims In Sabah With Donations Supplies

A Good Ponder For Malaysia Day Name One Country That Exports Its Best Minds For Free

100 000 Goods And Public Vehicles Eligible For Ron95 Subsidies

Bukan Sekadar Gabungan Ini Sebab Utama Malaysia Dibentuk

Fattah Amin Dedah Fatima Selesa Panggil Amira Othman Aunty Mira


echo '';
Info Dan Sinopsis Drama Berepisod Dendam Seorang Madu Slot Tiara Astro Prima

10 Fakta Biodata Amira Othman Yang Digosip Dengan Fattah Amin Penyanyi Lagu Bila Nak Kahwin

5 Tips Macam Mana Nak Ajak Orang Kita Suka Dating Dengan Kita

Info Dan Sinopsis Drama Berepisod Keluarga Itu Slot Lestary TV3

Bolehkah Manusia Transgender Mencapai Klimaks Selepas Bertukar


Resipi Kari Gulai Udang

Cuti Di Terengganu

Easy Best Corned Beef Recipe Pressure Cooker

Kewujudan Digital Footprint

Say Hello To Celcomdigi Fibre

Ole Ole Dari Negeri Kelantan Darul Naim