Minggu, 08 September 2013

Cara membuat box twitter melayang


Kita sering menjumpai atau melihat box twitter melayang saat membuka website atau blog orang lain,dan kita pengen tau bagai mana cara memasangnya box itu, trik disini akan membagikan sedikit pengetahuan saya, dengan cara masuk ke dashboard blogger dulu terus kita pilih tata letak dan pilih tambah widget ambil HTML/javascript terus


Copy code dibawah ini dan pastekan disitu
<!-- TW 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:290px;
      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;">Twit dari Asep suhenda. Please <blink>Follow Me !!!</blink> </p>
<!-- Mulai --!>

<iframe name="fbfanIFrame_0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=counter_excell" class="@counter_excell" style="width: 290px; height: 250px; border-style: none;" frameborder="0" scrolling="no"></iframe><script type="text/javascript">fanbox_init("@counter_excell");</script>

<!-- Selesai --!><a class='close' href='#'>&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://regibrader-free.blogspot.com/search/label/Widget%20Blog">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-follow-me-box_12.html">Get This Widget</a></p>
    </div>

Sebelum di save Ganti dulu yang titandai dengan warna merah nama yang ada di box nanti dan nama akun twitter kamu. nah baru disave,gampang kan..?
Itulah cara membuat box twitter melayang semoga bermanfaat untuk klien semua trimakasih.

Ditulis oleh: Asep Suhenda Andro exceLL Updated at : 04.24
Thank You Comments Pictures

Terimakasih atas kunjungan anda, Karena telah menyempatkan waktu untuk membaca artikel tentang Cara membuat box twitter melayang. semoga bermanfaat bagi anda semua, Dan simak terus di artikel lainya setelah artikel Cara membuat box twitter melayang dibawah ini. Terima Kasih, Happy Blogging :)

0 komentar:

Posting Komentar

Selamat datang di blog baru www.androexcel.blogspot.com Mudah-mudahan artikel yang ada di blog ini bermanfaat bagi anda semua.

×

 

Copyright @ 2013 Andro exceLL.

Designed by Templateism | MyBloggerLab | DMCA.com