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. Code Warna HTML...? Klik di SINI.

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.

Salam Blogger Indonesia.

26 komentar:

Emoticons25 mengatakan...

Thanks Gan Infonya... Selalu Update Yahh...

Ngurah Jumaika mengatakan...

@Emoticons25 : OK gan, N' thank's atas kunjungan dan komentnya...

Surya Chandra Gobel mengatakan...

Bro,,qo blog gua dari awal ga ada kode kode kaya di atas sih,,??
itu gmna,,??

Ngurah Jumaika mengatakan...

@Surya Chandra Gobel : setiap template berbeda2 codenya gan, jadi tidak sama codenya, cari aja yg mirip kayak gitu...

ahmad baihaqi mengatakan...

makasih bang sangat membantu
jangan lupa maen ke blog ane
mmzeljuniorfh.blogspot.com ^^

Ngurah Jumaika mengatakan...

@ahmad baihaqi : sama2 gan, di tunggu ya kunjungan dri Saya....

Rasfananta mengatakan...

thank's ya sob.. ^_^

Ngurah Jumaika mengatakan...

@Rasfananta : sama2 Gan...

Ayie Rizali mengatakan...

thanks
sangat bermanfaat bagi saya

Ngurah Jumaika mengatakan...

@Ayie Rizali : sama2 gan...

Ricky Glabadia mengatakan...

terima kasih kaka...

ijin praktek mal...

Ngurah Jumaika mengatakan...

@Ricky Glabadia : monggo brow, silahkan di praktekan...

wayan edi sudarma mengatakan...

gan cra bkin juduL gadget pisah ma kotak gadget tu gmna?
kyk pnya agan , , ,

Ngurah Jumaika mengatakan...

@wayan edi sudarma : oh klo itu, bawaan Templatenya Gan... kan setiap Template Berbeda2....

Surya.C.G mengatakan...

udah jadi bro,,makasih nih,,!!
berkunjung ke blog Saya donx bro,,!!

Ngurah Jumaika mengatakan...

@Surya.C.G : Ok, di tunggu ya...

wayan edi sudarma mengatakan...

kL teMplate kyak gtCu yG mNa gaN?

Ngurah Jumaika mengatakan...

@wayan edi sudarma : Maksudnya agan, gimana...???

wayan edi sudarma mengatakan...

ya template yang judul gadget ma gadget nya pisah , , ,

Ngurah Jumaika mengatakan...

@wayan edi sudarma : wah Saya masih kurang mengerti Gan, bisa di jelaskan lebih jelas lagi....

wayan edi sudarma mengatakan...

gini lo gan , , ,
kmren it kan saya nanya " gan cra bkin juduL gadget pisah ma kotak gadget tu gmna?
kyk pnya agan , , ,"
trus agan jwab "oh klo itu, bawaan Templatenya Gan... kan setiap Template Berbeda2...."

nah template nya tu template yg mna gan?
template bawaan blog, pha bwt dwe gan?

Ngurah Jumaika mengatakan...

@wayan edi sudarma : Ohh, agan mau Template kayak Blog Saya...??? OK, nanti pasti Saya Share...

gogogo212 mengatakan...

gan , kalo pengen seperti judul postingan agan itu gmana ?
thanks

Syauqi Cheat mengatakan...

mana miring tehhhhhhhhhhhhhhhhhhhhhhhzzzzzzzzzzzz

Cleopatra Panthera mengatakan...

Makasih Info nya sob
<< KuNjUNGi BaLIk yA SoB >>
http://harichigo.blogspot.com

sipilis mengatakan...

oke gan ane terapkan di bog ane

Posting Komentar