Widget Blogger "Google Plus Timelines"

Discussion in 'Blogger' started by samuel, May 19, 2013.

  1. samuel

    samuel Member

    Joined:
    Feb 5, 2013
    Messages:
    478
    Likes Received:
    15
    Trophy Points:
    18
    Google+:
    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

    [​IMG]

    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 :


    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
     
  2. royger

    royger Member

    Joined:
    Feb 15, 2013
    Messages:
    392
    Likes Received:
    12
    Trophy Points:
    18
    Google+:
    Wordpress

    Untuk wp bro @samuel ada gag codingannya?? klo ada mohon dibagi dong *ketawa3*
     
  3. samuel

    samuel Member

    Joined:
    Feb 5, 2013
    Messages:
    478
    Likes Received:
    15
    Trophy Points:
    18
    Google+:
    royger wrote:

    kalo untuk WP saya belum ngerti codingnya *pusing*
     
  4. ayahnyanadia

    ayahnyanadia Well-Known Member

    Joined:
    Apr 4, 2013
    Messages:
    1,369
    Likes Received:
    153
    Trophy Points:
    63
    Google+:
    wew mantap neh..

    wew mantap neh..
     
  5. ncang

    ncang Super Level

    Joined:
    Feb 7, 2013
    Messages:
    4,653
    Likes Received:
    761
    Trophy Points:
    113
    Google+:
    keren juga yah, ini sambungan

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

    samuel Member

    Joined:
    Feb 5, 2013
    Messages:
    478
    Likes Received:
    15
    Trophy Points:
    18
    Google+:
    @ayahnyanadia : lebih mantap

    @ayahnyanadia : lebih mantap lagi kalo dimodif masbadar *jail*


    @masaiya-chang : iya sambungan dari kode API, karena widget ini memerlukan kode API *keren1*
     
  7. Andre

    Andre Member

    Joined:
    Apr 12, 2013
    Messages:
    483
    Likes Received:
    22
    Trophy Points:
    18
    keren neh tapi hati-hati mas

    keren neh *jail* tapi hati-hati mas bro kalo nyambungin widget , soalnya pake KODE API *ketawa1*
     
  8. orlandolabz

    orlandolabz New Member

    Joined:
    May 21, 2013
    Messages:
    12
    Likes Received:
    0
    Trophy Points:
    1
    wah keren ni, design dari

    wah keren ni, design dari google elegan, bagus buat blog
     
  9. robywakas

    robywakas Member

    Joined:
    Mar 10, 2013
    Messages:
    158
    Likes Received:
    17
    Trophy Points:
    18
    Google+:
    Andre wrote:

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

Share This Page