Animekume- Pada kesempatan kali ini saya akan membagikan tutorial cara membuat tombol demo dan download yang responsive dan mudah digunakan pastinya. Terlebih sekarang sudah banyak yang mempublikasikan cara-cara seperti ini namun untuk kalian yang menyukainya bisa langsung mencoba ya teman-teman.
 |
| Tutorial Membuat Tombol Demo & Download |
Karena pada tutorial kali ini tombol download dan demo hanya menggunakan css dan tidak menggunakan javascript yang berlebihan, untuk pengoperasian juga sangat mudah kalian tinggal memasukan link demo dan download kalian. Langsung saja ya menuju tutorialnya silahkan disimak baik-baik agar tidak salah saat penerapan.
Cara Membuat Tombol Download dan Demo Responsive Blogger
1. Silahkan login ke akun Blogger kalian
2. Pilih menu Tema selanjutnya pilih edit HTML
3. Cari Script ]]></b:skin> atau </style> Jika sudah ketemu masukan script berikut tepat diatasnya
/* 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;}
5. Kemudian Pilih Simpan Tema
6. Setelah selesai memasang script letakan script di bawah ini untuk memunculkan tombol download dan demo
<div style="text-align: center;">
<ul class="boddbtn">
<li><a class="demobtn" href="http://www.animeku.me/demo" rel="nofollow" target="_blank">DEMO</a> <a class="downloadbtn" href="http://www.animeku.me/download" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
7. Jika sudah bisa muncul tombol download dan demo kini kalian tinggal merubah url yang terdapat di script diatas dengan link kalian. Silahkan di Rubah Link demo yang mengarah ke blog ane www.animeku.me rubah dengan url blog kalian.
Semoga bermanfaat dan bisa langsung di terapin tanpa terjadi kesalahan yang tidak di inginkan ya teman-teman mungkin cukup dulu artikel saya kali ini semoga membantu dan selamat mencari receh dari internet.
EmoticonEmoticon