Cara Membuat Tombol Demo Dan Download Keren Di Blog | Tutorial Lengkap
Cara Membuat Tombol Demo Dan Download Keren Di Blog
Zona Internetku September 25, 2018
Cara Membuat Tombol Demo Dan Download Keren Di Dalam Postingan Blog. Tombol Demo Dan Download merupakan suatu tombol yg bermanfaat buat memberitahuakn navigasi dalam blog tadi.
Biasanya tombol navigasi Demo
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 sendiri2. 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
Komentar
Posting Komentar