Widget Aktifitas Google+ ini merupakan widget yang dibangun dengan menggunakan jQuery dengan memanfaatkan API key google+ yang anda miliki dan ID google+ profile atau google+ page

Widget Aktifitas Google+ (Google+ Activity Widget) - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Widget Aktifitas Google+ ini merupakan widget yang dibangun dengan menggunakan jQuery dengan memanfaatkan API key google+ yang anda miliki dan ID google+ profile atau google+ page

Widget Aktifitas Google+ (Google+ Activity Widget)

Widget Aktifitas Google+

Google+ merupakan salah satu social network yang semakin pupuler. Dengan jumlah pengguna aktif yang terus bertambah. Dari info yang ada sudah lebih dari 130 juta pengguna dari google+.
Dengan semakin populernya google+ tersebut kali ini saya akan membagikan widget Aktifitas Google+ dari Moretechtips. Widget ini dapat juga digunakan untuk bagaian Laman/Page
Nah langsung saja.

Pemasangan Widget

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Tata letak Blogger
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:
<!-- Include javascript and CSS once -->
<link href="http://googleplus-activity-widget.googlecode.com/svn/v1/light.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ivyth.googlecode.com/svn/js/jquery.googleplus-activity-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.fn.googlePlusActivity.defaults.api_key = 'API key Google+ anda';
//]]>
</script>

<!-- Insert widget placeholder -->
<div class="google-plus-activity" data-options="{ user: '108420107067513257412' }">
   <a class="gpaw-info" href="http://mkr-site.blogspot.com" target="_blank">Widget Actifitas Google+</a>
</div>

  • kode diatas sudah termasuk CSS, jQuery Library, dan jQuery Plugin dari Google+ Activity.
  • Jika ingin mengganti stylenya/themasnya dengan dark silahkan ganti CSSnya dengan "http://googleplus-activity-widget.googlecode.com/svn/v1/dark.css".
  • jika di template anda sudah terpasang jQuery Library (pada widget ini 1.8.2). Hapus saja <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

API key Google+

Plugin di atas harus menggunakan API key Google+ anda sendiri.
Berikut ini cara untuk mendapatkan API key di Google+.
  1. Ke alamat ini https://code.google.com/apis/console#access.
  2. Login lalu klik "Create Project"
  3. Pada daerah service list. Cari "Google+ API" Klik pada tombol "off" agar API key nya aktif
  4. Setujui Persyaratannya dengan mencentang/check pada "I agree to these terms" Lalu klik Accept
  5. Pada menu sebelah kiri klik "API Access" untuk melihat API key anda
Perhatikan "insert widget placeholder". Yah disitulah nantinya widget akan diload/ditampilkan. pada bagian "user" disitulah anda meletakkan ID dari google+ anda atau ID Google+ page anda. contohnya: https://plus.google.com/108420107067513257412

Cara Lain untuk memanggil plugin ini


1. meletakkan opsinya dalam HTML Comment [ DEMO 2 ]
<div class="google-plus-activity">
   <!-- { user: '118211149935481259253', show_image:0 } -->
   <a class="gpaw-info" href="http://mkr-site.blogspot.com" target="_blank">Widget Actifitas Google+</a>
</div>
NB: Pada DEMO 2 gambarnya tidak muncul karena show _image nya diset 0

2. memanggil widget dengan cara jQuery call dan meletakkan pengaturan didalamnya [ DEMO 3 ]
<script type="text/javascript">
//<![CDATA[
   jQuery(document).ready(function($) {
      $('#gpaw').googlePlusActivity({
         api_key : 'API key Google+ anda'
         ,user:'108420107067513257412'
         ,image_width:75
         ,image_height:75
         ,body_height:350
      }); 
   });
//]]>
</script>

<!-- Insert widget placeholder -->
<div id="gpaw">
   <a class="gpaw-info" href="http://mkr-site.blogspot.com" target="_blank">Widget Actifitas Google+</a>
</div>
NB: Pada contoh DEMO 3. tinggi dan lebar gambarnya diatur dan tinggi dari tempat post aktivitasnya diatur.

Nah sekianlah sedikit penjelasan cara menggunakan widget ini. Untuk Opsi pengaturan lebih lengkap silahkan klik DISINI

Sumber Kode: Moretechtips ~ Google+ Activity Widget
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

2 comments:

  1. mahu tutorial emoticon kode ;-(.
    tolong yer.. mahu yang seperti mas.. :)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP