Blog Seputar Tutorial Komputer, Printer, Windows, Android, Blackberry, Dan Informasi Teknologi

Cara Termudah Membuat Tombol Demo Dan Download Di Blog

Cara Mudah Membuat Tombol Demo Dan Download - Tombol Demo dan Download biasanya digunakan bagi sobat yang sering berbagi sebuah template di postingan blognya. Sebenarnya cara membuat tombol demo dan download mungkin sudah banyak sobat temui, namun pada kesempatan kali ini kita akan membahas Cara membuat tombol demo dan download dengan mudah dan cepat dan tidak membuat template blog sobat menjadi lambat. Bagi kamu sob yang senang berbagi template blog di postingan blognya, Memberikan tombol demo dan download merupakan hal yang sangat penting. Selain untuk memperindah dan merapihkan juga dapat mempermudah pengunjung untuk melihat contoh hasil template yang sobat bagikan dengan mengklik tombol demo. Seperti ini contoh hasilnya sob.




Sebenarnya banyak cara ya sob tentang membuat tombol demo dan download, mulai dari penambahan script pada HTML blog, penambahan script pada HTML postingan yang akan diberi tombol Demo dan Download hingga tanpa menambahkan script sedikitpun yaitu hanya sekedar Tulisan berbentuk Link yang langsung menuju link Demo atau Download. Dengan tujuan untuk mempercantik blog sobat, tidak ada salahnya jika sobat memodifikasi tombol Demo dan Download dengan menambahkan sedikit script pada HTML blog dan HTML postingan seperti Cara Mudah Membuat Tombol Demo dan Download pada artikel kali ini.

Penasaran Bagimana Caranya..? Ok sob tanpa panjang lebar langsung saja ya kita masuk ke pokok pembahasan kali ini. Silahkan ikuti langkah-langkah berikut ini :
Cara Termudah Membuat Tombol Demo Dan Download Di Blog

Cara Mudah Membuat Tombol Demo Dan Download Keren 

1. Login ke Blog sobat.
2. Masuk ke pengaturan Template
3. Kemudian pilih Edit Template
4. Cari kode ]]></b:skin>. Gunakan CTRL+F untuk mempermudah pencarian
5. Kemudian letakan kode script dibawah ini tepat di atas kode ]]></b:skin>
/* -- Kode Button --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
6. Simpan Template

Kemudian untuk cara penggunaanya, Silahkan sobat masukan kode berikut ketika membuat postingan yang akan diberi tombol demo dan download ( Gunakan Mode HTML)
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://ilmu-wongcilik.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://ilmu-wongcilik.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Keterangan.

  • Ganti tulisan yang berwarna merah dengan link tujuan Demo sobat.
  • Ganti tulisan yang berwarna biru dengan link tujuan Download sobat.
Begitulah sob cara membuat tombol Demo dan Download di postingan blog, Cara ini sudah di coba dan berhasil, jika sobat juga berhasil mencobanya silahkan berikan komentar pada kotak komentar yang tersedia dibawah. Selamat mencoba dan Semoga Bermanfaat..

Previous
Next Post »

PERINGATAN..!!
1. Berkomentarlah Sesuai Judul Diatas Dengan Sopan dan Jangan Spaming.!!
2. Dilarang Berkomentar Yang Mengandung Unsur Pornografi dan Sara.!!
3. Mohon Maaf Bagi Yang Berkomentar Melampirkan Link Langsung Ane Masukan Spam.!!

Matur Nuwon Sanget Atas Perhatiane Panjenengan Sedoyo. Salam Blogger Wongcilik.

 

Contact Form

Name

Email *

Message *