Cara Memasang Label Kategori Keren dan RESPONSIVE

Cara Memasang Label Kategori Keren dan RESPONSIVE

CSS

Budi hartono 07.06 Add Comment

Selamat sore bos kuh, hehe... berjumpa lagi dengan saya yang tak jemu memberikan tutorial-tutoria menarik seputar blogger. Nah, di sore hari yang lumayan lelah setelah beraktivitas ini, saya akan tetap membagikan tutorial menarik kepada bos kuh. "Tutorial apa kang ?" Saya akan membagikan tutorial cara membuat label kategori keren dan RESPONSIVE pada blog, dan pada tutorial ini saya memasang 24 Jenis label kategori keren dan juga responsive.

Sebelum kita melihat jenis-jenis label yang akan saya berikan nanti, silahkan bos kuh perhatikan dulu cara memasang label pada blog di bawah ini.

#Pertama
1. Buka dasbor blog bos kuh
2. Pilih Tata letak
3. Klik Tambahkan gadget
4. Klik Label

#Kedua
Setelah itu akan muncul tampilan baru, pada tampilan itu pada:
1. Tampilan : Centang label yang dipilih. Pada menu edit pilih 3 saja.
2. Menyortir : Centang alfabetik
3. Tampilkan : Pilih Cloud
4. Klik simpan

#Cara Pemasangan
1. Buka Dasbor Blog bos kuh
2. Pilih Tema
3. Edit HTML
4. Cari kode </style> 
5. Pastekan salah satu dari 24 struktur label yang akan saya berikan di bawah ini, tepat di atas kode </style>
6. Simpan Tema

Jenis 1

 cloud-label-widget-content {text-align: left;} .label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;} .label-size:nth-child(1) {background: #F86D9E;} .label-size:nth-child(2) {background: #37C371;} .label-size:nth-child(3) {background: #10BBEA;} .label-size:nth-child(4) {background: #25CBFE;} .label-size:nth-child(5) {background: #963690;} .label-size:nth-child(6) {background: #A3195C;} .label-size:nth-child(7) {background: #545454;} .label-size:nth-child(8) {background: #F2A15F;} .label-size:nth-child(9) {background: #00FF80;} .label-size:nth-child(10) {background: #B7860B;} .label-size:nth-child(11) {background: #99CC33;} .label-size:nth-child(12) {background: #FFFF3D;} .label-size:nth-child(13) {background: #3FDECF;} .label-size:nth-child(14) {background: #FF2F0A;} .label-size:nth-child(15) {background: #E9DB58;} .label-size:nth-child(16) {background: #42FFBD;} .label-size:nth-child(17) {background: #6899ED;} .label-size:nth-child(18) {background: #FF52AE;} .label-size:nth-child(19) {background: #8DBC2F;} .label-size:nth-child(20) {background: #80FF00;} .label-size a, .label-size span { display: inline-block; color: #fff !important; padding: 4px 10px; font-weight: bold; } .label-size:active { background: #222; } .label-count { white-space: nowrap; padding-right: 3px; margin-left: -3px; background: #333; color: #fff ; } .label-size:active .label-count, .label-size:focus+.label-count { background-color: #FF6BFF; } 

Jenis 2

 .label-size {
display:inline-block; margin: 0 4px 4px 0; padding:7px;
font:13px verdana; float:left; background: #FF0000;
-webkit-transform: translateZ(0); transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
pointer-events: none; position: absolute;
content: ''; height: 0; width: 0; bottom: 0; left: 0;
background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s; transition-duration: 0.3s;
-webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:active:before, .label-size:focus:before, .label-size:active:before {
width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;} 

Jenis 3

 .label-size {
display:inline-block; margin: 0 4px 4px 0; padding:7px;
font:13px verdana; float:left; background: #FF0000;
-webkit-transform: translateZ(0); transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
pointer-events: none; position: absolute;
content: ''; height: 0; width: 0; bottom: 0; right: 0;
background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s; transition-duration: 0.3s;
-webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:active:before, .label-size:focus:before, .label-size:active:before {
width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;} 

Jenis 4

 .label-size {
display:inline-block; margin: 0 4px 4px 0; padding:7px;
font:13px verdana; float:left; background: #FF0000;
-webkit-transform: translateZ(0); transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
pointer-events: none; position: absolute;
content: ''; height: 0; width: 0; bottom: 0; right: 0;
background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s; transition-duration: 0.3s;
-webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:active:before, .label-size:focus:before, .label-size:active:before {
width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;} 

Jenis 5

 .label-size {
display:inline-block; margin: 0 4px 4px 0; padding:7px;
font:13px verdana; float:left; background: #FF0000;
-webkit-transform: translateZ(0); transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
pointer-events: none; position: absolute;
content: ''; height: 0; width: 0; top: 0; right: 0;
background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s; transition-duration: 0.3s;
-webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:active:before, .label-size:focus:before, .label-size:active:before {
width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;} 

Jenis 6

 .label-size {
display:inline-block; margin: 0 4px 4px 0; padding:7px;
font:13px verdana; float:left; background: #FF0000;
-webkit-transform: translateZ(0); transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
pointer-events: none; position: absolute;
content: ''; height: 0; width: 0; bottom: 0; left: 0;
background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s; transition-duration: 0.3s;
-webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:active:before, .label-size:focus:before, .label-size:active:before {
width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;} 

Jenis 7

 .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:active{
  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:active: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;} 

Jenis 8

 .label-size a {

text-transform: uppercase;

float: left;

text-decoration: none;

margin: 2px 3px 6px 0;

padding: 3px;

border: solid 1px #999;

border-radius: 3px;

font-size: 12px;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

}

.label-size a:active {

border: 1px solid black;

-webkit-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

-moz-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

-ms-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

-o-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px); 

Jenis 9

 .label-size a {

color: #999;

text-transform: uppercase;

float: left;

text-decoration: none;

margin: 0 3px 6px 0;

padding: 3px;

border: solid 1px #999;

border-radius: 3px;

font-size: 12px;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

}

.label-size a:active {

color: white;

border: 1px solid white;

-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);

-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);

-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);

-o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);

} 

Jenis 10

 .label-size a {

text-transform: uppercase;

float: left;

text-decoration: none;

margin: 2px 3px 6px 0;

padding: 3px;

border: solid 1px #999;

border-radius: 3px;

font-size: 12px;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

-webkit-transform:rotate(0deg) scale(1) skew(-15deg) translate(0px);

-moz-transform: rotate(0deg) scale(1) skew(-15deg) translate(0px); 

Jenis 11

 .label-size a {

font-size: 14px!important;

padding: 1px 6px;

border-top: 1px solid #CACACA;

border-left: 4px solid #00A8FF;

margin-bottom: 5px;

float: left;

margin-right: 5px;

background: #F5F5F5;

border-right: 1px solid #CACACA;

border-bottom: 1px solid #CACACA;

}

.label-size a:active {

border-left: 2px solid #222222;

border-right: 3px solid #222222;

background: #fff;

} 

Jenis 12

 .label-size a {

text-transform: uppercase;

float: left;

text-decoration: none;

margin: 2px 3px 6px 0;

padding: 3px;

border: solid 1px #999;

border-radius: 3px;

font-size: 12px;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

-webkit-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);

-moz-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);

-ms-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);

-o-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);

}

.label-size a:active {

border: 1px solid black;

-webkit-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

-moz-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

-ms-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

-o-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

} 

Jenis 13

 font-size: 14px!important;

padding: 1px 6px;

border-top: 1px solid #CACACA;

border-left: 4px solid #00A8FF;

margin-bottom: 5px;

float: left;

margin-right: 5px;

background: #F5F5F5;

border-right: 1px solid #CACACA;

border-bottom: 1px solid #CACACA;

}

.label-size a:active {

border-left: 2px solid #222222;

border-right: 3px solid #222222;

background: #fff;

} 

Jenis 14

 .label-size a {

text-transform: uppercase;

float: left;

text-decoration: none;

margin: 2px 3px 6px 0;

padding: 3px;

border: solid 1px #999;

border-radius: 3px;

font-size: 12px;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

-webkit-transition: all 0.3s ease-out;

-ms-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

-webkit-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);

-moz-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);

-ms-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);

-o-transform: rotate(10deg) scale(1) skew(5deg) translate(0px);

}

.label-size a:active {

border: 1px solid black;

-webkit-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

-moz-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

-ms-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

-o-transform: rotate(0deg) scale(1.2) skew(5deg) translate(0px);

} 

Jenis 15

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

display:inline-block;float:none;font-family:"Trebuchet MS","Arial","Helvetica",sans-serif;font-style:normal;font-weight:bold;text-decoration:none;background-color:#1BA1E2;color:#fff !important;-webkit-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-moz-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-o-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-webkit-box-shadow:0 0 1px #999999;-moz-box-shadow:0 0 1px #999999;-o-box-shadow:0 0 1px #999999;box-shadow:0 0 1px #999999;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 0.1s ease-in;-moz-transition:-moz-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in;transition:transform 0.1s ease-in;

}

.label-size:active {

color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px rgb(0,0,50);-moz-box-shadow:0 0 20px rgb(0,0,50);-o-box-shadow:0 0 20px rgb(0,0,50);box-shadow:0 0 10px rgb(0,0,50);-webkit-transform:rotate(3deg) scale(1.2);-moz-transform:rotate(3deg) scale(1.2);-o-transform:rotate(3deg) scale(1.2);transform:rotate(3deg) scale(1.2);

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  {

display:inline-block;float:none;margin:2px 1px;padding:6px 3px;font-family:"Trebuchet MS","Arial","Helvetica",sans-serif;font-style:normal;font-weight:bold;text-decoration:none;background-color:#252c44;color:#fff !important;-webkit-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-moz-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-o-text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;text-shadow:rgba(0,0,0,0.2) 1px 0,rgba(0,0,0,0.2) 0 1px,rgba(255,255,255,0.2) -1px 0,rgba(255,255,255,0.2) 0 -1px,rgba(0,0,0,0.2) 1px 1px,rgba(255,255,255,0.2) -1px -1px;-webkit-box-shadow:0 0 1px #999999;-moz-box-shadow:0 0 1px #999999;-o-box-shadow:0 0 1px #999999;box-shadow:0 0 1px #999999;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform 0.1s ease-in;-moz-transition:-moz-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in;transition:transform 0.1s ease-in;background-color:#252c44;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);background-color:#252c44;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);background-color:#252c44;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);

}

.label-size a:active  {

color:#fff;background-color:#0c92da;-webkit-box-shadow:0 0 20px rgb(0,0,50);-moz-box-shadow:0 0 20px rgb(0,0,50);-o-box-shadow:0 0 20px rgb(0,0,50);box-shadow:0 0 10px rgb(0,0,50);-webkit-transform:rotate(3deg) scale(1.2);-moz-transform:rotate(3deg) scale(1.2);-o-transform:rotate(3deg) scale(1.2);transform:rotate(3deg) scale(1.2);-webkit-transform:rotate(-3deg) scale(1.2);-moz-transform:rotate(-3deg) scale(1.2);-o-transform:rotate(-3deg) scale(1.2);background-color:#0c92da;transform:rotate(-3deg) scale(1.2);-webkit-transform:rotate(3deg) scale(1.2);-moz-transform:rotate(3deg) scale(1.2);transform:rotate(3deg) scale(1.2);background-color:#0c92da;-webkit-transform:rotate(2deg) scale(1.2);-moz-transform:rotate(2deg) scale(1.2);background-color:#0c92da;-o-transform:rotate(2deg) scale(1.2);transform:rotate(2deg) scale(1.2);

} 

Jenis 16

 font-size:10px;
color:#666; 
}

.label-size:active { 
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:active  { 
text-decoration: none; 
} 

Jenis 17

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

Jenis 18

 .cloud-label-widget-content {text-align: left;}
.label-size {background: #5498C9;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F53477;}
.label-size:nth-child(2) {background: #89C237;}
.label-size:nth-child(3) {background: #44CCF2;}
.label-size:nth-child(4) {background: #01ACE2;}
.label-size:nth-child(5) {background: #94368E;}
.label-size:nth-child(6) {background: #A51A5D;}
.label-size:nth-child(7) {background: #555;}
.label-size:nth-child(8) {background: #f2a261;}
.label-size:nth-child(9) {background: #00ff80;}
.label-size:nth-child(10) {background: #b8870b;}
.label-size:nth-child(11) {background: #99cc33;}
.label-size:nth-child(12) {background: #ffff00;}
.label-size:nth-child(13) {background: #40dece;}
.label-size:nth-child(14) {background: #ff6347;}
.label-size:nth-child(15) {background: #f0e68d;}
.label-size:nth-child(16) {background: #7fffd2;}
.label-size:nth-child(17) {background: #7a68ed;}
.label-size:nth-child(18) {background: #ff1491;}
.label-size:nth-child(19) {background: #698c23;}
.label-size:nth-child(20) {background: #00ff00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:active {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:active .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
} 

Jenis 19

 .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:active{background:#555;} .label-size a:active:before{border-color:transparent #555 transparent transparent;} 

Jenis 20

 .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:active{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2} 

Jenis 21

 .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:active{background:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2} 

Jenis 22

 .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:active{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} 

Jenis 23

 .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:active{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} 

Jenis 24

 .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:active{background:#333333} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} .label-size{line-height:1.2} 

Itulah bos kuh, tutorial cara membuat label kategori keren dan responsive pada blog dengan 24 model kategori yang akan semakin membuat blog bos kuh lebih keren dan menarik. Semoga artikel singkat ini membawa manfaat kepada kita semua.. aamiin

Terima kasih !

Baca juga:

*Cara Menambahkan Menu, Sub Menu, dan Label Keren Pada Blog

Cara Membuat Artikel Baca Juga Keren Dengan Scroll

Cara Membuat Artikel Baca Juga Keren Dengan Scroll

Tutor Blog

Budi hartono 12.10 Add Comment

Hallo bos kuh, berjumpa lagi dengan saya. Semoga bos kuh tidak bosan mendengarkan saya yang terus mengoceh tanpa henti. Tapi semoga saja ocehan saja memberi manfaat untuk bos kuh. Pada artikel kali saya akan membagikan tutorial cara membuat artikel baca juga dengan scroll bos kuh.

Artikel dengan scroll ini sangat-sangat di rekomendasikan untuk bos kuh, karena dapat menghemat kertas HVS. Eh, kan kita nulisnya di blog yaa, bukan di HVS.. hehe. Tapi dimanapun nuslisnya, efek ini dapat menghemat halaman, dan membuat tampilan blog kita menjadi lebih keren.

Untuk membuat related post dengan scroll silahkan bos kuh:
1. Masuk ke halaman dasbor bos kuh
2. Klik templete/tema, pilih Edit HTML
3. Cari kode ]]></b:skin> (gunakan CTRL+F untuk memudahkan pencarian)
4. Simpan kode di bawah ini sebelum kode ]]></b:skin> 

 /* Related Post */
.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#EEEEEE;}
.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}
.related_posts a{color:#000;}
.related_posts ul{padding:0;}
.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background: #EEEEEE;} 

5. Jika bos kuh sudah menyimpannya, cari kode <data:post.body/> (dalam satu templete terdapat 4-5 code tersebut, pilih yang kedua)
6. Kemudian pastekan script kode di bawah ini tepat setelah/dibawah <data:post.body/>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Baca Juga</h4>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</div>
</b:if> 

7. Simpan templete bos kuh, dan lihat tema.

Catatan :Jika kolom baca juga tidak muncul, silahkan bos kuh gantikan memasang kode yang tadinya dibawah <data:post.body/> yang kedua, menjadi yang ketiga.

Itulah tutorial singkat membuat artikel baca juga dengan scroll. Sampai berjumpa di lain waktu yaa bos kuh.Jangan lupa baca juga Cara Membuat Artikel baca juga sesuai yang kita inginkan.

Cara Menghilangkan Tanggal Komentar Pada Blog

Cara Menghilangkan Tanggal Komentar Pada Blog

Tutor Blog

Budi hartono 11.34 Add Comment

Selamat siang bos kuh, semoga di siang hari yang cerah ini bos kuh tetap di beri semangat untuk terus beraktivitas. Dan pasti tengah meluangkan waktunya untuk membaca postingan ini. Nah, pada kesempatan kali ini saya akan mengupas tentang cara menghilangkan tanggal komentar pada blog. Seperti apa tutorialnya ? Lihat keterangan di bawah ini.

Sering kali jika kita melihat tanggal postingan komentar pada komentar, hal pertama yang muncul dibenak kita pasti mengira bahwa artikel yang telah terbit itu sudah cukup lama. apalagi kalau komentarnya sudah berbeda tahun. Dan tentunya hal tersebut akan sedikit membuat pengunjung blog kita agak enggan untuk berlama-lama nongkrong. Dan dampaknya blog kita akan memiliki boundrate tinggi, yang berujung pada di tinggalkan pengunjung. Kita tidak ingin seperti itu bukan ?

Nah, beruntung sekali jika bos kuh menemukan artikel ini. Karena di artikel ini saya akan mengupas tuntas tentang cara menghilangkan atau menyembunyikan tanggal pada komentar blog. Pada artikel ini saya akan membagikan dua cara untuk menyembunyikan tanggal komentar pada blog. 

#1. Cara Pertama
Langkah awal yang harus kita lakukan untuk dapat menyembunyikan tanggal komentar yaitu:
1. Masuk ke template blog 
2. Klik Tema --> Edit HTML
3. Cari kode ]]></b:skin> 
4. salin kode dibawah ini tepat diatas kode ]]></b:skin> 

.comment-timestamp {display: none;visibility: hiden;}

atau bisa juga dengan kode dibawah ini:

.comments .comments-content .datetime {display:none;visibility: hiden;}

5. Simpan Tema

#2. Cara Kedua
Menurut saya, cara ini adalah cara termudah untuk menghilangkan tanggal komentar, karena kita tidak harus melalui edit HTML terlebih dahulu, tapi cukup optimasi template.
Langkah awal yang harus kita lakukan yaitu :
1. Klik Template/tema > Customize
2. Kemudian klik "Advance" 
4 Klik "Add CSS"
3.Pastekan code di bawah ini pada kotak yang tersedia 

.comments .comments-content .datetime {display:none;visibility: hiden;}

4. Lalu klik "Apply to Blog"
5. S e l e s a i ...

Itulah tutorial cara menyembunyikan tanggal komentar pada blog. Terima kasih, semogg... eh tunggu, ada yang kelewat.. hehe.

Coba lihat salah satu komentar yang ada pada artikel bos kuh. Jika tombol delete dan balas komentarnya hilang. Bisa tambahkan kode ini di atas kode ]]></b:skin> 

.item-control {display:inline-block;}

Simpan tema dan lihat hasilnya.
Gimana bos kuh, sudah muncul ? ^_^ Jika masih tidak muncul, yaaaa.. itu sih DL alias derita loe.. hehe.

Maaf, canda, hihiii. Jika masih tidak muncul, silahkan ke edit HTML dan cari kode seperti dibawah ini:

 <dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd> 

Jika sudah ketemu, ganti dengan kode di bawah ini:

 <dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
</span>
<b:include data='comment' name='commentDeleteIcon'/>
</dd> 

Simpan tema, dan lihat hasilnya ^_^

Nah, itulah tutorial cara menyembunyikan tanggal komentar pada blog. Terima kasih telah membaca artikel ini, semoga bermanfaat. Sukses selalu bos kuh.

Silahkan berkunjung ke website kang Ricky di Pemuda 313

34 Efek Animasi Keren Untuk Backround Blog

34 Efek Animasi Keren Untuk Backround Blog

Pernik Blog

Budi hartono 02.22 Add Comment

Selamat sore sahabat Programmer SEO semua, di sore hari yang indah nan cerah ini saya akan membagikan tutorial pernik blog yakni tentang menambahkan efek menarik pada blog. Disini saya akan memasukkan kode-kode efek blog, berikut cara membuat efek tersebut.


Baiklah sahabat Programmer SEO semua, sebelum kita memasukan efek animasi menarik ke dalam blog kita. Terlebih dahulu silahkan :

1. Buka halaman dasbor blog kamu
2. Klik templete atau tema
3. Pilih Edit HTML
4. Cari kode </body> (cara mudah untuk menemukan kodenya yaitu tekan CTRL+F, maka akan keluar kotak pencarian. Silahkan masukan </body> dan ENTER)5. Masukan kode animasi di bawah kode </body>
6. Jika sudah, langsung klik simpan
7. Klik lihat blog

~{Di bawah ini adalah kumpulan kode animasinya. Silahkan pilih sesuai keinginan}~

#Jika ingin loading blog cepat, silahkan pilih salah satu dari ke enam efek di bawah ini

1. Bertaburan Bintang

 <script src='http://the-kampoeng-blogger.googlecode.com/files/bertabur%20bintang.js' type='text/javascript'></script>

2. Kupu-kupu

 <script src='http://the-kampoeng-blogger.googlecode.com/files/Kupu-kupu.js' type='text/javascript'></script>

3. Efek Gelembung

 <script src='http://the-kampoeng-blogger.googlecode.com/files/gelembung.js' type='text/javascript'></script>

4. Efek Kembang Api

 <script src='http://the-kampoeng-blogger.googlecode.com/files/kembang-api.js' type='text/javascript'></script> 

5. Efek Salju

 <script src='http://the-kampoeng-blogger.googlecode.com/files/Salju.js' type='text/javascript'></script>

6. Efek Hati Berjatuhan

 <script src='http://the-kampoeng-blogger.googlecode.com/files/hatiberjatuhan.js' type='text/javascript'></script> 

Itulah ke enam efek animasi untuk blog. Dan di bawah ini adalah efek animasi lain. Sengaja saya pisahkan, karena memang kode-kode di bawah ini lumayan berat sehingga membuat efek reload sedikit lambat.

Untuk cara pemasangannya, sama seperti kode-kode animasi di atas. Oke, langsung saja yaa.

 <a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmCGMzvMagmK2BysutmrWNzyrOBNufbVwZyyxE_TcvMITQpn2mQzoQ2o5i9erPRrACKQNbjQ97t2120EUa_CFXLvciw_3sm3bVHPugzqvODrL647XkD2XIpp2LGjyqB5V78tB0X0L73MZM/s1600/best+blogger+tips.png'/></a><script src='http://spiceupyourblogextras.googlecode.com/files/spiceupyourblogrosefull.js' type='text/javascript'>

/***********************************************

* Flower fall effect by Paul Crowe http://www.spiceupyourblog.com

***********************************************/

</script><a href='http://www.spiceupyourblog.com' target='_blank'><font size='1'>Blogger Flower Effect</font></a> 

 <a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmCGMzvMagmK2BysutmrWNzyrOBNufbVwZyyxE_TcvMITQpn2mQzoQ2o5i9erPRrACKQNbjQ97t2120EUa_CFXLvciw_3sm3bVHPugzqvODrL647XkD2XIpp2LGjyqB5V78tB0X0L73MZM/s1600/best+blogger+tips.png'/></a><script src="http://spiceupyourblogextras.googlecode.com/files/spiceupyourblogrosethin.js" type="text/javascript">
/***********************************************

* Flower fall effect by Paul Crowe @ http://www.spiceupyourblog.com
* Please keep this notice intact

***********************************************/
</script><a href="http://www.spiceupyourblog.com" target="_blank"><font size="1">Get Flower Effect</font></a> 

 <script language="javascript">
nd_mode="god";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efekmurka.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="creampie";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20creampie.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="tomato";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20tomat.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="burn";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20terbakar.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="coffee";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efekkopitumpah.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="eggs";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20telur%20mata%20sapi.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="baby";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20bayi%20merangkak.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="mold";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20mold.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="worms";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20cacing.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="snail";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20siput.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="ants";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20semut.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="fly";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="wasp";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Lebah.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="dino";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20dinosaurus.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="chainsaw";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20chainsaw.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="paint";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Paint%20Ball.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="blood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Bloody%20Gun.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://christiantatelu.blogspot.com/2012/03/kumpulan-efek-efek-blog-lengkap.html" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="shaver";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20shaver.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="ufo";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20ufo.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="gun";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/Efek%20Senjata.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="graff";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20graffity.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek-banjir.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="bomb";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20bom%20atom.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="flowers";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/efek%20bunga%20mekar.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <script language="javascript">
nd_mode="meteor";
nd_control="on";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://the-kampoeng-blogger.googlecode.com/files/meteor%20jatuh.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><a href="http://thekampoengblogger.blogspot.com" target="_blank">Efek Blog</a></center></small></div> 

 <style type="text/css">body { 
background-image:
url(http://s19.postimg.org/j8cmo7b6b/efek_petir_carazain.gif);
background-color:transparent; }</style> 

Itulah 34 efek animasi yang dapat menghiasi blog kamu menjadi lebih keren dan menarik. Terima kasih atas melihat tutorial ini. Jangan lupa kabari kalau berhasil. 

Cara Mudah Membuat Contact Us di Blog

Cara Mudah Membuat Contact Us di Blog

Trik SEO

Budi hartono 12.30 Add Comment

Apa kabar bos kuh, semoga sehat selalu yaa. Pada artikel kali ini saya akan beralih profesi, hehee. Yang tadinya biasa memberi tutorial pada bagian edit HTML. Kali ini akan beralih ke bagian Halaman. "Halaman gimana maksudnya kan ?" Halaman disini maksudnya yaitu halaman khusus yang ada di blog. Diantaranya yaitu membuat contact Form, privacy policy, disclaimer, Terms of Service, dan about.

Nah, sebelum sebelum kita ingin membuat privacy policy dan yang lainnya, pertama-pertama kita harus membuat contact us atau contact form dulu. Fungsi dari contact form itu sendiri yaitu sebagai alat bantu para pengunjung berinteraksi dengan pemilik web secara privacy. Yang meliputi pertanyaan, sanggahan dan lainnya. Contohnya seperti gambar di bawah ini.

Contact Us sendiri mempunyai nama yang berbeda, ada yang menamainya sebagai kotak saran, forum kontak, dan lain sebagainya. Sebagaimana contact us yang saya buat. Saya memberi nama sebagai "Hubungi Author"  dan pada teksnya saya beri anjuran untuk mengajukan kritik dan saran terhadap artikel yang telah saya buat.

"Kenapa ko akang memungsikannya sebagai kritik dan saran aja ?" Sebenarnya, boleh-boleh saja jika ingin mengajukan pertanyaan, berdiskusi, bahkan kenalan juga boleh.. hehe. Tapi saya hanya menekankan pada kritik dan saran saja. Alasannya agar jika ada pengunjung yang mengomentari artikel saya, saya bisa langsung perbaiki, baik itu mengenai kesalahan eja atau sebagainya. Sehingga dengan begitu akan membuat pengunjung merasa nyaman nongkrong di blog saya.. hehe.

Baik, langsung saja kita ke materi yaa.. Untuk membuat contact us atau contact form di blog kita, kita harus mengunjungi dulu jasa penyedia contact us, yaitu 123formbuilder. Silahkan klik DISINI ! untuk membuka pintunya.. hehe. Jika halamannya sudah terbuka. Lihat ke pojok kiri atas,

1. KLIK SIGN UP
2. Isi Formulir Pendaftaran (Creat an Account)
3. Jika sudah, klik AGREE AND SIGN UP
4. Selanjutkan bos kuh akan di arahkan pada pendaftaran contact form

5. Pada halaman selanjutnya, silahkan bos kuh pilih Contact & Lead Form

6. Langkah pertama, Creat Form
Pada bagian selanjutnya, bos kuh di suruh untuk mengedit tampilan kontak yang ingin bos kuh pasang pada blog bos kuh. Bos kuh bisa menambahkan kode recaptcha mengedit tulisan, menambahkan form, dan sebagainya.

7. Jika bos kuh sudah selesai pada bagian ini, silah Klik Preview untuk melihat hasilnya. Jika sesuai yang di inginkan, langsung klik Continue

8. Langkah kedua, yaitu Form Setting

Bagian ini yaitu untuk memnotifikas email Silahkan bos kuh klik Add Notifivation email --> Klik Save ---> Klik Continue untuk lanjut ke langkah terakhir.

9. Langkah terakhir, Publish Form

Pada langkah terakhir ini. Silahkan bos kuh klik Blogger untuk mendapatkan codenya. Lalu copy kan codenya. Dan pasangkan ke blog bos kuh. Untuk memasangkannya
a. Buka Dasbor blog bos kuh
b. Pilih Halaman
c. Masukan ke halaman baru
d. Ubah dari mode compose ke HTML
e. Kembalikan lagi ke mode compose

(jika tak ingin ada orang yang mengomentari, lihat ke pojok kiri, disana tertulis Setelan entri.  Pada setelah entri itu terdapat beberapa tool. Silahkan klik Pilihan --> pada bagian komentar pembaca, centang "Jangan izinkan".)

f. Klik Publikasikan

S e l e s a i . . . Selamat, karena kini bos kuh sudah memiliki contact form pribadi di blog bos kuh. Sepertinya hanya itu tutorial yang bisa saya berikan di siang hari ini. Sampai jumpa di lain waktu ya bos kuh.

Cara Submit Sitemap Dan Artikel Ke Google Web Master

Cara Submit Sitemap Dan Artikel Ke Google Web Master

Tutor Blog

Budi hartono 18.50 Add Comment

Hay bos kuh, berjumpa lagi dengan saya yang selalu mengoceh ini di setiap harinya. Entah pagi,entah siang, entah sore, sepertinya hampir setiap waktu saya tak jemu untuk terus mengoceh dan mengoceh.. hehe. Tapi mudah-mudahan bos kuh tidak bosan mendengarkan bercerita. 

Pada artikel kali ini saya akan menceritakan sebuah kisah, eh maaf, maksudnya pada kesempatan kali ini saya akan membuat tutorial tentang cara mensubmit sitemap dan artikel ke Google Console atau Google Web Master. Lah, untuk apa yaa kang harus di submit segala ? Terus Pengertian submit dan Google Web Master itu apa ?

Google Web Master atau Google Console merupakan sebuah tool yang di sediakan perusahaan Google untuk para pemilik website atau blog yang berfungsi sebagai alat bantu peng-indeks-an. Dengan adanya google web master ini, setiap artikel yang telah kita buat dapat cepat terindax atau terdeteksi mesin pencari Google sehingga akan lebih cepat mendapatkan trafik pengunjung.

Mendaftarkan website, mensubmit sitemap, dan artikel kita ke Google Web Master merupakan salah satu bagian dari teknik SEO yang wajib di lakukan oleh para pemilik blog agar blog atau website yang sedang di kelola mendapatkan perhatian lebih dari search engine.

Sementara itu, pengertian submit yaitu menyerahkan data yang pada situs kita ke pihak google. Penyerahan data tersebut mencakup seluruh isi halaman web atau blog kita, dan juga artikel-artikel yang telah kita buat. Untuk Untuk penyerahan data yang mencakup seluruh isi halaman (seperti nama konten/label, privacy policy, disclaimer, TOS, about, dsb) kita hanya cukup menyerahkan sitemapnya saja.  Akan tetapi untuk setiap artikel yang baru kita buat, kita harus menyerahkan atau mensubmitnya satu per satu. 

"Lah kang, untuk apa harus mensubmit satu per satu, bukankah tanpa kita submit, nantinya artikel kita akan tetap ada di search engine ?"

Iya, memang benar. Meski tanpa kita submit pun, nanti juga artikel kita akan muncul di mesin telusur. Tapi untuk bisa muncul di mesin telusur, akan membutuhkan proses yang tidak sebentar, bisa berminggu-minggu bahkan sampai satu bulan lebih. 

Namun jika kita mensubmit langsung artikel kita satu per satu ke web master, hanya 2 menit maka artikel kita sudah nongkrong di search engine. Hebat bukan ? Itulah pentingnya mengapa kita harus segera mensubmit artikel kita setelah kita selesai membuatnya.

Sampai disini paham kan bos kuh ? saya anggap paham saja yaa.. hehe. Oke, lanjut ke tema awal tentang cara mensubmit sitemap dan artikel ke Google Web Master. 

#1 Cara Submit Ke Google Web Master
Langkah pertama yang harus bos kuh lakukan yaitu :
1. Silahkan masuk ke Situs Google Web Master
2 Klik Peta Situs (sitemap)

Jika bos kuh sudah mengkliknya, maka secara otomatis halaman akan beralih ke seperti gambar di bawah ini.

Pada kolom berwarna merah silahkan masukan peta situsnya. yaitu dengan memasukan:  sitemap.xml
Jika sudah selesai, langsung klik kirim. Dengan begitu Googlebot akan merayapi situs kita, melihat satu per satu konten yang ada pada halaman blog kita.

Untuk lebih memudahkannya, silahkan bos kuh masukan satu per satu sitemap di bawah  ini : 

1. sitemap.xml
2. atom.xml?
3. atom.xml?redirect=false
4. atom.xml?alt=rss
5. feeds/posts/default
6. feeds/posts/default?alt=rss
7. feeds/posts/default?orderby=updated

Jika artikel bos kuh kurang dari 500 buah, silahkan masukan kode di bawah ini:

atom.xml?redirect=false&start-index=1&max-results=500

Dan jika artikel bos kuh sudah mencapai 501 sampai 1000, bisa memasukan peta situs di bawah ini:

atom.xml?redirect=false&start-index=501&max-results=1000

Dan jika artikel bos kuh sudah mencapai 1001 sampai 1500, bisa ditambahkan dengan sitemap seperti ini

atom.xml?redirect=false&start-index=1001&max-results=1500

Begitu seterusnya pada tiap kelipatan 500. Sebagai tambahan agar performa situs kita menjadi lebih mantabb, bisa tambahkan sitemap dibawah ini:

feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc

Selamat, karena sekarang situs bos sudah masuk ke dalam pengindeks-an Google. Selanjutnya yaitu tentang cara mensubmit atau mencrawl artikel di Google Console.

#2. Cara Submit Artikel di Google Web Master
Sebetulnya pensubmitan artikel pada google web master berfungsi sebagai pengcrawl-an atau pengrayapan yang di lakukan oleh bot google terhadap artikel kita. Antara submit dan crowl mempunyai fungsi yang sama, yakni agar artikel kita cepat terindex.

Agar kita dapat mensubmit artikel kita ke Google web Master, silahkan :
1. Alihkan dulu tampilan web consule ke versi lama
2. Klik Crawl 
3. Pilih Fetch as Google

4. Masukan URL artikel bos kuh pada kolom yang telah saya lingkari dengan warna biru langit.

*URL yang di masukan Harus dari tahun sampai HTML. Lihat gambar di bawah ini.

5. Selanjutnya klik Fetch.
6. Klik Request
7. Maka bos kuh akan di arahkan pada pemilihan gambar rechaptcha. 
8. Jika sudah selesai, Klik Crawl This Only

S e l e s a i . . . 
itulah bos kuh tutorial cara memasukan sitemap dan submit artikel ke Google Console. Terima kasih, semoga bermanfaat. Sampai jumpa di lain waktu.