Friday 28 February 2014

Cara Membuat Tombol/Button Keren Di Blog v1

Tombol dan lain-lain efek sangat penting dalam blogging dan khususnya ketika blog kita berkaitan dengan merancang dan blog blogging itu sebabnya terlihat dan terasa sangat penting di dalam blog. Dari berlangsung memposting tim kami disediakan tombol untuk demo hidup dan untuk barang lainnya seperti ikon dan lainnya beberapa hal dan jadi hari ini kita memiliki tombol Push-Pop 3D kita dapat menambahkan dalam posting blogger dan itu jenis yang sangat unik dari widget dan memiliki tampilan 3D dan mudah disesuaikan dan memiliki push - efek Pop ketika Anda klik pada tombol.


Tambahkan Push-Pop Tombol di Blogger:
1.Login Ke Blogger >Dashborad
2.Klik pada Drop Down Menu dan pilih Template 
3.Template Anda Backup sebelum melakukan perubahan ke blog Anda
4.Sekarang Klik pada Edit HTML> Lanjutkan> Expand Widget Templates  5.Tekan Ctrl + F dan cari kode yang ditunjukkan di bawah ini. 

 </head>
  
6.Paste kode di bawah ini sebelum </head>


<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>

7.Sekarang lagi menemukan di bawah kode

]]></b:skin>

8.Paste kode di bawah ini sebelum ]]></b:skin>


#wg-pushbutn a {
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(219,87,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 30px;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
margin: 10px auto;
width: 200px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
#wg-pushbutn a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}


9.Save Template Anda
Bagaimana Cara Menambahkan Di Posting Anda:
1.Entri Baru >Klik Pada HTML
2.Sekarang paste kode di dalamnya.
 <div id="wg-pushbutn"><a href="#" target="_blank">Live Demo</a></div>
Cara Mengganti:


  • Ganti # dengan link anda.
  • Menggantikan Live Demo itu dengan teks Anda sendiri.  

No comments:

Post a Comment