Menambahkan Gambar di Samping Judul Post

Memasang Icon Gambar Sebelum Entri Posting

Gambar Icon disamping Judul Posting - Sengaja saya lakukan dua posting malam ini sob,pasalnya ada sahabat kita yang menanyakan bagaimana sih menambahkan/memasang/meletakkan/membuat icon gambar sebelul entri atau judul postingan

Memang meletakkan script atau bahasa html pada template blogger (halaman edit html dengan contreng exspand widget templates) yang biasa kita lakukan,akan tidak bekerja jika terjadi kesalahan meskipun hanya kesalahan kecil dalam menuliskan 'tanda petik,garis miring sebagai penutup dalam bahasa html,dan lain sebagainya.

Oleh karenanya,kode yang akan kita tempatkan pada halaman tersebut harus benar-benar fix tanpa ada kesalahan,biasanya yang sering terjadi adalah kesalahan pada tanda petik.
Berikut ini sob adalah tutorial cara menambahkan icon gambar sebelum entri posting pada blogger yang sebenarnya pernah juga saya sharing di posting 'cara meletekkan gambar sebelum judul posting' beberapoa waktu lalu.Insya Allah,cara ini 100% bekerja.

Langkah Memasang Icon Gambar Sebelum Entri / Judul Posting

Setelah bahan sudah ada,anda tinggal upload ke hosting anda,atau bisa ke blog anda sendiri,setelah itu copy alamat URL gambar tersebut.

Contoh,alamat URL gambar yang saya punya:

---

http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif

---

Rubahlah menjadi seperti ini:

---

<img src='http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif'></img>

---

Warna merah,ganti dengan alamat URL gambar yang telah anda siapkan tadi.

---

Simpan di Notepad dulu,jangan disimpan dan jangan pula di hapus,aaaaalah!

Setelah itu,pergilah ke Dashboard Blog anda,lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML.
Contreng Expand Widget Templates,lalu cari kode berikut :

---

<a expr:href='data:post.url'><data:post.title/></a>

---

Untuk mempermudah pencarian,Tekan Ctrl+F pada keyboard,dan tuliskan kode tersebut,nantinya kode akan terdeteksi secara otomatis!

Setelah ketemu,sisipkan alamat URL gambar anda (yang sudah anda simpan di notepad tadi),di antara kode tersebut.

Setelah kode URL alamat gambar anda disisipkan,akan menjadi seperti ini :

---

<a expr:href='data:post.url'>
<imgsrc='http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif'></img>
<data:post.title/></a>

Semoga bermanfaat,dan maklum atas repost ini ya sob :D

»»  READMORE...

Membuat Streaming Audio / Video Sendiri dari Google Code untuk Blog

Menggunakan Google Code untuk menyimpan File

Seperti yang sudah sobat ketahui jika teman-teman sudah membaca dari artikel blog ini sebelumnya di 'Membuat Link Download dengan Google Code'.Memang beda tema dan beda topik juga gan,namun sebagai langkah awal dalam membuat streaming mp3 sendiri di blogger ini akan sama halnya seperti tutorial dalam menggunakan Google Code di posting beberapa waktu lalu.

Yup,dalam hal ini file yang sudah tersimpan di Google Code (misal file Mp3) dapat kita gunakan dan kita rubah menjadi streaming audio (bisa juga video,tergantung dari jenis ekstensi file) dan langsung dapat kita pasang di blog pribadi miliki kita,keren khan sob?

Mendingan langsung ke TKP aja ya gan,
Pertama,Sobat simak di artikel sebelumnya dalam 'Cara Membuat Link Download dengan Google Code',silakan klik di SINI untuk tutorialnya.

Kedua,sudah sobat ketahui alamat dari url file (mp3 dalam contoh) dalam Google Code yang kita ciptakan,misal yang berhasil saya submit adalah file tentang 'Benarkah bid'ah itu sesat?',lihat screenshot gambarnya ya gan (ini saya ambil dari creenshot posting beberapa waktu lalu):

Nah,setelah url dari file mp3 telah kita dapatkan (cara mendapatkannya seperti tutorial beberapa waktu lalu ya,klik kanan pada file dan pilih 'Copy Link Locations' seperti gambar diatas pent-),kini saatnya kita menerapkannya pada streaming yang akan kita tunjukkan pada pengunjung.

Disini kita sudah mendapat url file yang akan kita jadikan obyek,yakni:

http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3

Perlu diingat sob,syarat dari streaming ini adalah di komputer sobat sudah terinstall Media Player,dan hal ini saya kira sudah terinstall di komputer ya,secara bawaan dari windows gt loh,hihihihi..

Jadi,jika sobat ingin download semisal kajian mp3,mpg atau file berekstensi lain yang disupport media player windows,tak perlu harus menunggu sampai file selesai didownload,tinggal test aja file mp3 nya di widget ini,hehehehehe

Contoh fisik dari streaming audio/video ini sobat bisa lihat seperti di bawah ini (file saya ambil dari Google Code yang telah saya submit beberapa waktu lalu):

Pb:Nah,gimana sob,cukup lama juga ya menunggu streaming bekerja?
Sobat: Tidak juga kok,hanya butuh beberapa detik saja :D

So,yuk cari tahu bagaimana cara membuat streaming sendiri untuk blog di blogspot dan caranya ternyata sangat mudah sob,Pergi ke Dashboard > Tata Letak > Add New Gadget / Tambah Widget > HTML/Javascript >

Setelah itu letakkan kode berikut lalu simpan dan lihat hasilnya :D

<embed type="application/x-mplayer2" src="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" name="MediaPlayer" controls="ControlPanel,StatusBar" autostart="true" height="45" width="300"></embed>

Untuk url file: http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3,rubah sesuai dengan alamat url dari file sobat yang sudah teman-teman upload di Google Code.Semoga berhasil dan ingat jangan upload musik gan,haram :D (pingin jadi ustadz sob..)

Sobat:Huh!!,gampang bgt!,tp knp artikelny panjang ky gini ya @#$%#$%

»»  READMORE...

Google Rich Snippets - Cara Membuat Rating Tanda Bintang di Google Serp

Trik dan Cara Agar Index di Gogle Memiliki Star / Tanda Bintang

Hi sob,gimana kabar kalian malam ini? masih semangat ngeblog ya :D
Alhamdulillah,sore ini saya ada sedikit info yang semoga saja bermanfaat buat para blogger yang khususnya masih penasaran atau belum mengetahui bagaimana dan seperti apa penjelasan lebih rinci tutorial lengkap membuat google rich snippets ini.

Sebelum melangkah lebih jauh,apa sih fungsi dari rating google rich snippets itu gan? pertanyaan ini sobat bisa baca dan dapatkan infonya di sini.

Mohon baca artikel dengan teliti dan jangan salah langkah,karena jika mengabaikan hal ini kemungkinan besar cara akan gagal,so guys supaya trik ini bekerja di blog kamu dengan baik,simak postingan ini dengan teliti ya sob,..........tapi jangan melotot kaya gitu juga kali :D hihihihi

Seperti title dari posting kali ini,Google Rich Snippets - Cara Membuat Icon Rating Tanda Bintang di Google Serp adalah juga merupakan sebuah trik optimasi blog (salah satu kiat dalam search engine optimization -pent) agar mendapatkan posisi yang terbaik di serp (search engine result page) dari banyaknya view page atau halaman yang tampil.

Disamping itu hasil serp dengan breadcrumbs tanda bintang ini akan lebih menarik pengunjung karena tampilan yang lebih menonjol dibandingkan dengan hasil yang lain,sobat bisa lihat seperti pada gambar diatas tadi.

Bagaimana tips dan trick dalam membuat gugel rich snipet ini? sobat baca dan mari pahami bersama dengan seksama (halah! bahasane mas,biasa wae dumz :p)

Langkah dan Cara Memasang Icon Star atau Tanda Bintang di Result Google

Akan ada banyak step-step yang harus kita lakukan secara berurut,dan disini kami membagi menjadi 7 langkah,dan langkah-langkahnya adalah sebagai berikut:

#1. Pertama,sobat harus memiliki akun Google Plus (Google+),mudah kok sob,tinggal daftar aja di SINI

Syarat ini adalah untuk mendapatkan nomor ID dari akun Google+ sobat,yang nantinya akan kita gunakan sebagai verifikasi dari Google Rich Snippets yang akan kita bahas kali ini.

Setelah sobat memiliki akun Google+,coba sobat pergi ke menu Profil lalu simpan no ID yang tampil dari akun Google+ sobat,no ID ini akan tampil di address bar browser yang sobat gunakan,lihat gambar (gb.1) sob:

gb.1

Setelah itu,untuk sementara simpan dahulu ya gan no ID gOOgle+ milik sobat.Sebagai contoh no ID Google+ milik saya sendiri adalah 118207325935415873536

#2. Sekarang,pergilah ke Dashboard blogger milik sobat,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates dan cari kode (gunakan Ctrl+F untuk mempermudah pencarian)
Setelah kode tersebut sobat ketemukan,kini letakkan kode dibawah ini tepat dibawah kode <head> tersebut:

<link href='https://plus.google.com/no_id_sobat' rel='publisher'/>

misal dengan ID Google+ yang saya miliki akan menjadi seperti ini atau bisa lihat (gb.2):

<link href='https://plus.google.com/118207325935415873536' rel='publisher'/>

lihat gambar:

gb.2

Simpan template sobat.

#3. Langkah selanjutnya,masih dalam halaman yang sama,pergilah ke Dashboard blogger milik sobat,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates dan cari kode <body> dan tepat dibawahnya letakkan kode berikut atau lihat (gb.3):

<div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>

atau lihat gambar:

gb.3

Kemudian cari kode </body> dan tepat diatasnya letakkan kode penutup berikut atau lihat (gb.4):

</div></div>

lihat gambar:

gb.4

Simpan templates sobat.

#4. Pergilah ke Dashboard,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates.Gunakan Ctrl+F dalam keyboard dan tuliskan kode berikut post-title entry-title,akan terlihat seperti gambar dibawah (gb.5) ini:

gb.5

Hal ini akan menemukan secara otomatis kode yang kita cari,untuk barisan kodenya biasanya akan terlihat seperti ini:
<h3 class='post-title entry-title'><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Sekarang,sisipkan kode berikut antara barisan kode tersebut:

<span itemprop='itemreviewed'><span itemprop='description'></code> dan <code></span></span>

Sehingga akan menjadi seperti ini atau lihat (gb.6):

<span itemprop='itemreviewed'><span itemprop='description'>
<h3 class='post-title entry-title '><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</span></span>
</b:if>

Dari gambar yang berhasil saya print screen akan seperti ini:

gb.6

Simpan templates sobat.

#5. Pergilah ke Dashboard,lalu pilih Tata Letak dan klik tab Edit HTML kemudian jangan lupa contreng tulisan Expand Widget Templates lalu cari kode <data:post.body/> atau <p><data:post.body/></p>
Setelah ketemu,letakkan persis dibawahnya barisan kode google rich snippets breadcrumbs ini:

Description: <span itemprop="description"><data:post.title></data:post.title></span>
Rating: <span itemprop="rating">3.5</span>
Reviewer: <span itemprop="reviewer"><data:post.author></data:post.author></span>
ItemReviewed: <span itemprop="itemreviewed"><data:post.title></data:post.title></span>

atau bisa lihat (gb.7)

gb.7

Bagaimana jika saya menemukan kode <data:post.body/> lebih dari satu? tidak mengapa sob,tinggal letakkan kode google rich snippets breadcrumbs tersebut tepat dibawah masing-masing kode <data:post.body/> yang ada di template blog milik sobat.

Simpan templates.

#6. Langkah berikut ini adalah yang terpenting karena mempengaruhi dalam kesuksesan cara mem-verifikasi Google Rich Snippets yang akan kita bahas ini.

Pergilah ke akun Google+ milik sobat,dan pilih menu Profil maka akan sobat lihat di sebelah kanan atas tombol 'Edit Profil',Klik tombol 'Edit Profil' tersebut dan klik link 'Kontributor Untuk' (gb.a)
Lihat gambar berikut ini:

gb.a

Selanjutnya,klik link 'Tambahkan Tautan....' (gb.b)


gb.b

Isi label dan url,label bisa sobat kasih nama sesuai keinginan sedangkan url sobat tuliskan alamat blog yang sobat miliki lalu klik tombol 'Simpan',lihat gambar (gb.c)

gb.c

#7. Langkah terakhir,sobat kunjungi Rich Snippets Testing Tool lihat gambar berikut (lihat gb.d):


gb.a

Isikan url blog milik sobat untuk mengetes hasil Google Rich Snippets yang baru saja kita ciptakan,jika sukses akan tampil seperti gambar dibawah ini gan:

Semoga bermanfaat ya,see you guys (sok bule,hihihihihihi)

»»  READMORE...