Membuat Sliding Statis Social Widget

Membuat Sliding Statis Social Widget

Bola Hero Gawai

Membuat Sliding Statis Social Widget

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

Seperti pada template Kompi Centil, jika 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 seperti pada gambar di bawah ini.

Sliding Statis Social Widget


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

1. Silahkan copy kode CSS-nya di bawah ini dan paste di atas kode ]]></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 kode #sticky, dan untuk merubah background title-nya pada kode .sticky-title

2. Silahkan copy kode javascript di bawah ini di atas kode </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 kode HTML pemanggilnya di bawah ini dan simpan di atas kode </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='http://1.bp.blogspot.com/-Ao1pq3WWP80/UYkTi_lThZI/AAAAAAAAYYs/MAnvRxtxcoc/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='sticky-minimize' title='minimize'><img alt='minimize button' src='http://4.bp.blogspot.com/-GOrrILFH09c/UYkVuWmzk0I/AAAAAAAAYY8/v3FimwutPv0/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='sticky-maximize' title='maximize'><img alt='maximize button' src='http://3.bp.blogspot.com/-bJ8cWb-cIn0/UYkV99a2VwI/AAAAAAAAYZE/buv0P0KyM6I/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='http://3.bp.blogspot.com/--19yIx5ubUc/UYkWL_gZiNI/AAAAAAAAYZM/e5iARlsnd8g/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='http://3.bp.blogspot.com/-HOzVcqB_HIY/UYkWcDqO_SI/AAAAAAAAYZU/YHWdcn0PoqQ/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='http://4.bp.blogspot.com/-BEym89PDoo0/UYktj5MSg1I/AAAAAAAAYZk/6hPZPk-h1G0/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 tulisan yang berwarna merah di atas, silahkan sesuaikan dengan akun Facebook, Twitter, dan Google Plus Anda.

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

Semoga bermanfaat dan selamat mencoba dan bereksperiment heheheehe.....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

9 Comments Add Comment

bikin demonya di jsfiddle atau jsbin...xixixi

Balas

mantap om...
mau saya coba buat artikel trkait...kayak punya kompas..tp bisa ga iah..hehehe

Balas

OK makasih kang masukannya hehehe...

Balas

Pasti bisa lah hehehe....

Balas

dengerin tu kalau abah koben sudah bilang.....he he e he
http://www.fullblogdesign.com/2012/09/cara-menggunakan-dan-publikasikan-blog.html

Balas

TRIMS atas ilmunya.....moga tambah berkah bang

Balas

Sama2...makasih doanya :)

Balas

Hadir lagi mas Adhy.
Hasil pemasangan widget Sliding Statis Social karya mas Adhy ini, langsung okay. Dan keren mas.

Terima kasih sudah share karya widget yang bagus dan cantik. Kita tinggal pakai aja... hehehe.

Salam santun mas Adhy.

Balas

Saya gunakan di blog baru saya, Belajar AutoCAD, kok nggak bisa ya mas Adhy?. Padahal tadinya bisa, tiba-tiba saja tidak bekerja. Scroll-Up dan Scroll-Down nya juga rusak , kenapa ya mas Adhy.

Ada yang sempat, tolong dong..
Thank you before it.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×