Cara Membuat Share Button Efek Show Hide Material Design

/>Cara Membuat Share Button Efek Show Hide Material Design: Share Button atau biasa di sebut tombol share sosial media sudah tidak asing lagi dengan kata ini, share button adalah aplikasi kecil yang dapat kita di pasang pada blog/web dengan berupa sekumpulan kode CSS, HTML, dan juga JavaScript. Share button banyak memiliki fariasi (style) yang berbeda, misalkan seperti Widget Like Box Melayang Di Blog , sebenarnya kegunaanya sama yaitu untuk mempermudah pengunjung blog yang ingin melakukan sharing artikel ke sosmed mereka, bedanya hanyalah di lengkapi dengan tombol like namun tidak menggunakan efek show hide seperti share button yang akan kita bahas ini.

Result

Share button, banyak Designer-designer web yang mengembangkanya sehinggan memiliki model masing-masing tombol share ini tergantung yang membuatnya. sedangkan untuk tombol yang saya bagikan ini menggunakan efek material design, apa lagi material design gini sudah merambat ke Designer-designer web, sehingga banyak yang mengembangkanya termasuk saya.

Cara Membuat Share Button Efek Show Hide Material Design

Untuk cara pemasanganya memang masih terbilang rumit, namun jelas jika anda punya tekat pasti bisa. hanya butuh kemampuan pemahan yang jeli.
1. Silahkan shobat masuk ke Blogger>Tema>Edit Html, lalu silahkan kamu pastekan kode link CSS berikut tepat di bawah kode <head>, untuk mempercepat pencarian silahkan klik tombol

CTRL

pada keyboard shobat.


  <link href='https://cdn.rawgit.com/BulshitMan-BM/ID-Dzgn/ce097e4e/Material.css' rel='stylesheet'/>

2. Nah jika sudah, selanjut kamu cari kode </body>, lalu copas kode berikut tepat di atasnya.


<script>
$(window).load(function() {
  var buttonCircles = $(&quot;.nav-circle&quot;);

  $(&quot;.btn-nav&quot;).on(&quot;tap click&quot;, function() {
    $(this).toggleClass(&quot;closed-nav&quot;)
    if ($(this).hasClass(&quot;closed-nav&quot;)) {
      slideDown();
    } else {
      slideUp()
    }
  });

  $(&quot;.round-circle&quot;).click(function() {
    $(&quot;.btn-nav&quot;).toggleClass(&quot;closed-nav&quot;);
    slideUp();
  })
//<![CDATA[
  function slideDown() {

    var topMargin = 20
    for (i = 0; i < buttonCircles.length; i++) {
      topMargin += 85
      $(buttonCircles[i]).animate({
        top: topMargin
      }, function() {
        $(".circle-container, .round-circle").css("visibility", "visible");
        if ($(".fa-plus").hasClass("unRotateIcon")) {
          $(".fa-plus").removeClass("unRotateIcon").addClass("rotateIcon");
        } else {
          $(".fa-plus").addClass("rotateIcon");
        }

      })
    }
  }

  function slideUp() {
    var resetTop = 20
    for (i = 0; i < buttonCircles.length; i++) {
      $(buttonCircles[i]).animate({
        top: resetTop
      }, 400, function() {
        $(".circle-container, .round-circle").css("visibility", "hidden");
        if ($(".fa-plus").hasClass("rotateIcon")) {
          $(".fa-plus").removeClass("rotateIcon").addClass("unRotateIcon");
        } else {
          $(".fa-plus").addClass("unRotateIcon");
        }
      })
    }
  }

});//]]></script>
<div style='clear: both;'/>   <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js'/>

3. Jika sudah sekarang silahkan kamu cari kode bebas ]]></b:skin> atau bisa juga </style> dan paste kode berikut tepat di atasnya.


  .btn-nav {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #000 !important;
  z-index: 9999;
  height: 60px !important;
  width: 60px !important;
  line-height: 80px !important;
}

.fa-plus {
  color: #fff !important;
  font-size: 2em !important;
  margin-top: 11px;
  font-weight: 300;
}

.plus-container {
  border: 1px solid #fff;
  margin-top: 100px;
  text-align: center;
}

.fa-exp {
  font-size: 6em;
  margin: 0 auto;
  display: block;
}

.round-circle {
  border-radius: 50%;
  background-color: #228a9c;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 20px;
  text-align: center;
  line-height: 80px;
  visibility: hidden;
}

.round-circle > a {
  height: 80px;
  width: 80px;
}
.facebook {    background: rgba(0, 88, 255, 0.83);}
.gplus {background:#de0d00;}
.twitter {background: #00c0dc;}
.phone {    background: #09d248;}
.circle-container {
  visibility: visible;
  position: absolute;
  height: 400px;
  left: 20px;
  width: 100px;
}

.first-circle {
  z-index: 4;
}

.second-circle {
  z-index: 3;
}

.third-circle {
  z-index: 2;
}

.forth-circle {
  z-index: 1;
}

.fixed-container {
  position: fixed;
  z-index: 99999;
  display: block;
}

.fa-nav {
  color: #fff;
  font-size: 25px;
  margin-top: 18px;
}

@-webkit-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-moz-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-o-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

.rotateIcon {
  -webkit-animation-name: rotateIcon;
     -moz-animation-name: rotateIcon;
       -o-animation-name: rotateIcon;
          animation-name: rotateIcon;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
}

@-webkit-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@-moz-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@-o-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

.unRotateIcon {
  -webkit-animation-name: unRotateIcon;
     -moz-animation-name: unRotateIcon;
       -o-animation-name: unRotateIcon;
          animation-name: unRotateIcon;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
}

.ua {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #fff;
  font-size: 2em;
}

.fa {
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}

.ua:hover .fa {
   color: #67809F;
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -ms-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}
ul { list-style-type:none; margin:0; padding:0; }

4. Nah jika ketiga tahap di atas sudah kamu selesaikan, sekarang kamu tinggal melakukan tahap terakhir (Memasang Html Share Button), silahkan kamu cari tag pembuka body <body lalu pastekan kode Html berikut tepat di bawahnya.


<div class='fixed-container'>
  <a class='btn-floating btn-large waves-effect waves-light circle btn-nav' rel='nofollow noreferrer'><i class='fa fa-plus' id='icon'/></a>
  <div class='circle-container'>
    <div class='round-circle nav-circle waves-effect waves-teal first-circle facebook'>
    <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Share To Facebook'><i class='fa fa-nav fa-facebook'/></a>
    </div>
    <div class='round-circle nav-circle waves-effect waves-teal second-circle gplus'>
      <a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Share To Google+'><i class='fa fa-nav fa-google-plus'/></a>
    </div>
    <div class='round-circle nav-circle waves-effect waves-teal third-circle twitter'>
            <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share To Twitter'><i class='fa fa-nav fa-twitter'/></a>
    </div>
    <div class='round-circle nav-circle waves-effect waves-teal forth-circle phone'>
      <a href='#contact' rel='nofollow noreferrer'><i class='fa fa-nav fa-phone'/></a>
    </div>
  </div>
</div>

- Sebelum kamu memasang Share Button ini pastikan sudah terpasang Link CSS Font Icon Awesome di template kamu.
- #contact Silahkan kamu ganti dengan Url Contact Us kamu, atau kamu bisa mengubahnya sesuai dengan selera kamu.
- Jika kamu kreative kamu pasti bisa mengubah posisi Share Button ini.
- Jangan Lupa BackUp terlebih dahulu template blog kamu, untuk berjaga-jaga bila nanti terjadi error dalam pemasangan.

5. Terakhir silahkan kamu Save tema/Simpan template kamu, lalu lihat hasilnya.

Oky mungkin sampe di sini dulu tutorial saya kali ini semoga bisa bermanfaat bagi shabat bloggerku semua
jika ada pertanyaan lain silahkan shobat berikan pertanyaan dalam bentuk komentar di bawah.

0 Komentar untuk "Cara Membuat Share Button Efek Show Hide Material Design"

~ Peraturan Fcips ~

=> Bebas Link Hidup Hapus , Kalau mau pakai , pakai link mati Gunakan Dgn ,[ [dot] dll
=> Spam Komentar Komentar Akan dihapus permanen
=> Gunakan Kata Sopan
=> Harigailah Kami Punya Blog Ini

~ Terimahkasih ~

Cara Membuat Share Button Efek Show Hide Material Design

Cara Membuat Share Button Efek Show Hide Material Design

0 Komentar untuk "Cara Membuat Share Button Efek Show Hide Material Design"

Popular Posts

Sponsor Iklan

Blog Archive