25 April 2017

Cara Membuat Tombol Demo dan Download Ringan Responsive di blogger

Cara Membuat Tombol Demo dan Download Ringan Responsive di bloggerTombol 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.

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.

(Baca juga : Cara Membuat Button Responsive 13 Gaya dengan CSS)

Langsung saja saya akan memberikan cara membuat tombol demo dan download ringan responsive di blogger :


Cara Membuat Tombol Demo dan Download Ringan Responsive di blogger

1. Langkah pertama masuk ke akun blogger kalian.
2. Pilih menu Tema, kemudian pilih Edit HTML.
3. Cari script ]]></b:skin>, 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;}
4. Kemudian pilih Simpan tema.

(Baca juga : Cara Membuat Author Box dengan Social Media Buttons)

5. Letakan script di bawah ini di postingan yang kalian inginkan.
<div style="text-align: center;">
<ul class="boddbtn">
<li><a class="demobtn" href="http://www.tutorialumum.com/demo" rel="nofollow" target="_blank">DEMO</a>&nbsp;&nbsp;<a class="downloadbtn" href="http://www.tutorialumum.com/download" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
6. Ganti http://www.tutorialumum.com/demo dengan link demo kalian,
7. Ganti http://www.tutorialumum.com/download dengan link download kalian.

(Baca juga : Cara Membuat Share Button Melayang Dengan Sumo Me)

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.

3 comments

Mantap artikel nya mas dan dapat menambah baru tentang blog

Mantap artikel nya mas dan dapat menambah baru tentang blog

Tombol demo dan downloadnya keren :)

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon