Cara Membuat Judul Blog, Judul Postingan, dan Judul Widget Miring

Kali ini Saya akan membahas Cara Membuat Judul Blog, Judul Postingan, dan Judul Widget Miring.

Demonya bisa dilihat pada blog Saya disini. Judul Blog, Judul Postingan, dan Judul Widget-nya miring.

Langsung ke cara membuatnya di bawah ini ↓

• Login ke blogger.com, jika sudah,
• Pilih Template → Edit HTML → Expand Widget Template

Judul Blog Miring.

• Cari Code /* Header yang mirip seperti di bawah ini, agar mudah mencari tekan f3.

/* Header
----------------------------------------------- */
.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

.header-inner .Header .titlewrapper {
  padding-top: $(header.padding.top);
}

• Ingat, setiap template codenya berbeda-beda !

• Jika sudah ketemu, hapus code di atas, yang code nya seperti di bawah ini ↓

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

.header-inner .Header .titlewrapper {
  padding-top: $(header.padding.top);
}

• Jika sudah dihapus, letakkan code yang berwarna hijau di bawah code yang berwarna biru seperti di bawah ini ↓

.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

• Code yang diletakkan ↓

 #header{float:center; width:490px; margin:0; text-align:center; color:#000000}

#header h1{font-family:'Molengo',Trebuchet MS,Serif; font-size:48px; font-weight:bold; margin:0; padding:10px; color:#000000; transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); line-height:1.0em}

#header h1:hover{transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg);}

#header a{color:#000000; text-decoration:none}

#header a:hover{color:#000000;}

#header .description{font-size:14px; font-family:'Molengo',Trebuchet MS,Serif; font-weight:bold; color:#efefe3; margin:0; padding:0 10px; text-transform:none}

#header img{margin:0 auto}

#header-center{width:480px; float:center; padding:0; margin-top:10px}
.center{padding-right:10px; margin:0}

• Hasilnya seperti di bawah ini ↓

.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

#header{float:center; width:490px; margin:0; text-align:center; color:#000000}

#header h1{font-family:'Molengo',Trebuchet MS,Serif; font-size:48px; font-weight:bold; margin:0; padding:10px; color:#000000; transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); line-height:1.0em}

#header h1:hover{transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg);}

#header a{color:#000000; text-decoration:none}

#header a:hover{color:#000000;}

#header .description{font-size:14px; font-family:'Molengo',Trebuchet MS,Serif; font-weight:bold; color:#efefe3; margin:0; padding:0 10px; text-transform:none}

#header img{margin:0 auto}

#header-center{width:480px; float:center; padding:0; margin-top:10px}
.center{padding-right:10px; margin:0}

• Jika hanya judul blog saja yang ingin miring, langsung simpan saja.
• Tetapi jika ingin melanjutkan untuk memiringkan judul postingan dan widget miring, jangan disimpan dulu dan ikuti langkah selanjutnya.

Judul Postingan Miring.

• Cari code ]]></b:skin> , agar mudah mencari tekan f3.
• Kemudian letakkan code di bawah ini, tepat di atas code ]]></b:skin>.

.post-title{ opacity: 0.7;
background:transparent;
border:1px solid #ccc;
-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
font-family:'Molengo',Trebuchet MS,Serif;
font-size:22px;
margin-bottom:2px;
padding:5px 10px 10px 10px;
transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
-webkit-transform:rotate(-6deg);
-o-transform:rotate(-6deg);
line-height:1.2em}
.post-title:hover{transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);}
.post-title a, .post-title a:visited, .post-title strong{display:block;
color:#ccc}
.post-title strong, .post-title a:hover{color:#fff}

• Jangan disimpan dulu, lanjutkan untuk judul widget miring.

Judul Widget Miring.

• Seperti yang sebelumnya, cari code ]]></b:skin>.
• Kemudian letakkan code di bawah ini, tepat di atas code ]]></b:skin>.

.sidebar h2{background-color:transparent;
border:1px solid #ccc;
-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
margin-bottom:2px;
padding:8px 10px 10px 10px;
color:#FFA500;
font-family:'Molengo',Trebuchet MS,Serif;
font-size:20px;
transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
font-weight:bold}
.sidebar h2:hover{opacity:0.7;
transform:rotate(-3deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg)}

Keterangan :

• Tulisan yang berwarna orange adalah background dan border yang warnanya bisa diganti dengan warna yang kalian inginkan disini
• Jika sudah semua, simpan dan lihat hasilnya.

Selamat Mencoba !

sumber