Cara Menciptakan Tombol Demo Dan Download Di Postingan Blog

Cara Membuat Tombol Demo dan Download di Postingan Blog - Fungsi Tombol Demo dan Postingan ini tidak lain yaitu untuk menampilkan halaman demontrasi atau sebuah link download dari sebuah artikel yang kita tulis. Ada banyak cara untuk menciptakan tombol demo dan download ini, dari memakai gambar berlogo demo / download dan menyisipkan link di dalam gambar tersebut, dan ada yang memakai html.

Nah pada kesempatan kali ini aku akan mengembangkan tutorial bagaimana Cara Membuat Tombol Demo dan Download di Postingan Blog dengan memakai CSS3 dengan tampilan responsive dan efek saat di sorot denga kursor mouse kita. Untuk yang ingin tau dengan tampilan tombol demo dan download ini, dapat di lihat di bawah ini

DEMO

DOWNLOAD

Cara Membuat Tombol Demo dan Download di Blogger

Pertama, Login ke Blogger > Template > Edit HTML > Salin arahan di bawah ini dan simpan di atas atau sebelum tag </style> atau ]]><b:skin>

.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:'f135';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:'f019';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;}

Untuk menerapkan tombol demo dan download di postingan, salin dan simpan arahan berikut di sajian HTML postingan sobat

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

Ganti YOUR-LINK-HERE dengan alamat Url Halaman Demo atau Link Download sobat.

Demikian tutorial Cara Membuat Tombol Demo dan Download di Postingan Blog ini agar bermanfaat.

Share this post