CARA MEMBUAT TOMBOL SHARE MELAYANG DI BLOGGER

Perlu juga dibaca :

Assalamualaikum Wr Wb...
Kali ini saya akan membahas tentang Cara membuat tombol share sosmed melayang di blogger.

Mungkin anda sudah sering melihat tombol sosmed melayang di artikel atau blog milik orang, namun tidak usah khawatir andapun bisa membuat tombol share sosmed melayang pada blog anda. Caranya sangat mudah dan tidak membutuhkan waktu lama untuk membuatnya.

Bagaimana cara membuatnya ?

Langsung saja ikuti langkah-langkah berikut ini:

1. Silahkan login ke akun blogger kalian.
2. Selanjutnya masuk ke menu Theme lalu klik Edit HTML.
3. Selanjutnya copy CSS dibawah ini dan letakan diatas </head>

<style type="text/css"> .sosmed{padding:0;margin:0;position:fixed;right:-119px;top:20%;width:200px} .sosmed input#hideshare,.sosmed input#bukasemua{display:none} .sosmed ul,.sosmed ul li{list-style:none;list-style-type:none} .srstiky li.bukasemua{margin:0;padding:0} .srstiky 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} .srstiky 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)} .srstiky li.share i{float:left;margin:11px;margin-right:15px;color:white;font-size:20px} .srstiky li.share b{padding:0;margin:0;text-transform:uppercase;line-height:43px} .srstiky 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.bukasemua{display:none} label span.show,.sosmed li.bukasemua label{position:relative;cursor:pointer;display:block;width:43px;font-size:20px} .sosmed li.bukasemua label{text-align:center;background:#bbb;color:white;padding-top:8px; padding-bottom:8px;} 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#bukasemua ~ .srsosmed{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#bukasemua ~ .srsosmed{left:10%;right:10%;width:70%}} @media screen and (max-width:500px){input:checked#bukasemua ~ .srsosmed{left:5%;right:5%;width:80%}.srsosmed li a{font-size:12px}} @media screen and (max-width:300px){input:checked#bukasemua ~ .srsosmed{top:5%}.bukasemua .srsosmed li a{width:100%}} .srsosmed{width:0%;-webkit-transition:width 2s;/* Safari */ transition:width 2s;position:absolute;z-index:-99} .srsosmed li a{float:left;position:relative;margin:2px;overflow:hidden;line-height:0;width:48%;padding:10px;box-sizing:border-box;border-radius:3px} .srsosmed li a i{margin-right:5px} .srsosmed li.pinterest a{background:#b8191c} .srsosmed li.digg a{background:#546b9f} .srsosmed li.linkedin a{background:#007ab8} .srsosmed li.stumbleupon a{background:#ed4a13} .srsosmed li.delicious a{background:#3398fc} .srsosmed li.tumblr a{background:#32506d} .srsosmed .login{display:inline-block;position:relative;width:100%;text-align:center} .srsosmed .login p{margin:10px 0;padding:0} .srsosmed .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} .srsosmed .login form input.email{width:75%} .srsosmed .login form input.signin{width:20%;min-width:80px;cursor:pointer} </style>


4. Selanjutnya copy code HTML dibawah ini dan letakan di atas </body>

<div class="sosmed"> <ul class="srstiky"> <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="bukasemua"><input id='bukasemua' type="checkbox" /><label for="bukasemua" class="switch"><span><i class="fa fa-plus" aria-hidden="true"></i></span></label> <ul class="srsosmed"> <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>


5. Save dan lihat hasilnya.

Gimana? mudah kan?

Selamat mencoba :)

Sekian tutorial Cara membuat tombol share melayang di blogger, jika ada yang kurang jelas silahkan tanyakan melalui kolom komentar. Semoga bermanfaat.

Wassalamualaikum Wr Wb...