Tombol button Demo di blog di gunakan untuk melihat sesuatu, misalnya hasil tampilan pada sebuah blog yang membawa anda pergi ke alamat yang di masukan kedalam tombol demo tersebut. Misalkan anda memperlihatkan sebuah template Evo Magz V4.7 secara Gratis. Maka Dari itulah dibentuk tombol Demo semoga pengunjung yang ingin menggunakannya sanggup melihat secara pribadi bagaimana tampilan blog yang memakai template Evo Magz V4.7 Tersebut.
Sedangkan fungsi dari tombol button Download di blog adalah memudahkan pengunjung untuk mengunduh file yang sudah di upload di dalam blog tersebut. Makara anda tidak perlu membuka banyak halaman lagi, cukup klik tombol d0wnl0ad maka file yang ingin anda d0wnl0ad akan terd0wnl0ad otomatis.
sumber gambar : seocips.com
Untuk melihat cara menciptakan tombol button Demo dan Download pada blog silahkan anda lihat lebih terang 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 aba-aba ini ]]></b:skin> gunakan Ctrl+F untuk mempermudah pencarian
5. Letakan aba-aba script di bawah ini sempurna di atas aba-aba 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 sanggup anda lakukan dengan mudah, silahkan anda letakan aba-aba script di bawah ini pada postingan yang ingin anda tambahkan tombol demo dan d0wnl0ad di postingan blog. masuk ke postingan blog pilih HTML ibarat gambar di bawah.
Dan letakan aba-aba 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-d0wnl0ad"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a> </div>
Sekian warta gratis dari saya semoga bermanfaat, jikalau ada yg kurang terang silahkan berkomentar di kolom komentar Sumber http://www.warunginter.net/
EmoticonEmoticon