Sticky Google Plus Badge For Websites/Blogs
- Ebenezer Obasi
- September 8, 2013
- (0 Comments)
The ‘Sticky’ Google+ Badge lets you place a unique Google+ Badge to your website that stick to the top of your screen when it reaches it. (If you want to learn how you can stick any widget to the top of the page when it reaches it, kindly follow the tutorial here. Meanwhile you can follow the tutorial here to add sticky tooltip widgets to your website).
This widget uses the Asynchronous version of JavaScript and a little bit of css. So you don’t need to bother about website load-time as the effects in that regard is completely minimal.
Demo
Just incase you didn’t notice, we rolled out this demo page on Wednesday to help us develop more widget (incase of testing mods and widget) and to provide a clearer preview for our widgets and custom modification. To participate in this development, kindly request for invitation via our contact page.
Using Google+ Badge
Installing Sticky Google+ Badge
If you are using a CMS for your website, kindly add a new Custom text/HTML or HTML/JavaScript widget and paste the entire code below into your new widget, make the necessary changes and save your widget.
<!-- Place this tag where you want the widget to render. -->
<script>
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#scroller-anchor").offset().top;
var s = $("#scroller");
if(st > ot) {
s.css({
position: "fixed",
top: "0px"
});
} else {
if(st <= ot) {
s.css({
position: "relative",
top: ""
});
}
}
};
$(window).scroll(move);
move();
}</script>
<div id="sidebar" style="z-index:99;">
<div id="scroller-anchor">
</div>
<div id="scroller" style="margin-top:10px; z-index:99; position:relative;">
<div class="g-page" data-href="//plus.google.com/106554340003638873619" data-rel="publisher">
</div>
<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>
</div>
</div>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>
<!-- GooglePlus Badge by www.eobasi.com Ends -->
Necessary Changes
- Change 106554340003638873619 to your Googl+ page, profile or community id.
- To use Googl+ Badge without sticky features, kindly use the code below.
<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-href="//plus.google.com/106554340003638873619" data-rel="publisher">
</div>
<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>
Make sure to bookmark this page for future reference and remember to share these tips with your friends.
Ebenezer Obasi
Latest posts by Ebenezer Obasi (see all)
- Install Windows 10/8/7 From USB Flash Drive with UEFI Support - January 31, 2019
- How to Use Google Docs Offline - December 22, 2018
- EaseUS Free Data Recovery Wizard Lets you get back lost files - August 27, 2017
Recieve Free Email Updates!
Subscribe to get new updates instantly delivered to your inbox. Select the specific category you want to recieve updates on and enter your email address below.
*A confirmation message will be sent to you, login to your e-mail account and click on the confirmation link to start enjoying this service.
Get the latest news on your Android mobile, Download our Android App
Related Posts

Awesome Facebook LikeBox for Websites and Blogs
- Technology
- January 16, 2014

EWT Quick Guides to Arvixe Hosting
- Technology
- September 24, 2013

Responsive AddThis Share with Whatsnext and Recommended Posts Widget
- Technology
- January 9, 2014

Top 70+ Responsive Corporate WordPress Themes
- Technology
- December 13, 2013

Top 5 Sites to Help You Develop Your Own WordPress Theme (Updated)
- Technology
- October 21, 2013

Extended Footer Widget for Website/Blogs
- Technology
- September 9, 2013