Heloo sobat Blogger, sesuai dengan permintaan teman Saya, kali ini Saya akan memberikan Tips yaituC ara 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 yg satu ini http://wayansmansa.blogspot.com/, 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. Code Warna HTML...? Klik di SINI.
Kalau sudah, sekarang SAVE.