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.
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
+
F
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)}
}
/*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)}
}
}
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.
