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

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Artikel kali ini Saya akan membahas Cara Membuat Judul Blog, Judul Postingan, dan Judul Widget atau teks menjadi Miring.

Sebenarnya cara ini hanya untuk iseng-iseng saja atau untuk membuat desain web atau blog menjadi lebih unik dari yang lainnya. Cara ini tidak disarankan untuk blog atau website yang mau optimal pada mesin pencari. Demonya bisa dilihat pada blog Saya disini.

Cara membuatnya di bawah ini :

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

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
• Jika sudah semua, simpan dan lihat hasilnya.

Semoga artikel mengenai Cara Membuat Judul Blog, Judul Postingan, dan Judul Widget atau teks menjadi Miring bermanfaat untuk kalian.

sumber : http://indonesianblog-jmk.blogspot.com