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

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjueoFb8k5EKA1RUBU33mC-7pBf9doxCR4OmtNen3RL5Osq8b8umaLsQxinVBXvN3n2yRPJ4Gr2Mf-JLzwasLGOj18FjPXPDlVo85FQHgQvuRVDBhY3RsZi-RIhJIQFWFbfK0GdP_VpEAA/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 2014-05-11T00:24:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni