Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Selasa, 10 Mei 2016

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 sobat? Apakah tampilannya sudah umum yang biasa digunakan oleh banyak orang? Selain memasang tombol like, tentu sobat juga memasang widget fanpage facebook di blog sobat 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 sobat sangat berarti buat kami..


Tanpa tombol Like, hanya menampilkan photo profil...

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

#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 sobat, bukan di sidebar
Menggunakan tombol Like, Share, Photo profil dan jumlah like

<div id="f_like">
<span class="f_text">
1 Like sobat sangat berarti buat kami..</span>
<div class="f_box">
<a href="https://www.facebook.com/all-trick-blogs" 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%2Fall-trick-blogs&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 sobat
Kuning : Ganti dengan url fanpage sobat
Merah : Ganti dengan judul url fanpage sobat

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/all-trick-blogs" 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%2Fall-trick-blogs&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 sobat
Kuning : Ganti dengan url fanpage sobat
Merah : Ganti dengan judul url fanpage sobat

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




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

TOP