Cara membuat Fanspage Facebook Melayang Keren Di Blog - Nandea96
Artikel Terbaru
Loading...

Monday, 8 July 2019

Cara membuat Fanspage Facebook Melayang Keren Di Blog




Hy Semua.. kali ini Dea akan memberikan tutorial lagi nih..yup.. ini tentang widget lagi.. dan mengarah ke social media lagi :)..ya dikarenakan Dea lebih banyak menghabiskan waktu untuk bereksperimen membuat widget - widget keren social media...salah satunya membuat fanspage facebook melayang..kalian pernah melihat ada sebuah fanspage yang melayang saat kalian mengunjungi blog orang? ya entah itu blog apapun.. nah sebenarnya para blogger memang sengaja memasang fanspage facebook melayang agar para pengunjung tidak lupa untuk share/mengikuti keseharian blog tersebut... manfaat bagi blog? banyak... tapi Dea tidak membahas itu sekarang... yang Dea  bahas disini ialah...

Step By Step :

  • Pertama masuk ke Blog kalian terlebih dahulu.
  • Seperti Biasa. Cari "Tata Letak".
  • Setelah semua berjalan sempurna.. sekarang kalian dapat memilih /mengclick "tambahkan gadget/Add Widget/gadget" terserah tempatnya dimana saja... entah itu di sidebar. header. footer. atau badannya.
  • Jika sudah maka akan muncul tab baru.. disini kalian pilih "HTML/JAVASCRIPT".
  • Maka kalian akan melihat 2 textbox warna putih.. yang satu kecil "Judul" dan yang satu besar "Konten".. Copy dan pastekan kode dibawah ini tepat pada form "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:auto;

    padding:16px;

    background:#fff;

    font:normal Allerta stencil, Allerta stencil, Allerta stencil;

    color:#6c6e6d;

    border:2px solid #6c6e6d;

    -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:#6c6e6d;

    border:2px solid #6c6e6d;

    -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;

}

    .box { 

    cursor: pointer; 

    height: 30px;

    float: left; 

    margin: 5px; 

    position: relative; 

    overflow: hidden; 

    width: 30px;

    margin-left: 20px; 



}

     .box2 { 

     cursor: pointer; 

     height: 30px; 

     float: left; 

     margin: 5px; 

     position: relative; 

     overflow: hidden; 

     width: 30px;

     margin-left: 20px;



} 



    .box3 { 

     cursor: pointer; 

     height: 30px; 

     float: left; 

     margin: 5px; 

     position: relative; 

     overflow: hidden; 

     width: 30px;

     margin-left: 20px;   



}



    .box4 { 

     cursor: pointer; 

     height: 30px; 

     float: left; 

     margin: 5px; 

     position: relative; 

     overflow: hidden; 

     width: 30px;

     margin-left: 20px;



}  



    .box5 { 

     cursor: pointer; 

     height: 30px; 

     float: left; 

     margin: 5px; 

     position: relative; 

     overflow: hidden; 

     width: 30px;

     margin-left: 20px;



} 



     .box img { 

     position: absolute; 

     left: 0; 

     -webkit-transition: all 300ms ease-out; 

     -moz-transition: all 300ms ease-out; 

     -o-transition: all 300ms ease-out; 

     -ms-transition: all 300ms ease-out; 

      transition: all 300ms ease-out; 

} 



     .box2 img { 

     position: absolute; 

     left: 0; 

     -webkit-transition: all 300ms ease-out; 

     -moz-transition: all 300ms ease-out; 

     -o-transition: all 300ms ease-out; 

     -ms-transition: all 300ms ease-out; 

      transition: all 300ms ease-out;



} 



     .box3 img { 

      position: absolute; 

      left: 0; 

      -webkit-transition: all 300ms ease-out; 

      -moz-transition: all 300ms ease-out; 

      -o-transition: all 300ms ease-out; 

      -ms-transition: all 300ms ease-out; 

       transition: all 300ms ease-out;



 } 



     .box4 img { 

      position: absolute; 

      left: 0; 

      -webkit-transition: all 300ms ease-out; 

      -moz-transition: all 300ms ease-out; 

      -o-transition: all 300ms ease-out; 

      -ms-transition: all 300ms ease-out; 

       transition: all 300ms ease-out;

}

   



      .box5 img { 

      position: absolute; 

      left: 0; 

      -webkit-transition: all 300ms ease-out; 

      -moz-transition: all 300ms ease-out; 

      -o-transition: all 300ms ease-out; 

      -ms-transition: all 300ms ease-out; 

       transition: all 300ms ease-out;



    }



    .box .caption {

    font-family: Tahoma;

        font-size: .5em; 

       
 
background:url(https://3.bp.blogspot.com/-bWqoxCvTRgs/WWrkpDCz5nI/AAAAAAAAAO4/Aqx8uEGv2YUx09G0my6cwJ1AYCBgj8bgACLcBGAs/s1600/Twitter.png);
 

        position: absolute;

        color: #fff;   

        z-index: 100; 

        -webkit-transition: all 300ms ease-out; 

        -moz-transition: all 300ms ease-out; 

        -o-transition: all 300ms ease-out; 

        -ms-transition: all 300ms ease-out; 

        transition: all 300ms ease-out; 

        left: 0; 

        opacity: 0; 

        width: 30px; 

        height: 30px; 

        text-align: left; 

        padding: 15px;



    } 



    .box2 .caption { 

        font-family: Tahoma;

        font-size: .5em;

       
 
background:url(https://3.bp.blogspot.com/-gYZNmMOcAvg/WWrkoCLawNI/AAAAAAAAAOs/dKSNiIc3a0obSsC6I0r9rdc79kTbjs4qgCLcBGAs/s1600/Google%2B%252B2.png);
 

        position: absolute; 

        color: #fff; 

        z-index: 100; 

        -webkit-transition: all 300ms ease-out; 

        -moz-transition: all 300ms ease-out; 

        -o-transition: all 300ms ease-out; 

        -ms-transition: all 300ms ease-out; 

        transition: all 300ms ease-out; 

        left: 0; 

        opacity: 0; 

        width: 30px; 

        height: 30px; 

        text-align: left; 

        padding: 15px;



     }



    .box3 .caption { 

        font-family: Tahoma;

        font-size: .5em;

       
 
background:url(https://2.bp.blogspot.com/-QHJxkisvCVc/WWrrFl-SloI/AAAAAAAAAPY/2Fp35ilXeJg1_NGn5JRMqacEbhPKV7URQCLcBGAs/s1600/Pinterest2.png);
 

        position: absolute; 

        color: #fff; 

        z-index: 100; 

        -webkit-transition: all 300ms ease-out; 

        -moz-transition: all 300ms ease-out; 

        -o-transition: all 300ms ease-out; 

        -ms-transition: all 300ms ease-out; 

        transition: all 300ms ease-out; 

        left: 0; 

        opacity: 0; 

        width: 30px; 

        height: 30px; 

        text-align: left; 

        padding: 15px;



     }



    .box4 .caption { 

        font-family: Tahoma;

        font-size: .5em;

       
 
background:url(https://1.bp.blogspot.com/-KE0GKMknmG8/WWrrsPeCwCI/AAAAAAAAAPg/oXQj6VqiNu8KtWF2nYTv7iJN-7nTf_bmACLcBGAs/s1600/Instagram2.png);
 

        position: absolute; 

        color: #fff; 

        z-index: 100; 

        -webkit-transition: all 300ms ease-out; 

        -moz-transition: all 300ms ease-out; 

        -o-transition: all 300ms ease-out; 

        -ms-transition: all 300ms ease-out; 

        transition: all 300ms ease-out; 

        left: 0; 

        opacity: 0; 

        width: 30px; 

        height: 30px; 

        text-align: left; 

        padding: 15px;



     }



    .box5 .caption { 

        font-family: Tahoma;

        font-size: .5em;

       
 
background:url(https://1.bp.blogspot.com/-8pCvs2pbDuI/WWrqJB31-aI/AAAAAAAAAPM/MoBkgF1TtUQJKtnsOu6m3WiloyaLMRBIACLcBGAs/s1600/Rss2.png);
 

        position: absolute; 

        color: #fff; 

        z-index: 100; 

        -webkit-transition: all 300ms ease-out; 

        -moz-transition: all 300ms ease-out; 

        -o-transition: all 300ms ease-out; 

        -ms-transition: all 300ms ease-out; 

        transition: all 300ms ease-out; 

        left: 0; 

        opacity: 0; 

        width: 30px; 

        height: 30px; 

        text-align: left; 

        padding: 15px;



    }



     .box:hover .fade-caption { 

        opacity: 1; 



    }



     .box2:hover .fade-caption { 

        opacity: 1; 



    }



     .box3:hover .fade-caption { 

        opacity: 1; 



    }



     .box4:hover .fade-caption { 

        opacity: 1; 



    }



     .box5:hover .fade-caption { 

        opacity: 1; 



    }  



    </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/likebox.php?href=https://www.facebook.com/aquillienuts/.ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784"
 scrolling="no" frameborder="0" style="border:none; overflow:hidden; 
width:292px; height:258px;" allowtransparency="true"></iframe>

    </center>

   
 <center><font size="4" color="#6c6e6d" 
font="Allerta,Allerta">Ikuti Keseharianku Hanya di 
:</font></center>

    <hr align="right" color="#6c6e6d" />

    <!-- HTML End -->

    <a class='close' href='#'>&times;</a>

    <center>

    <div id="mainwrapper">

    <!-- Image Caption 3 --> 

         <!-- Image Caption 3 --> 

        <div class="box fade-caption">



    <a href="https://www.twitter.com" target='_blank'>

    <img id="image-3"

   
 
src="https://1.bp.blogspot.com/-enJUaWVrqOU/WWrkpd7dqnI/AAAAAAAAAO8/90lcCcnOOAwFNWs-vOvPwf6a7Jco0fQDACLcBGAs/s1600/Twitter2.png"/>

            <span class="caption fade-caption"> 

            <h3></h3> 

            <p></p> 

            </span> 

        </a></div>

      <div class="box2 fade-caption">

     <a href="https://www.Googleplus.com" target='_blank'>

           
 <img id="image-3" 
src="https://2.bp.blogspot.com/--b1zzdz6rjA/WWrknzQfflI/AAAAAAAAAOo/w7Zmt-far5oBTpnT0gbdozfhUOI-Il8pACLcBGAs/s1600/Google%2B%252B.png"/>
 

            <span class="caption fade-caption"> 

            <h3> 

            <p></p> 

            </h3></span> 

        </a></div>

    <div class="box3 fade-caption"> 

    <a href="https://www.Pinterest.com" target='_blank'>

           
 <img id="image-3" 
src="https://4.bp.blogspot.com/-BO6BsdXmlKg/WWrtBjtRA4I/AAAAAAAAAPo/kL6uppEhZ28_2nzWjRCjTQ-4ue3vdzOHwCLcBGAs/s1600/Pinterest.png"/>
 

            <span class="caption fade-caption"> 

            <h3></h3> 

            <p></p> 

            </span> 

        </a></div>

    <div class="box4 fade-caption">

    <a href="https://wwww.Instagram.com" target='_blank'> 

           
 <img id="image-3" 
src="https://2.bp.blogspot.com/-t1ydJ-d3evE/WWrrsLf-vMI/AAAAAAAAAPc/njRQiIXDRXY_WeW-GuWFItcsM8j230dfACLcBGAs/s1600/Instagram.png"/>
 

            <span class="caption fade-caption"> 

            <h3></h3> 

            <p></p> 

            </span> 

        </a></div>

    <div class="box5">

    <a href="https://www.feedburner.com" target='_blank'> 

           
 <img id="image-3" 
src="https://2.bp.blogspot.com/-S8Y9u1ETL7o/WWrqJOB98eI/AAAAAAAAAPI/lqKdlVaMyswkeUcoBJOHBwCgnV5GrKslQCLcBGAs/s1600/Rss.png"/>
 

            <span class="caption fade-caption"> 

            <h3></h3> 

            <p></p> 

            </span> 

        </a></div>

    </div>

    </center>

    </div>

  • Lalu ganti Tulisan yang berwarna Ungu Dengan nama Fanspage kalian..bisa dilihat di addresbar saat masuk ke home/profile fanspage. ganti tulisan merah dengan url social media kalian.. dan terakhir ganti juga tulisan warna hijau sesuka hati 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