Monday, January 16, 2012

Cara Membuat Widget Melayang Facebook Like Box

Hampir mirip dengan artikel sejenis yang sudah saya rilis sebelumnya yaitu cara membuat buku tamu di blogspot dengan cara disembunyikan dan efek melayang. Pada kali ini saya akan mengajak anda mempraktekan cara membuat widget Facebook like dengan cara tersembunyi dan melayang juga.
banyak manfaat yang bisa anda peroleh dengan menggunakan cara ini yaitu selain unik dan menghemat tempat pada sidebar, juga cara ini bisa mempercepat atau tidak menghambat kecepatan loading di saat blog anda pertama kali di akses. Untuk dapat mempraktekannya terlebih dahulu anda harus sudah terdaftar dan mendapatkan kode Facebook like box terlebih dahulu. Bagaimana tertartik untuk mempraktekannya? berikut cara memasang widget facebook like melayang pada blog:


Cara Membuat Widget Melayang Facebook Like Box

  • Login ke dashboard blogger anda. 
  • Pilih Rancangan > Elemen Laman > Add Gadget (HTML/Javascript).\
  • Copy script widget dibawah ini dan paste pada gadget.
    <style type="text/css">

    .barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhowgsLm8atstaT0Xub-7rWTHwZAzXJofd1QKlgCRAFig-F71hmKPf2ux617ID7J-w4tnaEOhC9KPYLENHIAyC6vcaHhPicG3M0myXVaHJA2pIdSfALygUOQia8o6Uv41oEntj6tj79e3Ol//');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}

    .barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHOBKJvm83WUYWHXHb5sdMwYrIUds57JGIB5VziyPYFALcYOxQ8bkcF2_r01eROGlK9Kdb0weMo5KavesQ_6PKa78mkN3X-RKmrGNEx9f8fPRpysQwqjopry8FE-o-rVF_E52CK7ZplLC//');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}

    .barcontefacebook{margin:5px 0 0 47px}

    </style>



    <div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

    <div class="barcontefacebook">

    <!-- Begin Facebook -->

    KODE FACEBOOK LIKE BOX ANDA DISINI

    <!-- End Facebook -->

    </div>

    </div>
  • Ganti tulisan KODE FACEBOOK LIKE BOX ANDA DISINI dengan kode Facebook Like Box yang sudah anda persiapkan. 
  • Jika pada template anda belum terdapat javascript dari Facebook, maka copy saja javascript di bawah ini dan letakkan tepat di atas kode </head>  pada template supaya widget Facebook Like Box ini bisa berfungsi.
     <script>(function(d, s, id) {

      var js, fjs = d.getElementsByTagName(s)[0];

      if (d.getElementById(id)) {return;}

      js = d.createElement(s); js.id = id;

      js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

      fjs.parentNode.insertBefore(js, fjs);

    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
  • Sesuaikan tinggi dan lebar widget supaya sama dengan ukuran Facebook Like Box yang anda buat sebelumnya melalui Facebook. 
  • Save / Simpan.
Selesai.... bagaimana? gampang kan caranya? semoga Cara Membuat Widget Melayang Facebook Like Box ini blog anda semakin menarik dan unik.
Happy blogging...


Mau berlangganan artikel dari kami, silahkan daftar dengan mengisi alamat email anda pada kotak dibawah kemudian Klik DAFTAR


Mau tau cara membuat fungsi ini Klik disini

No comments:

Post a Comment

My Ping in TotalPing.com
Feedage Grade D rated
Preview on Feedage: web-design Add to My Yahoo! Add to Google! Add to AOL! Add to MSN
Subscribe in NewsGator Online Add to Netvibes Subscribe in Pakeflakes Subscribe in Bloglines Add to Alesti RSS Reader
Add to Feedage.com Groups Add to Windows Live iPing-it Add to Feedage RSS Alerts Add To Fwicki
Ping your blog, website, or RSS feed for Free