IKLAN
Kontak Saya
300x250
Selamat Datang Di BiriBisi

Selasa, 24 Januari 2017

Cara Membuat Tombol Demo Dan Download



Tombol demo dan fungsinya

Tombol demo adalah sebuah tombol yang berfungsi untuk memperlihatkan sesuatu yang ingin di perlihatkan kepada para pengunjung blog, baik untuk mempromosikannya atau sekedar memperlihatkan keindahannya saja, dan lain-lain.



Bila anda seorang designer pakaian, maka tombol ini bisa anda pergunakan untuk mempertontonkan karya-karya anda yang spesial yang sedang anda promosikan kepada pengunjung blog anda sehingga karya-karya anda akan lebih terkesan sebuah karya yang benar-benar berkualitas dan mahal. Dan lain-lain. Lihat Cara Membuat Tulisan Berjalan

Di samping fungsi-fungsinya di atas, tombol demo ini juga bisa berfungsi sebagai penghias yang membuat blog terlihat lebih keren dan berbobot di mata pengujung, karena sebuah blog yang berkualitas adalah blog yang mempunyai konten-konten yang berbobot dan mempunyai perlengkapan yang memadai, sehingga para pengunjungnya akan merasa mendapatkan kemudahan dan kenyamanan apabila mengunjunginya.


Tombol download dan fungsinya


Sedangkan tombol download, seperti penamaannya adalah berfungsi untuk mendownload link atau template yang kita bagikan untuk para pengunjung blog kita. Juga peletakannya pada sebuah blog ini merupakan bentuk pelayanan kita kepada mereka agar mereka mendapatkan kemudahan.





Artikel-artikel yang kita posting terkadang sangat membutuhkan akan adanya kedua tombol tersebut didalamnya. Kendati mungkin hanya beberapa artikel saja yang memerlukan keberadaan kedua tombol tersebut, namun kita harus mempersiapkan pengetahuannya agar bila di perlukan kita bisa membuatnya.

Karena itu dalam artikel ini saya menyajikan kepada anda cara untuk membuat tombol-tombol tersebut. Dan untuk membuatnya ada dua cara yang masing-masingnya tidak ada bedanya dalam hasil akhirnya:

#1. Melalui "Tambahkan CSS" di sub menu "Sesuaikan". Anda bisa menggunakan cara ini dengan lebih mudah dari cara yang kedua yang akan saya sebutkan berikutnya, karena cara pertama ini tidak masuk kebagian dalam template.

#2. Melalui "Edit HTML".

Cara ini sedikit lebih ribet dari cara yang pertama, karena harus mengotak-atik bagian dalam template.

Cara membuat tombol demo dan download melalui sub menu "Tambahkan CSS"


Berikut ini langkah-langkah yang harus anda lakukan untuk membuat tombol demo dan tombol download melalui menu "Tambahkan CSS":


#Pertama. Masuk ke dashbord blog anda.


#Kedua. Pilih menu "Template", lalu klik "Sesuaikan"


#Ketiga. Klik menu "Tingkat Lanjut", lalu pilih sub menu "Tambahkan CSS"


#Keempat. Tambahka script di bawah ini kedalam kotak "Tambahkan CSS":


/*-BiriBisi Demo And Download Buttons-*/

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

#Kelima. Klik "Terapkan ke blog". Selesai.


Cara membuat tombol demo dan tombol download melalui edit html


Seperti halnya cara pembuatan tombol demo dan tombol download melaui kotak "Tambahkan CSS" diatas yang cuma memerlukan beberapa langkah saja, maka pembuatannya melalui edit html pun demikian. Lihat Cara Memasang Menubar.


Berikut ini tahapan-tahapan yang harus anda lakukan dalam pembuatan tombol-tombol tersebut melalui edit html:


#Pertama. Masuk ke dashbord blog anda


#Kedua. Pilih menu template, lalu klik "Edit HTML"


#Ketiga. Cari kode ]]></b:skin>, gunakan tombol ctrl + a agar lebih cepat


#Keempat. Pastekan script di bawah ini di atas kode ]]></b:skin>:


/*-BiriBisi Demo And Download Buttons-*/

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

 #Kelima. Save template.


Cara menampilkan tombol demo dan tombol download pada postingan


Tombol demo dan tombol download tidak akan muncul begitu saja setelah anda menyimpan script di atas. Untuk menampilkannya diperlukan langkah-langkah tambahan yang sama untuk keduanya. Baca Cara Memasang Tombol Share.


Berikut ini langkah-langkah yang harus anda lakukan untuk menampilkan tombol-tombol tersebut dalam blog anda:


#Pertama. Masuk ke editor artikel blogger


#Kedua. Pilih mode HTML, kemudian pastekan kode script berikut ini di tempat manapun di dalamnya, di atas, di tengah, atau di bawah postingan:


<div style="text-align: center;">

<ul class="button">
<li><a class="demo" href="http://biribisi.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://biribisi.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

#Ketiga. Kembali ke mode "Compose", lalu klik "Publish" atau "Perbarui". Lihat hasilnya di halaman postingan. Lihat Cara Ngeblog Pakai Android.


Demikianlah panduan dan tutorial cara membuat tombol demo dan tombol download yang bisa saya sajikan untkmuk anda. Semoga bermanfaat. Amin!

Comments
2 Comments

2 komentar:

Melony Fisher mengatakan...


I do not even know how I ended up right here, but I assumed this put up was great. I don't recognise who you might be however definitely you're going to a well-known blogger in case you aren't already. Cheers! paypal login

Abi Mada Albiribisi mengatakan...

Thank you for your flattery