Tombol download dan demo sangat di butuhkan pada saat kita membagikan sesuatu di blog yang kita miliki. Apalagi untuk kalian yang memiliki blog seperti blog share template, software, film, musik, dan lain sebagainya. Untuk itu kali ini saya akan membagikan cara membuat tombol demo dan download ringan responsive di blogger.
(Baca juga : Cara Membuat Button Responsive 13 Gaya dengan CSS)
Kenapa saya bilang ringan, karena tombol ini hanya menggunakan css jadi tidak masalah karena tidak menggunakan javascript yang berlebihan. Cara konfigurasinya sangat mudah kalian tinggal memasukan link demo atau download kalian.
Langsung saja saya akan memberikan cara membuat tombol demo dan download ringan responsive di blogger.
(Baca juga : Cara Membuat Button Dengan Animasi Bounce Effect)
Kemudian pilih Simpan tema. Letakan script di bawah ini di artikel yang kalian inginkan. Pengaturan :
Demikian cara simple dari saya mengenai cara membuat tombol demo dan download ringan responsive di blogger. Untuk tutorial yang lain dari saya silahkan tetap kunjungi tutorialumum.com.
Terima kasih sudah berkunjung di blog saya, jika ada pertanyaan serta kritik dan saran, silahkan masukan di kolom komentar. Karena pertanyaan serta kritik dan saran dari kalian sangat berarti bagi saya dalam membangun sebuah blog.
(Baca juga : Cara Membuat Button Responsive 13 Gaya dengan CSS)
Kenapa saya bilang ringan, karena tombol ini hanya menggunakan css jadi tidak masalah karena tidak menggunakan javascript yang berlebihan. Cara konfigurasinya sangat mudah kalian tinggal memasukan link demo atau download kalian.
Langsung saja saya akan memberikan cara membuat tombol demo dan download ringan responsive di blogger.
(Baca juga : Cara Membuat Button Dengan Animasi Bounce Effect)
Cara Membuat Tombol Demo dan Download Ringan Responsive di Blogger
- Langkah pertama masuk ke akun Blogger kalian.
- Pilih menu Tema, kemudian pilih Edit HTML.
- Cari script ]]></b:skin> atau </style>, masukan script berikut tepat di atasnya.
/* Demo Download Button */
.boddbtn {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}
.boddbtn ul {padding:0;margin:0;}
.boddbtn li {list-style:none;display:inline;padding:0;margin:5px;}
.demobtn,.downloadbtn{color:#fff !important;padding:10px 15px 10px 18px;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}
.demobtn {background-color: #3498db;}
.downloadbtn {background-color: #34d968}
.demobtn:hover {background-color: #2980b9;color: #fff;}
.downloadbtn:hover {background-color: #2fbd5a;color: #fff;}<div style="text-align: center;">
<ul class="boddbtn">
<li><a class="demobtn" href="https://tutorialbloggerindo1.blogspot.co.id/demo" rel="nofollow" target="_blank">DEMO</a> <a class="downloadbtn" href="https://tutorialbloggerindo1.blogspot.co.id/download" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>- Ganti https://tutorialbloggerindo1.blogspot.co.id/demo dengan link demo kalian,
- Ganti https://tutorialbloggerindo1.blogspot.co.id/download dengan link download kalian.
Demikian cara simple dari saya mengenai cara membuat tombol demo dan download ringan responsive di blogger. Untuk tutorial yang lain dari saya silahkan tetap kunjungi tutorialumum.com.
Terima kasih sudah berkunjung di blog saya, jika ada pertanyaan serta kritik dan saran, silahkan masukan di kolom komentar. Karena pertanyaan serta kritik dan saran dari kalian sangat berarti bagi saya dalam membangun sebuah blog.