Cara Memasang Widget Fanspage Dan Goolge Plus Di Blog


Cara Memasang Widget Atau Gadget Di Blog - Intinya jika anda seorang blogger yang lebih mementingkan pengunjung, maka anda akan membuat navigasi yang mempermudah pengunjung ketika berkunjung dengan memasang widget di blog.

Sebenarnya apa sih widget atau gadget itu ?

Pada awalnya widget tersebut lahir pada era world wide web, pada awal kemunculannya widget atau gadget hanya di gunakan untuk memasang iklan pada blog..

tapi semakin berkembangnya internet, maka widget juga berkembang lebih menarik yang berguna untuk menghiasi blog..

Widget atau istilah lainnya gadget adalah sebuah kumpulan kode HTML dan javascript yang biasa di tempelkan di blog..

kumpulan script code tersebut akan membentuk sesuatu seperti jam digital, ,kursor unik, ikan ikanan, artikel terkait, fanspage facebook, google plus dan lain lain..

biasanya widget tersebut di pasang pada hidebar, sidebar, atau footer tergantung tema yang anda gunakan di blog..
Baca: Cara membuat sitemap responsive di blog
Dulu para blogger berlomba lomba membuat widget tersebut dan memasangnya di blog agar blog terlihat cantik dan enak dilihat..

tapi setidaknya, semenarik dan seindah apapun tampilan blog jika tidak didukung dengan kecepatan loading yang cepat maka siapa pun akan merasa malas..

hindari membuat dan memasang widget yang memberatkan loading blog anda, salah besar jika anda lebih mementingkan tampilan tanpa memikirkan kecepatan loading blog..

Cara Memasang Widget Fanspage Faebook Di Blog

Jika anda salah satu pemilik blog yang merasakan bahwa widget fanspage facebook atau google plus sangat mempengaruhi kecepatan blog, maka anda wajib membaca artikel ini..

didalam artikel ini saya akan bahas cara memasang widget di blog seakan akan blog tersebut tidak menggunakan widget karena menurut saya proses menampilkannya tergolong sangat cepat..

Saya sendiri menggunakan cara berikut karena template yang saya gunakan adalah sebuah template AMP (Accelerate Mobile Page) yang mengharuskan saya tidak boleh membuat script yang mempunyai load yang lambat..

Sebenarnya sangat mudah sekali membuat atau memasang widget ini karena sebelumnya saya sudah membuat sebuah halaman fanspage facebook dengan script HTML dan Javascript..

jadi cara memasangnya anda hanya perlu memanggil fungsi yang sudah di buat tersebut..

jika anda tertarik ikuti langkahnya..

1. Pertama seperti biasa anda harus login ke akun blogger.com masing-masing
2. Lihat menu di samping kiri dan pilih Tata Letak > Tambah Gadget



3. Selanjutnya silahkan anda pilih HTML/Javascript dan isi bagian Konten dengan script code di bawah ini

<amp-iframe 
width="300" 
height="450" 
sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" 
scrolling="no" src="https://cdn.rawgit.com/ardycool/ardy-cool/863ef728/fbfanspage.html?page=ijogadingAC">
</amp-iframe>

Copy dan pastekan pada bagian konten dan jangan lupa untuk IjogadingAC di ganti dengan nama fanspage facebook anda..

Jangan lupa juga simpan dan reload halaman blog anda, jika script nya berhasil maka akan menghasilkan tampilan seperti dibawah ini..



Setelah selesai membuat fanspage, maka mari kita bahas cara memasang widget google plus di blog yang tentunya tidak kalah cepatnya...

Cara Memasang Widget Google Plus Di Blog

Jika anda juga tertarik untuk memasang profile google plus di blog maka dibawah ini cara yang saya gunakan sedikit berbeda..

jika ingin memasang fanspage facebook anda tinggal memanggil fungsinya saja..

tapi jika google plus anda harus membuat sebuah file .html terlebih dahulu yang didalamnya berisi script code yang bisa menampilkan profil google plus anda..

1. Langkah pertama buka code editor script dan buat new file, bisa menggunakan notepad, notepad++ atau codelobster
2. Copy script di bawah ini dan pastekan di editor tersebut

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Plus Followers</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400italic,400,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'/>
<style>
body {
  background-color:transparent;
  margin:0;
  padding:0;
  color:#212121;
  font-family:Roboto,Arial,sans-serif;
}
a {
  color:#212121;
  text-decoration:none;
}
a:hover {color:#0379C4}
iframe{border:0}
</style>
</head>
<body>
<div class='g-plus' data-action='followers' data-height='240' data-href='https://plus.google.com/116197212230324001453&#039; data-source='blogger:blog:followers' data-theme='DARK' data-width='280'></div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</body>
</html>

Jangan lupa untuk mengganti bagian https://plus.google.com/116197212230324001453 dengan url profil google plus anda

3. Setelah itu simpan file yang di buat dengan format .html (gplus.html)
4. Langkah selanjutnya anda harus upload file .html yang sudah dibuat ke akun github masing masing.

untuk langkah langkah cara upload file di github mungkin anda bisa cari caranya di internet.

Cara uploadnya cukup mudah kq..

5. Setelah anda upload file tadi ke akun github, silahkan copy url file tersebut..
Contoh url : https://github.com/ardycool/ardy-cool/blob/master/gplus.html
6. Sekarang anda tinggal mengganti url tersebut agar script code yang kita buat tadi bisa di proses oleh browser dengan cara masuk ke situs rawgit.com



Paste link url file di github tadi di situs tersebut dan ambil hasil nya pada kolong Use this URL in production
Contoh : https://cdn.rawgit.com/ardycool/ardy-cool/45a2a9f4/gplus.html
7. Setelah melakukan proses yang cukup panjang, sekarang anda tinggal memanggil url tersebut dan siap digunakan di blog dengan cara copy script di bawah ini dan paste ke dalam widget (kembali ke langkah 2 cara membuat widget fanspage facebook)

<code>

jika anda berhasil, maka tampilannya seperti di bawah ini..

gambar

cara membuat atau memasang widget di atas tersebut telah banyak di gunakan oleh blog blog yang menggunakan template AMP karena tergolong tidak memberatkan blog..
Baca: Cara menghias tulisan artikel di blog
untuk anda pengguna non-amp tentu bisa mencoba cara yang saya yakin berhasil..

karena beberapa teman yang mengikuti cara di atas telah berhasil memasang widget facebook atau google plus di blog mereka yang non-amp..

sampai disini jika ada pertanyaan tentang langkah langkah memasang widget di blog di atas bisa langsung komen di bawah ya..

dengan senang hati saya akan membalas dan membantu anda untuk memasang widget fanspage facebook dan google plus di blog..

semoga bermanfaat dan happy blogging 

Reaksi:
Share this with short URL:

Artikel Terkait Lainnya:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser