Minggu, 11 Mei 2014

Update Pasang Tombol Like FanPage Facebook di Blog

Pasang Tombol Like FanPage Facebook di Blog - Sudah pernah memasang tombol like facebook di blog? Tentu sudah dong.. Bagaimana dengan tampilan tombol like facebook di blog Anda? Apakah tampilannya sudah umum yang biasa digunakan oleh banyak orang? Selain memasang tombol like, tentu Anda juga memasang widget fanpage facebook di blog Anda dan bagaimana dengan tampilannya? Apakah sudah umum digunakan? Nah, daripada saya banyak bertanya lebih baik langsung saja seperti apa tampilan update yang saya lakukan pada tombol like dan fanpage facebook ini

Memasang tombol Like faceboook di blog sudah umum dijelaskan banyak blogger, namun meskipun begitu masih banyak yang melakukan agar tampilan-tampilan tombol like tersebut memiliki berbagai bentuk dan jenis sehingga lebih variatif dalam penggunaannya. Dan seperti yang saya berikan berikut, sedikit saya memberikan tampilan yang agak berbeda (mungkin) dari tampilan yang lainnya, seperti yang terlihat pada tampilan gambar berikut ini

Pasang Tombol Like FanPage Facebook di Blog

Ada 2 tampilan berbeda yang terdapat pada gambar diatas, yaitu:
  1. Menggunakan tombol Like, Share, Photo profil dan jumlah like
  2. Hanya terdapat Photo profil dan jumlah like

DEMO

1 Like Anda sangat berarti buat kami..


Tanpa tombol Like, hanya menampilkan photo profil...

Tertarik untuk menggunakannya? Silahkan salin kode berikut ini kedalam template blog Anda

#f_like {
width:580px;
border-radius:10px;
padding:10px;
margin:10px auto 20px;
}
#f_like .f_text {
display:block;
width:580px;
margin:0 auto 10px;
text-align:center;
color:#435799;
font-size:20px;
font-weight:bold;
}
#f_like .f_box {
background:#dfe2fc;
display:block;
width:580px;
height:85px;
margin:0 auto;
clear:both;
border-radius:10px;
}
#f_like .f_logo {
position:relative;
display:block;
float:left;
height:100%;
width:100px;
overflow:hidden;
border-radius:10px;
}
#f_like .f_logo span.inner {
background:#435799;
position:absolute;
top:-60px;
right:0;
width:200px;
height:200px;
border-radius:200px;
}
#f_like .f_logo span.f_icon {
background:url('http://2.bp.blogspot.com/-x9MpM256f3Q/U20nGhTynqI/AAAAAAAADVk/n1g8xA6_ygw/s1600/icon-fb-panduantemplateblogCom.png') no-repeat;
position:absolute;
top:77px;
left:135px;
text-indent:-10000px;
width:25px;
height:52px;
}
#f_like .fb_frame {
display:table;
width:450px;
float:left;
padding:12px 0 0 20px;
}
#f_like .f_frame iframe {
display:table-cell;
vertical-align:middle;
}

Salin kode berikut ini kedalam blog Anda, bukan di sidebar
Menggunakan tombol Like, Share, Photo profil dan jumlah like

<div id="f_like">
<span class="f_text">
1 Like Anda sangat berarti buat kami..</span>
<div class="f_box">
<a href="https://www.facebook.com/PanduanTemplateBlog" class="f_logo">
<span class="inner">
<span class="f_icon">
</span>
</span>
</a>
<div class="f_frame">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FPanduanTemplateBlog&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80&amp;appId=239188632935751" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</div>
</div>
</div>

Keterangan:
Biru : Ganti sesuai judul Anda
Kuning : Ganti dengan url fanpage Anda
Merah : Ganti dengan judul url fanpage Anda

Hanya terdapat Photo profil dan jumlah like
<div id="f_like">
<span class="f_text">
Tanpa tombol Like, hanya menampilkan photo profil...</span>
<div class="f_box">
<a href="https://www.facebook.com/PanduanTemplateBlog" class="f_logo">
<span class="inner">
<span class="f_icon">
</span>
</span>
</a>
<div class="f_frame">
<iframe src="//www.facebook.com/plugins/facepile.php?app_id=346539002118100&amp;href=https%3A%2F%2Fwww.facebook.com%2FPanduanTemplateBlog&amp;action&amp;width&amp;height&amp;max_rows=1&amp;colorscheme=light&amp;size=small&amp;show_count=true&amp;appId=346539002118100" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>
</div>
</div>
</div>

Keterangan:
Biru : Ganti sesuai judul Anda
Kuning : Ganti dengan url fanpage Anda
Merah : Ganti dengan judul url fanpage Anda

Bagimana tertarik untuk menggunakan tampilan tombol Like dan fanpage facebook di blog Anda?

Update Pasang Tombol Like FanPage Facebook di Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

19 komentar:

  1. tombol like yang dilengkapi foto profil menarik juga mbak untuk dipasang diblog tapi untuk punya saya, hanyalah share like post berbagai sosial media saja..terimakasih artikel yang menarik

    BalasHapus
    Balasan
    1. terimakasih juga mbak Sri, jika berminat silahkan dipasang mbak :)

      Hapus
  2. Wah beono to caranya.... Udah lama ane cari-cari skarang ktemu deh... Makasih and salam blogwalking dari Pulau Dollar

    BalasHapus
    Balasan
    1. iya hanya seperti itu saja mas, mudah kok :)
      makasih ya, salam walking-walking ya entar saya minta dollarnya :D

      Hapus
  3. Aku belum punya tombol like fanspage facebook. Yang nampak Tombol Like, Share, Photo profil dan jumlah like sepertinya lebih menarik.

    BalasHapus
    Balasan
    1. silahkan kalau berminat dipasang mas :)

      Hapus
  4. mantap gan :D ini dia yang gk mainstream :D

    Cerita Dewasa

    BalasHapus
    Balasan
    1. heheee suatu saat kalau sering digunakan bisa kesana juga mas, mainstream.. :)

      Hapus
  5. kebutuhan tombol like fanspage emang sangat penting bagi kemajuan blog, boleh juga nih dipasang kodenya.
    makasih ah

    BalasHapus
    Balasan
    1. terimakasih juga mas, silahkan dipasang :)

      Hapus
  6. lengkap tutorialnya, terima kasih mbak, blog saya masih kurang sosial bookmarknya,,,, :D

    BalasHapus
    Balasan
    1. tutorialnya cuma 1 saja mas, rencananya mau dibuatkan untuk yang twitter dan google+ juga tapi belum jadi, mungkin satu-satu nantinya :)
      terimakasih juga ya.. :)

      Hapus
  7. keren juga mbak :)
    pengen pasang, tp fanpage blog saya juga belom ada ...
    blog saya masih baru sih, jadi belom terlalu rame :D

    BalasHapus
  8. saya sudah bikin mas...mantap deh

    BalasHapus
  9. Kujnungan balik Mbak, maunya kasih komentar di halaman
    "sport modus Malam effect lampu senter "
    Tetapi Nampaknya kolom komentarnya terhalang effect gelapnya...
    Kalau boleh tahu bisa nggak effecnya di kasih semacam tombol show/hidden...

    BalasHapus
    Balasan
    1. oh iya lupa ga' diatur mas, terimakasih banyak atas pemberitahuannya mas, akan saya update lagi..

      Hapus
  10. Bagus, jadi pengen pasang,, tapi code yang paling atas itu di pasang di template sebelah mana ya mbak,, tolong bantuannya,, terima kasihh,, :)

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia