Widget Google Plus Timelines

Widget Google Plus Timeline ini sama seperti widget yang dimiliki oleh twitter yaitu Emebedded Timelines yang sudah lama tersedia dan sudah banyak digunakan oleh para blogger, nah kali ini ada widget yang menarik yaitu Google Plus Timelines yang lebih terlihat keren karena setiap status yang kita tulis di google+ akan menjadi sebuah slide yang terus sliding hingga status terakhir .

Untuk widget ini dibutuhkan sebuah Google Plus API key, untuk tutorial mendapatkan kode API nya silahkan baca Cara Mengaktifkan Google Plus API

1. Pertama login ke akun blogger
2. Selanjutnya pergi ke Lay Out / Tataletak
3. Kemudian tambahkan widget dan pilih "JavaScript"
4. Lalu Copy kode berikut :

<!-- Gplus Default -->
<style type="text/css">
/* CSS of Google+ Widget
Blog : http://blogluxie.blogspot.com
*/
/* feed list */
ul.gpaw-body{
font: 100% arial,sans-serif !important;
padding:0 !important;
margin:0 !important;
overflow:hidden !important;
position:relative !important;
background:#FEFEFE !important;
list-style:none;
height:250px !important;
border:#B20000 1px solid !important;
}
ul.gpaw-body li{
border-bottom:#025D87 1px solid !important;
margin:0 0 4px 0 !important;
padding:4px !important;
list-style-type:none !important;
overflow:hidden !important;
background:none;
}
ul.gpaw-body .thumb{
display:block !important;
float:right !important;
margin:0 0 5px 5px !important;
}
ul.gpaw-body .thumb a{
text-decoration:none !important;
outline:none !important;
}
ul.gpaw-body .thumb img{
border:#eee 1px solid !important;
}
ul.gpaw-body .thumb a:hover img{
border:#ccc 1px solid !important;
}
ul.gpaw-body .title
{
border-bottom:none !important;
}
ul.gpaw-body .title a{
font: 14px arial,sans-serif !important;
outline:none !important;
text-decoration:none !important;
color:#000A0D !important;
border-bottom:none !important;
}
ul.gpaw-body .title a:hover {
color:#025D87 !important;
}
/* meta : date, plusones */
ul.gpaw-body .meta {
color:#999999 !important;
display:block !important;
font-size:95% !important;
margin:5px 0 0 !important;
overflow:hidden !important;
clear:both !important;
}
ul.gpaw-body .meta a, ul.gpaw-body .meta span{
display:block !important;
float:left !important;
padding:0 6px 0 0 !important;
}
ul.gpaw-body .meta a{
color:#999999 !important;
text-decoration:none !important;
}
ul.gpaw-body .meta a:hover{
color:#333 !important;
text-decoration:none !important;
}
ul.gpaw-body .plusones{
color:#025D87 !important;
font-style: italic !important;
}
ul.gpaw-body .shares{
color:#025D87 !important;
}
/* Fade-out effect with transparent png */
ul.gpaw-body .fade{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_DKRSisYyTWNiTJIjAcZ5w-4sqCWG3_NylFHFW0qVzwJo6G1nu8bHsr34tVUnYQUYWfzgeXkK2m2eHUCGFbZGvLmHU6juANzH6hrW7nwzECUzNZW37dvXteXr_F4qUIiMP_GsIjxzvrk/s1600/fade.png) repeat-x left bottom !important;
background:expression("") !important;
left: 0 !important;
bottom: 0 !important;
height: 50px !important;
position: absolute !important;
width: 100% !important;
z-index: 10 !important;
}
/* Profile */
.gpaw-profile{
border:#B20000 1px solid !important;
background:#F5F5F5 !important;
padding:8px !important;
overflow:hidden !important;
}
.gpaw-profile a.avatar{
display:block !important;
float:left !important;
text-decoration:none !important;
outline:none !important;
margin:0 10px 0 0 !important;
}
.gpaw-profile a.avatar img{
border:#fff 3px solid !important;
display:block !important;
}
.gpaw-profile a.avatar:hover img{
border:#fff 3px solid !important;
display:block !important;
}
.gpaw-profile .name{
font-size:15px !important;
overflow:hidden !important;
margin:-10px 0 0 0 !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#3D606B;
}
.gpaw-profile a.add{
display:inline-block !important;
text-decoration:none !important;
outline:none !important;
padding:4px 8px !important;
-webkit-border-radius:3px !important;
-moz-border-radius:3px !important;
background-color: #F5F5F5 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
color: #444444 !important;
}
.gpaw-profile a.add:hover{
background-color: #D14836 !important;
border: 1px solid transparent !important;
color:#fff !important;
}
a.gpaw-info{
border-top:#f0f0f0 1px solid !important;
border-bottom:#f0f0f0 1px solid !important;
background:#f4f4f4 !important;
padding:3px !important;
text-align:right !important;
font-size:80% !important;
text-decoration:none !important;
color:#999 !important;
display:none !important;
}
a.gpaw-info:hover{
color:#333 !important;
}
.gpaw-profile .g-rba-Dh-kQa .root .pAb .iAb
{
background-color:#990033 !important;}
</style>
<script src=" http://bloggerspicebd.googlecode.com/files/Google%2Bjquery.min.js" type="text/javascript"></script>
<script src=" http://bloggerspicebd.googlecode.com/files/jquery.googleplus-activity-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script type="text/javascript">
//<![CDATA[
jQuery.fn.googlePlusActivity.defaults.api_key = 'KODE GOOGLE API MU';
//]]>
</script>
<div class="google-plus-activity" style="width: 290px;">
<!-- { user: 'KODE PROFILE GOOGLE PLUS MU', show_image:0 } -->

Masukan kode API dan Profile G+ mu dibagian kode yang saya beri warna merah, selanjutnya tinggal klik Simpan ,

Untuk demonya silahkan lihat Sidebar kiri blog ini

Read more »

Cara Mengaktifkan Google Plus API

Google Plus API adalah sebuah pemrograman antar muka untuk Google+, anda dapat mengintegrasikan applikasi / website anda dengan Google+ API ini, hal ini akan memungkinkan banyak orang akan terhubung satu sama lain. dengan API ini kita akan mendapatkan sebuah kode untuk mengaktifkan widget / applikasi lainnya yang membutuhkan kode API.
Berikut tutorial mengaktifkan dan mendapatkan kode API :

1. Kunjungi https://code.google.com/apis/console/ Dan anda akan menemukan sebuah tampilan seperti gambar berikut

      2.  Selanjutnya klik "Create Project"

      3.  Kemudian anda akan melihat banyak pilihan Google API yang tersedia, lalu cari API yang kita butuhkan yaitu Google+ API

      

      4.  Setelah menemukannya klik "off" lalu akan ada sebuah halaman baru yang berisikan sebuah syarat dan ketentuan, lalu centang / ceklist "I agree to these terms"

      

      5.  Setelah sudah di ON kan, selanjutnya klik API Access

dan kita akan menemukan kode API yang dibutuhkan

Gunakan kode yang anda dapatkan sebagai Google API ~

Read more »

Cara Memfoto / Screenshot Halaman Web

Sebuah foto halaman website akan sangat berguna untuk memamerkan sebuah karya Template, namun untuk memfoto sebuah halaman web / blog dibutuhkan sebuah alat bantu .

Dulu saya selalu menggunakan Print Screen pada keyboard untuk memfoto sebuah halam website, namun cara itu kurang efektif karena gambar yang dihasilkan tidak full screen melainkan setengah-setengah, ya apa boleh buat lah karena dulu saya belum tau cara yang benarnya .

Namun kini saya punya cara yang lebih efektif untuk memfoto sebuah halaman web, yaitu dengan bantuan sebuah Extension pada browser chrome , extension yang saya gunakan ialah Awesome Screenshot .

Untuk mendapatkan extension tersebut anda dapat mendownloadnya di Chrome Web Store

Untuk cara penggunaannya cukup mudah dan simple, 

Pertama download Extensionnya , 

Lalu akan ada extension baru di Toolbar Chrome anda ,

Selanjutnya pilih halaman yang ingin anda screen shot 

Kemudian klik Extension Awesome Screenshot , lalu pilih type hasil yang ingin anda dapatkan dan klik

Selanjutnya anda akan dibawa ke Tab baru dan anda akan melihat hasil Screen anda tadi, pilih Done dan Save As

Read more »

Cara Memasang Music Otomatis Di Blog

Music membuat kita nyaman disemua aktivitas kita, selain membuat nyaman music juga memberikan kesenangan sendiri ketika kita mendengarkannya, hal yang sama juga akan terjadi pada blog kita , ketika kita menyediakan Music di blog pengunjung juga akan lebih nyaman dan akan berlama-lama ada diblog kita, selain memberikan ketenangan kita juga akan mendapatkan Rank yang lebih bagus nantinya karena User yang Friendly , Cara memasang music diblog juga sangat gampang kok ,

Langsung aja kita ke TKP :

1. Pertama kita harus mengunjungi website penyedia Music : http://divine-music.info
2. Lalu lihat bagian header website tersebut , Klik Browse ALL
3. Pilih Artis atau Penyanyi yang ingin anda putar musicnya diblog
4. Setelah itu anda akan disuguhi Code HTML yang nantinya akan kita pasang diblog

Lalu cari Kode
<EMBED SRC="http://divine-music.info/musicfiles/01 Rolling In the Deep.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

Ubah nilai TRUE menjadi FALSE jika anda menginginkan lagu diputar hanya sekali.

Selanjutnya
1. Login ke blogger
2. Masuk ke Layout / Tataletak blog anda
3. Add Gadget
4. HTML
5. Masukan code HTML yang sudah diedit tadi

Selesai ~
Jika menemukan kesulitan silahkan berkomentar dibawah ^^

Read more »