Membuat button keren dengan css di blogger

RuangService.com - Membuat button keren dengan css di blogger - Terkadang blogger perlu menyediakan tautan unduhan eksternal atau tautan demo dan mereka menggunakan tag jangkar untuk itu, namun, untuk menarik pembaca mengklik tautan , demo, dan tombol unduh dapat bermanfaat.

Sangat mudah untuk membuat tombol di blogger dengan memanggil tag atau menggunakan fitur CSS seperti padding, border dan sebagainya.

Dalam tutorial ini, saya akan membagikan Cara Membuat button keren dengan css di blogger Tombol Demo dan Unduhan CSS Murni berbasis CSS sederhana namun efektif untuk blogger yang terlihat memukau dan sangat cocok dengan desainnya. Mari kita periksa beberapa fitur keren.

Fitur Demo CSS Bergaya dan Tombol Unduh untuk Blogger

Pure CSS.
Ringan.
Font Ikon mengagumkan digunakan.
Kombo sederhana HTML dan CSS.
Efek Arahkan Keren.
Teks juga berubah saat mengarahkan kursor.
Mudah untuk disesuaikan.

Demo Tombol CSS

Ini adalah versi tombol statis. Terapkan di blog Anda untuk memeriksa efek hover.

Bagaimana cara menambahkan tombol demo dan unduhan berbasis CSS di blogger?

Dibandingkan dengan CMS lain , blogger membutuhkan lebih banyak penyesuaian karena tidak mendukung penambahan plugin eksternal. Oleh karena itu, kami harus menambahkan tombol demo dan unduh yang bergaya di blog blogger kami dengan menyesuaikan [template blogger] kami saat ini

Langkah 1: Menambahkan Font Keren ke Blogger

Ini adalah langkah opsional jika Anda sudah menginstal font awesome di blog blogger Anda . Jika tidak, buka Template > Edit HTML > Cari dan tempel kode berikut di atasnya.

Catatan: Cadangkan template Anda sebelum melanjutkan.

<script type='text/javascript'>  
//<![CDATA[  
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }  
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");  
//]]>  
</script>  
<noscript>  
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>  
</noscript>

Langkah 2: Menambahkan Kode CSS Demo Dan Tombol Unduh

Sekarang, kita akan menambahkan kode CSS ke template. Cari ]]></b:skin> dan tambahkan kode CSS berikut di atasnya.

/* CSS Demo & Download Buttons By (www.TwistBlogg.com) */ 
.bie-slide,  
 .bie-slide2 {  
  position: relative;  
  display: inline-block;  
  height: 40px;  
  width: 170px;  
  line-height: 40px;  
  padding: 0;  
  border-radius: 50px;  
  background: #fdfdfd;  
  border: 2px solid #f84f4f;  
  margin: 10px;  
  transition: all 0.5s ease-in-out;  
 }  
 .bie-slide2 {  
  border: 2px solid #36D7B7;  
 }  
 .bie-slide:hover {  
  background-color: #f84f4f;  
 }  
 .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: #f84f4f;  
 }  
 .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: 28px;  
 }  
 .bie-slide span.circle,  
 .bie-slide2 span.circle2 {  
  display: block;  
  background-color: #f84f4f;  
  color: #fff;  
  position: absolute;  
  float: left;  
  margin: 5px;  
  line-height: 30px;  
  height: 30px;  
  width: 30px;  
  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: 65px;  
  text-align: center;  
  margin: 0 auto;  
  font-size: 16px;  
  font-weight: bold;  
  color: #f84f4f;  
  transition: .5s;  
 }  
 .bie-slide2 span.title2,  
 .bie-slide2 span.title-hover2 {  
  color: #36D7B7;  
 }  
 .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;  
 }

Langkah 3: Menambahkan bagian HTML ke posting blogger

Rekatkan kode HTML berikut ke posting tempat Anda ingin menampilkan tombol unduh dan demo.

<div id="wrap" style="text-align:center">  
<a class="bie-slide" href="#" rel="no-follow" target="_blank">  
  <span class="circle"><i class="fa fa-laptop"></i></span>  
  <span class="title">Live Demo</span>  
  <span class="title-hover">Click here</span>  
</a>  
<a class="bie-slide2" href="#" rel="nofollow" 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>
Atau, Anda dapat menggunakannya secara terpisah.

Untuk Tombol Demo:


<div id="wrap" style="text-align:center">  
<a class="bie-slide" href="#" rel="no-follow" target="_blank">  
  <span class="circle"><i class="fa fa-laptop"></i></span>  
  <span class="title">Demo</span>  
  <span class="title-hover">Click here</span>  
</a>  
</div>

Untuk Tombol Unduh:

<div id="wrap" style="text-align:center">  
<a class="bie-slide2" href="#" rel="nofollow" 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>
Anda dapat dengan mudah mengubah ikon dengan mengubah <i class="fa fa-laptop"></i> dan <i class="fa fa-download"></i>. Jelajahi lebih banyak ikon font keren dari sini .

Selesai. Anda telah berhasil memasang tombol demo bergaya dan tombol unduh di blogger . Karena kami membuatnya dengan CSS murni, mereka tidak akan memengaruhi kecepatan halaman. Tetap disini dan semoga sukses dengan blogging.