Memasang Widget Social Media Tanpa Font Awesome

Athhar Kautsar 6/23/2017 blogger, widget

Di artikel saya yang memasang widget social media ada yang meminta dibuatkan widget social media yang lebih simple atau tidak memakai font-awesome. Jadi pada artikel kali ini saya akan share widget social media tanpa font awesome. //as your wish

Widget ini saya berikan efek hover yang bergerak ke kanan dan kekiri saat mouse berada diatas logo sosial media tersebut (facebook, instagram, twitter, google plus)

Untuk lebih jelasnya silahkan kalian lihat demonya di link yang sudah saya sediakan di bagian bawah artikel.

Tapi saya lebih menyarankan kalian memakai widget sosial media yang memakai font awesome, karena widget tersebut lebih ringan daripada widget sosial media yang tidak menggunakan font awesome

Memasang Widget Social Media Tanpa Font Awesome

1. Masuk ke blogger > Tema > Edit HTML, salinlah kode dibawah dan simpan diatas kode </style> atau ]]></b:skin>

CSS/* CSS SOCMED BY ATHHARKAUTSAR.COM */
.socmed{margin:5px auto;width:255px}
.aa-fb, .aa-tw, .aa-ig, .aa-gp{width:50px;height: auto;background: #fff;border-radius:50%;box-shadow:0px 0px 5px #888888;}
.socmed a{ margin:5px;display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);}
.socmed a:hover, .socmed a:focus, .socmed a:active{-webkit-animation-name: hvr-buzz-out;animation-name: hvr-buzz-out;-webkit-animation-duration: 0.75s;animation-duration: 0.75s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;}
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

2. Masuk ke bagian Tata Letak > Tambah Gadget > HTML/Javascript lalu salin dan simpan kode dibawah ini didalam kolom konten.

HTML<div class='socmed'>
  <a title='Facebook' target="_blank" href="#"><img class='aa-fb' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vuS41IrlZrIAzV00d6e9gCOwDuKZlhC01pBDg6-F6lpyNFdkDnkyBLI4AQjZKJ5OjldXRjo1_BmtI-8NxMUOhvTn8scWlYcdkpjKcWsxjvQrD5P2wCDHMeZn9AkS5K07SJNrJ_98LmCS/s1600/fb.png" alt="Facebook" /></a>
  <a title='Twitter' target="_blank" href="#"><img class='aa-tw' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUaUFDCRybxgUUQ7RFcX9N0eZ6J8zSBZPIytVpCof-IJ69V2_VI1afLgJg1r8se7ThApeNsPgR6i2NzhwsEPv-mn5cX4WuxMD6y1YQkTBdbtiR22uByqekmei3o8K9FWAD_sb_4eV4f8yH/s1600/twitter.png" alt="Twitter" /></a>
  <a title='Instagram' target="_blank" href="#"><img class='aa-ig' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi34bMkY2T7e4ANK3BtnYbyW-UajfOAokUPB8GoSH-7lquOI44TJgm8X9Zs0Ea0u9_ivHNdNpmU2zZImoc_NjVqBZJ5Q4Dxf55Tlsf4Ft2XreemYs08siJ8VZCJqWSPUBl9wEMAUO4pYz7S/s1600/instagram.png" alt="Instagram" /></a>
  <a title='Google Plus' target="_blank" href="#"><img class='aa-gp' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFXDDFSapSIXsc8NV1CnLNypRAPE8UnIPrPhITr_NXl0WvoLgFlEd9_i7ErPfzgSp7AzI2-rDdI4fmU9TdsWiiSO1eNvSuc4c8NaFkZrgAP2bYWm9eSIqXJt6RXtuVLT5No2nIUxiiBbO/s1600/google%252B.png" alt="Google Plus" /></a>
</div>

3. Klik simpan dan lihat hasilnya..