Latest News

Cara Memasang Tombol DEMO & DOWNLOAD Di Blogger

Agar link unduh menjadi lebih menarik dan keren maka kita harus membuat tombol unduh khusus. Tujuannya ialah untuk membedakan link unduh dengan link-link yang lainnya. Supaya pengunjung tidak salah klik juga. Dengan menambahkan css maka kita mampu membuat tombol demo dan download.

Tombol demo dan unduh dikhususkan untuk blog unduh template tapi bila anda memiliki blog unduh lain anda mampu menghapus tombol demo dan hanya menyertakan tombol unduh saja. Selain itu anda mampu mengatur css tombol demo dan unduh sesuka kalian sesuaikan dengan tema tampilan blog anda semoga serasi.

Cocok untuk blog unduh dengan memasang tombol demo dan unduh maka akan menarik perhatian pengunjung. Pengunjung tidak resah membedakan mana link download. Keren dan menarik.

Apa tombol demo dan unduh ini responsive? Aman tombol unduh dan demo ini responsive dan mobile friendly. Makara dikala dibuka di hp tidak pecah atau terpotong. Tertarik untuk memasang tombol unduh dan demo? Berikut langkah-langkahnya.

Cara Membuat Tombol Unduh dan Demo

Langkah 1 (Lompati langkah ini bila anda sudah memasang js font awesome di blog)
Buka blogger, pilih Tema → Edit HTML. Salin instruksi dibawah ini dan letakkan diatas instruksi </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Langkah 2
Salin instruksi berikut dan pastekan diatas instruksi </style>

.whitebutton {     margin: 20px auto;     padding: 20px 0;     width: 200px; }  .whitebutton a {     background: #fff;     color: #666;     display: block;     font-size: 17px;     font-weight: 700;     font-family: 'Arial',Verdana,sans-serif;     height: 50px;     line-height: 50px;     text-align: center;     text-decoration: none;     text-transform: uppercase;     width: 200px;     position: relative;     z-index: 2; }  .whitebutton a:before {     content: '\f019';     font-family: FontAwesome;     font-weight: normal;     padding: 8px;     margin-left: -12px;     margin-right: 6px; }  .whitebutton span {     background: #444;     color: #fff;     display: block;     font-size: 12px;     font-family: 'Arial', Verdana,sans-serif;     height: 40px;     line-height: 40px;     text-align: center;     width: 200px;     z-index: 1;     text-transform: uppercase;     font-weight: bold; }  .whitebutton .up {     background: #e25734;     margin: -25px auto;     opacity: 0;     border-radius: 0 0 5px 5px;     transform: translate(0,-50px);     transition: 350ms; }  .whitebutton .down {     margin: -30px auto;     opacity: 0;     border-radius: 5px 5px 0 0;     transform: translate(0,-50px);     transition: 350ms; }  .whitebutton .down:before {     content:'\f14a';     font-family: FontAwesome;     font-weight: normal;     margin-right: 6px;     color: #aaa; }  .whitebutton:hover .up {     opacity: 1;     transform: translate(0,0); }  .whitebutton:hover .down {     opacity: 1;     transform: translate(0,-90px); }  .whitebuttondemo {     margin: 20px auto;     padding: 20px 0;     width: 200px; }  .whitebuttondemo a {     background: #e25734;     color: #fff;     display: block;     font-size: 17px;     font-weight: 700;     font-family:'Arial',Verdana,sans-serif;     height: 50px;     line-height: 50px;     text-align: center;     text-decoration: none;     text-transform: uppercase;     width: 200px;     position: relative;     z-index: 2;     transition: 350ms; }  .whitebuttondemo a:before {     content:'\f002';     font-family: FontAwesome;     font-weight: normal;     padding: 8px;     margin-left: -12px;     margin-right: 6px; }  .whitebuttondemo a:hover {     color: #fff; }  .whitebuttondemo span {     background: #444;     color: #fff;     display: block;     font-size: 12px;     font-family: 'Arial', Verdana,sans-serif;     height: 40px;     line-height: 40px;     text-align: center;     width: 200px;     z-index: 1;     text-transform: uppercase;     font-weight: bold; }  .whitebuttondemo .up {     background: #444;     margin: -25px auto;     opacity: 0;     border-radius: 0 0 5px 5px;     transform: translate(0,-50px);     transition: 350ms; }  .whitebuttondemo:hover .up {     opacity: 1;     transform: translate(0,0); }

Simpan template.

Langkah 3
Untuk memanggil/menggunakan tombol demo dan unduh silakan salin instruksi ini dan pastekan di postingan anda dikala mode tab HTML bukan Compose

<div class="whitebuttondemo"> <a href="#" target="_blank">Demo</a><br> <span class="up">click to view</span></div> <br> <div class="whitebutton"> <a href="#" target="_blank">Download</a><br> <span class="up">click to begin</span><br> <span class="down">1.6MB .rar</span></div>

Ganti # dengan url link demo dan link unduh anda.

Selesai dan pratinjau postingan anda tersebut untuk melihat hasil sebelum dipublikasikan. Nah itu ia tutorial cara membuat tombol unduh dan demo keren. Semoga mampu membantu dan bermanfaat.