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:
- Menggunakan tombol Like, Share, Photo profil dan jumlah like
- Hanya terdapat Photo profil dan jumlah like
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIBpCE4wqHiQPayl4ZZPwZTBkf8hioAJTgUAZI_JmpebimwnYWx1HOG_JwQH6wt9CSE2a2-dKOWKtboLdtW4eNfVs_xppIFGfNzv0vcs9JKLtKHnlUZahBQlXqIidgue44vKyYzQRbLfI/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&width&layout=standard&action=like&show_faces=true&share=true&height=80&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&href=https%3A%2F%2Fwww.facebook.com%2Fall-trick-blogs&action&width&height&max_rows=1&colorscheme=light&size=small&show_count=true&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@