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:12px 15px!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:#1ABC84;} .demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;} .download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;} .demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

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

5. 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="YOUR-LINK-HERE" target="_blank">DEMO</a></li> <li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li> </ul> </div>

6. Jika ingin tombol Demo saja gunakan html berikut.

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

7. Atau jika ingin tombol Download saja gunakan html berikut.

<div style="text-align: center;"> <ul class="btn"> <li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</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.

Jangan lupa untuk mengganti YOUR-LINK-HERE dengan link yang akan di tuju.

Contoh hasilnya dapat di lihat di postingan berikut 👉 Template Blogger Menarik & Responsif Premium Gratis

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