Custom Google+ Profile Badge with CSS Stack Effect

Google+ Profile Badge is now popular among bloggers and can be seen today on most of the blogs. This widget is an opportunity to increase your Google+ circle and expand the dimensions of blogging. This widget may help you to get high traffic on your blog. One of my blogger friend Arun Prasath want a new look of Google+ Profile Badge. He requested me to make it like Facebook Like Box with CSS Stack 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.

Google+ Profile Badge 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

Visit Demo

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: https://www.techprevue.com/google-followers-widget-with-css-stack-effect/
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: https://www.techprevue.com/google-followers-widget-with-css-stack-effect/
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: https://www.techprevue.com/google-followers-widget-with-css-stack-effect/
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: https://www.techprevue.com/google-followers-widget-with-css-stack-effect/
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: https://www.techprevue.com/google-followers-widget-with-css-stack-effect/
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: https://www.techprevue.com/google-followers-widget-with-css-stack-effect/
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>

4 thoughts on “Google+ Profile Badge with CSS Stack Effect”

Arun Prasath
May 29, 2013 at 00:36

Hai Vinay,

You are really awsome, Thanks for this beautiful widget. It is giving my blog a neat look.

But that fb like box widget is showing a blue strip at it’s top on increasing the widgets height. Can you help me in fixing it? I need to display pictures of the users in two rows as if it is present currently on my blog :)

1. Vinay Prajapati
  May 29, 2013 at 10:31
  
  Go to Official Facebook Like Box widget page and generate new iframe widget without stream, border & header and replace in my code. You are done!
  
Vinayak SP
Jul 13, 2013 at 14:34

Nice stuff indeed! You have provided very good information in details.

Regards

1. Vinay Prajapati
  Aug 11, 2013 at 21:01
  
  Welcome ProBlog Booster!