Cara Membuat Kotak Like Facebook Menarik Di Blog

Cara Membuat Kotak Like Facebook Menarik Di Blog. Ini adalah salah satu widget yang bisa melayang di blog. Melayang disini bukan seperti burung twitter. Tetapi bisa berjalan mengikuti arah halaman yang berada dibawahnya jika di scroll. Cara ini memang cocok untuk menghis blog anda agar lebih menarik. Supaya lebih cepat membuatnya, anda harus sudah mempunyai FP atau Fans Page di Facebook. Jika belum punya, baca di Cara Membuat Fan Page Facebook.

Kurang lebih seperti diatas lah kotak like facebook menarik yang akan tampil di blog anda. Tapi itu FP punya saya. Kalau anda ingin harus mempunyai HTML Fans Page anda. Jebih jelas mengenai cara membuat atau memasang widget yang menarik ini, silahkan anda simak pada tutorial dibawah ini.

Cara Membuat Kotak Like Facebook Menarik Di Blog

1. Login ke akun blogger anda, pada dashboard pilih blog anda lalu masuk ke Tata Letak

2. Klik tambah gadget pada kolom yang mana saja. Karena widget ini melayang dan tidak menempel pada kolom widget

3. Cari, lalu pilih widget yang bernama HTML/Javascript

4. Copy kode dibawah ini lalu editlah sendiri sesuai ketentuan ketentuan dibawah.

<style type=text/css>

#like-facebook {

position:fixed !important;

position:absolute; /* IE6 */

bottom:-1000px;

right:10%;

margin:0px 0px 0px -182px;

width:auto;

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:#E3E3E3; 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 src=https://jonarendra.googlecode.com/files/Tombol-Close-Jona-Rendra.js/></script>

<div id=kotak-facebook>

<font size="3"><b>Bantu saya untuk klik like ya...</b></font size>

<br/>

<div id="fb-root"></div>

<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 = "//connect.facebook.net/id_ID/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

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

<div class="fb-like-box" data-href="http://www.facebook.com/jonarendra" data-width="292" data-height="400" data-show-faces="true" data-stream="false" data-border-color="green" data-header="true"></div>

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

Keterangan :

• Kalimat yang berwarna biru bisa anda ganti dengan kalimat yang muncul diatas kotak like facebook nantinya 
• Rangkaian kode HTML yang berwarna merah ini harus anda ganti dengan kode like facebook anda sendiri

Kode yang merah itu adalah kode Like Box punya saya. Kalau anda mau mudah, edit saja jonarendra di www.facebook.com/jonarendra dengan nama fans page anda. Apabila anda ingin editan sendiri, anda harus mendapatkan HTML nya di Cara Mengetahui Kode HTML Fans Page Facebook.

5. Klik Save/Simpan

Kode HTML diatas sudah dilengkapi dengan CSS dan tombol close. Supaya tampilannya jadi lebih menarik maka saya tambahkan atribut atribut tersebut. Mau melihat live preview nya? Buka HTML Editor, lalu paste dan preview.

Bagaimana? apakah anda sudah berhasil membuat like facebook yang menarik? Sekian dulu postingan Cara Cara saya yang berjudul Cara Membuat Kotak Like Facebook Menarik Di Blog, semoga bermanfaat untuk anda dan jika ada pertanyaan silahkan poskan komentar.

Go to link Download

Cara Membuat Animasi Loading Blog Lebih Menarik

1.  Login ke akun blogger anda
2. Klik Template » edit HTML
3. Tambahkan kode CSS berikut di atas kode ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js type=text/javascript></script>

<div id=loadhalaman>
<div class=loadball></div>
<div class=loadball-2></div>
</div>
<script type=text/javascript>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^="+siteURL+"], a[href^=/], a[href^=./], a[href^=../]");
$internalLinks.click(function() {
$(#loadhalaman).fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=_blank
$(#loadhalaman).click(function() {
$(this).hide();
});
});
</script>

Go to link Download