Text Efek Keyboard Dengan CSS3 Pada Blog





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


  • 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 :




Ctrl Shift Contoh yang lain





Selamat Mencoba dan Semoga Bermanfaat...!!!


Artikel Terkait Blog Design ,it

No comments:

Post a Comment