Google Plus Activity Widget for Blogger

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.

Google API Key

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdWSt2ISRnSNr-oJuvIBQ7m2noDVU5z405-D-jmmVmKXOvaEbV9CKrv4gUxD2V2aNWFXlO_OWno5bEfdJxxawA7HMfuaCKG_qQ0cmXPsDe-8eOwNQJuVrjQdo9gZUQ0h8Fi-de0R7u7mA/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.