March 11, 2013


Pada template baru blogger yang kita ketahui secara default judul dan title blog tidak memiliki efek bayangan atau yang sering disebut shadow dan masih standar seperti pada gambar diatas, untuk merubahnya perlu dilakukan beberapa trik dengan memberi sentuhan pada teks agar dilihat terkesan menarik. Cara membuatnya sangatlah mudah apabila anda menggunakan template standar atau template asli dari blogger, karena disini saya menggunakan template asli dari blogger.

Walaupun banyak cara yang dilakukan untuk mepercantik judul dan title blog, dengan menambahkan dan atau memodifikasi kode css tetapi yang saya terapkan disini lebih simple. Dimana hanya melakukan sedikit perubahan pada struktur template blogger dan caranya silahkan saudara ikuti uraian singkat dibawah ini.

1. Login ke blogger anda.
2. Pada halaman dashbor klik menu Template.
3. Kemudian Backup Template, menjaga kemungkinan terjadi eror. Dengan cara Download Template Lengkap, lihat yang berada disamping kanan layar monitor anda Cadangkan/ Pulihkan.
4. Selesai mendownload Template, klik Edit HTML.
5. Centang kotak Expand Template Widget.
6. Untuk mempercepat pencarian gunakan Ctrl F.
7. Apabila semua langkah diatas telah anda lakukan, cara pertama cari struktur kode yang mirip seperti dibawah ini, untuk merubah dan menambah efek bayangan pada judul blog.

.Header h1 {
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

Untuk lebih jelasnya cari kode .Header h1 {, setelah menemukan kode yang mirip seperti diatas ganti dengan kode dibawah ini :

.Header h1 {
font: normal bold 50px Arial;
color: $(header.text.color);
text-shadow: 3px 3px 6px white;
}

8. Langkah selanjutnya adalah menambah efek bayangan pada title blog, scroll kebawah dari kode diatas atau untuk mempermudah cari kode ( .Header .description { ), lihat contoh struktur pada template milik saya adalah sebagai berikut, silahkan sesuaikan dan lihat baik-baik pada editor template sobat.

.Header .description {
font-size: 130%;
}

Ganti dengan kode dibawah in, setelah menemukannya.

.Header .description {
font-size: 130%;
text-shadow: 3px 3px 6px white;
}

9. Jika semua langkah telah selesai, klik Pritinjau untuk melihat hasilnya dan apabila tidak terjadi eror klik Simpan Template.

Maka setelah anda merubah semua kode tersebut hasilnya akan nampak seperti pada gambar dibawah, apabila sesuai standar kode pada uraian diatas.


Jadi untuk menyesuaikan pada template yang anda kelola, silahkan sesuaikan dengan catatan/keterangan dibawah ini :

• Untuk mengganti ukuran huruf rubah 50px sesuai selera.
• Jenis huruf rubah Arial menjadi, misalnya Courier.
• Untuk mengganti efek rubah pada 3px 3px 6px misalnya menjadi 2px 2px 4px dan warnanya ganti white; sehinggga bisa mendapatkan warna dan ketebalan efek shadow yang berbeda dari yang diatas.

Sekian sampai disini dulu, semoga tutorial Cara Merubah Judul Dan Title Blog Dengan Efek Bayangan, dapat bermanfaat bagi anda semua.

Salam…

Posted by : Kraeng Francisco | Tuturial Blog | Tips and Trik Komputer | Tips and Trik Internet | SEO

Artikel Cara Merubah Judul Dan Title Blog Dengan Efek Bayangan diposting oleh Kraeng Francisco pada March 11, 2013. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, dan atau mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini atau letekkan link dibawah ini sebagai sumbernya. Terima Kasih. Salam...


Artikel Terkait

11 comments:

  1. Mas aku sudah pasang linknya . . . tinggal mas yang pasang link aku . . Terima kasih

    ReplyDelete
  2. selamat pagi sob,,,,saya menggunakan template dari Lasantha yang saya download dari blognya Kang O-om,,,apa bisa saya terapkan cara di atas sob kalau bukan template default dari blogger ?

    ReplyDelete
    Replies
    1. Sobat cari kode seperti dibawah ini pada template blog sobat untuk judul blog

      #header h1
      {margin:0 5px 0;padding:0px 0px 0px 10px;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;font-size:32px;line-height:32px;color:#000000;text-shadow:0px 1px 0px #fff;}

      Rubah text-shadow:0px 1px 0px #fff;}, yang diberi cetak tebal, seperti pada contoh diatas.

      Kemudian cari lagi Kode

      #header .description{padding-left:17px;color:#000000;text-shadow:0px 1px 0px #fff; line-height:14px;font-size:14px;padding-top:0px;margin-top:5px;}

      rubah yang diberi cetak tebal/bold

      Semoga membantu sob.

      Delete
  3. Makin menarik yah klw di kasih efek bayangan. klw saya bilang makin genit judulnya.... kreatif banget nih mas KF

    ReplyDelete
  4. met mlm mas telat ngembalikan gelas kopi kemarin ni hehhe. trmksih mas infonya

    ReplyDelete
  5. menarik nih mas tutorialnya...sy kangen bgt udh lama ga utak atik kode..
    kalo udah pasang image buat judul dan title nya..harus di lepas ya mas.. :)

    ReplyDelete
    Replies
    1. hehe..saya juga baru mengutak-atik selama minggu ini untuk mempelajari kembali. ia mas gambarnya dihilangkan dulu.

      Semoga membantu.

      Delete
  6. Lam kenal mas..aku newbe nih..nyimak dulu aja..

    ReplyDelete
  7. Mau tanya Mas,apa setelah itu Blog masih SEOfrendly?
    dari Pasuruan Mas.

    ReplyDelete