Cara Membuat Tombol Share Melayang Responsive di Blog

Membuat Tombol Share Melayang 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, karena kita akan memasangnya di bawah HTML. Ketika blog di load maka akan membaca kode di atasnya terlebih dahulu.

Sebelumnya saya juga sudah pernah share beberapa artikel terkait tentang social media untuk blogger. Kalian bisa lihat di link berikut ini

Buat kalian yang ingin melihat tampilan dari Tombol share Melayang / Fixed ini bisa liat di link Demo Social Media Sharing Button Sticky, Tapi pada demo tersebut saya membuat popupnya terbua ketika web / halaman d muat. Kalo untuk di pasang ke blog popupnya muncul ketika di klik :)
Okeh, sekarang lanjut ke tutorial pemasangannya gan

Tombol Share Melayang Di Samping Kanan / Kiri Blog

  • Silahkan login ke akun blogger kalian
  • Lalu masuk ke menu TemplateEdit HTML Lalu cari kode </head>
  • Kalo udah ketemu, masukan css dibawah ini tepat 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 kode </body>
  • Lalu masukan Html Social Media Share Button ini tepat diatasnya
  • 
    <div class="sosmed">
        <ul class="sticky">
            <input id='hideshare' type="checkbox" />
            <li class="share facebook"><span><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + 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='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;'><i class="fa fa-twitter-square" aria-hidden="true"></i> <b>Twitter</b></a></span></li>
            <li class="share google"><span><a expr:href='&quot;https://plus.google.com/share?url=&quot; + 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&amp;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 + '&amp;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 + '&amp;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 == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}" onfocus="if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}" 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 MasTamvan dengan id Feedburner blog kalian.
    Kalo Icon Social Medianya tidak tampil, kalian pasang kode 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, 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..

20 komentar
  1. Replies
    1. Itu d atas udah ada gan
      https://codepen.io/tejasukmana/full/xdxVoB/

      Delete
  2. Cara membuat share button kotak kecil gimana gan?

    ReplyDelete
    Replies
    1. Tinggal Copy HTMLnya gan, atur cssnya...

      Terus taro d tempat yg di inginkan (y)

      Delete
  3. help gan error kayak gini http://prntscr.com/f028kj

    ReplyDelete
    Replies
    1. Cari kode ini gan .allsosmed
      Tambahin right:0px

      Delete
  4. Kalau mau menghilangkan subscribe box nya bagaimana gan?

    ReplyDelete
    Replies
    1. Maaf gan, baru bales.

      Untuk menghapusnya bisa cari kode bagian ini ↓
      <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 == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}" onfocus="if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}" 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>

      Delete
  5. mantap gan berhasil, tpi ubah posisi disamping kirinya gmn ?

    ReplyDelete
    Replies
    1. Cari kode ini
      .
      .sosmed {
      padding: 0px;
      margin: 0px;
      position: fixed;
      right: -119px;
      top: 20%;
      width: 200px;
      }


      lalu rubah right: -119px;

      menjadi left: -39px;

      hasilnya ↓

      .sosmed {
      padding: 0px;
      margin: 0px;
      position: fixed;
      left: -39px;
      top: 20%;
      width: 200px;
      }

      Delete
  6. kalo posisi kiri gimana gan ,maksi

    ReplyDelete
  7. 1https://4.bp.blogspot.com/-5T5JVYCLvk4/WolKQPVWWXI/AAAAAAAAALM/31BqPSw0OAQVTCFPO32Cy-DeFHbYHuJJQCLcBGAs/s1600/Capture.PNG kok bisa kaya gini ya , sekaligus biar bisa di kiri gimana . makasi gan

    ReplyDelete
    Replies
    1. mungkin bentrok sama CSS bawaan blog gan.
      .
      untuk merubah posisi ada di balasan komen atas ↑ gan

      Delete
  8. Gan, maaf ini mau nanya tapi tdk sesuai topik yg diatas, yg aku tanyakan Gimana caranya membuat Komentar bisa tutup bisa buka gan seperti INI? Terima Kasih ,,,

    ReplyDelete
    Replies
    1. Sudah ada tutorialnya, silahkan cari dengan Keyword
      .
      Membuat Komentar Show Hide

      Delete
  9. keren mas, moga saya juga bisa menjadi kayak mas

    ReplyDelete