Menampilkan Gambar Profile dihalaman Hasil Pencarian Google

Bisa dipastikan robot Google sekalipun tidak mungkin bisa menentukan keaslian
suatu artikel, yang mungkin bisa tentu saja hanya penulis artikel itu sendiri.
Tapi dengan hadirnya fasilitas untuk menampilkan gambar Profile Anda dalam hasil
pencarian tentu ini akan menjadi cerita lain, selain terlihat bahwa Anda adalah
penulis sebenarnya dan itu juga menjadi kesan profesional buat Anda. Coba saja
Anda mencari artikel yang menarik di Google, Anda tentu akan melihat 10 hasil
pencarian pertama dan bisa dipastikan semuanya mempunyai judul yang hampir mirip
bahkan sama persis, lalu bagaimana jika di antara 10 hasil pencarian tersebut
terpajang wajah tampan Anda, tentu si pencari akan melirik Anda terlebih dahulu
walapun artikel blog Anda sendiri hanya berada pada urutan ke 6, itu karena
halaman Google sering berisi penuh dengan teks dan dengan demikian orang mungkin
akan tertarik lebih ke arah hasil yang memiliki beberapa elemen visual (foto
penulis) yang melekat padanya. Asalkan bukan artikel COPAS aja ya tar malah
malu2in, udah copas nampang pula hehehe

Cara menampilkan gambar Profile dihalaman hasil result Google:

 

CARA I:

1. Pertama, silahkan buat satu halaman "About me" di blog Anda, untuk
pengguna blogger Anda bisa membuatnya melalui halaman Statis Page atau bisa juga
menggunakan halaman Standar Post. Agar lebih mudah Anda bisa melihat halaman
"About me" milik saya
disini.

2. Buat satu Text Link yang mengarah ke halaman URL Profile Google+ Anda dan
jangan lupa menanamkan satu Tag rel="me" (ingat
hanya satu tag saja) dalam link tersebut.

 

<a href="https://plus.google.com/ID_Anda" rel="me">Agus Ramadhani</a>

3. Ini sangat penting, pastikan semua artikel diblog Anda terkait kehalaman
"About me". Caranya sangat mudah, Anda tinggal memasang saja link "About me" di
menu, saya sendiri memasangnya di halaman About dalam widget saya (lihat paling
bawah di blog ini ditandai dengan text link Read more
), dan pastikan Anda memasang Tag rel="author"
pada link tersebut.

 

<a href="http://www.blog-Anda.com/p/about-me.html"
rel="author">About me</a>

 

4. Langkah terakhir silahkan masuk ke halaman profile Google+ Anda disini
https://plus.google.com
dan tuju ke tombol "Edit Profile" kalau sudah silahkan tuju ke pengeditan
"Profile lainnya", biasanya Anda diminta untuk memasukan alamat blog Anda, nah disini Anda tinggal memasukan Link "About me" saja beserta
URL-nya.

 

Sampai tahapan ini sebenarnya sudah selesai dan biarkan google merayapi
halaman Anda terlebih dahulu. Perlu juga diketahui bahwa tidak ada jaminan
gambar anda akan tampil, semua tergantung analisa google itu sendiri setelah
merayapi halaman anda.

 

CARA II:

Cara yang kedua jauh lebih praktis dimana Anda tinggal
menambahkan satu badge icon profile saja, caranya silahkan langsung menggunakan
Profile Button Creator dialamat ini

http://www.google.com/webmasters/profilebutton

Pastikan cara kedua ini tidak berlaku jika Anda sudah menggunakan cara
pertama, jika tidak akan terjadi duplikat Profile Author.

Verifikasi Author

Agar gambar Profile Anda bisa tampil dan berjalan dengan sempurna sebaiknya
Anda perlu melakukan verifikasi dengan mengujicobanya terlebih dahulu.

1. Silahkan buka

Rich Snippets Testing Tool

2. Masukan salah satu link artikel (posting) Anda yang terbaru.

3. Jika tidak ada masalah maka gambar profile beserta nama Anda akan muncul
dan ditandai dengan nilai verifikasi yang bener.

Tips jika ada kesalahan

1. Pastikan Anda hanya menggunakan kedua tag rel="me" dan rel="author"
diatas satu kali saja jangan sampai ada duplikat.

2. Pastikan Anda benar-benar memasukan gambar Anda pada Profile Google+,
sebaiknya termasuk dengan Isi biodata Anda secara lengkap.

3. Pastikan halaman profile Google+ Anda benar-benar terkait dengan halaman
blog Anda, termasuk halaman About me tadi.

4. Google akan memilih thumbnail gambar dari halaman Profil Google+ Anda,
sebaiknya gunakan gambar yang sebenarnya dari diri Anda sendiri (bukan ikon).
Gambar harus terlihat baik bahkan ketika dikompresi menjadi gambar thumbnail
50x50.

 

Silahkan baca dokumentasi selengkapnya
disini

Semoga tutorial diatas berguna :)

Cara Memasang Tombol Google+ di Blogger

Saya yakin pembaca setia blog ini tidak kesulitan untuk memasang tombol Google+ (G+), tapi tidak semua juga mengerti caranya, terlebih yang baru
belajar ngeblog. Selain itu disini saya juga  mencoba menjelaskan secara
rinci dari beberapa masalah yang kadang membuat tombol Google+ tidak bekerja
sebagaimana mestinya. Jadi silahkan luangkan waktu sejenak untuk belajar
tutorialnya dibawah ini:

Langkah memasang tombol G+ sangat mudah silahkan ikuti tutorial dibawah
ini

Silahkan memasang Script dibawah ini atas Tag </body>

<!-- Tempatkan tag ini di bagian head atau tepat
sebelum tag body penutup -->

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

 

Kemudian anda bisa memasang tombol G+ dimana saja dengan menambahkan kode
dibawah ini.

<!-- Tempatkan tag ini di tempat yang Anda inginkan untuk menampilkan tombol +1
-->

<g:plusone size="small"></g:plusone>

Cara memasang tombol G+ diatas sebenarnya sudah selesai, tapi jika anda ingin
menambahkan kode yang lebih rinci anda bisa mencoba beberapa script dibawah ini:

Tombol G+ dengan ukuran Standar (24 piksel)

<g:plusone></g:plusone>

Tombol G+ dengan ukuran Kecil (15 piksel)

<g:plusone size="small"></g:plusone>

Tombol G+ dengan ukuran Sedang (20 piksel)

<g:plusone size="medium"></g:plusone>

Tombol G+ dengan ukuran Tinggi (60 piksel)

<g:plusone size="tall"></g:plusone>

Tombol G+ Untuk HTML5

<div class="g-plusone" data-size="standard" data-count="true"></div>

Anda juga dapat membuat custom tombol G+ sendiri

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {"parsetags": "explicit"}
</script>
<script type="text/javascript">
  function renderPlusone() {
    gapi.plusone.render("plusone-div");
  }
</script>
<body>
  <a href="#" onClick="renderPlusone();">Render the +1 button</a>
  <div id="plusone-div"></div>
</body>

Custom Tombol G+ dengan URL khusus

<!-- customized for a specific address -->
<g:plusone href="https://plus.google.com/108442421331149025926"></g:plusone>

Untuk customize tombol G+ saya menyarankan anda memasukan url dari Google+ profile atau halaman (page) G+ yang sudah ada buat, lihat tutorialnya disini

 

Cara pasang Tombol G+ disebelah Tombol Facebook (dalam halaman posting)

<span style='float:left;
width:65px;'><!-- Place this tag where you want the +1 button to render -->

<g:plusone expr:href='data:post.url' size='medium'/>

</span>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.pjumpjhp?href=&quot;
+ data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;'
frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px;
height:30px;'/>

</div>

Kode standar Google+ tidak bekerja pada postingan dalam lingkup halaman
home (index).

Pada halaman Posting dengan menggunakan kode

<G:Plusone/>
biasanya tidak terjadi masalah, tapi saat kalian mencoba memasang tombol G+ yang
ditujukan pada halaman post yang letaknya berada dalam halaman utama ini
biasanya bermasalah karena G+ setahu saya tetap akan mendeteksi sebagai halaman
index bukan sebagai halaman post. Untuk mengatasi masalah ini silahkan mencoba
menggunakan kode ini <g:plusone expr:href='data:post.url'/>

 

Sebenarnya G+ sendiri sudah menyedian Custom Badge yang bisa anda coba
langsung di alamat ini
disini atau
anda bisa melihat informasi Full API selengkapnya
disini

 

Jangan lupa bergabung dihalaman G+ saya:

Halaman Resmi Agus Ramadhani

Halaman Resmi o-om.com

Halaman Resmi
Zoomtemplate.com

 

Bagaimana Membuat Halaman di Google+

Seperti Facebook yang sukses membuat halaman Page khusus selain halaman
profile, Google+ (G+) beberapa waktu lalu juga kembali merilis halaman page yang
khusus dibuat untuk tujuan halaman penggemar seperti website, merek, bisnis dll. Dan tidak diragunakan lagi halaman ini sangat berguna untuk membuat saluran trafik dengan cara mempromosikan blog atau website. Jika anda sudah pernah membuat halaman
page untuk facebook saya rasa anda tidak akan bertanya lagi dengan page pada
G+ karena cara kerjanya sangat mirip dan hampir sama :)

Ada kelebihan yang di miliki Page pada G+ jika dibandingkan Facebook,
dimana Page pada G+ dalam waktu dekat akan terintegrasi dengan hasil pencarian
pada Google Search Engine, kita cukup memberi tanda (+) saja sebelum melakukan
pencarian, misalkan kita mengetikan +pepsi atau +angry bird maka secara
otomatis Google akan memberikan hasil result tertentu yang terkait dengan Page
pada G+. Bayangkan jika itu adalah halaman anda yang tampil pertama, tentu BOOM
trafik tidak akan diragukan lagi. Tapi ada tapinya, halaman yang muncul mungkin
adalah halaman yang populer dengan jumlah penggemar terbanyak :) jadi berusahalah
untuk membuat halaman G+ anda Populer, asalkan jangan buka halaman Salon ++ aja ya
wkwkwkkwk.

Tutorial Cara Membuat Halaman di Google+

Prosesnya gak ribet dan sangat sederhana yang penting anda sudah terdaftar
disana.

1. Langsung tuju ke halaman ini

https://plus.google.com/pages/create

2. Pilih halaman yang ingin anda buat, Saya sendiri memilih tab (Lainnya)
atau anda bisa memilih halaman tertentu misalkan blog atau website jadi terserah saja.

3. Silahkan masukan judul halaman dengan alamat blog yang ingin dipromosikan.
Jangan lupa beri tanda centang bahwa anda setuju dan tekan tombol (Buat)

4. Masukan slogan halaman minimal 10 kata dan tambahkan photo biar manis.

5. Selesai, tinggal di promosikan saja linknya :)

 

Jangan lupa bergabung dihalaman G+ saya:

Halaman Resmi Agus Ramadhani

Halaman Resmi o-om.com

Halaman Resmi
Zoomtemplate.com

 

Trik Sederhana Cara Proteksi Gambar di Blog

Rasanya sangat mustahil menghindari seseorang menyalin dan menyimpan gambar
yang ada dihalaman blog anda. Hanya dengan melakukan klik kanan dan "save as" siapapun dapat dengan mudah mengambil gambar anda hanya dengan hitungan detik.

 

Nah disini sebenarnya ada Trik Proteksi sederhana yang bisa anda lakukan
untuk menghindari gambar anda di simpan dari tangan-tanagn jahil, dimana hasil dari gambar yang dicoba disimpan nantinya hanya berupa gambar kosong.

 

Untuk uji coba silahkan klik kanan dan "save as" gambar dibawah ini:

 

Kode standar dari gambar biasanya seperti ini:

<img width="500" height="375" src="http://www.o-om.com/contohgambar.jpg"/>

 

Dengan menerapkan kode sederhana dibawah ini yaitu dengan hanya mengubah artibut src dan penggunaan css style langsung pada gambar maka cara Trik dibawah ini akan menciptakan gambar kosong pada hasil download.

<img style="background-image:url('http://www.o-om.com/contohgambar.jpg');"
src="data:image/gif;base64,R0lGODlhAQABAIAAAP
///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="500" height="375"/>

 

Ingat! selalu pastikan ukuran size dari gambar harus sama dengan aslinya. Walaupun Trik ini menurut saya tidak 100% akurat paling tidak khan cara ini bisa sedikit mengurangi dari tangan pengguna yang non-teknis :)

Pilihan Black atau White YouTube Video Player

Sebelumnya anda mungkin hanya bisa menampilkan Video Player Youtube
menggunakan warna standar Light (white) saja, sedangkan saat tulisan ini saya
buat melalui situs resmi
youtube

Shannon Behrens mengatakan bahwa YouTube akan beralih ke pemutar video gelap
untuk semua embeds dalam beberapa waktu mendatang. Lalu bagaimana jika anda
sudah terlanjur ingin menggunakan warna Light saja sebagai warna stardar payer
anda karena itu mungkin lebih sesuai dengan halaman blog anda saat ini.

 

Lihat Perbedaan Warna Player Video YouTube dibawah ini:

 

Untuk Light (white) Player:

<iframe src="http://www.youtube.com/embed/S1Q9bAochC0?theme=light"

      frameborder="0" width="575" height="350"></iframe>

 

Untuk Black Player:

<iframe src="http://www.youtube.com/embed/S1Q9bAochC0?theme=dark"
      frameborder="0" width="575" height="350"></iframe>

 

Untuk Mengubah warna player sesuai selera caranya anda tinggal mengganti saja
warna merah pada source diatas. Semoga Berguna :)

Semi Auto Generated Content For Blogspot - AGC

Pada kesempatan kali ini saya akan berbagi sedikit tips buat temen-temen blogger

yg lagi males atau gak punya banyak waktu untuk write and posts. Sesuai dengan

judul posting “Semi Generated Content” yg bisa diartikan dengan setengah

dari “Auto Generated Content (AGC)”. Maksudnya adalah kita hanya perlu edit sedikit

posting yang secata otomatis masuk dalam “Daftar Entri” Blog kita masing-

masing. Berikut ini peralatan yang temen blogger harus sediakan :

GUEST BLOG:

Penulis dibalik Artikel ini:
Ari Ibnu umar | silabusandrpp.blogspot.com

1. Account Blogger

Dalam hal ini harus jelas blog Semi Generated Content yang akan temen

buat tema dan isinya kemana [Tema Blog]

 

2. Account Yahoomail

Digunakan sebagai sumber artikel yang mengisi secara otomatis nantinya

dalam “dafta Entri” Blog Semi Generated Content kita.

 

Langkah-langkahnya adalah sebagai berikut :

1. Buat satu blog dengan tema tertentu, misalnya ttg
“Islam”

2. Pada tab “pengaturan” pilih sub menu
“email and Selluler” seperti gambar

dibawah ini :

3. Pada Opsi pengeposan isikan alamat email yg saudara inginkan, email ini

merupakan Subdomain dari Email Google,, saudara bisa lihat pada

gambar. Pada gambar diatas email google nya adalah rppsilab[at]

gmail.com dengan sub email yang saya isikan
arimatematika. Jadi

emailnya adalah rppsilab.arimatematika[at]blogger.com. Perlu diingat

pada bagian bawah gambar diatas tandai “simpan email sebagai entri

konsep” agar kita rapikan dahulu sebelum di terbitkan. [inilah yang saya

maksud dengan Semi Generated Content For Blogspot, artikelnya

masuk secara otomatis, tetapi masih perlu edit manual agar rapi ketika

kita tampilkan dalam postingan.

 

4. Setelah itu saudara tinggal gabung disalah satu YahooGroups dengan

account YahooMail yg telah temen buat. [makin banyak groups yg diikuti,

makin banyak artikel yg masuk dalam daftar entri blog kita]. Bergabung

dengan groups yg sesuai dengan tema Blog Semi Generated Content yg

akan saudara buat. Ketika saudara bergabung isikan email yg telah kita

buat pada langkah 3. Lihat screen shoot dibawah ini

Bayangkan saja dalam waktu yg relatif singkat, daftar entri blog saya mencapai

346 daftar postingan. Bisa lihat screenshoot dibawah ini pada blog saya yg

berjudul “BACALAH” yang saya mulai dari 09 desember 2010.

Tetapi blog ini

tidak saya kelola dengan baik, karena saya ingin focus pada blog saya yg tentang

pendidikan, ngeblog harus focus dan sebaiknya focus ke tulisan konten orisinil
itu akan lebih baik. Semoga bermanfaat :)

Menampilkan Thumbnail yang Berbeda Pada Halaman Home

Saya kurang tau apakah wordpress menggunakan plugin untuk menampilkan
thumbnail yang berbeda pada halaman home, tapi itu bisa dilakukan dengan lebih
mudah di blogger. Cukup dengan conditional Tag.

Thumbnail ini akan digunakan pada halaman home untuk memberikan gambaran
tentang isi artikel, dan akan hilang setelah visitor masuk ke artikel. Salah
satu blog yang menerapkan system ini adalah bloggerplugin. Disini saya akan
menjelaskan pengaplikasiannya.

Kita akan menggunakan conditional tag yang mengatur penampakan pada halaman
artikel (item).


<b:if cond='data:blog.pageType == &quot;item&quot;'>


Untuk membungkus Class tertentu. Class ini akan diletakkan pada HTML gambar yang
ingin dijadikan thumbnail.

Berikut total kode:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>




.thumb {display:none}



</style>

</b:if>

 

Letakkan kode tersebut diatas </head>

***

Masuk kehalaman posting & saat memasukkan gambar ke artikel, akan muncul kode
berikut:

<a
class="thumb" onblur="try

{parent.deselectBloggerImageGracefully();} catch(e) {}"

href="...s1600/anonymous.png"><img style="display:block; margin:0px

auto 10px; text-align:center;cursor:pointer; cursor:hand;width:

35px; height: 35px;" src="...s400/anonymous.png" border="0"

alt=""id="BLOGGER_PHOTO_ID_5529584144433618498" /></a>

Atau,

<img
class="thumb" src="...s1600/anonymous.png" alt="" />

Tambahkan kode yang berwarna merah seperti yang ditunjukkan pada kode HTML
diatas. Intinya adalah pada class="thumb". Commons
ini yang mengatur bahwa thumbnail/gambar dihidden jika masuk ke halaman artikel.

Penulis dibalik Artikel ini:
Biyan | hhttp://www.dzignine.com

Trik ini juga bisa dilakukan untuk mengobati thumbnail yang jelek pada auto read
more, tentu saja selain dengan melakukan cropping pada gambar.