Cara mudah mambuat tombol demo dan download yang keren dan unik

Cara mudah mambuat tombol demo dan download yang keren dan unik tentunya sangat perlu.

kenapa sangat perlu membuat teombol tersebut ?
Ok jika sobat seorang blogger pembuat template atau pun penjual template sudah tentunya seseorang sebelum membeli atau menggunakan template tersebut pastilah akan melihat template yang disediakan oleh anda terlebih dahulu bagai mana sih tampilannya, kerean atau tidaknya agar orang bisa tertarik bgaitulah. tujuan memberikan tombol demo ialah agar terlihat keren blog yang memiliki tombol yang dapat mempercantik tampilan blog. 

sebenarnya tanpa membuat tombol tersebut juka bisa dengan tulisan yang di perbesar.
akan tetapi sesuai yang saya katakan tadi diatas ini hanya untuk mempercantik tampilan blog saja ya.

kemudian fungsi dari tombol download untuk mengalihkan link download agar kelihatan menarik saja dan blog terlihat keren dan profesional.

selanjutnya simak dan praktekan cara mudah membuat tombol demo dan download di bawah ini secara teliti agar lebih efektif dan sempurna :


Sumber gambar : Www.seocips,com

1. pertama silahkan masuk ke blogger anda
2. pilih template/tema
3. pilih edit html
4. cari sobat cari kode script ]]></b:skin> Namun gunakan Ctrl+F untuk memudahkan 
    pencarian ya
5. Letakan kode script dibawah ini dii atas kode ]]></b:skin>atau </stile>
#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. Selanjutnya Pasang kode Script ini sebelum </head>  **Jangan Sampai salah meletakan 
    kode.
    Script ini ya karena sangat bepengaruh terhadap button yang akan di tampilkan

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


7. Simpan template sobat yang sudah diberikan Script diatas ya

Memasang Button/tombol Demo dan Download Di blog
Langkah selanjutnya adalah ketika sobat sudah membuat artikel yang cukup dan kemudian ingin menambahkan tombol demo dan donload selanjutnya sobat harus menempatkan kode script pemanggil CSS di tempat artikel yang mau di beri tombol, caranya sangat mudah kan lihat di bawah ya.
klik HTML saat berada di halaman penulisan artikel kemdian copypaste script yang ada dibawah ini letakan di bawah artikel jangan di header ok


selanjutnya letakan Script Dibawah ini setelah postingan dibawah artikel yang sudah sobat tulis tadi ya jangan kaku saya percaya kok sobat sudah sangat memahaminya.
<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>

Coba perhatikan pada Script diatas yang bertanda # 
tanda # pertama yang berwarna Merah ialah untuk alamat Demo yang di tuju
tanda # yang kedua yang berwarna Putih adalah untuk link donload yang dituju

begitulah sobat mudah kan cara mambuat tombol demo dan download untuk blogger, cara ini dibuat dengan sangat singkat dan jelas, selajutnya silahkan praktekan oh iya script diatas bisa di gunakan untuk semua jeis template blog ya jika ada masalah tinggalkan komentar di kotak komentar di bawah yang telah disediakan selamat mencoba.

0 Response to "Cara mudah mambuat tombol demo dan download yang keren dan unik"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel