Thursday, 24 December 2015

Cara Membuat Tulisan Berbayang Pada Judul Blog

Membuat tulisan berbayang pada judul blog adalah salah satu cara untuk mempercantik dan memperindah blog. Tentunya dengan usaha mempercantik ini sama artinya melakukan usaha untuk menarik minat visitor agar mau megunjungi blog anda. Membuat tulisan bebayang sebenarnya bukan hanya dapat diaplikasikan pada judul blog saja, melainkan semua huruf pada blog termasuk tulisan huruf pada postingan artikel. Namun hal yang paling utama adalah, terlebih dahulu anda harus mengetahui kode HTML untuk dapat memberikan tulisan tersebut efek berbayang, dari situ barulah semua tulisan dapat anda berikan efek bayangan. 
Namun pada kesempatan kali ini tim bisikan.com, akan membahas bagaimana cara membuat tulisan berbayang tersebut agar bisa diterapkan pada tulisan judul di blog. Teks berbayang yang akan saya gunakan kali ini mungkin terlihat sederhana, namun bagi anda yang ingin bereksplorasi dengan efek bayang yang lebih banyak, hal ini bisa disesuaikan. Untuk lebih jelasnya, berikut ini kami bisikan langkah-langkah untuk membuat tulisan berbayang pada blog. 
  1. Langkah yang pertama terlebih dahulu, buka browser pada komputer kemudian tunggu sementara halaman browser memuat dan meluncurkan. 
  2. Selanjutnya, silahkan masuk pada halaman dashboard blog dengan cara masuk ke halaman “Blogger.com”, silahkan lanjutkan dengan sig in menggunakan akun gmail blog. 
  3. Langkah berikutnya, buka menu Template yang terdapat pada tombol anak panah yang berada tepat disamping kiri tombol Lihat Blog. 
  4. Kemudain, klik tombol Edit HTML, pada kolom kode HTML silahkan cari kode .Header h1 {, lebih lengkapnya lagi seperti kode dibawah ini. 
.Header h1 {
 font: $(header.font);
color: $(header.text.color);
text-shadow: 0 0 $(title.shadow.spread) #000000;
}
  1. Kemudian apabila kode tadi sudah ditemukan, silahkan tambahkan kode berikut text-shadow: 2px 2px 5px #800000; pada kode tadi, kode selengkapnya seperti dibawah ini. 
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 2px 2px 5px #800000;
}
  1. Sekarang, silahkan lakukan review terlebih dahulu sebelum anda menyimpan perubahan template, dan jika anda telah melihat terdapat bayangan pada tulisan, silahkan save script tadi. 
Keterangan  : 
  • Text-shadow: 2px 2px 5px adalah letak horizontal dan vertikal dari terk berbayang, sedangkan kode #800000; adalah kode warna dari tulisan berbayang, jika anda ingin merubah warnanya, silahkan ganti sesuka hati. 
  • Untuk lebih jelasnya lagi, dana pengaturan teks berbayang yang lebih variatif, anda bisa mengunjung situs berikut ini http://www.cssportal.com/css3-text-shadow-generator/. 

No comments:

Post a Comment