Cara membuat kotak Social Media melayang

Posted by Fauzi Alamsyah

Saturday, February 8, 2014

DEMO

Assalamualaikum wr.wb, saya akan menulis artikel tentang Cara membuat kotak Social media melayang yang terdiri dari : Twitter, Google+1, & Facebook melayang di blog agan ^_^. Caranya sangat mudah yuk mari simak yang dibawah ini :)

1. Login ke blog pilih Tata Letak

2. Pilih Tambahkan Gadget

3. Pilih HTML/JavaScript.

4. Copy kode dibawah ini, lalu Paste di HTML/JavaScript

<!-- WD melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:38%;
      margin:0px 0px 0px -182px;
      width:300px;
      height:auto;
      padding:16px;
       -webkit-box-shadow: 0px 0px 7px #222;
      -moz-box-shadow: 0px 0px 7px #222;
      box-shadow: 0px 0px 7px #222;  background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
      color:#111;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;}
    #kotak-facebook a.close {
      position:absolute;
      top:-10px;
      right:-10px;
      background:#333;
      font:bold 16px Arial,Sans-Serif;
      text-decoration:none;
      line-height:22px;
      width:22px;
      text-align:center;
      color:#fff;
      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:10px;
      -moz-border-radius:10px;
      border-radius:10px;
      cursor:pointer;
    }
</style>
    <script type='text/javascript'>
    $(window).bind("load", function() {
         // animasikan nilai top saat halaman telah selesai dimuat
         $('#kotak-facebook').animate({bottom:"50px"}, 1000);
        // hilangkan kotak pesan saat tombol (x) di klik
         $('a.close').click(function() {
             $(this).parent().fadeOut();
         return false;
         });
    });
    </script>
    <div id='kotak-facebook'>
<p style=" margin-right:10px;  font-size:15px; color:#000000;">Tolong dibantu, hanya dengan Follow.</p>
<!-- Mulai --!>

<center><h3 class=”title”>On Twitter</h3></center>
---Masukkan dengan Code Script Twitter Sobat---

<center><h3 class=”title”>On Google+1</h3></center>
---Masukkan dengan Code Script Google+ Sobat---

<center><h3 class=”title”>On Facebook</h3></center>
---Masukkan dengan Code Script Facebook Sobat---

<!-- Selesai --!><a class='close' href='http://zinote.blogspot.com'>&times;</a>
<p style=" float:right;  margin-right:35px;  font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://zinote.blogspot.com">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://zinote.blogspot.com">Get This Widget</a></p></div>

 5. lalu agan simpan & lihat hasilnya :)

 Keterangan :

• Tulisan yang di block warna biru, ganti kata-kata yang agan inginkan, tidak juga tidak masalah
• Tulisan yang di block warna merah, ganti dengan Code Script yang agan miliki

Itulah artikel tentang Cara membuat kotak Social media melayang semoga membantu ^_^ ,makasih sudah membaca artikel ini. Apabila ingin COPAS harap sertakan sumbernya :) makasih Wassalamualaikum wr.wb

Share This :