Cara Membuat Tombol Demo Dan Download Keren Di Blog

Zona Internetku No Comment September 25, 2018

Cara Membuat Tombol Demo Dan Download Keren Di Dalam Postingan Blog. Tombol Demo Dan Download merupakan suatu tombol yang berguna untuk menunjukkan navigasi pada blog tersebut.
Biasanya tombol navigasi Demo dan juga Download ini sering kita temui pada blog yang berisi tentang film, file, tool dan software, dan sejenisnya. Apabila kalian ingin membuat tombol demo dan download maka kalian tidak perlu susah susah untuk mencari jauh jauh ke sana karena saya sudah menyiapkan beberapa tombol berikut ini yang bisa kalian gunakan

Baca juga :
2 Cara Membuat Tampilan Kolom Komentar Keren Di Blog
Tutorial Mengganti Older Post Menjadi Load More Di Blog
Cara Mengganti Older Dan Newer Post Menjadi Numbered Navigation Pada Blog

Tutorial Membuat Tombol Demo Dan Download Yang Keren Di Dalam Blog

1. Masuk ke dalam blog kalian sendiri
2. Pilih menu blog yang bernama "Tema" selanjutnya klik "Edit HTML"
3. Sesudah itu kalian cari kode </head>
4. Kemudian copas salah satu script berikut ini

Style 1 Flat UI Style

<style>
.mybutton{margin:0 auto;padding:8px 6px 4px;text-align:center}
.button{font-size:17px;color:#f0e2dd;background:linear-gradient(45deg,#72e3a1,#168c18);padding:10px;margin:5px auto 0;display:inline-block;overflow:hidden;text-decoration:none}
.mybutton .button:hover{background:rgb(255,255,255);color:#23982b;box-shadow:inset 0 0 0 1px #23982b}
</style>

Style 2 Flat UI Style + Font Awesome

</style>
.mybutton{margin:0 auto;padding:8px 6px 4px;text-align:center}
.button{font-size:17px;color:#f0e2dd;background:#1e8bc3;padding:10px;margin:5px auto 0;display:inline-block;overflow:hidden;border-radius:3px;text-decoration:none}
.mybutton .button:hover{background:#62abd0}
</style>

Perhatian : Khusus untuk Style 2 menggunakan icon Font Awesome, jadi jika template blog kalian belum memiliki kode seperti di bawah ini maka silahkan tambahkan kodenya dan letakkan di atas kode </head>

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

Jika sudah ada kode tersebut maka kalian bisa mengabaikannya

5. Kalian klik "Simpan Tema" untuk menyimpan perubahan kode template blog kalian
6. Setelah itu kalian copas kode berikut ini dan letakkan di dalam postingan blog ataupun di tempat sesuai dengan keinginan kalian

<div class="mybutton">
<a href="zonainternetku.blogspot.com" class="button">
<i class="fa fa-download"> </i>
Download
</a>

<a href="zonainternetku.blogspot.com" class="button">
<i class="fa fa-paper-plane"> </i>
Demo
</a>
</div>

Perhatian : Silahkan kalian ganti url blog yang saya tandai menjadi url yang kalian inginkan

Baca juga :
Cara Mengganti Tombol Next Prev Dengan Judul Postingan
Cara Membuat Widget Recent Comments Di Blog
Cara Menambahkan Widget Random Post Di Blog

Demikian tutorial singkat mengenai Cara Membuat Tombol Demo Dan Download Keren Di Blog yang dapat saya berikan kepada kalian semua, semoga hal ini bisa bermanfaat dan selamat mencoba

Promo Menarik