7 September 2018 (Saturday, September 8, 2018)

Hai! Berikut ini adalah Cara untuk membuat Button dengan Effect Jingle menggunakan CSS :

• Buka Menu Themes, kemudian klik Edit HTML.
• Tambahkan Kode ini sebelum Kode </b:skin>
• Untuk memudahkan pencarian tekan Crtl dan F, ketik </b:skin> dan tekan Enter.

.built2bless-jingle-button {width: 180px; height: 60px;overflow: hidden;position: relative;cursor: pointer;margin: 10px;border-radius: 5px;text-align: center;box-shadow: 0 0 8px;} .built2bless-jingle-button-inside {background: #ff6600;font-size: 15px;text-align: center;color: #fff; position: absolute;top: 3px;left: 3px;} .built2bless-jingle-button-inside a{color: #fff; } .built2bless-jingle-button .built2bless-jingle-button-inside {width: 173px;line-height: 54px;border-radius: 5px;} .built2bless-jingle-button-effect {animation: jiggle 1.3s ease-in infinite;} @keyframes jiggle { 54%, 68% {transform: scale(1.0, 1.0)} 56% {transform: scale(1.2, 0.8)} 62% {transform: scale(0.8, 1.2) translate(0, -5px)} 65% {transform: scale(1.0, 1.0) translate(0, -3px)}} @keyframes built2bless-jingle-button-effect{ 0% {transform: translateX(0px) ;}100% {transform: translateX(-400px) ;}}

• Dan Gunakan Kode ini Menampilkan Button dengan Effect Jinggle :

<div class="built2bless-jingle-button built2bless-jingle-button-effect"><div class="built2bless-jingle-button-inside"><a href="URL / Link Anda" target="_blank">Nama Button</a></div>
</div>

• Contoh Hasil :

JINGGLE BUTTON

• Ganti Bagian URL / Link Anda dengan URL / Link Tujuan
• Dan Ganti Nama Button sesuai Nama Button Anda.
  

Semoga Bermanfaat, Happy Blogging :)

Tags : Blogger CMS (Content Management System)