Cara Membuat Widget Fanspage Facebook di Blogspot

Membuat widget fanspage plus tombol donate di blogger ini baru saya ketahui tadi, dan saya menemukan widget ini pada blog yang di kelola oleh admin ID Dzgn. Tanpa sepengetahuan dia widget ini saya bagikan secara gratis kepada kalian, widget ini sebelumnya sudah saya testing terlebih dahulu, dan hasilnya tidak ada masalah yang banya. Karna kebanyakan widget menjadi loading lama atau lola (loading lama) jadinya saya delete kembali saja dan saya share saja kepada kalian semua.

Widget ini dilengkapi dengan tombol donate yang bagus untuk Anda yang sedang mencari dana untuk keperluan blogger atau lainnya yang sangat penting.

Setelah saya analisa pada salah satu web chek pagespeed yakni GTmetrix, score pagespeed saya pun meningkat setelah saya memasang widget ini, jadi saya hapus saja untuk berjaga-jaga loading lambat.

Membuat Widget Fanpage Plus Tombol Donate

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda copy kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

/* Donate */

.idnthemedonate-wrpicon{display:block;position:relative;}

.idnthemedonate-wrpicon .extender{display:block;}

.extender{text-align:center;font-size:16px}

.extender .idnthemedonate-icon{display:inline-block;border:0;margin:15px;padding:0;width:38.3%}

.extender .idnthemedonate-icon a{background:#fff;display:inline-block;font-weight:400;color:#0d9ed7;padding:0 12px;line-height:36px;border-radius:3px;font-size:14px;border:1px solid;width:100%;transition:initial}

.extender .idnthemedonate-icon i{font-family:fontawesome;margin:0 4px 0 0}

.idnthemedonate-icon.blogger a:hover,.idnthemedonate-icon.ppal a:hover{background:#0d9ed7;color:#fff;}

.extender .idnthemedonate-icon:hover a,.extender .idnthemedonate-icon a:hover{color:#fff;}

Langkah kedua :

Silakan Anda menuju ke :

Tata Letak > Tambahkan Gadget > HTML/JavaScript. Lalu Anda masukkan kode dibawah ini kedalam kolom yang sudah di sediakan.

<div class="fb-page" data-href="https://www.facebook.com/Mister-Design-710624465787019/" data-tabs="false" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/Mister-Design-710624465787019/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/Mister-Design-710624465787019/">Mister Design</a></blockquote></div>

<div class='idnthemedonate-wrpicon'>

<ul class='extender'>

<li class='idnthemedonate-icon blogger'><a href='https://www.blogger.com/follow.g?view=FOLLOW&blogID=4049172995224104996' target='_blank' title='Follow this site'><i class="fa fa-sign-in"/></i> Follow</a></li>

<li class='idnthemedonate-icon ppal'><a href='https://mrdzgn.blogspot.co.id' target='_blank' title='Mister Design'><i class='fa fa-user'/></i> Donate</a></li>

</ul>

</div>

Silakan Anda ganti URL Fanpage Facebook dan ID Blog dengan punya Anda.

Kemudian silakan Anda Save, dan lihat hasilnya. Jika ada masalah dengan acak-acakannya lebar dan tinggi, Anda bisa berkomentar dibawah, dengan secepatnya kami akan balas komentar Anda.

Jika Anda ingin menambahkan Sticky pada widget tersebut, Anda bisa memasang Javascript di bawah ini, berikut tata cara penerapannya.

Silakan Anda ke :

Tema > Edit HTML. Lalu Anda cari copy kode Javascript di bawah ini di atas kode </body>

<script type='text/javascript'>

//<![CDATA[

$(function(){if($("#HTML5").length){var o=$("#HTML5"),t=$("#HTML5").offset().top,i=$("#HTML5").height();$(window).scroll(function(){var s=$("#myfooter").offset().top-i-115,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:15}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});

//]]>

</script>

Silakan Anda ganti tulisan yang saya tandai dengan ID widget yang sudah Anda pasang tadi.

Silakan Anda Save, dan lihat hasilnya.

Demikian tutorial kali ini semoga bermanfaat, jangan lupa like, share dan subscribe postingan maupun blog ini untuk memajukan blog ini menjadi lebih baik kedepannya.

Related Post