Cara Menciptakan Tombol Share Melayang Responsive Di Blog
Tutorial Cara Memasang Tombol Share Facebook Melayang Di Samping Blogger
Cara Membuat Tombol Share Melayang di Setiap Postingan Blog, Pada kesempatan kali ini mas tamvan akan share widget social media sharing button melayang (Sticky / Fixed) di blogger ditambah dengan Popup Subscribe Box Untuk Berlangganan via Email
Tombol Social Share Button ini cukup simple dan tentunya tiak terlalu memberatkan loading blog, sebab kita akan memasangnya di bawah HTML. Ketika blog di load maka akan membaca arahan di atasnya terlebih dahulu.
Sebelumnya saya juga sudah pernah share beberapa artikel terkait perihal social media untuk blogger. Kalian dapat lihat di link berikut ini
Tutorial Blogger Lainnya :
Buat kalian yang ingin melihat tampilan dari Tombol share Melayang / Fixed ini dapat liat di link Demo Social Media Sharing Button Sticky, Tapi pada demo tersebut saya menciptakan popupnya terbua dikala web / halaman d muat. Kalo untuk di pasang ke blog popupnya muncul dikala di klik :)
Okeh, kini lanjut ke tutorial pemasangannya gan
Tombol Share Melayang Di Samping Kanan / Kiri Blog
- Silahkan login ke akun blogger kalian
- Lalu masuk ke hidangan Template → Edit HTML Lalu cari arahan </head>
- Kalo udah ketemu, masukan css dibawah ini sempurna diatasnya
<style type="text/css"> .sosmed{padding:0;margin:0;position:fixed;right:-119px;top:20%;width:200px} .sosmed input#hideshare,.sosmed input#openall{display:none} .sosmed ul,.sosmed ul li{list-style:none;list-style-type:none} .sticky li.openall{margin:0;padding:0} .sticky li.share{background-color:#333;color:#efefef;height:43px;padding:0;margin:0 0 1px 0;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;cursor:pointer} .sticky li.share:hover{margin-left:-10px;-webkit-transform:translateX(-115px);-moz-transform:translateX(-115px);-o-transform:translateX(-115px);-ms-transform:translateX(-115px);transform:translateX(-115px)} .sticky li.share i{float:left;margin:11px;margin-right:15px;color:white;font-size:20px} .sticky li.share b{padding:0;margin:0;text-transform:uppercase;line-height:43px} .sticky li a{text-decoration:none;color:white} .sosmed li.facebook{background:#3b5999} .sosmed li.twitter{background:#55acee} .sosmed li.google{background:#dd4b39} input:checked#hideshare li.share,input:checked#hideshare li.openall{display:none} label span.show,.sosmed li.openall label{position:relative;cursor:pointer;display:block;width:43px;font-size:20px} .sosmed li.openall label{text-align:center;background:#bbb;color:white} input:checked#hideshare label span.show{padding:5px;text-align:center} label span.show:after{content:'\f105';font-family:FontAwesome} input:checked#hideshare label span.show:after{content:'\f104'} /*Popup*/ input:checked#openall .allsosmed{position:fixed;top:20%;left:20%;right:20%;background:#fafafa;transition:opacity 500ms;width:50%;margin:0 auto;padding:2%;box-sizing:border-box;-webkit-transition:width 2s;/* Safari */ transition:width 2s;z-index:999;box-shadow:0 0 15px rgba(0,0,0,.1);overflow:auto;max-width:500px} @media screen and (max-width:700px){input:checked#openall .allsosmed{left:10%;right:10%;width:70%}} @media screen and (max-width:500px){input:checked#openall .allsosmed{left:5%;right:5%;width:80%}.allsosmed li a{font-size:12px}} @media screen and (max-width:300px){input:checked#openall .allsosmed{top:5%}.openall .allsosmed li a{width:100%}} .allsosmed{width:0%;-webkit-transition:width 2s;/* Safari */ transition:width 2s;position:absolute;z-index:-99} .allsosmed li a{float:left;position:relative;margin:2px;overflow:hidden;line-height:0;width:48%;padding:10px;box-sizing:border-box;border-radius:3px} .allsosmed li a i{margin-right:5px} .allsosmed li.pinterest a{background:#b8191c} .allsosmed li.digg a{background:#546b9f} .allsosmed li.linkedin a{background:#007ab8} .allsosmed li.stumbleupon a{background:#ed4a13} .allsosmed li.delicious a{background:#3398fc} .allsosmed li.tumblr a{background:#32506d} .allsosmed .login{display:inline-block;position:relative;width:100%;text-align:center} .allsosmed .login p{margin:10px 0;padding:0} .allsosmed .login form input{border:none;padding:15px 5px;background-color:#b1b6bd;font-weight:600;color:rgba(0,0,0,0.5);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:3px;color:#fafafa;margin:3px} .allsosmed .login form input.email{width:75%} .allsosmed .login form input.signin{width:20%;min-width:80px;cursor:pointer} </style> - langkah selanjutnya, kalian cari lagi arahan </body>
- Lalu masukan Html Social Media Share Button ini sempurna diatasnya
<div class="sosmed"> <ul class="sticky"> <input id='hideshare' type="checkbox" /> <li class="share facebook"><span><a expr:href='"https://www.facebook.com/sharer.php?u=" + data:blog.url'><i class="fa fa-facebook-square" aria-hidden="true"></i> <b>Facebook</b></a></span></li> <li class="share twitter"><span><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"'><i class="fa fa-twitter-square" aria-hidden="true"></i> <b>Twitter</b></a></span></li> <li class="share google"><span><a expr:href='"https://plus.google.com/share?url=" + data:blog.url'><i class="fa fa-google-plus-square" aria-hidden="true"></i> <b>Google+</b></a></span></li> <li class="openall"><input id='openall' type="checkbox" /><label for="openall" class="switch"><span><i class="fa fa-plus" aria-hidden="true"></i></span></label> <ul class="allsosmed"> <script type="text/javascript"> //<![CDATA[ var siteurl = window.location.href; document.write('<li class="pinterest"><a href="javascript:pinIt();"><i class="fa fa-pinterest-square" aria-hidden="true"></i> <span>Pinterest</span></a></li>\ <li class="digg"><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg"><i class="fa fa-digg" aria-hidden="true"></i> <span>Digg</span></a></li> \ <li class="linkedin"><a href="//www.linkedin.com/shareArticle?mini=true&url=' + siteurl + '" target="_blank" title="Share This On Linkedin"><i class="fa fa-linkedin-square" aria-hidden="true"></i> <span>Linkedin</span></a></li> \ <li class="stumbleupon"><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&title=' + encodeURIComponent(document.title) + '" target="_blank" title="Share This On Stumbleupon"><i class="fa fa-stumbleupon" aria-hidden="true"></i> <span>Stumbleupon</span></a></li> \ <li class="delicious"><a href="//delicious.com/post?url=' + siteurl + '&title=' + encodeURIComponent(document.title) + '" target="_blank" title="Share This On Delicious"><i class="fa fa-delicious" aria-hidden="true"></i> <span>Delicious</span></a></li> \ <li class="tumblr"><a href="https://www.tumblr.com/share/link?url=' + siteurl + '&name=' + encodeURIComponent(document.title) + '&description=' + encodeURIComponent(document.title) + '" target="_blank" title="Share This On Tumblr"><i class="fa fa-tumblr-square" aria-hidden="true"></i> <span>Tumblr</span></a></li> \ '); function pinIt() { var t = document.createElement("script"); t.setAttribute("type", "text/javascript"), t.setAttribute("charset", "UTF-8"), t.setAttribute("src", "https://assets.pinterest.com/js/pinmarklet.js?r=" + 99999999 * Math.random()), document.body.appendChild(t) }; //]]> </script> <div class="login"> <p>Login</p> <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=MasTamvan', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="email" name="email" onblur="if (this.value == "") {this.value = "Alamat Email";}" onfocus="if (this.value == "Alamat Email") {this.value = "";}" value="Email" type="text" /> <input name="uri" value="MasTamvan" type="hidden" /> <input name="loc" value="en_US" type="hidden" /> <input class="signin" value="Sign In" type="submit" /> </form> </div> </ul> </li> <label for="hideshare" class="switch"><span class="show"></span></label> </ul> </div> - Kalo Sudah Tinggal Save Dan Lihat Hasilnya.
Kalian ganti username MasTamvan dengan id Feedburner blog kalian.
Kalo Icon Social Medianya tidak tampil, kalian pasang arahan ini di atas </head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/> - Selesai
Cukup sekian dan terima kasih, agar artikel perihal Tutorial Cara Membuat Tombol Social Media Seperti Facebook Melayang Di Blogger ini bermanfaat, jikalau ada yang mau ditanyakan / tampilannya kurang rapih sebab bentrok dengan css bawaan kalian silahkan bertanya di kolom komentar..