Memepercantik postingan blog dengan menambahkan dan menampilkan beberapa efek pada text memang merupakan suatu hal yang tidak jarang bloggers lakukan, baik itu efek dengan berbagai kombinasi antara CSS, JavaScript maupun jQuery.
Nah, pada tutorial kali ini, saya akan berbagi tentang bagaimana cara menambahkan efek keyboard pada text-text tertentu dengan cara mudah dan hanya memerlukan beberapa potong kode CSS3 dan tidak memerlukan tambahan seperti Javascript maupun jQuery sehingga tidak akan mempengaruhi load time blog.
Kode CSS
lsc{
border:1px solid gray;
font-size:14px;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}
Memasukkan ke dalam Template
- Login ke Blogger
- Pada Dashboard, pilih Template » Edit HTML
- Copy kode di atas kemudian pastekan tepat di atas tag ]]></b:skin>
- Selanjutnya, pilih Simpan Template
Cara Menggunakan pada Postingan Blog
Pada saat membuat postingan baru pada blog, pilih HTML (samping kanan Compose) dan gunakan kode pemanggil <lsc> dan diikuti oleh text yang akan diberikan efek keyboard serta diakhiri dengan kode penutup </lsc>. Berikut contohnya :
<lsc>Ctrl</lsc> <lsc>Shift</lsc> <lsc>Contoh yang lain</lsc>
Maka hasilnya akan terlihat seperti di bawah ini :
Selamat Mencoba dan Semoga Bermanfaat...!!!
No comments:
Post a Comment