Sunday 28 April 2013

Cara Merubah Judul Blog dan Title Blog dengan Efek Bayangan

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 caraDownload Template Lengkap, lihat yang berada disamping kanan layar monitor andaCadangkan/ 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…

No comments:

Post a Comment