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



*  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  ###

Baca Juga Artikel Terkait Lainnya

Thanks For Your Comment Here