Media Informasi Tentang Cara Praktis Ngeblog, Tutorial Blog, Monetisasi Blog,Tips Dan Trik Blogger, Template Blog, Adsense Dan Aplikasi Android

Breaking

April 01, 2019

Cara Membuat Tombol Preview Dan Download Flat UI Keren Abis Di Postingan Blog

loading...

Apakah Sobat blogger mempunyai blog dengan kategori download atau berbagi file ? Jika ya, maka tentu sobat memerlukan tombol preview atau download untuk memudahkan pengunjung blog kalian dalam mendownload file yang mereka butuhkan bukan ?

Di internet ada banyak sekali tutorial tentang cara membuat sebuah tombol download di postingan blog, mulai dari yang simple sampai yang agak ribet karena terlalu banyak kode yang harus di pasang.

Pada artikel kali ini saya akan share salah satu cara bagaimana membuat sebuah tombol download flat UI yang mempunyai tampilan cukup atraktif dan menarik.

Caranya cukup mudah sekali, kalian tinggal copy paste saja kode - kode di bawah ini sesuai dengan petunjuk yang tersedia.

Langkah Pertama

Tempatkan kode berikut ini di bawah kode <head> atau diatas </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika pada template blog kalian sudah ada kode yang sejenis boleh di abaikan saja kode tersebut dan tetap memakai kode yang sudah ada pada template kalian.

Langkah Kedua

Kemudian tempatkan kode berikut ini diatas kode ]]></b:skin> atau </style>
atau sebelum kode ]]></b:skin> atau </style>

/* CSS Button Style 2 by www.lk21.news */ a:link{text-decoration:none} .vn-red a{ background-color:#e74c3c; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease } .vn-red a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0 } .vn-red a:hover{ background:#7f8c8d } .vn-green a{ background-color:#27ae60; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease } .vn-green a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0 } .vn-green a:hover{ background:#7f8c8d } .vn-wisteria a{ background-color:#8e44ad; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease } .vn-wisteria a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0 } .vn-wisteria a:hover{ background:#7f8c8d } .vn-orange a{ background-color:#f39c12; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease } .vn-orange a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0 } .vn-orange a:hover{ background:#7f8c8d } .vn-blue a{ background-color:#2980b9; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease } .vn-blue a:before{ content:"\f019"; font-family:fontAwesome; position:absolute; font-style: normal; font-weight: normal; text-decoration: inherit; font-size:28px; border-radius:0 20px 0 0; color:#000; background-color:#fff; opacity:0.3; padding:20px; top:0; left:0 } .vn-blue a:hover{ background:#7f8c8d }

Langkah Ketiga

Kemudian untuk memanggil tombol Preview dan Download agar bisa muncul dan tampil pada postingan blog, maka copy kode berikut ini pada mode HTML Postingan Blog Dan Bukan Pada Mode Compose. Sekali lagi pada mode HTML ya..

<div class="vn-red" style="text-align: center;"> <a href="#">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a> </div> <div class="vn-green" style="text-align: center;"> <a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a> </div> <div class="vn-wisteria" style="text-align: center;"> <a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a> </div> <div class="vn-orange" style="text-align: center;"> <a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a> </div> <div class="vn-blue" style="text-align: center;"> <a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a> </div>

Tempatkan kode tersebut di bagian mana yang ingin anda munculkan tombol download tersebut.

Di beberapa template Arlina hasilnya adalah seperti ini :
Preview LINK

Sedangkan di beberapa template yang lain seperti Vio Magz, Viralgo hasilnya seperti ini :
Preview LINK

Bagaimana sobat blogger, mudah sekali bukan?

Semoga artikel ini berguna dan bermanfaat untuk kalian semua.
loading...

No comments:

Post a Comment