Cara Membuat Tombol Download Keren Terbaru

BlogBloggingMoney - Cara Membuat Tombol Demo atau preview button Download Keren Flat UI efek Di Blogspot ringan dan responsive material design tidak mempengaruhi loading blog.Halo sobat blogger kali ini admin jagoankode akan memberikan sedikit trik bagaimana cara mendesain blog untuk tombol demo dan downloadnya sebenarnya membuat button adalah hal yang sangat mudah sekali dilakukan, namun jika tidak diberikan sedikit sentuhan css maka button tersebut tampak seperti biasa saja, namun berbeda jika kita memberikan sedikit efek didalamnya tentu akan lebih menarik perhatian dan sangat jelas terlihat bahwa tombol tersebut merupakan sebuah button yang berfungsi menuju kehalaman yang dimaksud.

Jika anda mencari tutorial mengenai cara memasang tombol download maka sudah berserak tersedia digoogle , dan artikel tersebut menyajikan dengan bentuk yang sangat beragam tentunya. anda tinggal memilih saja button mana yang sesuai designnya dengan selera anda. nah pada kesempatan kali ini admin juga akan memberikan bentuk yang hampir sama juga dengan teman teman lainnya namun ada sedikit perbedaan dari segi warna dan peggabungan beberapa css. untuk memasang Tombol Demo dan download diblogger ini dapat dilakukan dengan 2 langkah dan cara, yaitu dengan langsung memasukannya didalam postingan, dan cara yang kedua adalah dengan menerapkan kodenya didalam template blog yang kita punya.

Tentu kedua cara ini memiliki keuntungan dan kelemahannya masing masing. dari sisi teknis meski perbedaannya tidak telalu signifikan namun keduanya tetaap memiliki perbedaan hahaa. pada tutorial kali ini admin hanya akan menjelaskan memasang langsung pada postingan jadi sobat tidak perlu repot untuk menerapkan kodenya pada template. okelah sobat saya akan menerangkan caranya yaitu dengan menerapkannya langsung pada postingan artikel blog. mari simak langkahnya berikut ini:

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 jika sudah ada kode CSS seperti dibawah ini tidak usah ditambahkan.

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.adam-tips.id */
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 saat Anda membuat postingan dan membutuhkan tombol download, maka Anda tidak memanggilnya dengan cara memasang kode berikut di Mode HTML (bukan Compose) pada postingan.

<a href="#">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a>

</div>

<a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a>

</div>

<a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a>

</div>

<a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a>

</div>

<a href="#" class="btn-wrap">DOWNLOAD <i class="fa fa-rocket fa-lg fa-spin"></i></a>

</div>

Pilih salah satu yang ingin agan pasang!!

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

Cara Membuat Tombol Download Keren Terbaru

0 Response to "Cara Membuat Tombol Download Keren Terbaru"

Post a Comment