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

Heloo sobat Blogger, sesuai dengan permintaan teman Saya, kali ini Saya akan memberikan Tips yaitu "Cara Membuat Judul Blog, Judul Postingan, dan Judul Widget Miring". Jadi kita akan membuat Judul Blog, Judul Postingan, dan Judul Widget menjadi miring-miring. Sebagai Demo, Kalian bisa lihat pada Blog Saya ini, Judul Blog, Judul Postingan, dan Judul Widget-nya kan miring, nah.. kita akan membuat yang seperti itu. OK, kita langsung ke langkah-langkahnya.

[1]. Pertama, Login dulu ke Blog Kalian.

[2]. Dari Dasbor, cari Rancangan --> Edit HTML.

A. Judul Blog Miring.

Cari Code /* Header. Selengkapnya kira-kira sperti di bawah.

/* 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);
}

* Setiap Template pasti Codenya berbeda-beda.

Kalau sudah ketemu, sekarang HAPUS Code di bawah Code Pertama. Kalau kurang jelas, HAPUS Code seperti di bawah.

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

Kalau sudah di HAPUS, sekarang Copy dan Paste-kan Code berikut tepat di bawah Code,

Code Yang Di Cari.

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

Code Yang Di Tambahkan.

 #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}

Hingga Menjadi Seperti Di Bawah.

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

Kalau sudah, terakhir tinggal di SAVE.

B. JUDUL POSTINGAN MIRING.

Cari Code ]]></b:skin>.

Kemudian Copy dan Paste-kan Code di bawah, tepat di ATAS Code tadi.

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

KETERANGAN :

* Tulisan yang berwarna Biru, ganti dengan Warna yang Kalian inginkan. Code Warna HTML...? Klik di SINI.

Kalau sudah, sekarang SAVE.

C. JUDUL WIDGET MIRING.

Cari Code ]]></b:skin>.

Kemudian Copy dan Paste-kan Code di bawah, tepat di ATAS Code tadi.

.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 Biru, ganti dengan Warna yang Kalian inginkan.

Kalau sudah, sekarang SAVE.

Sekian dulu Tips kali ini, kalau ada pertanyaan, silahkan Kalian isi Kotak Komentar di bawah. Semoga Tips kali ini bermanfaat buat Kalian semua.