Google Plus Activity Widget for Blogger

Google Plus Activity Widget for Blogger

Comments: 1
data:blog.title
Google Plus Activity Widget for Blogger is quite charming. Because it will show your latest shared posts on Google plus with sliding effect. And it is also included Google Plus Badge. So anybody can easily can enter in to your circle. Generally you can show your Google plus profile and posts on your web page along with your Google plus feed. 

For this widget you need to have Google API Key. Get your Google API key from the below posts.






Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Widget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Widget.


<!-- Gplus Default -->
<style type="text/css">
/* CSS of Google+ Widget
Blog : http://bloggerspice.com
*/
/* feed list */
ul.gpaw-body{
font: 100% arial,sans-serif !important;
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
position:relative !important;
background:#FEFEFE !important;
list-style:none;
height:250px !important;
border:#B20000 1px solid !important;
}
ul.gpaw-body li{
border-bottom:#025D87 1px solid !important;
margin:0 0 4px 0 !important;
padding:4px !important;
list-style-type:none !important;
overflow:hidden !important;
background:none;
}
ul.gpaw-body .thumb{
display:block !important;
float:right !important;
margin:0 0 5px 5px !important;
}
ul.gpaw-body .thumb a{
text-decoration:none !important;
outline:none !important;
}
ul.gpaw-body .thumb img{
border:#eee 1px solid !important;
}
ul.gpaw-body .thumb a:hover img{
border:#ccc 1px solid !important;
}
ul.gpaw-body .title
{
border-bottom:none !important;
}
ul.gpaw-body .title a{
font: 14px arial,sans-serif !important;
outline:none !important;
text-decoration:none !important;
color:#000A0D !important;
border-bottom:none !important;
}
ul.gpaw-body .title a:hover {
color:#025D87 !important;
}
/* meta : date, plusones */
ul.gpaw-body .meta {
color:#999999 !important;
display:block !important;
font-size:95% !important;
margin:5px 0 0 !important;
overflow:hidden !important;
clear:both !important;
}
ul.gpaw-body .meta a, ul.gpaw-body .meta span{
display:block !important;
float:left !important;
padding:0 6px 0 0 !important;
}
ul.gpaw-body .meta a{
color:#999999 !important;
text-decoration:none !important;
}
ul.gpaw-body .meta a:hover{
color:#333 !important;
text-decoration:none !important;
}
ul.gpaw-body .plusones{
color:#025D87 !important;
font-style: italic !important;
}
ul.gpaw-body .shares{
color:#025D87 !important;
}
/* Fade-out effect with transparent png */
ul.gpaw-body .fade{
background:url(http://4.bp.blogspot.com/-TbZNT8q3_v4/UQeVtMMGD1I/AAAAAAAAA_8/AVVNJkPY-Ww/s1600/fade.png) repeat-x left bottom !important;
background:expression("") !important;
left: 0 !important;
bottom: 0 !important;
height: 50px !important;
position: absolute !important;
width: 100% !important;
z-index: 10 !important;
}
/* Profile */
.gpaw-profile{
border:#B20000 1px solid !important;
background:#F5F5F5 !important;
padding:8px !important;
overflow:hidden !important;
}
.gpaw-profile a.avatar{
display:block !important;
float:left !important;
text-decoration:none !important;
outline:none !important;
margin:0 10px 0 0 !important;
}
.gpaw-profile a.avatar img{
border:#fff 3px solid !important;
display:block !important;
}
.gpaw-profile a.avatar:hover img{
border:#fff 3px solid !important;
display:block !important;
}
.gpaw-profile .name{
font-size:15px !important;
overflow:hidden !important;
margin:-10px 0 0 0 !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#3D606B;
}
.gpaw-profile a.add{
display:inline-block !important;
text-decoration:none !important;
outline:none !important;
padding:4px 8px !important;
-webkit-border-radius:3px !important;
-moz-border-radius:3px !important;
background-color: #F5F5F5 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
color: #444444 !important;
}
.gpaw-profile a.add:hover{
background-color: #D14836 !important;
border: 1px solid transparent !important;
color:#fff !important;
}
a.gpaw-info{
border-top:#f0f0f0 1px solid !important;
border-bottom:#f0f0f0 1px solid !important;
background:#f4f4f4 !important;
padding:3px !important;
text-align:right !important;
font-size:80% !important;
text-decoration:none !important;
color:#999 !important;
display:none !important;
}
a.gpaw-info:hover{
color:#333 !important;
}
.gpaw-profile .g-rba-Dh-kQa .root .pAb .iAb
{
background-color:#990033 !important;}
</style>
<script src=" http://bloggerspicebd.googlecode.com/files/Google%2Bjquery.min.js" type="text/javascript"></script>
<script src=" http://bloggerspicebd.googlecode.com/files/jquery.googleplus-activity-1.0.min.js" type="text/javascript"></script>
<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>
<script type="text/javascript">
//<![CDATA[
jQuery.fn.googlePlusActivity.defaults.api_key = 'AIzaSyDsllMIq0A98LUp2DP5SKBbXfBdTq_lAFE';
//]]>
</script>
<div class="google-plus-activity" style="width: 290px;">
<!-- { user: '102331886274459115104', show_image:0 } -->

Customization :


  • Change AIzaSyDsllMIq0A98LUp2DP5SKBbXfBdTq_lAFE code with yout Google API key.
  • Change 102331886274459115104 with your Google Plus ID.


Speak Your Mind

Anonymous 3/01/2013
This comment has been removed by a blog administrator.
Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *