Cara Membuat Tombol Download Keren di Blogger

Pada tutorial kali ini, saya akan membagikan cara untuk membuat sebuah tombol download pada blog. Tombol download ini sangat berguna untuk para blogger yang membuat blog khusus untuk download, seperti download game, download aplikasi, download software, dan lain sebagainya. Membuat nya, kita hanya perlu menambahkan code CSS pada html template, dan menambahkan code html di postingan.

Lalu, bagaimana cara membuat tombol download di blog? berikut adalah penjelasan cara nya.

• Pertama, kalian login ke blgger. Kemudian masuk Dashboard > Template > Edit HTML.
• Kemudian, Copy CSS berikut, dan paste tepat di atas code ]]></b:skin>

 

KODE CSS:

/* Download Button UKON31.XYZ*/ .downloadbutton {margin:20px auto;padding:20px 0;width:200px;} .downloadbutton a {background:#fff;;color:#666;display:block;font-size:17px;font-weight:700; font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center; text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;} .downloadbutton a:hover {background:#ddd;} .downloadbutton a:before {content:"\f019";font-family:FontAwesome;font-weight:normal; padding:8px;margin-left:-12px;margin-right:6px;} .downloadbutton span {background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial', Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase; font-weight:bold;} .downloadbutton .up {background:#8493A0;margin:-25px auto;opacity:0;border-radius:0 0 5px 5px;transform: translate(0,-50px);transition:350ms;} .downloadbutton .down {margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform: translate(0,-50px);transition:350ms;} .downloadbutton .down:before {content:"\f14a";font-family:FontAwesome;font-weight:normal; margin-right:6px;color:#aaa;} .downloadbutton:hover .up {opacity:1;transform: translate(0,0);} .downloadbutton:hover .down {opacity:1;transform: translate(0,-90px);} .demobutton {margin:20px auto;padding:20px 0;width:200px;}

• Klik simpan template.
• Buat posting atau buka posting yang sudah ada, pada Menu Compose dan HTML di pojok kiri atas, pilih HTML, kemudian Copy code berikut.

<div class="downloadbutton">
<a href="http://www.iamukon.id/" rel="nofollow" target="_blank">Download</a>
<br />
<span class="up">Download Section</span>
<br />
<span class="down">Click Here</span>
</div>

Sekian tutorial nya mengenai bagaimana cara membuat tombol download di blogger, semoga bermanfaat...