Cara Membuat Fanspage Facebook Melayang Berisi Tombol Donate Dan Follow Di Blog

Cara Membuat Fanspage Facebook Melayang Berisi Tombol Donate Dan Follow Di Blog



Hy Semua. ketemu lagi nih dengan aku. nah kali ini aku akan memberikan tutorial tentang widget. widget ini masih sama dengan sebelumnya. akan tetapi widget ini terinspirasi dari sebuah website yaitu vaditdesign. jika kalian pernah mengunjungi web tersebut. tepat pada sidebar webnya terdapat fanspage + dibawahnya berisi 2 buah button. button pertama yaitu tombol follow dan button kedua yaitu tombol donate. dan aku lalu membuatnya dan jadilah seperti pada gambar diatas. yang membuatnya berbeda ialah. fanspage ini melayang. jika kalian menginginkan widget ini kalian harus mengikuti langkah - langkahnya dibawah ini...

Step By Step :

  • Buka Terlebih Dahulu Blog Kalian Disini.
  • Jika kalian sudah masuk ke blog maka pergi dan cari "Tata Letak".
  • Setelah itu pilih  "Add gadget/Widget atau Tambahkan Gadget/Widget".
  • Maka akan muncul kotak tab kecil. disini kalian harus mencari "HTML/JavaScript".
  • Jika Sudah Menemukannya maka Click "HTML/JavaScript" Tersebut.
  • Lalu copy code dibawah ini dan pastekan tepat pada kolom "Konten" Tersebut.


   <style type='text/css'>
    /* Message Box */
    #box-message {
    position:fixed !important;
    position:absolute;
    top:-1000px;
    left:50%;
    margin:0px 0px 0px -182px;
    width:300px;
    height:270px;
    padding:16px;
    background:#fff;
    font:normal Allerta stencil, Allerta stencil, Allerta stencil;
    color:#008CBA;
    border:1px solid #fff;
    -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:2px;
    -moz-border-radius:2px;
    border-radius:2px;

    }

    #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:#6c6e6d;
    border:2px solid #fff;
    -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:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    cursor:pointer;     
    }  

.button {
    border-radius:2px;
    color:#FFFF;
    padding: 10px 63px;
    text-align: center;
    text-decoration: none;
    float:left;
    overflow:auto;
    font-size: 16px;
    margin: 15px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    -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);
}
.button2 {
    background-color:white; 
    color:#008CBA;
    border: 2px solid #fff;

}
.button2:hover {
    text-decoration: none;
    background-color: #008CBA;
    color:#fff!important;
    border: 2px solid #008CBA;
}
    </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:"50px"}, 1000);
    // Remove Mailbox When Close Button On Click
    $('a.close').click(function() {
    $(this).parent().fadeOut();
    return false;
    });
    });
    </script>
    <div id='box-message'>
    <!-- HTML Start -->
    <center>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fputuokaken-747270622064501%2F&tabs&width=300&height=214&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="300" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
    </center>
    <!-- HTML End -->
    <a class='close' href='#'>&times;</a>
    <center>
   <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<font color='red'><a href="https://www.blogger.com/follow.g?view=FOLLOW&amp;blogID=2597317059436691326" title="Follow from blog" rel='nofollow' target="_blank" button class="button button2 fa fa-users" style="color:#6c6e6d"></a></font>
<a href="http://saweria.co/PutuOka" rel='nofollow' title="Donasi Disini" target="_blank" button class="button button2 fa fa-qrcode" style="color:#6c6e6d;"></a>
</center>
    </div>

  • Setelah itu click "Save".
  • Dan sekarang coba lihat blog kalian. apakah bisa? jika bisa maka selamat. jika tidak maka ulangi langkah - langkah tersebut hingga kalian paham.
Widget ini bekerja pada template bawaan blogger lama. template blogger baru dan template custom masih belum dicoba.. dan gantilah tulisan berwarna hijau dengan alamat fanspage  kalian. biasanya terdapat pada saat kamu berada di home fanspage tepat pada Addressbar akan terlihat url kalian. dan gantilah alamat yang diberi tanda merah dengan BlogID blogger kalian. cara mendapatkannya sangat mudah. kalian hanya tinggal masuk ke dasboard blogger. tepat pada Addressbar kalian akan melihat BlogId kalian. dan gantilah alamat yang berwarna kuning tersebut dengan username paypal kalian.