Cara Membuat Tombol Button Download Dan Demo Yang Unik
Tombol button Demo di blog di gunakan untuk melihat sesuatu, contohnya hasil tampilan pada sebuah blog yang membawa anda pergi ke alamat yang di masukan kedalam tombol demo tersebut. Misalkan anda memberikan sebuah template Evo Magz V4.7 secara Gratis. Maka Dari itulah dibuat tombol Demo agar pengunjung yang ingin menggunakannya bisa melihat secara langsung bagaimana tampilan blog yang menggunakan template Evo Magz V4.7 Tersebut.
Sedangkan fungsi dari tombol button Download di blog yaitu memudahkan pengunjung untuk mengunduh file yang sudah di upload di dalam blog tersebut. Jadi anda tidak perlu membuka banyak halaman lagi, cukup klik tombol download maka file yang ingin anda download akan terdownload otomatis.
sumber gambar : seocips.com
Untuk melihat cara membuat tombol button Demo dan Download pada blog silahkan anda lihat lebih jelas di bawah ini.
Membuat Tombol Demo Dan Download
1. Silahkan masuk di blogger anda.
2. Pilih Template
3. Pilih Edit Html
4. Silahkan anda cari kode ini ]]></b:skin> gunakan Ctrl+F untuk mempermudah pencarian
5. Letakan kode script di bawah ini tepat di atas kode ini ]]></b:skin> atau </style>
#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:80px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }
6. Pasanga Kode ini sebelum </head>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
7. Simpan Template anda.
Memasang Tombol Demo dan Download di Blog
Untuk cara memasang tombol di blog dapat anda lakukan dengan mudah, silahkan anda letakan kode script di bawah ini pada postingan yang ingin anda tambahkan tombol demo dan download di postingan blog. masuk ke postingan blog pilih HTML seperti gambar di bawah.
Dan letakan kode script berikut ini di bawah potingan blog anda, ganti alamat URL bacaan gratis dengan alamat URL blog anda
<div id="wrap" style="text-align: center;"> <a class="bie-slide" href="#" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a class="bie-slide2" href="#" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a> </div>
Sekian informasi gratis dari saya semoga bermanfaat, bila ada yg kurang jelas silahkan berkomentar di kolom komentar