CARA MEMBUAT social share bullet background transparant with slide out roll pop up DI BLOGSPOT

social share bullet background transparant with slide out roll pop up for blogger

Demo Lihat Disini

*  login dulu blog mu
*  klik template >>> edit HTML
*  Cari kode <data:post.body/>
*  copy kode dibawah dan letakkan diatas kode <data:post.body/> atau bisa jg masukin aja ke html/javascript

<div class="allcoder-yuvarclanan ciscimcik-allcoder"><div class="divxix">
<div style="position:absolute;top:0px;left:0px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;
font-size:13px;color:transparant;background-color:transparant;overflow:visible;" class="iyisenden">
<div style="float:right;margin-left:40px;margin-top:-10px;width:270px;"><div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"><img style="border:none;background-color:transparent;padding:0px;margin:0px;" alt="allcoder facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHLUVRpk6rAZMHURaARvCPfL_OUsIvASfnj1P6-3UWKAZbVoV08WI_aCaZS8SOmz20F1INcq-zTTMxmK0V5_Fw_FXKdxGJ-dsep3JlsznNkwV3Qjw6jiGcfNrpKjWWU5k0tvv7OXwxh0LU/s1600/Facebook-icon.png"/></a>
<a class="addthis_button_google_plusone_share"><img style="border:none;background-color:transparent;padding:0px;margin:0px;" alt="allcoder google+" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0PI9Y1QwlPaA3z6xr1Mf7XMS6NiXZ93CeYsR3zQBxJTTXCjnulB2EFT3h0CWJWTEQrGhNHpGPlkoR9aYuxm2y6RMmlgBLvxS-ZlzrUKqDphO_AdW5bSdlgsUYu0mrHwkf7W1Y0ja8op4I/s1600/Google-plus-icon.png"/></a>
<a class="addthis_button_twitter"><img style="border:none;background-color:transparent;padding:0px;margin:0px;" alt="allcoder twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAAuGwz-zX16HIv24tTSz3wvYSEpTkuwiTmxUr7ivURT_n-Mr9nc51ugAzY9AlKNUVVKz8DaeNhVFkABq8e2TW0-3Qu4q1rxxikq7_ocZFisxdhnLqYoYJsN_pZU94IJV116wbFPzSZ7F7/s1600/Twitter-icon.png"/></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=potdehid"></script></div>
</div>
<style>.divxix{height:95px;position:absolute;top:0px;left:0px;min-width:86px;}.naber{text-decoration:none !important;text-align:center;line-height:40px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:transparant;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:60px;background:transparant;border:2px solid transparant;}</style>
<div class="naber">Share</div></div></div><style>.naber{text-decoration:none !important;text-align:center;line-height:40px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:transparant;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:60px;background:transparant;}.naber{-webkit-transition: all 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: all 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);cursor:pointer;}.iyisenden{padding-right:30px;height:80px;text-decoration:none !important;padding-top:4px;overflow:hidden;background:transparant;border:none;border-color:transparantc;border-width:0px;width:0px;-webkit-transition: width 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: width 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: width 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);}.divxix:hover .naber{height:80px;margin-left:300px;transform:rotate(360deg);-ms-transform:rotate(360deg); /* IE 9 */-moz-transform:rotate(360deg); /* Firefox */-webkit-transform:rotate(360deg); /* Safari and Chrome */-o-transform:rotate(360deg); /* Opera */-webkit-border-radius: 40px;border-radius: 40px;}.divxix:hover .iyisenden{background-color:transparant;border:1px solid transparant;width:298px;height:78px;}
div.allcoder-yuvarclanan{position:fixed;z-index:999999;}div.ciscimcik-allcoder{top:240px;left:0px;}</style><style type="text/css">div.allcoder-yuvarclanan{_position:absolute;}div.ciscimcik-allcoder{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
</style>

*  silahkan di save 

###  GOOD  LUCK  GUYS  ###