Membuat Sliding Statis Social Widget

Setelah kemarin saya sharing modifikasi template "Kompi Centil" pada postingan sebelumnya, sekarang giliran cara menciptakan Sliding Statis Social Widget yang saya terapkan pada template tersebut yang akan saya share. Ini sebab ada teman Kompi Ajaib yang menanyakan cara menerapkan widget sliding ini.

Seperti pada template Kompi Centil, kalau Anda men-scroll halaman ke bawah, maka akan nongol sebuah widget di bawah kanan blog yang isinya Facebook, Twitter, dan Google+. Untuk demonya silahkan menuju postingan sebelumnya. Contohnya menyerupai pada gambar di bawah ini.

Nah bagi Anda yang tertarik untuk menerapkan widget ini di blognya, silahkan ikuti langkah-langkahnya di bawah ini.

1. Silahkan copy aba-aba CSS-nya di bawah ini dan paste di atas aba-aba ]]></b:skin>

#sticky{background:#F5E7E7;box-shadow:0px 0px 1px rgba(0,0,0,0.5);transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-webkit-transition:all 0.4s ease-out;-khtml-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;border-radius:3px;width:350px;height:200px;position:fixed;overflow:hidden;border:none;right:-350px;z-index:999999999999;text-align:left!important;}
.sticky-title{background:#c34b4b;background-image: -webkit-gradient(linear, left top, left bottom, from(#CF8181), to(#c34b4b));background-image: -webkit-linear-gradient(top, #CF8181, #c34b4b);background-image: -moz-linear-gradient(top, #CF8181, #c34b4b);background-image: -o-linear-gradient(top, #CF8181, #c34b4b);background-image:     -ms-linear-gradient(top, #CF8181 0%, #c34b4b 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #c34b4b),color-stop(1, #CF8181));
/* Safari & Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CF8181', endColorstr='#c34b4b'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CF8181', endColorstr='#c34b4b')";
/* IE8 */
border-bottom:1px solid rgba(0,0,0, 0.5);box-shadow:0px 0px 1px 1px rgba(255,255,255,0.25) inset ;-moz-shadow:0px 0px 1px 1px rgba(255,255,255,0.25) inset ;-webkit-shadow:0px 0px 1px 1px rgba(255,255,255,0.25) inset ;-ms-shadow:0px 0px 0px 1px rgba(255,255,255,0.25) inset ;-khtml-shadow:0px 0px 1px 1px rgba(255,255,255,0.25) inset ;color:#fff;display:block;height:40px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);width:100%;font-size:14px;}
.sticky-title span a{border-left:1px solid rgba(0,0,0, 0.2);float:right;height:40px;width:40px;}
.sticky-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.sticky-title span a:hover{background:rgba(0,0,0, 0.2);}
.sticky-title span a img{margin:8px;}
.sticky-container{border:none;float:left;width:100%;height:auto;margin:3px;}
.sticky-container > div{border:none;height:40px;margin:3px;padding:3px;}
.sticky-container > div > span {font-size:14px;}
.sticky-container img{float:left;margin:3px 5px;width:40px;}
.show{bottom:35px;}
.hide{bottom:-160px;}

Untuk mengganti background widget, silahkan kotak-katik pada aba-aba #sticky, dan untuk merubah background title-nya pada aba-aba .sticky-title

2. Silahkan copy aba-aba javascript di bawah ini di atas aba-aba </head>

<script type='text/javascript'>
$(window).scroll(function(){
        if ($(this).scrollTop() &gt; 400) {
            $(&#39;#sticky&#39;).css({&#39;right&#39;:&#39;0px&#39;});
        } else {
            $(&#39;#sticky&#39;).css({&#39;right&#39;:&#39;-350px&#39;});
        }
    });
   
$(document).ready(function(){
    var sticky      = $(&#39;#sticky&#39;);
    var closed      = $(&#39;#sticky-close&#39;);
    var minimize    = $(&#39;#sticky-minimize&#39;);
    var maximize    = $(&#39;#sticky-maximize&#39;);
   
    maximize.hide();
   
    closed.click(function(){
        sticky.css({&#39;right&#39;:&#39;-350px&#39;});
        sticky.fadeOut(&#39;slow&#39;);
    })
    minimize.click(function(){
        sticky.toggleClass(&#39;hide&#39;);
        $(this).hide();
        maximize.show();
    })
    maximize.click(function(){
        sticky.toggleClass(&#39;hide&#39;);
        $(this).hide();
        minimize.show();
    })
});
</script>

3. Silahkan copy aba-aba HTML pemanggilnya di bawah ini dan simpan di atas aba-aba </body>

<div class='show' id='sticky'>
    <div class='sticky-title sticky-www'>
        <span style='float: left;margin:10px 0 0 15px;'>Kompi Ajaib on Social Media</span>
        <span><a href='javascript:void(0);' id='sticky-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK_DT9BRZkT3WO37xoIixkO9F7yXG1TbH2pnG0OZxG9jkHX45xYYLQO5wyzHKSj8qLpDfCRQU2VSQvxFKtMjFfqw-e8u43ARdEhqjMAZXS3Hhw9CA-pCriBlj15X5JNoj6M3yyjEsI5oTD/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='sticky-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqy8ER_Jfua-Pr8PFZTcKsQm44C6MpGLzPq64Oo8bacMo6L0Wl4Xs3HYZfx4s3J7EXHfd74GRxaX5jtOxirhBELsi0pWdqBnNoRAxhbshSXoyH4CP5YD3RQhjwM7qSmPKVZGzvHgVeI96/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='sticky-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpjnO1x25H-B9c_dtWpNSX9x7wi992KBIp42FENg60Dx6eSfYsU6SBEC7uhn1x7t46nJHlSMLN7jm4tpepSsStkkny5I7-soJfDpaRcABJh9e0r951Kq7uo-Fl-8BtFSXtfPSZqYzxgfon/s1600/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='sticky-container'>
      <div><a href='http://www.facebook.com/pages/Kompi-Ajaib/395526477133955' target='_blank' title='facebook'><img alt='fb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7Q7eiXjw96pNrn4GJmO7_NrYiv5qY_6738kKDwvDEomjNpjeD-veC4_Bops2x3ONr8WzdaOznIEapWOJYiSRWRFKIYADf3nOrnK-ImNKamwV77AcHn4aHZ2N11wBjvxum5m7CIkPfm7Z/s1600/facebook.png' title='facebook'/><span>Like us on Facebook</span></a><br/>
         <span class="fb-like" data-href="https://www.facebook.com/pages/Kompi-Ajaib/395526477133955" data-send="false" data-layout="button_count" data-width="250" data-show-faces="false">                      
                           </span></div>
        <div><a href='https://twitter.com/KompiAjaib' target='_blank' title='twitter kompiajaib'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvwhGtHuvc6rvPXkq70mkq0wej-5Kl3xSeJiG5ILjYyX1BIYn6NJJAEvi2GOMqgpf5RQDW7w3IheGNNBQ7ml0pExzsWs0N_S1oQA-E4e3ASBREkMOKIvZVR_Sdzr2o5OJAI-GZBTond81/s1600/twitter.png' title='twitter kompiajaib'/><span>Follow us on Twitter</span></a><br/>
        <span>      
          <a class='twitter-follow-button' data-show-count='true' href='https://twitter.com/kompiajaib' title='Follow Kompi Ajaib'>Follow @kompiajaib</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
        </span>
        </div>
      <div><a href='https://plus.google.com/117950600521728942551' target='_blank' title='G+ kompiajaib'><img alt='G+' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Yo2EyQ0JNCwR9nUKxFBG_XdzY-7qJ4usuJ0gvoz2hcCsHPqRrRcJS1ZD6D8cd9n1OZWml_Uotf6CS_A4XWacFOrDBMWmBvbNM0PL92FrhE10wzOAuEX8Dmp3aXbZYGD0MN0AQ0hd55Cl/s1600/g+.png' title='Google plus'/><span>Follow us on Google+</span></a><br/>
        <span class='g-plusone' data-annotation='inline' data-size='tall' data-width='250'>      
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
        </span>
        </div>
    </div>
</div>

Perhatikan goresan pena yang berwarna merah di atas, silahkan sesuaikan dengan akun Facebook, Twitter, dan Google Plus Anda.

4. Lakukan preview untuk melihat penerapan widgetnya dan terakhir kalau Anda sudah merasa pas dengan widgetnya silahkan save template Anda.

Semoga bermanfaat dan selamat mencoba dan bereksperiment heheheehe.....
Sumber https://www.kompiajaib.com/

Share this post