Google+ Search Widget use Query Custome

Kabar terhangat dari web development More Tech Tips!, baru saja dirilis. Sebelumnya meluncurkan trick Activity Google+ With jQuery Plugin, menampilkan segala update yang berada di account google+ sobat masing² Bila urusannya mengenai yang berbau twitter, agan agin bisa lihat koleksi Beben Koben si bloglang anu ganteng kalem tea great collected gadget of twitter.
Master @mike_more kembali mendobrak dunia blogger dengan meluncurkan produk andalan dengan nama google+ search Widget b-) Product barunya ini yaitu menawarkan kita menampilkan segala berita teranyar dari jejaring google plus dengan keyword search terserah kita.

Terdapat 3 jenis varian yg bisa kita pilih, white theme, dark theme and with a image theme. Click on title for look demo ;)

White Theme

Dark Theme

With a Image Theme

Setup

Masukkan seluruh bumbu dengan metode Add a Gadget ► HTML/JavaScript This is the bumbune

<link href="http://googleplus-search-widget.googlecode.com/svn/v1/light.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://googleplus-search-widget.googlecode.com/files/jquery.googleplus-search-1.0.min.js" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
jQuery.fn.googlePlusSearch.defaults.api_key = 'AIzaSyDsd2KGlVuN5dEwas5G3TsOVX17oRCCTFM';
//]]>
</script>

<div class="google-plus-search" data-options="{
  query: 'Blogger Hack'
  , show_header: 1
  , header_title: 'Search for Blogger Hack' }">
 <a class="gpsw-info" href="http://www.moretechtips.net" target="_blank">Google+ Search Widget</a>
</div>

Keterangan:

• Tulisan berwarna biru.
Ketiga jenis CSS theme pilihan. Here<link href="http://googleplus-search-widget.googlecode.com/svn/v1/light.css" rel="stylesheet" type="text/css" />
<link href="http://googleplus-search-widget.googlecode.com/svn/v1/dark.css" rel="stylesheet" type="text/css" />
<link href="http://googleplus-search-widget.googlecode.com/svn/v1/light.css" rel="stylesheet" type="text/css" />
• Tulisan berwarna merah merona.
Jika sobat sudah memiliki jQuery script, tidak usah dipakai lagi.
• Font warna ijo muda.
Script jquery.googleplus-search-1.0.min.js Pluginnya :)
• Tulisan miring & tebal.
Api KEY dari google+ Untuk mendapatkan API KEY tersebut ikuti langkah² berikut:
1. Buka halaman ini https://code.google.com/apis/console#access.
2. Login dengan account gmail kalian, klik "Create Project".
3. Lihat list sebelah kiri, pilih "Services". Rubah dari OFF ke ON
4. Accept the agreement.
5. Klik "API Access" Got it
• Tulisan warna hijau.
Query/keyword search pilihan kalian. Ganti sesuai dengan kebutuhan.
• Warna biru.
Judul title yang ditampilkan.

Bila mau mengcustome, silahkan baca ke sumbernya langsung :P tapi kalau bisa CSS, sobat dapat membuka link CSS-nya dan edit² sesuai kemauan :)

Click expand here to look CSS Coded

/* activity list */
ul.gpsw-body {
font: 100% arial,sans-serif;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
background: #debe94
}
ul.gpsw-body li {
border-bottom: #ddd 1px solid;
margin: 0 0 4px 0;
padding: 4px;
list-style-type: none;
overflow: hidden
}
ul.gpsw-body .thumb {
display: block;
float: right;
margin: 0 0 5px 5px
}
ul.gpsw-body .thumb a {
text-decoration: none;
outline: none
}
ul.gpsw-body .thumb img {
border: #eee 1px solid
}
ul.gpsw-body .thumb a:hover img {
border: #ccc 1px solid
}
ul.gpsw-body .title a {
outline: none;
text-decoration: none;
color: #555
}
ul.gpsw-body .title a:hover {
color: #000
}

ul.gpsw-body a.user {
display: block;
outline: none;
text-decoration: none;
color: #36C;
font-weight: bold;
margin: 0 0 4px 0;
}
ul.gpsw-body a.user:hover {
color: #a00
}

ul.gpsw-body .avatar {
display: block;
float: left;
margin: 0 5px 3px 0
}
ul.gpsw-body .avatar a {
text-decoration: none;
outline:none
}
ul.gpsw-body .avatar img {
border: #eee 1px solid
}
ul.gpsw-body .avatar a:hover img {
border: #ccc 1px solid
}

/* meta : date, plusones */
ul.gpsw-body .meta {
color: #47A947;
display: block;
font-size: 95%;
margin: 5px 0 0;
overflow: hidden;
clear: both
}
ul.gpsw-body .meta a, ul.gpsw-body .meta span {
display: block;
float: left;
padding: 0 6px 0 0
}
ul.gpsw-body .meta a {
color: #500;
text-decoration: none
}
ul.gpsw-body .meta a:hover {
color: #333;
text-decoration: none
}
ul.gpsw-body .plusones {
color: #36C;
font-style: italic
}
ul.gpsw-body .shares {
color: #36C
}

/* Fade-out effect with transparent png */
ul.gpsw-body .fade {
background: url(http://googleplus-search-widget.googlecode.com/svn/v1/fade.png) repeat-x left bottom;
background:expression("");
left: 0;
bottom: 0;
height: 50px;
position: absolute;
width: 100%;
z-index: 10
}

/* Profile */
.gpsw-header {
border-top: #eee 1px solid;
border-bottom: 1px solid #eee;
background: #555;
padding: 10px;
overflow: hidden;
}
.gpsw-header a {
display: block;
text-decoration: none;
outline: none;
overflow:hidden;
}
.gpsw-header img {
display: block;
float: left;
outline: none;
border: #eee 1px solid;
margin: 0 10px 0 0
}
.gpsw-header a:hover img {
border: #ccc 1px solid;
}
.gpsw-header strong {
display: block;
color: #eee;
font-size: 130%;
padding-top: 3px;
}
.gpsw-header a:hover strong {
color: #a00;
}

/* info */
a.gpsw-info {
border-top: #f0f0f0 1px solid;
border-bottom: #f0f0f0 1px solid;
background: #555;
padding: 3px;
text-align: right;
font-size: 80%;
text-decoration: none;
color: #aaa;
display: none
}
a.gpsw-info:hover {
color: #fff
}

Happy blogging \m/