Cara Membuat Tombol Share Melayang Responsive di Blog
Oke halo sahabat Seciko, Kali ini saya akan memberitahu kepada kalian gimana sih cara membuat tombol share melayang responsive di blog ?
Nah pasti kalian ingin tahu kan,Nah jadi kegunaan tombol share yaitu, Untuk membagikan post tersebut ke dalam social media tertentu.
Tombol Share melayang di samping kiri / kanan.
- Silahkan masuk ke blogger
- Lalu masuk ke Template > Edit HTML > Lalu cari kode </head>
- Kalo udah ketemu,Masukan kode css dibawah ini tepat di atas kode </head>
- Langkah selanjutnya, Kalian cari kode </body>
<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>
- Lalu masukan Html Social media share button ini tepat di atas kode </body>
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=Panduanid’, ‘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
Untuk Popup Email subscribe Box.Kalian ganti username Panduanid Dengan id feedburner blog kalian. Kalo icon social medianya tidak muncul,Kalian pasang kode ini di atas kode </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, semoga artikel tentang Tutorial Cara Membuat Tombol Social Media Seperti Facebook Melayang Di Blogger ini bermanfaat, jika ada yang mau ditanyakan / tampilannya kurang rapih karena bentrok dengan css bawaan kalian silahkan bertanya di kolom komentar..
