Cara Membuat Atau Memasang Tombol Download Dan Demo Yang Keren Buat Blog

Cara Membuat Atau Memasang Tombol Download Dan Demo Yang Keren Buat Blog - Siapa sih yang gak mau blog kita kelihatan rapih dan profesional, hanya dengan sedikit sentuhan blog kita akan terlihat rapih dan kekinian apalagi blog kalian blog download. Sangat di wajibkan jika blog kalian blog download untuk memasang tombol download atau tombol demonya, karena dengan memasang tombol download dan demo maka blog kalian akan berkesan rapih dan enak untuk di lihat.

Dengan tombol download khusus yang sudah di buat maka akan lebih menarik buat blog download tapi jika template kalian sudah memiliki tombol download juga tidak apa - apa memakai tombol download ini. Hanya saja akan merubah bagian CSS sedikit saja supaya tombol download yang terpasang sesuai dengan template kalian.

Tujuan Menggunakan Tombol Download Dan Demo

Tidak lain tujuanya adalah untuk mempermudah pengunjung ketika mau mencari tombol download dari blog download kalian, karena ketika pengunjung merasa di permudahkan maka ia akan kembali ke blog kalian dan supaya pengunjung tidak salah klik atau salah pencet.

Cara Memasang Tombol Download Dan Demo Yang Keren Buat Blog

• Buka blogger
• Pilih Tema lalu pilih Edit HTML
• Salin kode dibawah ini dan letakkan tepat diatas kode </head>

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

• Salin kode berikut dan pastekan diatas kode </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
• Untuk memanggil/menggunakan tombol demo dan download silakan salin kode ini dan pastekan di postingan anda ketika 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">16MB.rar</span></div> 

• Ganti # dengan url link demo dan link download kalian
• Jika kalian pengguna template Viomagz maka kalian tidak usah repot - repot menempelkan CSS ke template kalian, kalian hanya cukup memanggil tombol download tersebut dengan kode seperti ini :

 <center><a class="buttonDownload" href="URL-DOWNLOAD">Download</a></center>

Nah selesai, silahkan kalian lihat hasilnya dengan mencoba postingan kalian dengan cara klik pertinjau. Seperti itulah Cara Membuat Atau Memasang Tombol Download Dan Demo Yang Keren Buat Blog semoga artikel ini bermanfaat buat kalian dan jika ada yang salah mohon ,koreksinya.

Bagikan Artikel ini