Widget Google Plus Timelines

Widget Google Plus Timeline ini sama seperti widget yang dimiliki oleh twitter yaitu Emebedded Timelines yang sudah lama tersedia dan sudah banyak digunakan oleh para blogger, nah kali ini ada widget yang menarik yaitu Google Plus Timelines yang lebih terlihat keren karena setiap status yang kita tulis di google+ akan menjadi sebuah slide yang terus sliding hingga status terakhir .

Untuk widget ini dibutuhkan sebuah Google Plus API key, untuk tutorial mendapatkan kode API nya silahkan baca Cara Mengaktifkan Google Plus API

1. Pertama login ke akun blogger
2. Selanjutnya pergi ke Lay Out / Tataletak
3. Kemudian tambahkan widget dan pilih "JavaScript"
4. Lalu Copy kode berikut :

<!-- Gplus Default -->
<style type="text/css">
/* CSS of Google+ Widget
Blog : http://blogluxie.blogspot.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/AVvXsEh_DKRSisYyTWNiTJIjAcZ5w-4sqCWG3_NylFHFW0qVzwJo6G1nu8bHsr34tVUnYQUYWfzgeXkK2m2eHUCGFbZGvLmHU6juANzH6hrW7nwzECUzNZW37dvXteXr_F4qUIiMP_GsIjxzvrk/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 = 'KODE GOOGLE API MU';
//]]>
</script>
<div class="google-plus-activity" style="width: 290px;">
<!-- { user: 'KODE PROFILE GOOGLE PLUS MU', show_image:0 } -->

Masukan kode API dan Profile G+ mu dibagian kode yang saya beri warna merah, selanjutnya tinggal klik Simpan ,

Untuk demonya silahkan lihat Sidebar kiri blog ini