Cara Membuat Tombol Demo dan Download Ringan Responsive di Blogger - Trik-Komtek

Trik-Komtek - 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)

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;}

• Kemudian pilih Simpan tema.
• Letakan script di bawah ini di artikel 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>

• Pengaturan :
• Ganti http://www.tutorialumum.com/demo dengan link demo kalian,
• Ganti http://www.tutorialumum.com/download dengan link download kalian.

• DEMO  DOWNLOAD

(Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome)

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.

Share this