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
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>
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 :)
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!
Nice stuff indeed! You have provided very good information in details.
Regards
Welcome ProBlog Booster!