Tutorial Menambahkan CSS Tombol Download di Blogger

Halo kawan-kawan blogger , kali ini Abang mau share Tutorial Menambahkan CSS Tombol Download Keren di Blogger scara detail dan di lengkapi dengan gambar, tentunya langkah-langkahnya akan menjadi sangat mudah gan. Kita akan desain blog kita menjadi lebih menarik Tombol download yang akan kita buat adalah yang seperti ini

DOWNLOAD

Gmana gan? tertarik kan? langsung aja gan ikuti langkah-langkah berikut
1. Kunjungi blogger dashbord anda
2. Klik menu Template >> Edit HTML

3. Setelah tu kita tambahkan kode CSS nya dengan cara tekan tombol CTRL+F pada halaman Edit HTML lalu ketik ]]></b:skin> dan tekan Enter

 4. Letakkan kode CSS brkut sebelum kode ]]></b:skin>

/*--------------------------------------------------------------
Download button http://bang-abu.blogspot.co.id/
--------------------------------------------------------------*/
.download {float:center;list-style:none;display:inline;text-align:center;width:20%;margin:10px;padding:2px;font-size:14px;clear:both}
.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.download{background:#3498db}
.download:hover{background:#666;text-decoration:none;}
.download:active{cursor:pointer}
.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:9px;font-family:fontawesome}
.download:after{content:'\f019'}

Sehingga kurang lebih menjadi seperti ini

BEFORE

 AFTER

5. Setelah itu klik Save template/Simpan template

Sampai sini kita sudah berhail menambahkan kode CSS pada template blog kita.
Sekarang kita tinggal menambahkan sedikit kode pada link download agar kode CSS Download nya bekerja. Caranya tidak sulit

1. Pada kolom Entri pilih Compose
2. Ketik DOWNLOAD kemudian Blok tulisan tersebut lalu klik add or remove link. Misal

3. Maka akan muncul kotak dialog Edit link, masukkan link download anda lalu klik OK

4. Kemudian pada kolom Entri klik HTML (Kiri atas halaman) kemudian tambahkan kode class="download" setelah kode <a ..............................seperti pada gambar berikut

Dari yang seperti ini

 

Hingga seperti ini

5. Jika langkah-langkah diatas sudah dilaksanakan dengan baik, anda bisa klik Compose dan artikel anda siap di publikasikan.

Mudah bukan? sekarang sbat bisa like dan share jika Tutorial ini bermanfaat. Terimakasih sudah berkunjung

Note:
* Untuk mengganti warna tombol, silakan sobat ganti kode yang berwarna merah.