============
=================
======================
]]></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;}
=======================
</head>
========================
<script type='text/javascript'>
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('#sticky').css({'right':'0px'});
} else {
$('#sticky').css({'right':'-350px'});
}
});
$(document).ready(function(){
var sticky = $('#sticky');
var closed = $('#sticky-close');
var minimize = $('#sticky-minimize');
var maximize = $('#sticky-maximize');
maximize.hide();
closed.click(function(){
sticky.css({'right':'-350px'});
sticky.fadeOut('slow');
})
minimize.click(function(){
sticky.toggleClass('hide');
$(this).hide();
maximize.show();
})
maximize.click(function(){
sticky.toggleClass('hide');
$(this).hide();
minimize.show();
})
});
</script>
==================
</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/AVvXsEgTwBeD7g-xNbeC0piK067lHgySosof4zFJltB7Fi1BP0bzJWnLqfq1HJkn9Nxyt1IdkwgUyc1_m0gJWu9Rqfg75jhzM3mXWWAJ_tITuRevoSn2wh-L6gamtdNqZ-qCXVS56pIvudEO1McQ/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/AVvXsEjysVU09HW6V-hast_arN5eQ5WH_DWQwFU9Txym3KQx1G9MoDPoZkSRe6xxslPmh65tSv3Q8DLmoR2ugzOrigL29ey1XfPUe4RMv5HhLZuO9ArJq2Q3FzfltB1K3pYSVZUzEzikTsnhoM74/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/AVvXsEh-1WG5176JU8XHXBtbMjF3_HrP3-iLkSpaa2wsDiwMzWUAwcJfLwIeBbpj7ORngQgHw3EbArGtdZUP3TFVcWNHqFw-jaqAtS4QV0UNXhbsfILixcPvMZvIDcEv-nhp_7do_o06sgbv1sNm/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/AVvXsEh-3JipyODOFIjaPiDXqR3B8tfA0CrV3dGNf1z717KkrY46TFR154aQkVG7nj5rHkhfUyzpgyo7VulHy7bq7r0RtPRk5ELUR-zZkS58Uf1cSnZIo6gaflsuZ7-SmdUNGT3gDaXuC_fYhVNf/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/AVvXsEj669jmeshfGhsDm7N_kg5EfRErORoYRrjyDbdt79zuIbTqjJS31sjYk0RHkVBVPpyMCXM2CNmfAwnTiOTvgqfeDfyRNNlIn0syG-N9rXTRPZA1Ywe8J-wJC3oH00Sfje5aKe-qYFc8S_0m/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)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</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/AVvXsEjAGNvv0v5G5yOO02mPN-k2wCYOlQfvXvhp6luUlBViSvWTkY7v71d6Ghnt7mGOB6_ZNURv6rzt8k3PILwE2DtfpGiIvLCt8W9_yienhN7boRKNe7JzMgzisTt4D4paYcxvyqwEe5xZgX8D/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('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</span>
</div>
</div>
</div>
==================
======================
