Think you all were waiting for my next post. Thanks if you were waiting for it.
Google+ is a new social network by google. You can imagine the goodness by the word google. Google is one of the most successful companies in the internet world. It deals with internet. It owns almost all types of platforms like social site, search engine, video network, site builder, blog builder, translator, so on and so forth. Many people use google+ and connect with their friends or make their online business prosper. So for this purpose google has launched Google+ badges which you can embed on your website/blog. This badge allows your readers to follow you on google+ which indirectly helps you increase traffic and regular checking of your blog with your readers.
This widget has an excellent look which will surely look professional with your template. It also has options of shade like dark and light. It has a minimum looking theme.
Why to add this badge?
- New and elegant look
- Dual theme (light & dark)
- Dual styles (landscape & portrait)
How to add a badge?
It is so easy to install even newbies can do it like a charm. Just follow these following steps carefully -
- Go to your blogger account.
- Click on Layout > add element > Html/JavaScript.
- Select from the styles given below
<!-- Place this tag where you want the widget to render. -->
<div class="g-person" data-width="289" data-href="//plus.google.com/G+ ID" data-theme="dark" data-layout="landscape" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<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>
<!-- Place this tag where you want the widget to render. -->
<div class="g-person" data-width="289" data-href="//plus.google.com/G+ID" data-layout="landscape" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<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>
<!-- Place this tag where you want the widget to render. -->
<div class="g-person" data-width="289" data-href="//plus.google.com/G+ID" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<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>
<!-- Place this tag where you want the widget to render. -->
<div class="g-person" data-width="289" data-href="//plus.google.com/G+ID" data-theme="dark" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<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>
Final step
+ Replace the value of the width of the badge according to your requirement like replace
289 with 300 if needed. Put your google+ profile number you can find that by going to your google+ profile and checking your url
Now just save it and you are done. Drag the element where ever you want it to be. Think you like this widget. Let me know your responses on my tutorial for the widget.
Stay in touch
