Cara Membuat Fanspage Melayang Ala Seocips

Cara Membuat FansPage Melayang Ala Seocips:Hallo sahabat blogger ketemu lagi dengan saya admin ID Dzgn, Kali ini saya akaan coba membagikan Tutorial Cara Membuat Fanspage Melayang ala seocips.

Result

Nah sebelum membahas tutorial ini, saya turut bersedih karena blog seocips kini sudah tidak bisa memberikan Tutorial-tutorial bermanfaat lagi untuk kita blogger pemula, entah penyebabnya kenapa tapi setau saya blog seocips terkena Google Error 404. untuk lebih lengkap kenapa blog seocips menghilang kamu bisa kunjungi link berikut Misteri Menghilangnya Blog Seocips.com.
Oky kembali ke pembahasan tutorial ini sebenranya saya ambil dari blog lama saya, saya hanya merubah artikel postinganya.

Cara Membuat Fanspage Melayang Ala Seocips


<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/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</div>

Cara Memasang Fanspage Ala Seocips Lewat Edit Html

1. Silahkan kamu masuk Blogger>Tema>Edit Html, Silahkan kamu cari kode </style> Lalu pastekan kode berikut tepat di atas kode yang di cari, untuk mempercepat pencarian shobat bisa klik tombol

CTRL

Pada Keyboard Leptop shobat

Css Untuk Fanspage Melayang Pojok Atas Ke Bawah Samping Kiri

/*Fixed Facebook Like Box BulshitMan*/
.fb-btn-BulshitMan {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;left:0.5%;z-index:99999999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 5s;-webkit-animation:atas 5s;animation:atas 5s;}
.fb-btn-BulshitMan {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-BulshitMan a:link, .fb-btn-BulshitMan a:visited {color:#ffcc00;}
.fb-btn-BulshitMan a:hover {color:#fff;}
.fb-btn-BulshitMan2{background:rgba(1, 0, 1, 0.3);-moz-animation:kanan 15s;-webkit-animation:kanan 15s;animation:kanan 15s}
.fb-btn-BulshitMan2 {padding:3px ;color:#fff;font-size:120%;}
@-webkit-keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@-webkit-keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}
@keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}

Css Untuk Fanspage Melayang Pojok Atas Ke Bawah Samping Kanan

Nah di atas adalah Css untuk Membuat Fanspage Ala Seocips dari pojok atas kiri, maupun dari pojok atas kanan, kamu bisa menyesuaikanya sesuai selera kamu. Jika Sudah Sekarang silahkan kamu cari kode </body> Lalu pastekan kode berikut tepat di atasnya.


<div class="fb-btn-Bulshitman">
<div class="fb-btn-BulshitMan2">
<div class="fb-page" data-href="https://www.facebook.com/iddzgn" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/iddzgn"><a href="https://www.facebook.com/iddzgn">ID Dzgn</a></blockquote></div></div></div>

- Silahkan kamu ganti https://www.facebook.com/iddzgn dengan Url Fanspage kamu
- Pastikan Blog kamu sudah terpasang SDK JavaScript facebook di blog kamu, untuk menampilkan Fanspage

Jika sudah selesai terakhir silahkan kamu Save Tema.

Cara Memasang Fanspage Melayang Ala Seocips Lewat Widget Blog

Nah Untuk tahap ini lebih simple dari pada cara di atas, untuk anda yang mungkin terlalu rumit jika melewati edit Html
Shobat bisa coba dengan cara berikut ini.
1. Masuk ke Blogger>Tata Letak>Tambah Gadget/Widget>HTML/JavaScript, Jika sudah silahkan kamu pastekan kode HTML berikut tepat di kolom Html.


<style>
/*Fixed Facebook Like Box BulshitMan*/
.fb-btn-BulshitMan {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;left:0.5%;z-index:99999999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 5s;-webkit-animation:atas 5s;animation:atas 5s;}
.fb-btn-BulshitMan {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-BulshitMan a:link, .fb-btn-BulshitMan a:visited {color:#ffcc00;}
.fb-btn-BulshitMan a:hover {color:#fff;}
.fb-btn-BulshitMan2{background:rgba(1, 0, 1, 0.3);-moz-animation:kanan 15s;-webkit-animation:kanan 15s;animation:kanan 15s}
.fb-btn-BulshitMan2 {padding:3px ;color:#fff;font-size:120%;}
@-webkit-keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@-webkit-keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}
@keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}</style>
<div class="fb-btn-Bulshitman">
<div class="fb-btn-BulshitMan2">
<div class="fb-page" data-href="https://www.facebook.com/iddzgn" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/iddzgn"><a href="https://www.facebook.com/iddzgn">ID Dzgn</a></blockquote></div></div></div>

Nah kalo shobat ingin merubah melayang dari sisi kiri menjadi kanan, shobat bisa mengganti dengan css di atas sesuaikan dengan selera shobat.
Nah jangan lupa juga ganti Link url facebooknya yaa!!!

Mungkin sampe di sini tutorial saya kali ini, semoga bermanfaat untuk shobat blogger, Jika ada masaialah silahkan berikan komentar shobat di bawah ini melalui disqus.