Cara Membuat Widget Tombol Social Media Melayang Disamping Blog - Nandea96
Artikel Terbaru
Loading...

Monday, 8 July 2019

Cara Membuat Widget Tombol Social Media Melayang Disamping Blog



Hy semua ketemu lagi dengan Dea. nah kali ini Dea 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 Dea 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...

Share with your friends

Give us your opinion

Selamat Datang Di Website Nandea96
Mohon untuk selalu mencuci tangan dengan air bersih serta sabun setiap 15 menit sekali agar terhindar dari covid-19 dan penyakit lainnya seperti diare. selalu gunakan masker ketika berpergian kemanapun 😷. meskipun itu hanya berbelanja sekitar 0.1 km atau ke tetangga. hindari kontak fisik dan beri jarak sekitar 2 meter dari jarak tempat kita berdiri dengan seseorang agar tidak memunculkan klaster baru yang tidak di-inginkan.

-Terimakasih 🙏-
Done