Cara Membuat Tombol Demo dan Download Efek Gradient di Postingan Blogger - Sebelumnya aku mohon maaf bila menciptakan beberapa tombol demo dan d0wnl0ad pada postingan blogger berulang-ulang, namun aku sengaja menciptakan tombol demo dan d0wnl0ad ini bervariasi semoga kalian sanggup menentukan mana yang lebih kalian sukai.
Tombol demo dan d0wnl0ad pada postingan blogger/blogspot ini aku buat dengan efek gradient (warna-warni/pelangi) seakan-akan dengan tombol yang biasa sering aku gunakan, namun aku tambahkan dengan icon font awesome di samping kanannya semoga terlihat lebih keren lagi.
Sebenarnya sudah banyak dari para blogger yang memposting tombol yang sama dengan yang posting ini, namun aku membuatnya semoga terlihat sedikit lebih berbeda dan lebih indah dipandang mata. Untuk itu mari kita simak baik-baik tutorial cara menciptakan tombol demo dan d0wnl0ad keren ini di postingan blog kalian.
Cara Membuat Tombol Demo dan Download Efek Gradient di Postingan Blogger
1. Buka Blogger kalian > pilih sajian Tema > lalu tekan tombol Edit HTML
2. Salin Kode CSS ini dan letakkan sempurna berada diatas isyarat ]]></b:skin> atau </style>
/* CSS Button Gradient */ .grdntbutton{width:90%;list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none} .grdntbutton ul{margin:0;padding:0} .grdntbutton li{display:inline;margin:5px;padding:0;list-style:none} .grdntbutton li a.demogrdnt,.grdntbutton li a.d0wnl0adgrdnt{display:block;position:relative;padding:15px 48px 15px 16px;background:#f39c12,#3498db;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px;line-height:normal;transition:all .3s} .grdntbutton li a.d0wnl0adgrdnt{background:#3498db,#f39c12} .grdntbutton li a.premium{background:#d234db,#f39c12} .grdntbutton li a.demogrdnt:active,.grdntbutton li a.d0wnl0adgrdnt:active,.grdntbutton{cursor:pointer} .grdntbutton li a.demogrdnt:after,.grdntbutton li a.d0wnl0adgrdnt:after{content:'\f002';background:rgba(255,255,255,0.2);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px;font-family:fontawesome} .grdntbutton li a.d0wnl0adgrdnt:after{content:'\f019'} .gradientbutton {background: linear-gradient(45deg,#51b1a4,#58b2a6,#fb5d60,#fb6d70);background-size: 500% 500%;-webkit-animation: gradient 12s ease infinite;-moz-animation: gradient 12s ease infinite;animation: gradient 12s ease infinite;} @-webkit-keyframes gradient {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @-moz-keyframes gradient {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes gradient {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}3. Jika sudah, tekan tombol Simpan Tema
4. Untuk menerapkannya di blog kalian, buat postingan gres > lalu letakkan isyarat ini pada sajian HTML (bukan Compose)
<div style="text-align: center;"> <ul class="grdntbutton"> <li><a class="demogrdnt gradientbutton" href="LINK-ANDA" rel="nofollow" target="_blank">DEMO</a></li> <li><a class="d0wnl0adgrdnt gradientbutton" href="LINK-ANDA" rel="nofollow" target="_blank">DOWNLOAD</a></li> </ul> </div> <div class="clear"> </div>5. Jika sudah tinggal Publikasikan saja
Keterangan:
| Nama | Keterangan |
|---|---|
| LINK-ANDA | Ubah dengan URL yang anda tuju |
| DEMO/DOWNLOAD | Dapat diubah dengan kata yang anda inginkan |
Demikianlah tutorial Cara menciptakan Tombol Demo dan Download Efek Gradient di Postingan Blogger, semoga tutorial ini sanggup bermanfaat bagi kita semua, Terimakasih.
Sumber http://www.analisyuki.com/
