4 IN 1 SOCIAL SHARING SLIDE POP OUT WIDGET FOR BLOGGER
* buka blog mu
* tata letak
* tambah gadget
* HTML/Javascript
* copy kode dibawah dan letakkan ke dalam HTML/Javascript
<style> img, a { border: 0; } #on { visibility: visible; } #off { visibility: hidden; } #facebook_div { width: 235px; height: 236px; overflow: hidden; } #twitter_div { width: 246px; height: 450px; overflow: hidden; } #google_plus_div { width: 290px; height: 250px; overflow: hidden; margin-left: 5px; margin-top: 1px; } #STfeedburner_div { width: 300px; height: 120px; overflow: hidden; margin-top: 5px; margin-left: -4px; } #ST_div { width: 300px; height: 97px; overflow: hidden; } /* right side style */ #facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; right: -239px; } #facebook_right img { position: absolute; top: -2px; left: -35px; } #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; left: -2px; top: -3px; } #twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 250px; height: 240px; position: fixed; right: -254px; } #twitter_right_img { position: absolute; top: -2px; left: -35px; border: 0; } #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0; border-left: 2px solid #0056a0; width: 290px; height: 250px; position: fixed; right: -294px; } #google_plus_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #feedburner_right { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -304px; } #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #ST_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #ST_right img { position: absolute; top: -1px; left: -101px; } /* left side style */ #facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; left: -239px; } #facebook_left img { position: absolute; top: -2px; right: -35px; } #facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; right: -2px; top: -3px; } #twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 240px; position: fixed; left: -254px; } #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0; } #google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: 2px solid #0056a0; width: 290px; height: 120px; position: fixed; left: -294px; } #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #feedburner_left { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-left: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -304px; } #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #ST_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #ST_left img { position: absolute; top: -2px; right: -101px; } .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0; } .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px; } .submitbutton { background: #FF8000; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #000000; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function () {jQuery("#facebook_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#facebook_right").stop( true, false).animate( { right: -239 }, 500); }); jQuery("#twitter_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#twitter_right").stop( true, false).animate( { right: -254 }, 500); }); jQuery("#google_plus_right").hover( function (){ jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop( true, false).animate( { right: -294 }, 500); }); jQuery("#feedburner_right").hover( function (){ jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function (){ jQuery("#feedburner_right").stop( true, false).animate( { right: -304 }, 500); }); }); </script> <br /> <div id="on"> <div id="facebook_right" style="top: 8%;"> <div id="facebook_div"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3UbfcD9nFlwQxZH0-zaQy8mCzUPMr4PopOtsef-IJhDkdk9bN4caDXGPiCl2MICl6LQCFmtcL8VvKAPFUWNZMjkWNzP_YLh24BZlDpv4YgTiefESRNqOIWWRBVlxvna94iO8pl2ffaMw/s1600/helperblogger.com-facebook-icon.png" alt=""/> <iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/New-Trick-Tips-542809662487405/?ref=bookmarks&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 25%;"> <div id="twitter_div"> <a href='http://www.placeforcompinfo.com/' rel='dofollow'/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV2CBeoiRy96XoyMGCe4E6vXtKeI29fhELMb6hCL7EBmuDl09G6fSA10fxmjzA3v0gjQhIQ4wImflb8VSjckn6uRr7bDRdTAiU5StkIQcb9_skh59qyrlHwhFe-Llr2UnmQKMWndioEFU/s1600/Twitt.png" id="twitter_right_img" /> <a class="twitter-timeline" href="https://twitter.com/IvankGribatako" data-widget-id="404886794899972096">Tweet oleh @IvankGribatako</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> </a></div></div></div> <div id="on"> <div id="google_plus_right" style="top: 42%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCaxOrSnHO1gNwOBk0Ur_tG_j1hMkzP-_aMB1RR4vmIMdChyVsMYAbTGLmCnNnx6JgCzoGQBOVH17MRAf0RujeWCrwJwlyXxap2bNSkYZrWSL8rDQc4K416wvtuFrtiNXzgLTlugD6ykY/s101/googleplus.png"/> <div style="float: left; margin: 10px 10px 10px 0;"> <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/110561987544809067837"data-source="blogger:blog:followers"data-width="270"></div> <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'en' }; 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> </div></div></div> <div id="on"> <div id="feedburner_right" style="top: 59%;"> <div id="STfeedburner_div"><center> <h4 style="color: #f66303;">You can also receive Free Email Updates:</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Safetricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" value="Enter your email here..."/> <input name="uri" type="hidden" value="Safetricks" /><input class="submitbutton" type="submit" value="Submit" /></form></center> <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7GFnYrkyravatAHp-TIzdx0zquCeTO42dJGRX46kR51LsUL8qMAEgQ45xLwzv_lm8KfNH3vJozJngSnc4bP1OzWLjpKdxeNMduQMKFE9T9yku-L76Zq_cGCq2A2wGEbBV-K8Tw_RoDs/s101/subscribe-icon.png"/> <div style="float: right; padding: 15px; margin: 0px;"> <span style="font-size:10px;">Widget by <a href="http://taichiho.blogspot.co.id/"nofollow"> GT</a></span> </div></div></div> </div></div>[ catatan ]
Ganti warna merah dengan url FP id anda ]
* silahkan di save *
% GOOD LUCK %
Baca Juga Artikel Terkait Lainnya