Google+ Followers Widget is now popular among blogger and can be seen today on most of the blogs. This widget is an opportunity to increase your Google+ circle to expand the dimensions of blogging. This widget may give you high traffic and high reach for your blog. One of my blogger friend Arun Prasath want a new look of Google+ Profile Widget. He requested me to make it like Facebook Like Box with CSS Effect. You can read about this widget here. This fresh designed Google+ Profile Widget will definitely give a new look to your blog. CSS Stack Effect is new cool and awesome effect for your blog and blog widgets. We are launching Google+ Profile widget in new 6 color schemes. You can choose any of these color scheme as per your blog design or may order a new color scheme at very low price. To order new customization of this widget please click here.
New Google+ Profile Widget using CSS Stack Effect Installation Tutorial
1. Blogger Dashboard › Select a blog › Layout (Page Element) › Add a HTML/Javascript Gadget
2. Then paste any of the follow widget code in that and save this HTML/Javascript gadget
Note: Must change the "103741144523748761550" with your profile id
Style 1: Pure Design - For this widget use following code
<!--
DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA.
Google+ Profile Widget with CSS Stack Effect v1.0
Source Url: http://www.techprevue.com/2013/05/google-profile-widget-with-css-stack-effect.html
This widget is distributed under cc license - BY-NC-ND INT. No-derivatives Allowed.
Please keep intact this copyright notice if you are using or distributing this widget on your website/site/blog.
-->
<style>
.techprevue-fb-like-box-pure{width:280px;height:160px;border-radius:3px;position:relative;background:#FFF;padding:10px}.techprevue-fb-like-box-pure,.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{background:#FFF;border:1px solid #0072C4}.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-pure:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #0072C4}
</style>
<div class="techprevue-fb-like-box-pure">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/103741144523748761550" data-source="blogger:blog:followers" data-width="300">
</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>
Style 2: India Design - For this widget use following code
<!--
DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA.
Google+ Profile Widget with CSS Stack Effect v1.0
Source Url: http://www.techprevue.com/2013/05/google-profile-widget-with-css-stack-effect.html
This widget is distributed under cc license - BY-NC-ND INT. No-derivatives Allowed.
Please keep intact this copyright notice if you are using or distributing this widget on your website/site/blog.
-->
<style>
.techprevue-fb-like-box-india{width:280px;height:160px;border-radius:3px;position:relative;background:#FFF8ED;padding:10px}.techprevue-fb-like-box-india,.techprevue-fb-like-box-india:before,.techprevue-fb-like-box-india:after{background:#FFF8ED;border:1px solid #68914F}.techprevue-fb-like-box-india:before,.techprevue-fb-like-box-india:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-india:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #68914F}
</style>
<div class="techprevue-fb-like-box-india">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/103741144523748761550" data-source="blogger:blog:followers" data-width="300">
</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>
Style 3: Shine Design - For this widget use following code
<!--
DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA.
Google+ Profile Widget with CSS Stack Effect v1.0
Source Url: http://www.techprevue.com/2013/05/google-profile-widget-with-css-stack-effect.html
This widget is distributed under cc license - BY-NC-ND INT. No-derivatives Allowed.
Please keep intact this copyright notice if you are using or distributing this widget on your website/site/blog.
-->
<style>
.techprevue-fb-like-box-shine{width:280px;height:160px;border-radius:3px;position:relative;background:#EDF4FF;padding:10px}.techprevue-fb-like-box-shine,.techprevue-fb-like-box-shine:before,.techprevue-fb-like-box-shine:after{background:#EDF4FF;border:1px solid #ABACB2}.techprevue-fb-like-box-shine:before,.techprevue-fb-like-box-shine:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-shine:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ABACB2}
</style>
<div class="techprevue-fb-like-box-shine">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/103741144523748761550" data-source="blogger:blog:followers" data-width="300">
</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>
Style 4: Sliver Design - For this widget use following code
<!--
DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA.
Google+ Profile Widget with CSS Stack Effect v1.0
Source Url: http://www.techprevue.com/2013/05/google-profile-widget-with-css-stack-effect.html
This widget is distributed under cc license - BY-NC-ND INT. No-derivatives Allowed.
Please keep intact this copyright notice if you are using or distributing this widget on your website/site/blog.
-->
<style>
.techprevue-fb-like-box-silver{width:280px;height:160px;border-radius:3px;position:relative;background:#E6E8EF;padding:10px}.techprevue-fb-like-box-silver,.techprevue-fb-like-box-silver:before,.techprevue-fb-like-box-silver:after{background:#E6E8EF;border:1px solid #ABACB2}.techprevue-fb-like-box-silver:before,.techprevue-fb-like-box-silver:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-silver:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ABACB2}
</style>
<div class="techprevue-fb-like-box-silver">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/103741144523748761550" data-source="blogger:blog:followers" data-width="300">
</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>
Style 5: Sky Design - For this widget use following code
<!--
DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA.
Google+ Profile Widget with CSS Stack Effect v1.0
Source Url: http://www.techprevue.com/2013/05/google-profile-widget-with-css-stack-effect.html
This widget is distributed under cc license - BY-NC-ND INT. No-derivatives Allowed.
Please keep intact this copyright notice if you are using or distributing this widget on your website/site/blog.
-->
<style>
.techprevue-fb-like-box-sky{width:280px;height:160px;border-radius:3px;position:relative;background:#EFF1F6;padding:10px}.techprevue-fb-like-box-sky,.techprevue-fb-like-box-sky:before,.techprevue-fb-like-box-sky:after{background:#EFF1F6;border:1px solid #A8B3CF}.techprevue-fb-like-box-sky:before,.techprevue-fb-like-box-sky:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-sky:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #A8B3CF}
</style>
<div class="techprevue-fb-like-box-sky">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/103741144523748761550" data-source="blogger:blog:followers" data-width="300">
</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>
Style 6: Pearl Design - For this widget use following code
<!--
DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA.
Google+ Profile Widget with CSS Stack Effect v1.0
Source Url: http://www.techprevue.com/2013/05/google-profile-widget-with-css-stack-effect.html
This widget is distributed under cc license - BY-NC-ND INT. No-derivatives Allowed.
Please keep intact this copyright notice if you are using or distributing this widget on your website/site/blog.
-->
<style>
.techprevue-fb-like-box-pearl{width:280px;height:160px;border-radius:3px;position:relative;background:#F2F2F2;padding:10px}.techprevue-fb-like-box-pearl,.techprevue-fb-like-box-pearl:before,.techprevue-fb-like-box-pearl:after{background:#F2F2F2;border:1px solid #CFCFCF}.techprevue-fb-like-box-pearl:before,.techprevue-fb-like-box-pearl:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-pearl:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #CFCFCF}
</style>
<div class="techprevue-fb-like-box-pearl">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/103741144523748761550" data-source="blogger:blog:followers" data-width="300">
</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>
Please review this widget with your comments.
Post a Comment