Cara membuat Tombol Contact With

Langsung simak aja gan, lagi males Ngetik Hehhehehe...!!

Langkah-langkah simak dengan benar!!

• Buka Blog
• Masuk ke Template trus Edit HML
• Copy kode di bawah ini, letakan di atas code ]]></b:skin>

 .button p{font-family: 'Inconsolata', sans-serif;font-size: 15px;font-weight: 700;margin:0;padding:0}
.button {text-align:center;display: inline-block;height: 40px;line-height: 40px;padding-right: 30px;padding-left: 70px;position: relative;background-color:rgb(0,0,0);color:rgb(255,255,255);text-decoration: none;text-transform: lowercase;letter-spacing: 1px;margin-bottom: 15px;text-shadow:0px 1px 0px rgba(0,0,0,0.5);}
.button:hover{text-decoration: none;color: #eeeaee !important;}
.button p{font-size: 18px;color:#fff;}
.button span {position: absolute;left: 0;width: 50px;font-size:30px;-webkit-border-top-left-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-bottomleft: 5px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-right: 1px solid  rgba(0,0,0,0.15);text-decoration: none;color:#fff;text-align:center;}
.button.twitter {  background: #00acee;}
.button.facebook { background: #3b5998;}
.button.google-plus{  background: #db4a39;}
.button.linkedin {  background: #0e76a8;}
.button.youtube {background: #c4302b;}
.button.github{background: #171515;}
.button.android {background: #a4c639;}
.button.skype {background: #00aff0; }
.button.dropbox{background: #3d9ae8;}
.button.foursquare{background: #25a0ca;}
.button.apple{background: #cdcdcd;}
.button.dribbble{background: #ea4c89;}
.button.instagram{background: #3f729b;}
.button.pinterest{background: #c8232c;}
.button.stackexchange{background: #ef8236;}
.button.flickr{background: #ff0084;}
.text-center{text-align: center;}

• Klik Save Template
• Nah untuk code berikut bisa di taruh di mana saja, terserah yg penting tidak Error

 <a href="Aregalank" class="button facebook"><span><i class="icon-facebook"></i></span><p>Facebook</p></a>

<a href="Aregalank" class="button twitter"><span><i class="icon-twitter"></i></span><p>Twitter</p></a>

<a href="Aregalank" class="button google-plus"><span><i class="icon-google-plus"></i></span><p>Google</p></a>

<a href="Aregalank" class="button linkedin"><span><i class="icon-linkedin"></i></span><p>Linkedin</p></a>

<a href="Aregalank" class="button youtube"><span><i class="icon-youtube"></i></span><p>Youtube</p></a>

<a href="Aregalank" class="button github"><span><i class="icon-github"></i></span><p>Github</p></a>

<a href="Aregalank" class="button android"><span><i class="icon-android"></i></span><p>Android</p></a>

<a href="Aregalank" class="button skype"><span><i class="icon-skype"></i></span><p>Skype</p></a>

<a href="Aregalank" class="button dropbox"><span><i class="icon-dropbox"></i></span><p>Dropbox</p></a>

<a href="Aregalank" class="button foursquare"><span><i class="icon-foursquare"></i></span><p>Foursquare</p></a>

<a href="Aregalank" class="button apple"><span><i class="icon-apple"></i></span><p>Apple</p></a>

<a href="Aregalank" class="button dribbble"><span><i class="icon-dribbble"></i></span><p>Dribbble</p></a>

<a href="Aregalank" class="button instagram"><span><i class="icon-instagram"></i></span><p>Instagram</p></a>

<a href="Aregalank" class="button pinterest"><span><i class="icon-pinterest"></i></span><p>Pinterest</p></a>

<a href="Aregalank" class="button stackexchange"><span><i class="icon-stackexchange"></i></span><p>Stackexchange</p></a>

<a href="Aregalank" class="button flickr"><span><i class="icon-flickr"></i></span><p>Flickr</p></a>

NB: Ganti tulisan yg berwarna hijau dengan alamat/link yg dituju

~Selamat Mencoba~

Share :

Tweet

✚

Related Post