0
Home Tutorial Blogger

Cara Membuat Tombol Demo dan Download Responsive

Admin
Updated by Admin
--
Candil - Cara Membuat Tombol Demo dan Download keren, Halo Sobat Candil, Pada Kesempatan Kali Ini Saya akan membahas bagaimana cara membuat tombol Demo dan Download di Blog.

Tombol demo dan download ini,tampilanya sangat menarik dan keren ada fitur slide show tombol ini cocok untuk blog kamu yang menyediakan berbagai template blogger atau blog download.Jika kamu tertarik dengan tombol Demo dan Download kamu bisa simak Tutorial Singkatnya di bawah ini.

Tombol Demo dan Download Responsive di Blogger
Tombol Demo dan Download Responsive di Blogger

Tutorial Cara Membuat Tombol Demo dan Download

  • Pertama masuk ke blogger 
  • klik tema atau template kemudian klik edit html
  • kemudian cari kode </head> caranya klik tulisan sembarang di dalam edit html kemudian tekan CTRL F lalu tinggal ketikan apa yang kamu cari
  • Masukkan kode di bawah ini di atas kode </head>


<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>


  • Jika sudah Silahkan masukkan kode css di bawah ini di atas kode ]]></b:skin> atau </style>


 /* CSS Button Download ---- https://www.candil.eu.org */
#wrap{margin:20px auto;text-align:center}
#wrap br{display:none}
.btn-slide-diru,.btn-slide2-diru{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s}
.btn-slide2-diru{border:2px solid #efa666}
.btn-slide-diru:hover{background-color:#0099cc}
.btn-slide2-diru:hover{background-color:#efa666}
.btn-slide-diru:hover span.circle,.btn-slide2-diru:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc}
.btn-slide2-diru:hover span.circle2{color:#efa666}
.btn-slide-diru:hover span.title,.btn-slide2-diru:hover span.title2{left:40px;opacity:0}
.btn-slide-diru:hover span.title-hover,.btn-slide2-diru:hover span.title-hover2{opacity:1;left:40px}
.btn-slide-diru span.circle,.btn-slide2-diru span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%}
.btn-slide2-diru span.circle2{background-color:#efa666}
.btn-slide-diru span.title,.btn-slide-diru span.title-hover,.btn-slide2-diru span.title2,.btn-slide2-diru span.title-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s}
.btn-slide2-diru span.title2,.btn-slide2-diru span.title-hover2{color:#efa666;left:80px}
.btn-slide-diru span.title-hover,.btn-slide2-diru span.title-hover2{left:80px;opacity:0}
.btn-slide-diru span.title-hover,.btn-slide2-diru span.title-hover2{color:#fff}

  • Kalau sudah di copy semua code code di atas jangan lupa klik Save.
  • Cara pemasangan atau penggunaan cukup mudah kamu pergi ke postingan lalu akan ada dua pilihan yaitu compose dan Html.Kemudian klik yang Html .
  • Setelah itu masukkan kode di bawah ini ke tempat yang Anda inginkan.

 <div id="wrap">
<a href="#" class="btn-slide-diru" 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 href="#" class="btn-slide2-diru" 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>
  • Hasilnya Bisa Kalian Lihat Tombol Di Bawah.
  • Jika Anda Pengguna Template Viomagz Atau Linkmagz, Ingin Menambahkan Tombol Download Cukup Gunakan Kode Script Di Bawah.
<a class="buttonDownload" href="#" rel="nofollow" target="_blank">Download</a> 


    

  • DAn Hasilnya Tombol DI Bawah
    • 









Mungkin Cukup Sekian Tutorial Blogger Dari Saya Mengenai Cara Membuat Tombol Demo Dan Download Keren Di Blogger, Nantikan Tutorial Selanjutnya Dari Saya, Semoga Bermanfaat.












        www.candilkuya.com 




































































































































Link copied to clipboard!