How to Make Google Plus Widget Timelines

Widget Google Plus Timeline same as widgets owned by twitter that emebedded Timelines that have long been available and already widely used by bloggers, well this time there are interesting widgets that Google Plus Timelines more looks cool because every state that we write on google + will be a slide that kept sliding until the final status.

This widget requires a Google Plus API key, to get the code its API tutorial please read How to Enable Google Plus API

     First login to your account blogger
     Next go to Lay Out / Layout
     Then add the widget and select "JavaScript"
     Copy the following code:

     <! - Default Gplus ->
     <style type = "text / css">
     / * CSS of Google+ Widget
     Blog: http://blogluxie.blogspot.com
     * /
     / * The 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: 1px solid # B20000! important;
     }
     ul.gpaw-body li {
     border-bottom: 1px solid # 025D87! 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: 5px 0 0 5px! important;
     }
     ul.gpaw-body .thumb a {
     text-decoration: none! important;
     outline: none! important;
     }
     ul.gpaw .thumb-body img {
     border: 1px solid # eee! important;
     }
     ul.gpaw-body .thumb a: hover img {
     border: 1px solid #ccc! 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: 6px 0 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 a transparent png * /
     ul.gpaw-body .fade {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4CrkToJjSQMi-ZGTqiWqThoQ7qWmHmGLfBTiw0Px4oqo9tfJEi5BYNHYbiT5P3zdZFP4xx6xOFVFrvvKExqaqxL4qNH_GQJZh1teIcfteIRawFUw_8QZgQrE7V5wNn-W86FJef5JR1j0/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: 1px solid # B20000! 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: 3px solid # fff! important;
     display: block! important;
     }
     .gpaw-profile a.avatar: hover img {
     border: 3px solid # fff! 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: 1px solid # f0f0f0! important;
     border-bottom: 1px solid # f0f0f0! 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: # 990 033! 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 = 'CODE OF GOOGLE API MU';
     //]]>
     </ script>
     <div class = "google-plus-activity" style = "width: 290px;">
     <! - {User: 'CODE PROFILE GOOGLE PLUS MU', show_image: 0} ->


Enter the code APIs and G + Your Profile section of code that I give a red color, then just click Save,