Cara Membuat Tombol Responsive Di Blogger

Hi... Dipostingan kali ini saya mau membahas Cara Membuat Tombol Responsive Di Blogger. Tombol Responsive ini bisa diterapkan di halaman blog atau didalam postingan blog anda. 

Cara Membuat Tombol Responsive ini berlaku juga buat anda yang sedang mencari cara membuat tombol Download dipostingan Blog atau Mencari Cara membuat Tombol Demo Keren Di Blog. 

Tombol ini sangat Responsive menyesuaikan dengan device yang dipakai user saat mengakses halaman blog yang menggunkan tombol Responsive ini. hmm Namanya Juga tombol Responsive ya pasti responsivelah wkwkw. 

Penasaran dengan Tampilan  Tombol yang akan kita buat ? Berikut ini adalah Demonya:

Demo Demo Download Download Password Password Zip

untuk membuat Tombol Keren Responsive di Blog dengan slick material design seperti diatas sangat mudah sekali. cukup dengan beberapa langkah saja anda sudah bisa membuat tombol tersebut. Yuk Kita akan langsung saja Ke Praktek

Cara Membuat Tombol Demo dan Download 1
Tombol ini menggunakan font awesome, maka langkah pertama yang harus anda lakukan yaitu menambahkan link CSS berikut. Silahkan buka template editor blog anda, silahkan cari kode </head> dan letakkan kode di bawah ini tepat di atas kode tersebut.

 <pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre> 

Kemudian, silahkan cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat sebelumnya atau di atas kode ]]></b:skin>

 #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; }   

Selanjutnya silahkan simpan template.

Langkah selanjutnya, untuk penerapannya di dalam postingan artikel silahkan gunakan kode di bawah ini dalam mode HTML.

 <div id="wrap">
<a class="bie-slide" href="Link / URL Demo" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Demo</span>
</a>
<a class="bie-slide2" href="URL Download/Link Download" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Download</span>
</a>
<a class="bie-slide" href="Link Password Jika ada" target="_blank">
  <span class="circle"><i class="fa fa-key"></i></span>
  <span class="title">Password</span>
  <span class="title-hover">Password Zip</span>
</a>
</div>   

Keterangan:
silahkan Ganti Link Redirect dengan Link Atau URL Tujuan Tombol sesuai dengan keinginan anda.

Nah Itulah beberapa Cara Membuat Tombol Responsive Di Blogger. Jika Postingan ini bermanfaat silahkan Share dan Jika ada yang kurang jelas silahkan Sampaikan dikolom komentar dibawah.

Salam Hangat Dari Saya :)

Share this post

Berlangganan update artikel terbaru via email: