Cara membuat tombol download keren di blog

Cara membuat tombol download dan demo di blog - Tips dan trik blog kali ini yaitu memasang tombol download dan demo di artikel yang kita buat. Tombol download ini bisa dibilang Show hide responsive. Cocok sekali buat anda yang mempunyai blog bertema blog download atau bertema blog template.

Kenapa saya bilang cocok untuk blog template dan blog download? Alasannya karena tombol download yang saya akan share ini akan menampilkan Ukuran file, Demo, dan Name file, keren dan responsive. Dengan memasang tombol download,blog anda akan terlihat lebih menarik dan lebih profesional,hehe!!

Jika anda tertarik untuk memasang tombol download dan demo di blog silakan ikuti tutorial berikut ini :

DEMO

Langkah

1. Pertama login dulu blog anda.
2. Pada menu dasboard blog pilihlah menu template.
3. Lalu pilih menu HTML.
4. Cari kode </head> ,untuk memudahkan pencarian silakan tekan CTRL+F
5. Jika anda sudah menemukan kode </head>,Silakan copy kode dibawah ini dan simpan diatas kode </head> .

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

Kode diatas ini berguna untuk mengaktifkan element font awesome, Jika script diatas sudah anda pasang di blog, saya sarankan untuk tidak memasang kembali.
6. Setelah itu anda cari kode ]]></b:skin> dengan cara CTRL+F , Lalu copy kode dibawah ini dan simpan diatas kode ]]></b:skin> .

/* Download and Demo White Button Show Hide */ .whitebutton { margin: 20px auto; padding: 20px 0; width: 200px; }  .whitebutton 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; }  .whitebutton a:before { content: '\f019'; font-family: FontAwesome; font-weight: normal; padding: 8px; margin-left: -12px; margin-right: 6px; }  .whitebutton 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; }  .whitebutton .up { background: #e25734; margin: -25px auto; opacity: 0; border-radius: 0 0 5px 5px; transform: translate(0,-50px); transition: 350ms; }  .whitebutton .down { margin: -30px auto; opacity: 0; border-radius: 5px 5px 0 0; transform: translate(0,-50px); transition: 350ms; }  .whitebutton .down:before { content:'\f14a'; font-family: FontAwesome; font-weight: normal; margin-right: 6px; color: #aaa; }  .whitebutton:hover .up { opacity: 1; transform: translate(0,0); }  .whitebutton:hover .down { opacity: 1; transform: translate(0,-90px); }  .whitebuttondemo { margin: 20px auto; padding: 20px 0; width: 200px; }  .whitebuttondemo a { background: #e25734; color: #fff; 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; transition: 350ms; }  .whitebuttondemo a:before { content:'\f002'; font-family: FontAwesome; font-weight: normal; padding: 8px; margin-left: -12px; margin-right: 6px; }  .whitebuttondemo a:hover { color: #fff; }  .whitebuttondemo 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; }  .whitebuttondemo .up { background: #444; margin: -25px auto; opacity: 0; border-radius: 0 0 5px 5px; transform: translate(0,-50px); transition: 350ms; }  .whitebuttondemo:hover .up { opacity: 1; transform: translate(0,0); }

6. Simpan

Penerapan

1. Jika anda sedang membuat artikel silakan ubah dulu jenis artikel dari Compose ke HTML

Cara membuat tombol download dan demo di blog

2. Setelah itu copy salah satu kode dibawah ini sesuai selera anda.

A. Tombol download V.1

Keterangan : Button download beserta demo, ukuran file, dan name file

<div class="whitebuttondemo"> <a href="LINK DEMO" title="TITLE" target="_blank">JUDUL DEMO</a><br /><span class="up">click to view</span></div> <br /> <div class="whitebutton"> <a href="LINK DOWNLOAD" title="TITLE" target="_blank">JUDUL DOWNLOAD</a><br /> <span class="up">click to begin</span><br /> <span class="down">2210MB .rar</span></div> <br /> <br />

B. Tombol download V.2

keterangan : Button download, ukuran file, dan name file

<div class="whitebutton"> <a href="LINK DOWNLOAD" title="TITLE" target="_blank">JUDUL DOWNLOAD</a><br /> <span class="up">click to begin</span><br /> <span class="down">2210MB .rar</span></div> <br /> <br />

NB : Silakan anda ubah Link demo, link download,ukuran file,sama yang lainnya, Anda pasti sudah mengerti mengapa saya kasih tanda warna diatas.

Mungkin cukup itu saja tips trik blog kali ini, semoga bermanfaat !
Jika artikel ini bermanfaat atau anda ada Kritik dan saran silakan anda tulis di komentar, karena saya memerlukan komentar dari anda. Salam blogger nusantara !

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe