17 Mei 2013

Cara menambahkan tombol tekan 3 Dimensi di blog

Posted at  17.09  |  in  tips dan triks blog

Cascading Style Sheet (CSS) adalah jantung bagi setiap para penata web/blog. Manfaat terbesar dari tombol ini adalah murni menggunakana CSS yang berarti tidak ada beban apapun di website/blog. Tombol ini  Menggunakan CSS2 Pseudo elemen untuk menambahkan sisi 3D menuju link yang dituju, CSS3 shadow dan CSS3 transisi untuk melengkapi tampilannya




BAGAIMANA CARA MENAMBAHKAN TOMBOL INI KE BLOG?
  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih -> Template -> Edit HTML
 
  • Cari tag/kode ]]></b:skin> tekan CTRL+F  untuk memudahkan pencarian
  • Berikutnya pastekan kode CSS tepat diatas kode ]]></b:skin> 
.css3dbutton {
background: darkred; /* background color of button */
color: white;
text-decoration: none;
font: bold 28px Arial; /* font size and style */
position: relative;
top: 0; /* anchor main button's position */
bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
margin-bottom: 12px;
-moz-box-shadow: 0 -15px 5px darkred inset;
-webkit-box-shadow: 0 -15px 5px darkred inset;
box-shadow: 0 -15px 5px darkred inset;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.css3dbutton, .css3dbutton:after {
display: inline-block;
padding: 10px 15px; /* vertical and horizontal padding of button */
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;
}

.css3dbutton:after { /* pseudo element to construct 3D side of button */
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c; /* background color of 3D effect */
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;
}

.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;
background: #bc3835; /* background color when mouse rolls over button */
}

.css3dbutton:active {
top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
bottom: 0;
-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
KODE CSS
  • Simpan template

BAGAIMANA CARA MENGGUNAKAN TOMBOL INI?

Tombol ini sangat mudah digunakan, di bawah ini saya berikan Kode HTML tombol ini. Ikuti langkah-langkah berikut:
  • Ketika editing post klik HTML (bukan compose)
  • Pilih kode tombolnya berikut dibawah ini, kopi dan pastekan.
  • Ganti link dan nama link dengan kepunyaan anda

KODE HTML
<center><a href="LINK/URL" class="css3dbutton">NAMA LINK</a></center>
Ganti LINK/URL dengan Link/URL Anda dan NAMA LINK dengan teks yang anda ingin munculkan di tombol

Semoga bermanfa'at..

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 17.09
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

0 komentar:

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top