KLIPING DUNIA: Text Efek Keyboard Dengan CSS3 Pada Blog

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

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 :