Cara Mudah Membuat Tombol Demo Dan Download Pada Postingan Blog - Hallo sahabat theoosp, Pada Artikel yang anda baca kali ini dengan judul Cara Mudah Membuat Tombol Demo Dan Download Pada Postingan Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. baiklah, selamat membaca. Kunjungi juga Situs Dibawah ini:

Sumbubotol

Theospan

Gadgetin

Cafepimpin

infoterkini

Judul : Cara Mudah Membuat Tombol Demo Dan Download Pada Postingan Blog
link : Cara Mudah Membuat Tombol Demo Dan Download Pada Postingan Blog

Cara Mudah Membuat Tombol Demo Dan Download Pada Postingan Blog

Selamat pagi sobat. Hari ini saya akan share tentang bagaimana cara membuat tombol DEMO dan DOWNLOAD pada postingan blog kita.

Tombol Demo dan Download ini mempunyai banyak kegunaan, khususnya bagi anda yang memiliki blog dengan niche khusus download file. Dengan tombol download ini tampilannya akan semakin keren jika dibandingkan dengan membuat sekedar tulisan menggunakan "Link".

Caranya banyak untuk membuat tombol ini, namun kali ini saya hanya akan share cara yang paling mudah saja.

Langkah-Langkah Membuat Tombol Demo dan Download:

1. Log In ke Blogger 
2. Kemudian pilih Template
3. Pilih CUSTOMISE (SESUAIKAN) yang letaknya tepat disamping EDIT HTML
4. Jika sudah, silahkan pilih ADVANCE (TINGKAT LANJUT) >> ADD CSS (TAMBAHKAN CSS)
5. Kemudian Copy kode berikut ini lalu Paste kan di dalam kolom ADD CSS (TAMBAHKAN CSS) yang sudah tersedia disana
   
   
   .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. Jika sudah silahkan di simpan, lalu kembali lagi ke Dashboard blog anda.

   7. Setiap kali anda ingin menampilkan tombol Demo dan Download ini, silahkan copy kode berikut        ini di bagian HTML postingan anda.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://belajarcorner.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://belajarcorner.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

    8. SELESAI



Mudah bukan? silahkan dicoba ya sob, jika ada yang perlu ditanyakan jangan sungkan untuk bertanya.


Semoga bermanfaat.

Demikianlah Artikel Cara Mudah Membuat Tombol Demo Dan Download Pada Postingan Blog

Sekianlah artikel Cara Mudah Membuat Tombol Demo Dan Download Pada Postingan Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

selamat membaca. Kunjungi juga Situs Dibawah ini:

Sumbubotol

Theospan

Gadgetin

Cafepimpin

infoterkini

Anda sekarang membaca artikel Cara Mudah Membuat Tombol Demo Dan Download Pada Postingan Blog dengan alamat link https://theoospan.blogspot.com/2023/06/cara-mudah-membuat-tombol-demo-dan.html

Tweet