Cara Membuat Tulisan Bayangan Pada Judul Blog

Baca Juga:

Cara membuat tulisan bayangan pada judul blog. Sebenarnya tidak hanya dijudul blog yang bisa diberi tulisan bayangan, tapi semua tulisan yang ada di blog juga bisa kita beri tulisan bayangan. Tapi yang harus kita ketahui terlebih dahulu adalah kode html pada bagian-bagian blog, setelah ketemu dengan kodenya baru bisa kita beri tulisan bayangan.

Kali ini akan saya bagi cara membuat tulisan bayangan di judul blog dan juga deskripsi blog. Untuk contohnya bisa kalian lihat dibagian judul dan deskripsi blog ini atau gambar dibawah ini. Text bayangan yang saya gunakan itu hanya sedikit. Agar tidak berlebihan, tapi kalian bisa nanti menggunakan text bayangan sesuai dengan yang kalian inginkan. Untuk cara membuat tulisan bayangan di blog.

Ikuti langkah-langkah dibawah ini.

Text Bayangan di Judul Blog

1. Login ke blog, dan ke pengaturan Template
2. Klik edit HTML, dan cari kode .Header h1 { lengkapnya seperti dibawah ini.
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}
3. Setelah ketemu dengan kode diatas maka tambahkan kode text-shadow: 2px 2px 5px #800000; Jadi kode lengkapnya seperti dibawah ini.
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 2px 2px 5px #800000;
}
4. Sekarang coba dipreview/pratinjau dulu template kamu, dan lihat sudah ada text bayangan belum judul blog kamu. Jika sudah berubah baru Di save.
5. text-shadow: 2px 2px 5px ini adalah horizontal dan vertikal dari text bayangannya. dan #800000; adalah warna dari text bayangan. Silakan diganti sesuai dengan yang kalian inginkan.
6. Untuk lebih jelasnya, kalian bisa atur text bayangan sesuai dengan yang kalian inginkan disini http://www.cssportal.com/css3-text-shadow-generator/. 

Text Bayangan di Deskripsi Blog

1. Login ke blog, dan ke pengaturan Template
2. Klik edit HTML, dan cari kode .Header .description { lengkapnya seperti dibawah ini.
.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}
3. Sama seperti diatas, tambahkan kode text-shadow: 2px 2px 5px #800000; lengkapnya.

.Header .description {
  font: $(description.font);
  color: $(description.text.color);
text-shadow: 2px 2px 5px #800000;
}
4. Silakan di preview/pratinjau untuk melihat perubahannya. Setelah berubah baru save.

Atau cara cepatnya, letakan diatas ]]></b:skin> kode2 diatas. contoh:

1. logn ke blogger, dari halaman dasbor pilih pengaturan template.
2. trus klik edit html dan cari kode ]]></b:skin>
3. dan letakan kode berikut diatas ]]></b:skin>
.Header h1 {

  font: $(header.font);

  color: $(header.text.color);

  text-shadow: 2px 2px 5px #800000;

}

.Header .description {

  font: $(description.font);

  color: $(description.text.color);

text-shadow: 2px 2px 5px #800000;

}
4. Save template selesai.

contoh gambar penempatan kode diatas ]]></b:skin>, 

1. Untuk mempermudah edit text bayangan seperti yang kalian inginkan, silakan kunjungi situs ini http://www.cssportal.com/css3-text-shadow-generator/. 
2. Selesai. Silakan dibaca juga cara-cara menghias blog yang lain, seperti Cara membuat tombol share facebook, twitter dan cara memberi warna background pada judul posting blog atau cara mengganti tulisan home next  previous di blog. Semoga Bermanfaat.

Tweet