Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogspot / Widget

Cara Menciptakan Tombol Download Keren Di Blog Flat Ui & Awesome

Cara Memasang Tombol Download Flat UI di Blog Cara Membuat Tombol Download Keren di Blog Flat UI & Awesome
Jika Anda mempunyai blog yang berisi aplikasi, template, lagu, foto, bahkan video, maka yang terang Anda pasti membutukannya yang namanya tombol download untuk para pengunjung. Download Button berguna bagi seorang blogger untuk membuatkan file atau document kepada pemirsa blognya. Selain itu tombol download yang mencolok serta keren, akan memudahkan pengunjung untuk menemukan file yang ingin mereka download dengan gampang dan cepat. Tombol download ini biasanya berisi Direct Link yang menuju server penyimpanan file itu berada. Nah kali ini aku akan menunjukkan tutorial cara menciptakan tombol download Flat UI yang berwarna-warni, menariknya lagi ada icon font Awesome yang membuatnya semakin keren dengan proteksi animasi. Kaprikornus tunggu apalagi simak aja pribadi pembuatanya berikut.

Cara Memasang Tombol Download Flat UI di Blog
1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Lalu cari kode </head>, dan Copas kode berikut ini diatas kode </head> namun bila sudah ada instruksi CSS ibarat dibawah ini tidak usah ditambahkan.

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

4. Setalah itu silahkan Anda cari kode ]]></b:skin> atau </style>
5. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas 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 }

6. Setelah itu Simpan atau Save Tempalatenya.
7. Nah ketika Anda menciptakan postingan dan membutuhkan tombol download, maka Anda tidak memanggilnya dengan cara memasang instruksi berikut di Mode HTML (bukan Compose) pada postingan.

<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>
Pilih salah satu instruksi diatas, setiap tombol mempunyai warna yang berbeda, dan silahkan Anda ganti instruksi # atau yang ditandai warna kuning dengan link url yang Anda inginkan.
8. Setelah itu cek dan lihat hasilnya, dijamin niscaya menarik


 Nah itulah langkah singkat memasang tombol download Flat UI di blog dengan gampang dan simple. Semoga dengan adanya tutorial ini sanggup membantu permasalahan Anda. Sekian dulu dari artikel kali ini bila ada yang ingin Anda tanyakan atau tidak paham silahkan komentar dibawah ini terima kasih.

Anda mungkin menyukai postingan ini :