Chocomous: Tutorial Mempercantik Post Title

Tutorial Mempercantik Post Title

Cara Mempercantik Judul Post (Post Title) - Assalamu'alaikum, Chinguyaa :)

Hari ini saya mau posting tutorial caranya bikin post title kayak blog saya. But before, thanks buat Safira yang udah request tutor ini. Honestly, saya bingung mau ngeposting tutor apa akhir-akhir ini, hehe.

Well, bcs almost of you pake Classic templates (blogskin, dsb), kali ini saya bakal kasih tutornya dengan 2 cara, first,  untuk pengguna Template Designer, and the second, for Classic Templates users (blogskin,dsb)

Nah, here we goo~~

Note! - Coklat: Untuk pengguna template designer
         -Abu-abu: Untuk pengguna classic templates

  • Login Blogger → Template → Edit HTML → Cari Kode(CTRL+F)
.post-title {
  • Login Blogger → Template → Edit Template HTML → Cari Kode(CTRL+F)
.title {
atau
.post-title {
  • Dibawah kode diatas terdapat bermacam-macam keterangan, iya kan? Nah, coba liat kode di bawah ini. Ini kode yang saya pake untuk post title blog saya. Copy kode nya, Delete kode post title kalian, kemudian Paste kode nya. Tapi kalo kalian gak mau sama persis, kalian bisa ambil beberapa keterangan aja kok :)
.post-title {
text-align:center;
background:url(MASUKKAN URL BACKGROUND KALIAN);
border-radius: 60px 60px 0px 0px; 
margin: 0;
border: 1px solid #KODEWARNABORDER;
padding: 0;
font-size: 24px;
font-weight: bold;
line-height: 1.1em;
color: #000000;
}

-Merah= Isi sesuai keinginan kalian
   -Biru= Ukuran px nya gak harus 60 kok, bisa kalian ganti dengan 30, 40, dst. Letaknya juga gak harus sama.

  • Kalo udah, Save Template ya.

Oke, berikutnya adalah tutorial bagaimana cara bikin huruf title post yang paling depan lebih besar dari huruf lainnya. Follow the steps:
  • Masih di Edit HTML/Edit Template HTML. Copy kode dibawah ini, kemudian Paste di bawah kode post title diatas (sesudah '}')
.post-title:first-letter {
font-size: 36px;
font-weight: bold;
line-height: 1.1em;
font-family: Comic Sans MS;
text-align: center;
color: #000000;
}
-Biru= Ukuran huruf 
-Ungu= Jenis Huruf
  -Hijau= Warna Huruf
Sesuaikan dengan keinginan kalian
  • Sebelum di Save Template, Preview dulu yaa :)

Gimana? Mudah kan?
Segitu dulu ya tutornya. Kalo ada yang mau request atau ada yang kurang jelas, bisa leave a comment below.
Semoga berhasil!

5 comments:

Copyright © 2016. Designed by Ismi Islamia Fathurrahmi