Cara Memasang Tombol Share Responsive Tanpa Google Plus
Tombol share media sosial responsive dengan svg keren dan simpel, tanpa tombol google plus
Kenapa tombol share media sosial ini tanpa tombol google plus?
Karena pada tanggal 2 April 2019 google plus akan resmi menutup semua akun yang berkaitan dengan google plus.
Nah, agar tidak terjadi kesalahan atau broken link pada blog sobat, maka sobat harus mengahapus tombol share google plus dari blog sobat.
Bagi sobat yang ingin memasang tombol share media sosial pada blog sobat tanpa google plus kebetulan ni pada kesempatan kali ini saya akan berbagi cara untuk membuat tombol share tanpa google plus.
Tombol share media sosial keren ini dibuat hanya menggunakan CSS dan HTML saja, jadi tidak akan membuat loading blog sobat menjadi lambat.
Ditambah lagi, tombol share keren ini dibuat menggunakan SVG icon bukan menggunakan Fontawesome, jadi loading akan semakin cepat.
Satu hal lagi sebelum kita masuk ke cara memasang tombol share media sosial pada blog, ada baiknya sobat membackup dulu template sobat masing-masing, jaga-jaga agar jika terjadi error sobat bisa merestore template sobat.
Nah, sekarang bagaimana cara untuk memasang tombol share media sosial keren di blog?
Ikuti langkahnya berikut ini:
Cara Memasang Tombol Share Media sosial Responsive Keren Abis:
1. Pertama sobat harus masuk dulu ke blogger - template- Edit HTML.2. jika pada template sobat ada sudah terdapat tombol share media sosial, silahkan hapus terlebih dahulu agar tidak bentrok kode nya nanti.
3. jika sudah, sekarang copy CSS dibawah ini diatas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.share_responsive{position:relative;height:40px;margin:20px 0!important;padding:0}
.share-btn,.share-btn li,.share_responsive h4{margin:0;padding:0}
.share_responsive h4{height:40px;width:10%;position:absolute;top:0;left:0;z-index:2}
.share-btn{height:40px;padding:0;margin:0!important;width:100%;}
.share-btn:after{clear:both}
.share-btn:after,.share-btn:before{content:' ';display:table}
.share-btn li{box-sizing:border-box;width:10%;height:100%;line-height:40px;padding:0!important;margin:0!important;list-style-type:none!important;transition:all .3s ease-in-out;float:left;border:0!important}
.share-btn li.btn-line a,.share-btn li.btn-line a:hover{background-color:#00C300}
.share-btn li.btn-facebook a{background-color:#306199}
.share-btn li.btn-facebook a:hover{background-color:#244872}
.share-btn li.btn-tumblr a{background-color:#32506d}
.share-btn li.btn-tumblr a:hover{background-color:#22364a}
.share-btn li.btn-linkedin a{background-color:#007bb6}
.share-btn li.btn-linkedin a:hover{background-color:#005983}
.share-btn li.btn-twitter a{background-color:#26c4f1}
.share-btn li.btn-twitter a:hover{background-color:#0eaad6}
.share-btn li.btn-pinterest a{background-color:#b81621}
.share-btn li.btn-pinterest a:hover{background-color:#8a1119}
.share-btn li.btn-whatsapp a{background-color:#43d854}
.share-btn li.btn-whatsapp a:hover{background-color:#28c039}
.share-btn li a,.share_responsive .show-share .show-more{background-color:#ccc;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;height:40px;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;}
.share_responsive .show-share .show-more{line-height:40px;width:100%;float:left;margin:0;top:0;left:0;cursor:pointer;background-color:#2196f3;position:absolute;top:0;left:0;z-index:2}
.share_responsive .show-share .share-text{font-size:16px;width:0%;height:40px;line-height:40px;overflow:hidden;background:#efefef;position:absolute;top:0;right:0;left:10%;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition: width 2s;transition: width 2s;z-index:1}
.share_responsive .show-share:hover{width:100%;}
.share_responsive .show-share:hover .show-more{width:10%;}
.share_responsive .show-share:hover .share-text{width:90%;padding:0 10px;}
.share-btn li a .btn-icon{display:block;cursor:pointer}
.share-btn li a .btn-icon svg,.share_responsive .show-share svg{height:24px;width:24px;vertical-align:middle}
.share-btn li.btn-googleplus a .btn-icon svg{height:30px;width:30px}
.share-btn li.btn-line a .btn-icon svg{height:44px;width:44px}
.share-btn li.share-btn li.btn-line a{padding:0}
.share-btn li.btn-icon,.share-btn li.btn-line a .btn-icon{padding-top:0}
.share-btn li a .btn-icon svg circle,.share-btn li a .btn-icon svg path,.share_responsive .show-share svg path{fill:#fff}
.share-btn li a .btn-text{color:#fff}
.share-btn li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}
@media screen and (max-width:414px){
.share-btn li a .btn-icon svg,.share_responsive .show-share svg{height:18px;width:18px;vertical-align:middle}
.share-btn li.btn-line a .btn-icon svg{height:38px;width:38px}
}
@media screen and (max-width:375px){
.share-btn li a .btn-icon svg,.share_responsive .show-share svg{height:14px;width:14px;vertical-align:middle}
.share-btn li.btn-googleplus a .btn-icon svg{height:20px;width:20px}
.share-btn li.btn-line a .btn-icon svg{height:30px;width:30px}
.share_responsive,.share_responsive h4,.share-btn,.share-btn li a,.share_responsive .show-share .show-more,.share_responsive .show-share .show-more,.share_responsive .show-share .share-text{height:30px;}
.share-btn li,.share_responsive .show-share .show-more,.share_responsive .show-share .share-text{line-height:30px;}
.share_responsive .show-share .share-text{font-size:12px;}
}
/*]]>*/
</style>
</b:if>
4. jika sudah lanjut ke langkah berikutnya, silahkan copy Kode dibawah ini
diatas kode:
<b:includable id='shareButtons' var='post'>
<b:includable id='share-btn-responsive' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<div class="share_responsive">
<h4 class='show-share'>
<div class="show-more">
<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="share-text">Share this post, please!</div>
</h4>
<ul class='share-btn'>
<li class='btn-blank'></li>
<li class='btn-facebook'>
<a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Share on Facebook'>
<span class='btn-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='btn-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='btn-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='btn-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='btn-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='btn-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' target='_blank' title='Share on Linkedin'>
<span class='btn-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='btn-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='btn-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='btn-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='btn-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='btn-line'>
<a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target='_blank' title='Share on Line'>
<span class='btn-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>
</ul>
</div>
</b:if>
</b:includable>
5. Langkah terkahir tinggal pasang pemanggil tombol share media sosial responsive dibawa postingan atau bisa juga diatas postingan.
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='share-btn-responsive'/>
</b:if>
6. untuk pengguna template viomags bisa cari kode berikut:
<b:include data='post' name='postsharebutton'/>
kemudian ganti dengan kode berikut:
<b:include data='post' name='share-btn-responsive'/>
7. silahkan save template sobat dan lihat hasilnya.
Demikian Cara Memasang Tombol Share Responsive Tanpa Google Plus yang dapat saya bagikan, semoga dapat membantu.
Tags:
widget