Cara Membuat Tombol Download dan Demo Keren di Blog

Hallo sobat pada artikel saya kali ini akan membahas Cara membuat tombol Download dan Demo keren di blog, Tombol Download dan Demo di blog sangat penting untuk blog yang nichenya berbagi link Download Template, Game, Aplikasi, dll.

Langsung aja cara membuatnya

Cara Membuat tombol Download dan Demo keren di Blog :

1. Masuk ke blogger kalian

2. Pilih menu Tema -> Edit HTML

3. Letakan kode dibawah ini di atas kode </head>

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

Namun jika kode ini sudah ada di template kalian, kalian tidak usah menerapkannya. Untuk mengetahui ada atau tidaknya silahkan kalian tekan Ctrl+F untuk mempermudah pencarian. tetapi Ctrl+F Hanya ada di keyboard laptop atau komputer, jika anda yang memakai android kalian gunakan aplikasi hacker's keyboard saja Klik disini

4. Selanjutnya Cari kode ]]></b:skin> atau </style> dan letakan kode di bawah ini di atasnya. Gunakan Ctrl+F untuk Mempermudah pencarian.

 /* CSS Button yusup404.blogspot.com */
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:10px 10px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#f39c12;}
.demo:hover {background-color:#60B8F4;color:#fff}
.download:hover {background-color:#C77E0A;color:#fff}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
do-not-copy {

5. Klik Simpan pada Tema

Cara penggunaan :

1. Kalian buat sebuah artikel atau pilih artikel yang sudah kalian publish -> Masuk ke tampilan HTML bukan Menulis, salin kode dibawah ini dan pastekan/tempel di tempat yang ingin kalian tampilkan tombol Download atau Demonya

<ul class="btn" style="text-align: center:"><li><a class="demo"href="https://yusup404.blogspot.com" target=_blank">DEMO</a></li><li><a class="download"href="https://yusup404.blogspot.com" target=_blank">DOWNLOAD</a></li></ul> 

Jika Anda hanya ingin menampilkan salah satu tombol saja contohnya Anda ingin menampilkan tombol download saja maka hapus kode ini :

<li><a class="demo"href="https://yusup404.blogspot.com" target=_blank">DEMO</a></li> 

Begitupun sebaliknya jika Anda hanya ingin menampilkan tombol demo saja maka kode di bawah ini tinggal di hapus saja :

<li><a class="download"href="https://yusup404.blogspot.com" target=_blank">DOWNLOAD</a></li> 

Note:

Silahkan ubah url blog saya dengan url tujuan kalian. 

dan pastikan semua sudah benar.

Jika sudah silahkan kalian Publikasikan. dan Sekarang kalian lihat hasilnya.

Penutup

Oke mungkin segitu aja Tutorial saya kali ini Cara Membuat Tombol Download dan Demo Keren di Blog Semoga Bermanfaat See you.