Excalibur
Info

Selamat Datang

Selamat Datang Di Blog Roy Lichtenstein- Saya Senang Anda Berada Di Sini, Dan Berharap Anda Sering Datang Kembali. Silakan Berlama - Lama Di Sini Dan Membaca Lebih Lanjut Tentang Artikel Yang Saya Susun. Ada Banyak Hal Dapat Anda Pelajari, Anda Mungkin Akan Menemukan Sesuatu Yang Menarik

Sekilas Tentang Roy

Nama saya Roy Lichtenstein, Saya Bukan Seorang Blogger, Hacker, Desainer Atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar Dan Ingin Tau Sesuatu Yang Baru...

Social Icons

xtreme5-roylichtenstein.blogspot.com

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.

Photobucket

Tidak ada komentar:

Posting Komentar

Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous