Cara Membuat Widget Tombol Social Media Melayang Disamping Blog

Cara Membuat Widget Tombol Social Media Melayang Disamping Blog



Hy semua ketemu lagi dengan aku. nah kali ini aku akan memberikan sebuah tutorial tentang bagaimana cara membuat tombol social media melayang disamping blog. mungkin sudah banyak tutorial yang memberikan tombol social media melayang pada blog. akan tetapi banyak jenis - jenis style tombol social media yang bertebaran di internet. apa perbedaan tombol social media ini dengan tombol social media yang lain? sebenarnya tidak ada perbedaan dan fungsinya pun sama akan tetapi yang membuat berbeda jauh dengan tombol social media yang lain iyalah style yang digunakan. nah ingin mencoba tombol social media melayang pada samping blog ini? yuk ikuti dan simak tutorialnya dibawah ini..

Step By Step :

  • Pertama kalian harus membuka blog kalian terlebih dahulu. jika tidak maka kalian tak dapat mengedit blog kalian. click disini untuk mempercepat.
  • kemudian pergilah ke menu "Tata Letak".
  • Sekarang click tulisan "Add Gadget/Add Widget/Tambahkan Widget/Tambahkan Gadget"
  • Maka akan muncul kotak tabel kecil. disana pilih "HTML/JavaScript".
  • Setelah itu kalian akan dibawa ke tab selanjutnya. pada tab ini ada "Judul" dan "Konten" copy dan pastekan code dibawah ini tepat pada kolom "Konten" Tersebut.

    
    <style>
    .social-btns .btn,
    .social-btns .btn:before,
    .social-btns .btn .fa {
      -webkit-transition: all 0.35s;
      transition: all 0.35s;
      -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
              transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
    }
    .social-btns .btn:before {
      top: 90%;
      left: -110%;
    }
    .social-btns .btn .fa {
      -webkit-transform: scale(0.8);
              transform: scale(0.8);
    }
    .social-btns .btn.facebook:before {
      background-color: #3b5998;
    }
    .social-btns .btn.facebook .fa {
      color: #3b5998;
    }
    .social-btns .btn.twitter:before {
      background-color: #3cf;
    }
    .social-btns .btn.twitter .fa {
      color: #3cf;
    }
    .social-btns .btn.google:before {
      background-color: #dc4a38;
    }
    .social-btns .btn.google .fa {
      color: #dc4a38;
    }
    .social-btns .btn.pinterest-p:before {
      background-color: #cc2127;
    }
    .social-btns .btn.pinterest-p .fa {
      color: #cc2127;
    }
    .social-btns .btn.instagram:before {
      background-color: #25cf91;
    }
    .social-btns .btn.instagram .fa {
      color: #25cf91;
    }
    .social-btns .btn.rss:before {
      background-color: #ff7f00;
    }
    .social-btns .btn.rss .fa {
      color: #ff7f00;
    }
    .social-btns .btn:focus:before,
    .social-btns .btn:hover:before {
      top: -10%;
      left: -10%;
    }
    .social-btns .btn:focus .fa,
    .social-btns .btn:hover .fa {
      color: #fff;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    .social-btns {
      height: 80px;
      margin: auto;
      font-size: 0;
      text-align: center;
      position:fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right:0;
    }
    .social-btns .btn {
      display:block;
      background-color: #fff;
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin: 5px 100px;
      text-align:middle;
      position: relative;
      overflow: hidden;
      border-radius: 28%;
      box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
      opacity: 0.99;
    }
    .social-btns .btn:before {
      content: '';
      width: 120%;
      height: 120%;
      position: absolute;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
    }
    .social-btns .btn .fa {
      font-size: 38px;
      font-weight:auto;
      padding: 5px 0px;
    }
    </style>
    <!---Made By Chris Deacy --->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <div style="overflow:auto;width:100%;height:auto; right:90px">
    <div class="social-btns">
    <a class="btn facebook" href="URL AKUN FACEBOOK"><i class="fa fa-facebook"></i></a>
    <a class="btn twitter" href="URL AKUN TWITTER"><i class="fa fa-twitter"></i></a>
    <a class="btn google" href="URL AKUN GOOGLE"><i class="fa fa-google"></i></a>
    <a class="btn pinterest-p" href="URL AKUN PINTEREST"><i class="fa fa-pinterest-p"></i></a>
    <a class="btn instagram" href="URL AKUN INSTAGRAM"><i class="fa fa-instagram"></i></a>
    <a class="btn rss" href="URL AKUN FEEDBURNER"><i class="fa fa-rss"></i></a>
    </div>
    </div>
    <!--- Don't Remove This Line And Find Me On Codepen--->

  • Jika sudah maka click "Save/simpan" dan langkah terakhir ialah "Simpan setelan" (click tulisan "Simpan setelan" jika kalian lihat tulisan "Simpan setelan". jika tidak melihatnya maka abaikan).
  • Lalu cobalah untuk membuka blog kalian. apakah berhasil atau tidak? jika berhasil tuliskan komentar kalian dibawah ini jika tidak tulis juga komentar dibawah ini. agar aku dapat mengetahui kesalahannya.
Gantilah tulisan yang dicetak tebal serta miring tersebut dengan url akun kalian masing - masing. Jika Sudah maka cobalah untuk membuka blog kalian dan jangan Lupa Berkomentar Dibawah ini...