Home Tips Trik SEO Trik Blogger Widget Modifikasi Fans Page Like Facebook Untuk Blog

Assalamualaikum warahmatullahi wabarakatuh. Salam ketemu lagi disini buat sobat dan rekan blogging semua, Semoga kabar baik yang selalu saya harapkan untuk anda semua. Beberapa hari dalam bulan ini saya selalu membagikan post baru dengan artikel yang campur aduk, seperti yang saya publikasikan kemarin tentang artikel : Nikah. Nah pada artikel ini saya akan berbagi cara memodifikasi widget like Facebook, Istilah yang sering saya baca ialah Widget Fans page like facebook. Sebetulnya widget ini sama saja seperti pada widget fans page facebook pada umumnya. Namun disini saya akan sedikit menambahkan script untuk memodifikasi agar tampilanya sedikit unik menarik dan yang jelas sedap di pandang mata juga tidak membosankan. Jika anda belum memsang widget tersebut, atau sudah memasangnya lantas ingin merubahnya dengan Trik yang akan saya bagikan ini,? Selengkapnya silahkan simak penuturan cara memasang/merubahnya berikut dibawah ini dengan seksama.

Tutorial Widget Blog lainya : Semua tentang Widget

Fans Page Like Facebook :

Media sosial seperti facebook semua kalangan sudah pada tau semua termasuk pada dunia blogging dan web siyus. Jarangsaya lihat blog yang saya kunjungi tidak ada peran sertanya media sosial. Pasti ada entah itu di pasang sendiri oleh Adminya, Atau bawa'an template yang sudah di lengkapi media sosialnya. Pentingnya facebook pada blog ini bukan rahasia umum lagi. Karena dengan adanya sosmed seperti facebook bisa di jadikan alat marketing artikel kita dimana pengunjung yang akan mengetahui link blog anda. bukan saja dari teman blogging.yang mengetahuinya tetapi pengunjung dari facobook dan sosmed lainya ini bisa mengetahui link blog anda. Maka like box di blog bagi saya yang pemula ini penting sekali keberadaanya berikut ini cara memasangkanya.

Cara Memasang Style Fans page Like Facebook :

Pertama anda buka dashboard blog jangan lupa sign in, Selanjutnya pada dashboard blog pilih Template, lalu pilih lagi edite template. Selanjutnya cari kode <body> Tekan Ctr + F untuk memudahkan pencarian pada tatanan template anda jika sudah ketemu kode nya. Silahkan taruh kode javascript dibawah ini tepat dibawah kode <body> berikut di bawah ini kode javascriptnya :

<div id='fb-root'></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Silahkan simpan/save dulu template blog anda dan, silahkan melanjutkan tutorial selanjutnya

Memasang kode javascript pada Layout :

Pada point ini anda harus memasangkan kode javascrit pada tata letak/layout dashboard blog anda. Berikut ini panduan cara pemasangan kodenya : Buka Dashboard pilih tata letak/layout selanjutnya pilih ADD Widget pada kolom HTML add widget masukan kode javascript di bawah ini, Kebetulan ada 3 (tiga) style tampilan yang berbeda, yang saya bubuhi dan saya belai dengan penambahan script yang di modifikasi berikut dibawah ini kode html javascriptnya :

Style Fans Page Like Facebook 01 :

<div style="background-color:#ccffff;width:285px;padding:10px 0 10px 10px;height:250px;border:2px solid #ffff00;border-radius:10px;box-shadow:4px 4px 0 rgba(0,0,255,0.45);"><div style="height: 250px; overflow: hidden;">
<div class="fb-like-box" data-href="https://www.facebook.com/Karristaent.Blogspot" data-width="285" data-show-faces="true" data-stream="false" data-header="false"></div></div></div>

Demo penampilan 01. Seperti dibawah ini :

Style Fans Page Like Facebook 02 :

<div style=".width:285px;padding:10px 0px 10px 10px;height:300px;border-top:5px solid #ff1943;border-right:5px solid tomato;border-bottom:5px solid #ff1943;border-left:5px solid tomato;border-radius: 0px 30px 0px 0px;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5dpcfcTO5V9-rdSsvQaa4layFQBjQjkNFyFU6lU1G6xye2uWNcqCi0FWYdQe_qzlTXZi8zvYoEU7JR2elY3cI0ZbyjC2h-xtWt4yoSGS1Vv4HecFMUVtrHkTvfM0toHoVIk1Ww2AbcVm6/s1600/facebook-karrysta2pel.jpg');overflow:hidden;border-radius: 110px;.height:300px;width: 285px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;">
<div class="fb-like-box" data-href="https://www.facebook.com/Karristaent.Blogspot" data-width="285" data-show-faces="true" data-stream="false" data-header="false"></div></div></div>

Demo penampilan 02. Seperti dibawah ini :

Style Fans Page Like Facebook 03 :

<div style=".width:248px; padding:10px 0px 10px 10px;height:230px;border-top:5px solid #00ff00;border-right:5px solid #00ff00;border-bottom:5px solid #00ff00;border-left:5px solid tomato;border-radius: 0px 30px 0px 0px;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp65KQsrJhB8jvMIubksDDoerBhzK3HFOSFYkuuqWkp4fWF-558qUCK0bxihvoaR6OGGYW7c4l4s8jjFPLQmRBAn2cLYHJd2GcRCfVZeNc0PBNCcZDw0n1vJKRGlhwOxBfDeZfynuEG9c2/s1600/facebook-karrysta33.jpg');overflow:hidden;.height:250px;width: 238px;border: 5px outset #ffa500;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;">
<div class="fb-like-box" data-href="https://www.facebook.com/Karristaent.Blogspot" data-width="285" data-show-faces="true" data-stream="false" data-header="false"></div></div></div>

Demo penampilan 03. Seperti dibawah ini :

Keterangan :

Pada ke 2 kode Style fans page facebook diatas, Silahkan ganti URL yang berwarna MERAH dengan url halaman facebook punya anda. Lalu URL yang berwarna BIRU itu gambar background widget nomor 2, jika anda ingin bisa ganti dengan gambar yang lain, Misalnya gambar cewk kekasih anda, biar tambah cakep. Dan pada bidang bagian kode Width untuk lebar widget, dan height untuk ukuran tinggi widget. Lalu untuk warna silahkan sesuaikan menurut warna dan ukuran yang anda kehendaki. Setelah anda pilih salah satu'' Style kode Fans page Facebook ini pada kolom Add widget seperti contoh diatas, silahkan save add widget nya, coba tinjau halaman blog anda, jika penerapanya sesuai dengan tutorial diatas maka akan teripta sebuah widget Fans page like facebook yang unik campernik. Jika masih belum nampak silahkan baca ulang artikel ini, Atau silahkan tanyakan/diskusikan lewat komentar nanti dibawah post ini.

Jangan lupa setiap penambahan widget baru pada halaman blog anda selalu hapus kode yang membuat error validasi HTML 5. Karena script Style Fans page like facebook ini, sudah saya jamain lolos dari Validasi HTML Silahkan dicek kebenaranya, asalakan pemasanganya sesuai petunjuk prosedur diatas.

Hapus kode di bawah ini pada bagian edite template blog anda dan save kemabli tempaltenya :

<b:include name='quickedit'/>

Silahkan cek validasi Html 5 pada post artikel ini : Cek Validasi HTML 5

Save jangan lupa jika kode diatas sudah dihapus pada bagian template anda. Demikianlah kiranya tutorial Memodifikasi Fans page like facebook untuk blog ini, semoga dipahami jika ada yang kurang di mengerti silahkan diskusikan pada form komentar di bawah ini. Semoga yang saya hadirkan ini bisa bermanfaat buat sobat yang memerlukanya. Tetap semangat dalam berkaraya, salam ceria .. Happy Blogging...

Berlangganan lewat email pada post baru Blog : Karrysta.

Modifikasi Fans Page Like Facebook Untuk Blog

Unknown Tips Trik SEO, Trik Blogger, Widget Rabu, Oktober 29, 2014 95 comments