Cara Membuat Widget +1 Google Plus Melayang pada Blog

Widget +1 Google Plus Melayang pada Blog | INDOBLOG BLITAR - Banyak sekali orang yang menanyakan bagaimana cara membuat widget +1 google plus melayang pada saya.

Sebenarnya membuatnya cukup simpel, kita bisa menggunakan script message box seperti pada Like Box Facebook dan mengganti script like box facebook dengan script rekomendasi / vote plus one +1.

Jika masih belum paham, akan saya jelaskan caranya beserta tutorialnya. Berikut tutorial Cara Membuat Widget +1 Google Plus Melayang pada Blog :

• Cara Membuat Widget +1 Google Plus Melayang pada Blog
• Seperti biasa, kalian harus  masuk terlebih dahulu ke akun blogger kalian
• Buka tab tataletak > Tambah gadget
• Pilih HTML/JavaScript
• Kemudian kalian bisa memasukkan kode script di bawah ini:

    <style type="text/css" scoped>
    /* Message Box */
    #box-message {
    position:fixed !important;
    position:absolute;
    top:-1000px;
    left:50%;
    margin:0px 0px 0px -182px;
    width:300px;
    height:auto;
    padding:16px;
    background:#fff;
    font:normal Dosis, Georgia, Serif;
    color:blue;
    border:2px solid blue;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    }
    #box-message a.close {
    position:absolute;
    top:-10px;
    right:-10px;
    background:#fff;
    font:bold 16px Arial, Sans-Serif;
    text-decoration:none;
    line-height:22px;
    width:22px;
    text-align:center;
    color:#111;
    border:2px solid #333;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:22px;
    -moz-border-radius:22px;
    border-radius:22px;
    cursor:pointer;
    }
    #twitterx {
    background: #EEF9FD;
    padding: 10px;
    text-align:center;
    border: 1px solid #C7DBE2;
    border-top: 0;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type='text/javascript'>
    $(window).bind("load", function() {
    // Animate Top Value When Page Loaded Completed
    $('#box-message').animate({top:"200px"}, 1000);
    // Remove Mailbox When Close Button On Click
    $('a.close').click(function() {
    $(this).parent().fadeOut();
    return false;
    });
    });
    </script>
    <div id='box-message'>
    <!-- HTML Start -->
    <div style="text-align: center;">
    <p style=" margin:10px; font-size:15px; color:#000; font-weight:bold;">Bantu saya vote +1 pada tombol google plus di bawah!!</p>
    <div style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIMAHDj1uBUIB4v6gRj4ogdoFW1yvn5-nlH8j-Jocv2od5fe3ElZsCiSiuPUThotm9z5OayWdxchnkBNF4myQg5HWNL-ywOzXg3dI8tFIAq6wgp0zI4cFys24yVgWYwc2CqqNxDfpLRXax/s300/Widget+Melayang+Google+Plus.png)no-repeat top left; width:283px; height:125px; padding-top:27px; text-align:left; padding-left:60px; margin-top:20px'>
    <div class='g-plusone' data-annotation='inline' data-width='300'></div>
    <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>
    </div>
    <!-- HTML End -->
    </div>
    <small><div style=”font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;”><a href="http://dedy-restu.blogspot.com/2016/02/cara-membuat-widget-1-google-plus.html" target="_blank" title=”widget follow us”>+ Get Widget </a></div></small><a class='close' href='#'>&times;</a></div>

• Kemudian save. Selamat! Widget +1 Google Plus Melayang pada Blog kalian sudah jadi!

Keterangan :
Warna biru : Bisa kalian ganti sesuai kata-kata anda sendiri
Warna merah : Link dari gambar background
Warna hijau : Pengaturan letak tombol google plus

Begitulah tutorial singkat mengenai Cara Membuat Widget +1 Google Plus Melayang pada Blog. Jangan lupa kasih vote +1 juga ya.

Tags : #SCRIPT BLOG

Share This :

INDOBLOG BLITAR