Cara Membuat Fixed Share Button Show Hide Melayang With JQuery - Pada kesempatan kali ini admin akan memberikan sedikit trik ini mempercantik tampilan blog kalian, dengan menambahkan share button melayang yang keren dengan efek show hide.
Tutorial ini saya dapatkan dari blog master blogging, yaitu Kompi Ajaib. Tombol share ke sosial media ini berada dipojok kanan bawah halaman posting dengan posisi melayang. Tombol share button ini dilengkali dengan efek show hide yang mana button share to sosmed akan muncul beraturan dari bawah ke atas.
Button share ini masih belum support dengan template AMP, jadi jika kalian menginginkan button share melayang support AMP silahkan cari di Kompi Ajaib.
Jika kalian tertarik ingin mencobanya, silahkan ikuti tutorial berikut ini.
Cara Pemasangan
1. Simpan CSS dibawah ini sebelum kode </head>
Untuk memudahkan pencarian kode, bisa kalian gunakan pintasan dengan menekan tombol CTRL + F
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.fixed-button,.share_tool,.share_tool h4{height:50px;width:50px}
.share_tool{position:fixed;bottom:20px;right:20px;z-index:9999}
.fixed-button,.fixed-button li,.share_tool h4{position:absolute;bottom:0;margin:0;left:0;padding:0}
.share_tool h4{z-index:2}
.fixed-button{z-index:1}
.fixed-button:after{clear:both}
.fixed-button:after,.fixed-button:before{content:' ';display:table}
.fixed-button li{box-sizing:border-box;height:100%;line-height:50px;list-style:none;transition:all .3s ease-in-out;opacity:0}
.fixed-button li.fixed-line a,.fixed-button li.fixed-line a:hover{background-color:#00C300}
.fixed-button li.fixed-facebook a{background-color:#306199}
.fixed-button li.fixed-facebook a:hover{background-color:#244872}
.fixed-button li.fixed-tumblr a{background-color:#32506d}
.fixed-button li.fixed-tumblr a:hover{background-color:#22364a}
.fixed-button li.fixed-linkedin a{background-color:#007bb6}
.fixed-button li.fixed-linkedin a:hover{background-color:#005983}
.fixed-button li.fixed-twitter a{background-color:#26c4f1}
.fixed-button li.fixed-twitter a:hover{background-color:#0eaad6}
.fixed-button li.fixed-googleplus a{background-color:#e93f2e}
.fixed-button li.fixed-googleplus a:hover{background-color:#ce2616}
.fixed-button li.fixed-pinterest a{background-color:#b81621}
.fixed-button li.fixed-pinterest a:hover{background-color:#8a1119}
.fixed-button li.fixed-whatsapp a{background-color:#43d854}
.fixed-button li.fixed-whatsapp a:hover{background-color:#28c039}
.fixed-button li.fixed-bbm a,.fixed-button li.fixed-bbm a:hover{background-color:#000}
.fixed-button li a,.share_tool .show-share .show-less,.share_tool .show-share .show-more{background-color:#ccc;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;height:50px;padding:0;position:relative;text-align:center;text-decoration:none;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;width:50px;border-radius:100%;box-shadow:0 6px 12px rgba(0,0,0,.2)}
.share_tool .show-share .show-less,.share_tool .show-share .show-more{line-height:50px;margin:0;top:0;left:0;cursor:pointer;background-color:#2196f3}
.share_tool .show-share .show-less{display:none}
.fixed-button li a .fixed-icon{display:block;cursor:pointer}
.fixed-button li a .fixed-icon svg,.share_tool .show-share svg{height:24px;width:24px;vertical-align:middle}
.fixed-button li.fixed-googleplus a .fixed-icon svg{height:30px;width:30px}
.fixed-button li.fixed-line a .fixed-icon svg{height:44px;width:44px}
.fixed-button li.fixed-bbm a .fixed-icon svg{height:34px;width:34px}
.fixed-button li.fixed-bbm a,.fixed-button li.fixed-line a{padding:0}
.fixed-button li.fixed-bbm a .fixed-icon,.fixed-button li.fixed-line a .fixed-icon{padding-top:0}
.fixed-button li a .fixed-icon svg circle,.fixed-button li a .fixed-icon svg path,.share_tool .show-share svg path{fill:#fff}
.fixed-button li a .fixed-text{color:#fff}
.fixed-button li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}
.share_tool .show-share .rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-600deg);transform:rotate3d(0,0,1,-600deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-600deg);transform:rotate3d(0,0,1,-600deg);opacity:0}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}
}
/*]]>*/
</style>
</b:if>2. Kemudian tambahkan script dibawah ini sebelum kode </body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$(".share_tool .show-share .show-more").click(function() {
$(".share_tool .show-share .show-more").hide();
$(".share_tool .show-share .show-less").show();
$(".fixed-button li.fixed-facebook").css({
bottom: "468px",
opacity: "1"
});
$(".fixed-button li.fixed-twitter").css({
bottom: "416px",
opacity: "1"
});
$(".fixed-button li.fixed-googleplus").css({
bottom: "364px",
opacity: "1"
});
$(".fixed-button li.fixed-tumblr").css({
bottom: "312px",
opacity: "1"
});
$(".fixed-button li.fixed-linkedin").css({
bottom: "260px",
opacity: "1"
});
$(".fixed-button li.fixed-pinterest").css({
bottom: "208px",
opacity: "1"
});
$(".fixed-button li.fixed-whatsapp").css({
bottom: "156px",
opacity: "1"
});
$(".fixed-button li.fixed-line").css({
bottom: "104px",
opacity: "1"
});
$(".fixed-button li.fixed-bbm").css({
bottom: "52px",
opacity: "1"
});
});
$(".share_tool .show-share .show-less").click(function() {
$(".share_tool .show-share .show-more").show();
$(".share_tool .show-share .show-less").hide();
$(".fixed-button li.fixed-facebook,.fixed-button li.fixed-twitter,.fixed-button li.fixed-googleplus,.fixed-button li.fixed-tumblr,.fixed-button li.fixed-linkedin,.fixed-button li.fixed-pinterest,.fixed-button li.fixed-whatsapp,.fixed-button li.fixed-line,.fixed-button li.fixed-bbm").css({
bottom: "0",
opacity: "0"
})
})
});
//]]>
</script>
</b:if>3. Setelah itu cari kode seperti dibawah ini.
<b:includable id='post' var='post'>
...............
...............
...............
</b:includable>4. Jika sudah ketemu, letakkan HTML berikut ini dibawah kode </b:includable> tadi.
<b:if cond='data:blog.pageType == "item"'>
<div class="share_tool">
<h4 class='show-share'>
<div class="show-more rotateIn">
<svg viewBox="0 0 24 24">
<path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" fill="#000000"></path>
</svg>
</div>
<div class="show-less rotateIn">
<svg viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" fill="#000000"></path>
</svg>
</div>
</h4>
<ul class='fixed-button'>
<li class='fixed-facebook'>
<a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Share on Facebook'>
<span class='fixed-icon'>
<svg viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'><path d='M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z'/></svg>
</span>
</a>
</li>
<li class='fixed-twitter'>
<a expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Share on Twitter'>
<span class='fixed-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z'/></svg>
</span>
</a>
</li>
<li class='fixed-googleplus'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank' title='Share on Google+'>
<span class='fixed-icon'>
<svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M21 8.29h-1.95v2.6h-2.6v1.82h2.6v2.6H21v-2.6h2.6v-1.885H21V8.29zM7.614 10.306v2.925h3.9c-.26 1.69-1.755 2.925-3.9 2.925-2.34 0-4.29-2.016-4.29-4.354s1.885-4.353 4.29-4.353c1.104 0 2.014.326 2.794 1.105l2.08-2.08c-1.3-1.17-2.924-1.883-4.874-1.883C3.65 4.586.4 7.835.4 11.8s3.25 7.212 7.214 7.212c4.224 0 6.953-2.988 6.953-7.082 0-.52-.065-1.104-.13-1.624H7.614z'/></svg>
</span>
</a>
</li>
<li class='fixed-tumblr'>
<a expr:href='"http://tumblr.com/share/link?url=" + data:post.url + "&name=" + data:post.title + "&description=" + data:post.snippet' target='_blank' title='Share on Tumblr'>
<span class='fixed-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M18.02 21.842c-2.03.052-2.422-1.396-2.44-2.446v-7.294h4.73V7.874H15.6V1.592h-3.714s-.167.053-.182.186c-.218 1.935-1.144 5.33-4.988 6.688v3.637h2.927v7.677c0 2.8 1.7 6.7 7.3 6.6 1.863-.03 3.934-.795 4.392-1.453l-1.22-3.54c-.52.213-1.415.413-2.115.455z'/></svg>
</span>
</a>
</li>
<li class='fixed-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' target='_blank' title='Share on Linkedin'>
<span class='fixed-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/></svg>
</span>
</a>
</li>
<li class='fixed-pinterest'>
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank' title='Share on Pinterest'>
<span class='fixed-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z'/></svg>
</span>
</a>
</li>
<li class='fixed-whatsapp'>
<a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%3A%20" + data:post.url' target='_blank' title='Share on Whatsapp'>
<span class='fixed-icon'>
<svg height='90' viewBox='0 0 90 90' width='90' xmlns='http://www.w3.org/2000/svg'><path d='M90 43.84c0 24.214-19.78 43.842-44.182 43.842a44.256 44.256 0 0 1-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 0 1-6.34-22.637C1.635 19.63 21.415 0 45.818 0 70.223 0 90 19.628 90 43.84zM45.818 6.983c-20.484 0-37.146 16.535-37.146 36.86 0 8.064 2.63 15.533 7.076 21.61l-4.64 13.688 14.274-4.537A37.122 37.122 0 0 0 45.82 80.7c20.48 0 37.145-16.533 37.145-36.857S66.3 6.983 45.818 6.983zm22.31 46.956c-.272-.447-.993-.717-2.075-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.36-1.717-.54-2.438.536-.72 1.076-2.797 3.495-3.43 4.212-.632.72-1.263.81-2.347.27-1.082-.536-4.57-1.672-8.708-5.332-3.22-2.848-5.393-6.364-6.025-7.44-.63-1.076-.066-1.657.475-2.192.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.718.182-1.345-.09-1.884-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.793-2.436-1.793-.63 0-1.353-.09-2.075-.09-.722 0-1.896.27-2.89 1.344-.99 1.077-3.788 3.677-3.788 8.964 0 5.288 3.88 10.397 4.422 11.113.54.716 7.49 11.92 18.5 16.223 11.01 4.3 11.01 2.866 12.996 2.686 1.984-.18 6.406-2.6 7.312-5.107.9-2.513.9-4.664.63-5.112z'/></svg>
</span>
</a>
</li>
<li class='fixed-line'>
<a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target='_blank' title='Share on Line'>
<span class='fixed-icon'>
<svg class='icon icons8-LINE' viewBox='0 0 48 48'>
<path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23 C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
<path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185 c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001 C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687 C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/>
</svg>
</span>
</a>
</li>
<li class='fixed-bbm'>
<a expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + data:post.title' target='_blank' title='Share on Blackberry'>
<span class='fixed-icon'>
<svg class='icon BlackBerry-Icon' viewBox='0 0 5067 5067'>
<rect height='5067' rx='489' ry='489' style='fill: black;' width='5067'/>
<g>
<path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: nonzero;'/>
<path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/>
<path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
<path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/>
<path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
<path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
<path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z' style='fill: white;'/>
</g>
</svg>
</span>
</a>
</li>
</ul>
</div>
</b:if>5. Simpan Template.
Pastikan ditemplate yang kalian gunakan sudah terpasang JQuery Library, berapapun versinya tetap saja sama.
Sekian artikel dari Cara Membuat Fixed Share Button Show Hide Melayang With JQuery, jika kalian mempunyai pertanyaan seputar artikel ini silahkan tanyakan melalui kolom komentar dibawah artikel ini.
Terima Kasih
