Cara Menampilkan Facebook dan Twitter Melayang di Blog

Pemberitahuan!!

Mohon dengan sangat Untuk Tidak Melakukan Copy-Paste pada Artikel ini. Tindakan tersebut sangat dibenci oleh Blogger. Sehingga Jika Anda melakukan Co-Pas Artikel, kemungkinan besar Blog Anda akan TERHAPUS dari GOOGLE tanpa saya melapor kepada google DMCA. Sayangilah Blog Anda. Terima kasih.

Cara Menampilkan Facebook dan Twitter Melayang di Blog

Cara Menampilkan Facebook dan Twitter Melayang di Blog yang akan saya publikasikan ini merupakan update dari artikel cara baru andie yang telah lama. Widget ini tidak menggunakan iframe. tetapi penggunaan widget tersebut masih menggunakan tombol close dan bezanya ditambahi dengan tombol Follow untuk Twitter anda.

Cara Menampilkan Facebook dan Twitter Melayang di Blog

pada artikel sebelumnya saya sempat menerbitkan Cara Membuat Fanspage Facebook Tampil Melayang di Blog yang hanya berisi like untuk halaman penggemar facebook saja, kali ini saya akan menambahkan script dari twitter yang fungsinya untuk memfollow twetter blog ataupun twitter anda sendiri. Widget ini juga tidak mengandung script iframe sehingga tidak akan mengurangi kualitas template / blog anda yang sudah mencapai seo maksimal.

Cara Menampilkan Facebook dan Twitter Melayang di Blog


1. Silakan anda login ke Akun Blogger Anda dan menuju dashboard

2. Pilih Tata Letak
3. Klik Add Widget dan Pilih Javascript / Kode HTML

Cara Menampilkan Facebook dan Twitter Melayang di Blog


4. Setelah keluar jendela baru, Masukkan kode berikut ini kedalamnya

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-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;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-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:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Jangan Lupa di Like Ya Sobat</a></center>
<center>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/Andieshinigamiblogspotcom" width="250" show_faces="true" border_color="" stream="false" header="true">
</fb:like-box></center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/AndieShinigami">Ikuti @AndieShinigami</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div>
<a class='close' href='#'>&times;</a>
</div>

5. Ganti beberapa item dengan milik anda seperti :
Ganti huruf yang berwarna Merah dengan Kata - kata anda sendiri
Ganti huruf yang berwarna Biru dengan Akun Fanspage Anda
Ganti huruf yang berwarna Hijau dengan Akun Twitter Anda

6. Setelah selesai semua, Klik Simpan dan Lihat hasilnya pada blog anda

Cara Menampilkan Facebook dan Twitter Melayang di Blog1

Mudah sekali bukan untuk membuat orang lain mengikuti artikel kita yang tujuan utama dari cara ini adalah memperbanyak pelanggan blog, sehingga blog semakin meningkat trafiknya, bicara soal meningatkan trafiik blog, Cara Membuat Artikel Terkait di Bawah Posting yang dahulu saya posting juga berdampak naiknya page view per day lho, silakan dicoba

Sekian tutorial saya mengenai Cara Menampilkan Facebook dan Twitter Melayang di Blog pada kesempatan kali ini, Semoga membantu anda yang sedang mencari cara untuk melakukan hal itu. Terima kasih sudah bersedia membaca di blog saya.
Share this article :

34 komentar:

  1. sangat membantu bagi saya yang baru bisa ngeblog, terimakasih atas artikelnya, salam hangat .

    ReplyDelete
    Replies
    1. sama sama sob, saya juga lumayan baru di blog.. salam berbagi saja yaa

      Delete
  2. makasih bung,,,,,,,,,, sangat membantu

    ReplyDelete
  3. Om mau tanya kenapa di clossnya susah ya,, tolong pencerahannya

    ReplyDelete
    Replies
    1. oh ya?? ini punya saya biasa aja sob..
      mungkin struktur templetenya berbeda..
      coba pakai iframe aja di sobat lain yang uda share
      ini memang saya tidak pakai iframe untuk kode scriptnya agar tidak menurunkan skor seo pada chkme sob..

      Delete
  4. maaf numpang gan, kalo punya saya kenapa gak keluar gambar nya ya..? tapi kalo login dulu ke FB nya baru bisa keluar apanya tuh gan? masa harus login FB nya terus..? coba cek ke sini gan http://counterexcellular.blogspot.com/
    barangkali bisa bantu sy makasih ya gan?

    ReplyDelete
    Replies
    1. oke saya akan kesana gan, saya akan post comment di blog anda

      Delete
  5. Masih tetep gan jadi harus login terus ke FB nya baru bisa ke buka, disaat logout/keluar dari facebooknya ya gitu deh ke tutup lagi..!mungkin harus membuat halaman baru lagi ya gan, dari FB nya, COZ itu aplikasi nya dah lama..?
    Oh ya.. makasih ya gan dah nengok blog ane maklum gan baru belajar membuat ndiri tanpa ada yang ngasih tau, untung aja ada Mbah dukun eh Mbah google hehee.. bisa tau segala informasi.

    ReplyDelete
    Replies
    1. oh ya?? selama ini yang saya tahu beberapa penyebabnya hanya tentang input id yang salah lalu loading blog yang terlalu berat.
      oke sama sama gan semoga sukses yaa

      Delete
  6. hehe.. mampir lagi gan..iya gan template blog ane rubah2 hehe.. lagi ngtes yang ringan gan, soalnya waktu di cek melalui cek meta tag,ada tulisan begini, We only check pages with a size smaller than 146 KB template ane ga keluar duh payah gan maklum baru belajar gan. kalo bisa tolong bantu ya gan, hehe.. tengkiyu

    ReplyDelete
    Replies
    1. Iya, File templete yang besar dan berat memang berpengaruh terhadap posisi SERP juga nantinya sob

      Delete
  7. wa mantap nhy gan,,,,
    izin copas/nyoba

    sukses selalu,,

    ReplyDelete
  8. mantap ni gan ,
    izin coba yy

    terus berkarya

    ReplyDelete
    Replies
    1. silakan dicoba, semoga berhasil seperti punya saya yang sudah nampang disini

      Delete
    2. gan knpa yang fp fbnya gk muncul, yg muncul cuma twitter,, gmana ni gan

      Delete
    3. perhatikan lagi alamat FPnya gan, uda bener tidak,
      alamat blog sobat apa?? biarkan terpasang nanti saya cek kesalahannya

      Delete
  9. nice post gan, mau nanya, gimana nih caranya kalo kita logout dari facebook, facebook dan twitternya tetap bisa ?

    ReplyDelete
    Replies
    1. Masih bisa tampil kok gan.. tetapi maksudnya tetep bisa bagaimana?? masih bisa dicontrol atau masih bisa tampil??

      Delete
  10. cara yang ke 2 berhasil ,,,, mkasih ilmunya sob

    ReplyDelete
  11. gan, knapa ni gan? yang muncul cuma logo twitternya
    fb sama pengikutnya gak muncul gan

    ReplyDelete
    Replies
    1. itu tandanya loading blog terlalu lama alias berat.. ganti templetenya dengan yang responsive, karena script saya ini tidak memakai frame

      Delete
  12. terima kasih artikel ini sangat berguna

    ReplyDelete
  13. wah kyaknya pengen belajar jadi blogger neh...

    ReplyDelete
  14. blog saya, isvan ; Terima kasih juga ya sebelumnya untuk berkomentar

    ReplyDelete
  15. Thankyouu Gan !!
    Wah kreen, sangat bermanfaat Sekaliii

    ReplyDelete
    Replies
    1. Yuda Yudiarto = perhatikan lagi kodenya sob dan loading blognya.. jangan berat blognya

      Lukman Fatner = makasi kembali sob uda kesini

      Delete
  16. makasih banyak mas... thanks banget atas ilmunya... (^_^)

    ReplyDelete
  17. makash bgt mas, sangat membantu sekali

    ReplyDelete
  18. mantep, tokcer gan

    salam https://twitter.com/MrSambudy

    ReplyDelete
  19. terima kasi pak feri sudah mengunjungi blog kami
    dan ibu sartini kami akan kunbal ke blog anda, m anwar - saya juga bersyukur kalau ada blogger lain yang mengambil manfaat dari tulisan di blog andieshinigami ini

    ReplyDelete

Terima Kasih sudah berkunjung,
Berkomentarlah sesuai dengan yang dibahas dan Jangan Memasukkan LINK yaaa..

Salam Berbagi..

 
Support : Google
Copyright © 2013. Cara Baru Andie - All Rights Reserved
Template Created by Creating Website Published by Kompi Ajaib
Proudly powered by Blogger