Cara Membuat Fanspage Facebook Melayang Berisi Tombol Donate Dan Follow Di Blog - Nandea96
Artikel Terbaru
Loading...

Monday, 8 July 2019

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



Hy Semua. ketemu lagi nih dengan Dea. nah kali ini Dea 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 Dea 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%2FNandea96-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://PayPal.Me/adityadr" rel='nofollow' title="Donate for blog" target="_blank" button class="button button2 fa fa-paypal" 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.


Share with your friends

Give us your opinion

Selamat Datang Di Website Nandea96
Mohon untuk selalu mencuci tangan dengan air bersih serta sabun setiap 15 menit sekali agar terhindar dari covid-19 dan penyakit lainnya seperti diare. selalu gunakan masker ketika berpergian kemanapun 😷. meskipun itu hanya berbelanja sekitar 0.1 km atau ke tetangga. hindari kontak fisik dan beri jarak sekitar 2 meter dari jarak tempat kita berdiri dengan seseorang agar tidak memunculkan klaster baru yang tidak di-inginkan.

-Terimakasih 🙏-
Done