Cara Menambahkan Efek Jinggle Pada Tombol Button

Cara Menambahkan Efek Jinggle pada Tombol download,demo dll - Untuk anda yang tertarik dengan efek keyframes Jinggle yang dimana tombol tersebut bisa bergerak gerak,dan mungkin anda juga pernah melihat dengan efek ini di beberapa blog yang pernah anda kunjungi

Untuk anda para blogger mungkin tertarik dengan Efek Keyframe Jinggle ini karena Efek Jinggle ini mampu membuat para pengujung takjub dengan meng gunakan efek ini,dan biasa nya efek jinggle ini di terapkan di beberapa tombol seperti pada Tombol Download ataupun pada tombol Demo

Namun itu semua tergantung kepada pemiliki blog,mau di terapkan di mana efek jinggle  tersebut yang menurut nya akan membuat blog nya menjadi menarik sehingga akan membuat para pengujung menjadi betak berada di blog tersebut

Cara Menambahkan Efek Gerak Jinggle pada Tombol Download atau Demo

Untuk penampilan dari efek jinggli ini bisa anda perhatikan pada gambar di bawah ini

Click Me !

Dan jika anda tertarik untuk menggunakan Efek Jinggli ini di blog tepat nya di bagian halaman postingan anda,anda dapat mengikuti cara penambahan efek jinggli pada tombol button di bawah ini,

• Silahkan anda masuk ke Dashboard Blogger
• Kemudian silahkan klik Template yang berada di bagian kiri dashboard blogger
• Kemudian klik Edit Html
• Setelah anda berada di bagian edit html,silahkan letakan kode css berikut

.info-trens-square {
 width: 200px; height: 80px;
 overflow: hidden;
 position: relative;
 cursor: pointer;
 margin: 15px;
 border-radius: 6px;
 float: left;
  box-shadow: 0 0 10px;
}
.anim {
  animation: jiggle 1s ease-in infinite;
}
@keyframes jiggle {
  48%, 62% {
    transform: scale(1.0, 1.0)
  }
  50% {
    transform: scale(1.1, 0.9)
  }
  56% {
    transform: scale(0.9, 1.1) translate(0, -5px)
  }
  59% {
    transform: scale(1.0, 1.0) translate(0, -3px)
  }
}
.info-trens-circle {
 width: 80px; height: 80px;
 overflow: hidden;
 position: relative;
 cursor: pointer;
 margin: 15px;
 border-radius: 100%;
 float: left;
}
.info-trens {
 background: #1d1d1d;
 font-family: 'Orbitron', sans-serif;
 font-size: 1.2em;
 text-align: center;
 color: #fff; 
 position: absolute;
 top: 3px;
 left: 3px;
}
.info-trens-square .info-trens {
 width: 194px;
 line-height: 74px;
 border-radius: 5px;
}
.info-trens-circle .info-trens {
 width: 74px; height: 74px;
 border-radius: 100%;
}
/*=================*/
/*====GRADIENT====*/
.gradient, .gradient:after {
 display: block;
 content: "";
 width: 400px; height: 80px;
 background: #bd328f;
 background: -moz-linear-gradient(-45deg,  #bd328f 0%, #bd328f 18%, #2976ab 42%, #292f75 62%, #bd328f 82%, #bd328f 100%);
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#bd328f), color-stop(18%,#bd328f), color-stop(42%,#2976ab), color-stop(62%,#292f75), color-stop(82%,#bd328f), color-stop(100%,#bd328f));
 background: -webkit-linear-gradient(-45deg,  #bd328f 0%,#bd328f 18%,#2976ab 42%,#292f75 62%,#bd328f 82%,#bd328f 100%);
 background: -o-linear-gradient(-45deg,  #bd328f 0%,#bd328f 18%,#2976ab 42%,#292f75 62%,#bd328f 82%,#bd328f 100%);
 background: -ms-linear-gradient(-45deg,  #bd328f 0%,#bd328f 18%,#2976ab 42%,#292f75 62%,#bd328f 82%,#bd328f 100%);
 background: linear-gradient(135deg,  #bd328f 0%,#bd328f 18%,#2976ab 42%,#292f75 62%,#bd328f 82%,#bd328f 100%);
}
.gradient {
 animation: 8s anim linear infinite;
}
.gradient:after {
 transform: translateX(400px);
}
@keyframes anim{
 0% {transform: translateX(0px) ;}
 100% {transform: translateX(-400px) ;}


}

• Kemudian Save template

Penerapan Efek Jinggle di postingan blog

Setelah anda memasang CSS di atas di bagian template,dan untuk penerapan efek ini antara lain letakan kode berikut ketika anda membuat postingan,letakan kode berikut di bagian HTML nya bukan di bagian Compose

<div class="info-trens-square anim">
  <div class="gradient"></div>
  <div class="info-trens"><a href="https://www.roomahtips.blogspot.com">Click Me !</a></div>
</div></div>

Silahkan anda ganti URL https://www.roomahtips.blogspot.com dengan Url yang anda inginkan
Nah itulah cara membuat Efek Jinggle pada tombol Button di postingan blog,semoga artikel nya bisa membantu sobat blogger semua,salam blogger

• SHARES
• Share
• Tweet
• Share
• Share

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by D2Ubed, Published at September 19, 2017 and have 0 komentar