Widget Blogger "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 Mendapatkan Kode 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 :

Spoiler

Kode HTML

Code:

<style type="text/css">
/* CSS of Google+ Widget
*/
/* 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 = 'KODE GOOGLE API MU';
//]]>
</script>
<div class="google-plus-activity" style="width: 290px;">

Ganti kode Google APInya
Dan masukan kode profile Google Plus mu

Lihat DEMO

 

Wordpress

Untuk wp bro @samuel ada gag codingannya?? klo ada mohon dibagi dong

 

royger wrote:

kalo untuk WP saya belum ngerti codingnya

 

wew mantap neh..

wew mantap neh..

 

keren juga yah, ini sambungan

keren juga yah, ini sambungan dari yg kode api g+ itu, saya bookmark juga biar ga lupa

 

@ayahnyanadia : lebih mantap

@ayahnyanadia : lebih mantap lagi kalo dimodif masbadar


@masaiya-chang : iya sambungan dari kode API, karena widget ini memerlukan kode API

 

keren neh tapi hati-hati mas

keren neh tapi hati-hati mas bro kalo nyambungin widget , soalnya pake KODE API

 

wah keren ni, design dari

wah keren ni, design dari google elegan, bagus buat blog

 

Andre wrote:

memangnya kenapa mas bro kalau ada kode API ada dampaknya untuk blog ?