Cara Membuat Share Button Efek Show Hide Material Design: Share Button atau biasa di sebut tombol share sosial media sudah tidak absurd lagi dengan kata ini, share button ialah aplikasi kecil yang sanggup kita di pasang pada blog/web dengan berupa sekumpulan isyarat CSS, HTML, dan juga JavaScript. Share button banyak mempunyai fariasi (style) yang berbeda, misalkan ibarat Widget Like Box Melayang Di Blog , sebenarnya kegunaanya sama yaitu untuk mempermudah pengunjung blog yang ingin melaksanakan sharing artikel ke sosmed mereka, bedanya hanyalah di lengkapi dengan tombol like namun tidak memakai efek show hide ibarat share button yang akan kita bahas ini.
Share button, banyak Designer-designer web yang mengembangkanya sehinggan mempunyai model masing-masing tombol share ini tergantung yang membuatnya. sedangkan untuk tombol yang aku bagikan ini memakai 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 terang kalau anda punya tekat niscaya bisa. hanya butuh kemampuan pemahan yang jeli.1. Silahkan shobat masuk ke Blogger>Tema>Edit Html, kemudian silahkan kau pastekan isyarat link CSS berikut sempurna di bawah isyarat <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'/> <script> $(window).load(function() { var buttonCircles = $(".nav-circle"); $(".btn-nav").on("tap click", function() { $(this).toggleClass("closed-nav") if ($(this).hasClass("closed-nav")) { slideDown(); } else { slideUp() } }); $(".round-circle").click(function() { $(".btn-nav").toggleClass("closed-nav"); 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'/> .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; } <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='"http://www.facebook.com/sharer.php?u=" + 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='"http://plus.google.com/share?url=" + 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='"http://twitter.com/share?url=" + 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 kau memasang Share Button ini pastikan sudah terpasang Link CSS Font Icon Awesome di template kamu.5. Terakhir silahkan kau Save tema/Simpan template kamu, kemudian lihat hasilnya.
- #contact Silahkan kau ganti dengan Url Contact Us kamu, atau kau bisa mengubahnya sesuai dengan selera kamu.
- Jika kau kreative kau niscaya bisa mengubah posisi Share Button ini.
- Jangan Lupa BackUp terlebih dahulu template blog kamu, untuk berjaga-jaga bila nanti terjadi error dalam pemasangan.
Oky mungkin sampe di sini dulu tutorial aku kali ini agar bisa bermanfaat bagi shabat bloggerku semua
kalau ada pertanyaan lain silahkan shobat berikan pertanyaan dalam bentuk komentar di bawah.
