Cara Membuat Tombol Demo dan Download di Blog

Santos el Salam

3 November 2020

Bagi anda pemilik blog tutorial yang banyak membagikan cara mendesain tampilan blog, mungkin akan lebih cocok jika di postingan blog anda diberi tombol demo agar pengunjung dapat melihat langsung contoh hasil nyata dari tutorial yang dijabarkan di postingan tersebut. Keberadaan tombol ini tentu akan lebih meyakinkan pengunjung jika ingin menerapkan tutorial tersebut di blog miliknya. 

Selain tombol demo, kadang juga dijumpai tombol download di sampingnya atau di bawahnya. Biasanya yang menyertakan tombol download ini adalah blog-blog yang menjual atau membagikan aplikasi atau file-file tertentu kepada pengunjungnya. Blog-blog pembuat template blog juga biasanya menyertakan tombol-tombol ini untuk memudahkan pengunjung yang berminat untuk mengunduh template-template tersebut. 

screenshot tombol demo & download

Berkaitan dengan uraian di atas, pada postingan kali ini saya akan membagikan sebuah tutorial tentang cara membuat tombol demo & download keren di postingan blog agar blog anda semakin terlihat profesional dan disukai pengunjung. Bagaimana caranya?, simak langkah-langkah di bawah ini. 

Cara Membuat Tombol Demo & Download Keren di Postingan Blog

1. Buka akun blogger anda. 

2. Pilih thema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style>, kemudian letakkan kode berikut ini di atasnya.

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}

.btn ul {margin:0;padding:0}

.btn li{display:inline;margin:5px;padding:0;list-style:none;}

.demo,.download{padding:10px 10px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}

.demo {background-color:#3498DB;}

.download {background-color:#f39c12;}

.demo:hover {background-color:#60B8F4;color:#fff}

.download:hover {background-color:#C77E0A;color:#fff}

.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

4. Pastikan di template blog anda sudah terpasang kode font awesome. Jika belum, silahkan tambahkan kode berikut ini di atas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Simpan kembali template anda.

6. Silahkan pilih postingan yang hendak anda tambahkan tombol demo & download. 

7. Buka pada mode html dan letakkan kode berikut ini di mana pun anda suka. 

<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="LINK-DEMO" target="_blank">DEMO</a></li> <li><a class="download" href="LINK-DOWNLOAD" target="_blank">DOWNLOAD</a></li> </ul> </div>

Keterangan: 

• Ganti yang ditandai warna merah dengan link tujuan demo dan download. 
• Jika anda hanya ingin memasang salah satunya saja, misal hanya tombol demo saja, silahkan ubah menjadi seperti berikut ini:

<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="LINK-DEMO" target="_blank">DEMO</a></li> </ul> </div>

8. Simpan kembali perubahan pada postingan dan lihat hasilnya.

Jika sewaktu-waktu ingin menampilkan tombol tersebut di postingan lain, anda cukup tambahkan saja kode pada menu postingan seperti langkah terakhir di atas. 

Demikianlah tutorial tentang cara membuat tombol demo dan download keren di postingan blog. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat Tombol Demo dan Download di Blog. Please share...!

Facebook

Twitter