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 supaya serasi.

Agar

Apa tombol demo dan unduh ini responsive? Aman tombol unduh dan demo ini responsive dan mobile friendly. Makara saat 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 isyarat dibawah ini dan letakkan diatas isyarat </head>

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

Langkah 2
Salin isyarat berikut dan pastekan diatas isyarat </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 isyarat ini dan pastekan di postingan anda saat 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 beliau tutorial cara membuat tombol unduh dan demo keren. Semoga mampu membantu dan bermanfaat.