Cara Membuat Share Button Efek Show Hide Material Design

Cara Membuat Share Button Efek Show Hide Material Design

April 13, 2017
Cara Membuat/memasang Share Button Efek Show Hide Material Design keren di blog
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.
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
+
F
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.

Artikel Terkait

Next
« Prev Post
Previous
Next Post »

# Saya akan coba merespon komentar baru secepatnya.
# Harap berkomentar dengan bahasa baku tanpa singkatan.
# Komentar promosi, spam, dan komentar satu kalimat yang tidak bermutu akan saya hapus langsung.
# Jangan menggunakan nama pengomentar dengan nama yang berbau porno, judi, dan yang negatif lainnya.
# Setiap komentar akan dimoderasi secara manual sebelum muncul. EmoticonEmoticon

Langgan: Catat Ulasan (Atom)