Blogger star rating adalah salah satu fitur baru Blogger yg resmi diluncurkan pada pertengahan 2011 lalu. Dulu, uji coba serta akses pengaktifan & penggunaannya harus melalui draft.blogger.com. Tapi kini tidak lagi, aktivasi fitur star rating for blogger dapat dilakukan melalui dashboard blogger.com. Star rating memberikan kesempatan pada pengunjung blog untuk menilai konten/isi posting yg dibacanya. Bagi pemilik blog, star rating dapat memberikan gambaran guna mengevaluasi penyajian isi blog.

Cara Memasang Star Ratings Widget Pada Official Blogger Templates

Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:

1. Masuk ke dashboard Blogger.

2. Buka halaman layout (page elements).

3. Klik "edit" pada bagian badan posting (blog posts).

4. Klik/centang "Show Star Ratings"

5. Setelah itu save.

Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.

Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.

Cara Memasang Star Ratings Widget Pada Custom Blogger Templates

Pada template blogger yg tidak disediakan oleh Blogger sendiri, star ratings tidak akan muncul meskipun sudah diaktifkan dengan cara seperti di atas. Hal ini karena pada template Blogger yg disediakan oleh pihak ketiga tidak diberikan script serta HTML star ratings. Melihat hal demikian, saya mencoba menengok template-template resmi Blogger dan menemukan beberapa bagian widget star ratings. Sebagai uji coba, saya kemudian mengekstraknya & mengaplikasikannya pada template blog ini.

Ada dua langkah penting untuk memasang star rating blogger:

• Memasang Kode HTML star ratings:

1. Aktifkan terlebih dahulu fitur star ratings seperti cara di atas. Apabila tidak ditemukan, akses dashboard melalui draft.blogger.com. Save.

2. Buka edit HTML ( template > edit HTML), jangan lupa centang "Expand Widget Templates".

3. Jika ingin memasang star ratings di bawah judul posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F), letakkan kode berikut di bawahnya. Jika ingin memasang di bawah isi posting, cari <data:post.body/>, letakkan kode berikut di bawahnya:

<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if></div>

Note:

-Apabila anda telah menggunakan share buttons (Facebook, Twitter, Google+) yg saya share pada posting terdahulu, letakkan kode di atas </b:if>.

- Apabila <div class='post-header-line-1'/> tidak ditemukan, cari <data:post.body/>, letakkan kode di atasnya.

• Memasang Script star ratings:

1. Masih pada edit HTML, cari <b:include name='feedLinks'/>, letakkan script berikut di bawahnya:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Note: Jika <b:include name='feedLinks'/> tidak ditemukan, cari <b:includable id='feedLinks'>.

2. Save template.

Blogger star ratings akan muncul di atas atau di bawah posting sesuai cara yg dipilih. Pastikan & perhatikan posisi widget agar sesuai dengan template blog. Jika perlu beri pengaturan CSS agar tampil pada posisi yg sempurna & sesuai keinginan.

Have a nice blogging * Have a nice learning!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Blogger star rating adalah salah satu fitur baru Blogger yg resmi diluncurkan pada pertengahan 2011 lalu. Dulu, uji coba serta akses pengaktifan & penggunaannya harus melalui draft.blogger.com. Tapi kini tidak lagi, aktivasi fitur star rating for blogger dapat dilakukan melalui dashboard blogger.com. Star rating memberikan kesempatan pada pengunjung blog untuk menilai konten/isi posting yg dibacanya. Bagi pemilik blog, star rating dapat memberikan gambaran guna mengevaluasi penyajian isi blog.

Cara Memasang Star Ratings Widget Pada Official Blogger Templates

Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:

1. Masuk ke dashboard Blogger.

2. Buka halaman layout (page elements).

3. Klik "edit" pada bagian badan posting (blog posts).

4. Klik/centang "Show Star Ratings"

5. Setelah itu save.

Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.

Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.

Cara Memasang Star Ratings Widget Pada Custom Blogger Templates

Pada template blogger yg tidak disediakan oleh Blogger sendiri, star ratings tidak akan muncul meskipun sudah diaktifkan dengan cara seperti di atas. Hal ini karena pada template Blogger yg disediakan oleh pihak ketiga tidak diberikan script serta HTML star ratings. Melihat hal demikian, saya mencoba menengok template-template resmi Blogger dan menemukan beberapa bagian widget star ratings. Sebagai uji coba, saya kemudian mengekstraknya & mengaplikasikannya pada template blog ini.

Ada dua langkah penting untuk memasang star rating blogger:

• Memasang Kode HTML star ratings:

1. Aktifkan terlebih dahulu fitur star ratings seperti cara di atas. Apabila tidak ditemukan, akses dashboard melalui draft.blogger.com. Save.

2. Buka edit HTML ( template > edit HTML), jangan lupa centang "Expand Widget Templates".

3. Jika ingin memasang star ratings di bawah judul posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F), letakkan kode berikut di bawahnya. Jika ingin memasang di bawah isi posting, cari <data:post.body/>, letakkan kode berikut di bawahnya:

<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if></div>

Note:

-Apabila anda telah menggunakan share buttons (Facebook, Twitter, Google+) yg saya share pada posting terdahulu, letakkan kode di atas </b:if>.

- Apabila <div class='post-header-line-1'/> tidak ditemukan, cari <data:post.body/>, letakkan kode di atasnya.

• Memasang Script star ratings:

1. Masih pada edit HTML, cari <b:include name='feedLinks'/>, letakkan script berikut di bawahnya:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Note: Jika <b:include name='feedLinks'/> tidak ditemukan, cari <b:includable id='feedLinks'>.

2. Save template.

Blogger star ratings akan muncul di atas atau di bawah posting sesuai cara yg dipilih. Pastikan & perhatikan posisi widget agar sesuai dengan template blog. Jika perlu beri pengaturan CSS agar tampil pada posisi yg sempurna & sesuai keinginan.

Have a nice blogging * Have a nice learning!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Emoticon/smiley dapat mewakili ekspresi komentator blog. Selain itu, emoticon/smiley dapat lebih mempercantik  tampilan bagian komentar blog. Dengan menggunakan javascript, kita dapat melakukan hack untuk menambahkan fitur emoticon pada blog berplatform Blogger. Emoticon ini menggunakan basis perintah emoticon  Yahoo! yg telah kondang itu. Misalnya, ketika ingin menampilkan gambar emoticon senyum, digunakan perintah/menuliskan karakter :), dst. Di blogger, perintah tersebut dapat diadaptasi guna memunculkan tampilan gambar smiley/emoticon tertentu. Pada fitur emoticon komentar Blogger ini, saya menggunakan gambar-gambar berformat gif milik Yahoo! yg memiliki efek animatif (bergerak).

Cara Pasang/Buat Fitur Emoticon Pada Komentar Blogger

Jika sobat Blogger tertarik memasang fitur emoticon pada blog sobat, ikuti beberapa langkah pemasangannya. Pada intinya ada 3 poin langkah penting:

a. Memasang CSS yg mengatur tampilan emoticon.

b. Memasang kode HTML guna menampilkan preview emoticon/smiley di bagian atas kotak komentar. Fungsinya sebagai panduan pengunjung ketika hendak membuat emoticon pada komentar.

c. Memasang kode javascript, yg berfungsi mengconvert perintah menjadi gambar emoticon.

Berikut cara pemasangannya:

1. Masuk ke Design/Template > Edit HTML

2. Centang "Expand Widget Templates"

3. Copy paste kode CSS berikut di ATAS ]]></b:skin> (cari dg Ctrl + F):

.bukarahasiasmiley {background: none repeat scroll 0 0 #EFF5FB !important;font-size: small !important;padding: 5px !important;margin:auto !important;text-align: left !important;font-weight:bold !important;width:100% !important;-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;}

.bukarahasiasmiley span {padding-right: 3px !important;} 

img.brbsmly {height: auto !important;vertical-align: middle !important;width: auto !important;border:0px !important;}

Jika ingin ganti warna background, ganti #EFF5FB dengan kode warna lain.

4. Cari <b:if cond='data:post.embedCommentForm'>. Biasanya ada dua tag xml seperti itu, cari & pilih yg kedua, yaitu yg berpasangan dengan <b:include data='post' name='comment-form'/>.

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

5. Copy kode HTML berikut (klik select all & copy), letakkan di BAWAH/SETELAH <b:if cond='data:post.embedCommentForm'>.

<div class='bukarahasiasmiley'> <img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :) <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> :-?</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^</span> <span><img class='brbsmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!</span> <span><a href='http://buka-rahasia.blogspot.com'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh27djzR1TYkkmgtnvQndYZTHnzYkH_DXXid8vWTe0IqYq2kgCTp5a1vGPEKE-ex-ffV6yWji9A7HYd6cy7XOs39xHYb7v1HUWMBfZqrsWmKcEAy7YeKBGseG30z8fAPdTm9wL1jCfLF1dS/s1600/smileys.gif' /></a></span></div>

6. Copy kode berikut & letakkan di atas </body>:

<script src='
https://sites.google.com/site/bukarahasiahost/blogger-comment-smileys/bukarahasiablogspot-ysmileys-bloggercomments.txt' type='text/javascript'></script>

7. Save template.
8. You are done!

Kini pengunjung n sobat dapat menggunakan emoticon/smiley di komentar blog sobat.
Have a nice Blogging.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Emoticon/smiley dapat mewakili ekspresi komentator blog. Selain itu, emoticon/smiley dapat lebih mempercantik  tampilan bagian komentar blog. Dengan menggunakan javascript, kita dapat melakukan hack untuk menambahkan fitur emoticon pada blog berplatform Blogger. Emoticon ini menggunakan basis perintah emoticon  Yahoo! yg telah kondang itu. Misalnya, ketika ingin menampilkan gambar emoticon senyum, digunakan perintah/menuliskan karakter :), dst. Di blogger, perintah tersebut dapat diadaptasi guna memunculkan tampilan gambar smiley/emoticon tertentu. Pada fitur emoticon komentar Blogger ini, saya menggunakan gambar-gambar berformat gif milik Yahoo! yg memiliki efek animatif (bergerak).

Cara Pasang/Buat Fitur Emoticon Pada Komentar Blogger

Jika sobat Blogger tertarik memasang fitur emoticon pada blog sobat, ikuti beberapa langkah pemasangannya. Pada intinya ada 3 poin langkah penting:

a. Memasang CSS yg mengatur tampilan emoticon.

b. Memasang kode HTML guna menampilkan preview emoticon/smiley di bagian atas kotak komentar. Fungsinya sebagai panduan pengunjung ketika hendak membuat emoticon pada komentar.

c. Memasang kode javascript, yg berfungsi mengconvert perintah menjadi gambar emoticon.

Berikut cara pemasangannya:

1. Masuk ke Design/Template > Edit HTML

2. Centang "Expand Widget Templates"

3. Copy paste kode CSS berikut di ATAS ]]></b:skin> (cari dg Ctrl + F):

.bukarahasiasmiley {background: none repeat scroll 0 0 #EFF5FB !important;font-size: small !important;padding: 5px !important;margin:auto !important;text-align: left !important;font-weight:bold !important;width:100% !important;-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;}

.bukarahasiasmiley span {padding-right: 3px !important;} 

img.brbsmly {height: auto !important;vertical-align: middle !important;width: auto !important;border:0px !important;}

Jika ingin ganti warna background, ganti #EFF5FB dengan kode warna lain.

4. Cari <b:if cond='data:post.embedCommentForm'>. Biasanya ada dua tag xml seperti itu, cari & pilih yg kedua, yaitu yg berpasangan dengan <b:include data='post' name='comment-form'/>.

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

5. Copy kode HTML berikut (klik select all & copy), letakkan di BAWAH/SETELAH <b:if cond='data:post.embedCommentForm'>.

<div class='bukarahasiasmiley'> <img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :) <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> :-?</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd</span> <span><img class='brbsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^</span> <span><img class='brbsmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!</span> <span><a href='http://buka-rahasia.blogspot.com'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh27djzR1TYkkmgtnvQndYZTHnzYkH_DXXid8vWTe0IqYq2kgCTp5a1vGPEKE-ex-ffV6yWji9A7HYd6cy7XOs39xHYb7v1HUWMBfZqrsWmKcEAy7YeKBGseG30z8fAPdTm9wL1jCfLF1dS/s1600/smileys.gif' /></a></span></div>

6. Copy kode berikut & letakkan di atas </body>:

<script src='
https://sites.google.com/site/bukarahasiahost/blogger-comment-smileys/bukarahasiablogspot-ysmileys-bloggercomments.txt' type='text/javascript'></script>

7. Save template.
8. You are done!

Kini pengunjung n sobat dapat menggunakan emoticon/smiley di komentar blog sobat.
Have a nice Blogging.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Share buttons adalah tombol-tombol yg dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yg mereka sukai ke social media, baik Facebook, Twitter, Google+, dll. Banyak sobat Buka Rahasia Blogspot yg menanyakan tentang share buttons yg saya gunakan di bawah judul posting. Saya menggunakan 3 buttons milik 3 social media yg disusun sedemikian rupa menjadi satu bagian widget. Dulu saya pernah share cara pemasangan Facebook Like Button & Google +1 Button, namun Tweet Button belum. Tetapi karena banyak sobat yg meminta 3 button (tombol) share itu sekaligus menjadi satu widget, oke deh Tweet Button saya lompati dan akan langsung share cara membuat & memasang ketiganya.

Masih seperti dua cara sebelumnya, widget ini hanya akan ditampilkan di bagian posting ketika halaman posting dibuka secara utuh serta tidak tampil pada jenis halaman lain (homepage, label, search, archive). Agar susunan, jarak serta tampilan tidak kacau, saya membuat ukuran-ukuran tersendiri pada masing-masing button lalu menyusunnya dengan tabel. So, jangan mengubah nilai apapun di dalam masing-masing button.

Sebelum memasang share buttons, perhatikan beberapa hal berikut:

a.  Jika sudah memasang widget Facebook like atau Google +1, khususnya yg saya share di blog ini, hapus atau ambil terlebih dahulu kodenya. Lihat 2 posting terdahulu untuk mengetahui mana yg harus dihapus.

b. Jika sudah pernah memasang Google+ 1 Button, tidak perlu lagi memasang script plugin API Google +1 seperti berikut:

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

c. Jika belum, pasang script plugin API Google +1 tersebut di atas </head> pada edit HTML/Edit Template.

Cara Memasang Share Buttons (Facebook Like, Tweet, & Google +1)

Setelah memastikan beberapa hal di atas, pasang widget share buttons dengan langkah-langkah berikut:

1. Copy script/kode berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'><tbody><tr>
    <td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="bukarahasiablog">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
    </b:if>

Ganti bukarahasiablog dengan nama akun twittermu.

2. Buka halaman edit HTML/Edit Template:

Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates" 

2. Jika ingin memasang di bawah judul posting:

Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat di BAWAHnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> buka rahasia blogspot lalu letakkan script/kode tepat di ATASnya.

3. Jika ingin memasang di bawah posting/artikel:

Cari (Ctrl + F) <data:post.body/> lalu letakkan script/kode tepat di BAWAHnya.

4. Save template 'n lihat hasilnya.

5. Done.

Good luck n enjoy your blog's share buttons (Facebook Like, Tweet Button, & Google +1 Button).

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Share buttons adalah tombol-tombol yg dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yg mereka sukai ke social media, baik Facebook, Twitter, Google+, dll. Banyak sobat Buka Rahasia Blogspot yg menanyakan tentang share buttons yg saya gunakan di bawah judul posting. Saya menggunakan 3 buttons milik 3 social media yg disusun sedemikian rupa menjadi satu bagian widget. Dulu saya pernah share cara pemasangan Facebook Like Button & Google +1 Button, namun Tweet Button belum. Tetapi karena banyak sobat yg meminta 3 button (tombol) share itu sekaligus menjadi satu widget, oke deh Tweet Button saya lompati dan akan langsung share cara membuat & memasang ketiganya.

Masih seperti dua cara sebelumnya, widget ini hanya akan ditampilkan di bagian posting ketika halaman posting dibuka secara utuh serta tidak tampil pada jenis halaman lain (homepage, label, search, archive). Agar susunan, jarak serta tampilan tidak kacau, saya membuat ukuran-ukuran tersendiri pada masing-masing button lalu menyusunnya dengan tabel. So, jangan mengubah nilai apapun di dalam masing-masing button.

Sebelum memasang share buttons, perhatikan beberapa hal berikut:

a.  Jika sudah memasang widget Facebook like atau Google +1, khususnya yg saya share di blog ini, hapus atau ambil terlebih dahulu kodenya. Lihat 2 posting terdahulu untuk mengetahui mana yg harus dihapus.

b. Jika sudah pernah memasang Google+ 1 Button, tidak perlu lagi memasang script plugin API Google +1 seperti berikut:

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

c. Jika belum, pasang script plugin API Google +1 tersebut di atas </head> pada edit HTML/Edit Template.

Cara Memasang Share Buttons (Facebook Like, Tweet, & Google +1)

Setelah memastikan beberapa hal di atas, pasang widget share buttons dengan langkah-langkah berikut:

1. Copy script/kode berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'><tbody><tr>
    <td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="bukarahasiablog">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
    </b:if>

Ganti bukarahasiablog dengan nama akun twittermu.

2. Buka halaman edit HTML/Edit Template:

Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates" 

2. Jika ingin memasang di bawah judul posting:

Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat di BAWAHnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> buka rahasia blogspot lalu letakkan script/kode tepat di ATASnya.

3. Jika ingin memasang di bawah posting/artikel:

Cari (Ctrl + F) <data:post.body/> lalu letakkan script/kode tepat di BAWAHnya.

4. Save template 'n lihat hasilnya.

5. Done.

Good luck n enjoy your blog's share buttons (Facebook Like, Tweet Button, & Google +1 Button).

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Twitter Follow Button yg dirilis secara official oleh twitter kini semakin memiliki fitur yg canggih. Meskipun hanya ditampilkan dalam bentuk button dan link sederhana, sebenarnya ada beberapa hal yg dapat dilakukan hanya dengan sekali klik, tidak seperti twitter follow widget yg sebelumnya. "Dengan klik button, pengunjung dapat langsung melakukan follow tanpa harus masuk ke twitter." Link yg berada di sebelah button juga berfungsi untuk mengetahui profil serta update terbaru (tweet) nya. Jadi, memasang twitter follow button di blog kini dapat memberikan efek jauh besar bagi perkembangan dan popularitas blog serta pemilik blog.

Cara Membuat Twitter Follow Button

1. Masuk ke halaman follow button

2. Perhatikan gambar berikut:

A. Kolom untuk mengisi nama account twitter. Isikan akun twitter blog atau akun twitter pribadi yg ingin dibuatkan button follow-nya.

B. Background. Sesuaikan dengan background blog dimana button akan dipasang. Jika terang, pilih "Light. Sebaliknya, jika gelap pilih "Dark".

C. Fitur untuk menampilkan / tidak menampilkan jumlah twitter followers. Pilih "No" jika tidak ingin menampilkan.

D. Bahasa. Klik menu dropdown pilih bahasa yg diinginkan, tersedia fitur Bahasa Indonesia.

E. Preview tampilan button.

F. Script/Kode twitter follow button. Setelah selesai melakukan setting, copy kode/scriptnya.

from http://buka-rahasia.blogspot.com

Cara Memasang Twitter Follow Button di Blog/Web

Button dapat dipasang di bagian manapun dari blog/web di dalam tag <body> seperti ketika anda memasang menampilkan link.

Untuk blog berplatform blogger:

a. Button dapat dipasang di dalam gadget (sebagai widget).

1. Buka dashboard > design/layout > klik "add a gadget/tambahkan gadget > Pilih HTML/Javascript > Masukkan kode ke dalam kolom > save.

2. Drag/geser gadget di halaman design/layout ke posisi yg diinginkan. Save lagi.

b. Opsi lain untuk memasang widget follow button adalah di bagian posting, yaitu di bawah judul posting atau di bawah posting/artikel:

1. Perhatikan script berikut:

<div style='float:right;margin-right:5px;'>Kode Twtter Button</div>

Copy script di atas. Ganti Kode Twtter Button dengan kode button yg telah dicopy  tadi. 

1. Masuk ke Edit HTML/Edit Template, centang "Expand Widget templates".

2. Untuk memasang di atas posting, cari <div class="post-header-line-1">. Jika tidak ketemu cari <data:post.body/>. Letakkan kode tepat di bawah <div class="post-header-line-1"> atau di atas <data:post.body/>.

3. Bagi yg ingin memasang button di bawah posting/artikel, cari <data:post.body/>, letakkan kode tepat di bawahnya.

4. Save & done.

Hasilnya akan seperti ini [sekalian follow ya :-) ]

Follow @bukarahasiablog

Happy blogging.
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Twitter Follow Button yg dirilis secara official oleh twitter kini semakin memiliki fitur yg canggih. Meskipun hanya ditampilkan dalam bentuk button dan link sederhana, sebenarnya ada beberapa hal yg dapat dilakukan hanya dengan sekali klik, tidak seperti twitter follow widget yg sebelumnya. "Dengan klik button, pengunjung dapat langsung melakukan follow tanpa harus masuk ke twitter." Link yg berada di sebelah button juga berfungsi untuk mengetahui profil serta update terbaru (tweet) nya. Jadi, memasang twitter follow button di blog kini dapat memberikan efek jauh besar bagi perkembangan dan popularitas blog serta pemilik blog.

Cara Membuat Twitter Follow Button

1. Masuk ke halaman follow button

2. Perhatikan gambar berikut:

A. Kolom untuk mengisi nama account twitter. Isikan akun twitter blog atau akun twitter pribadi yg ingin dibuatkan button follow-nya.

B. Background. Sesuaikan dengan background blog dimana button akan dipasang. Jika terang, pilih "Light. Sebaliknya, jika gelap pilih "Dark".

C. Fitur untuk menampilkan / tidak menampilkan jumlah twitter followers. Pilih "No" jika tidak ingin menampilkan.

D. Bahasa. Klik menu dropdown pilih bahasa yg diinginkan, tersedia fitur Bahasa Indonesia.

E. Preview tampilan button.

F. Script/Kode twitter follow button. Setelah selesai melakukan setting, copy kode/scriptnya.

from http://buka-rahasia.blogspot.com

Cara Memasang Twitter Follow Button di Blog/Web

Button dapat dipasang di bagian manapun dari blog/web di dalam tag <body> seperti ketika anda memasang menampilkan link.

Untuk blog berplatform blogger:

a. Button dapat dipasang di dalam gadget (sebagai widget).

1. Buka dashboard > design/layout > klik "add a gadget/tambahkan gadget > Pilih HTML/Javascript > Masukkan kode ke dalam kolom > save.

2. Drag/geser gadget di halaman design/layout ke posisi yg diinginkan. Save lagi.

b. Opsi lain untuk memasang widget follow button adalah di bagian posting, yaitu di bawah judul posting atau di bawah posting/artikel:

1. Perhatikan script berikut:

<div style='float:right;margin-right:5px;'>Kode Twtter Button</div>

Copy script di atas. Ganti Kode Twtter Button dengan kode button yg telah dicopy  tadi. 

1. Masuk ke Edit HTML/Edit Template, centang "Expand Widget templates".

2. Untuk memasang di atas posting, cari <div class="post-header-line-1">. Jika tidak ketemu cari <data:post.body/>. Letakkan kode tepat di bawah <div class="post-header-line-1"> atau di atas <data:post.body/>.

3. Bagi yg ingin memasang button di bawah posting/artikel, cari <data:post.body/>, letakkan kode tepat di bawahnya.

4. Save & done.

Hasilnya akan seperti ini [sekalian follow ya :-) ]

Follow @bukarahasiablog

Happy blogging.
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Google search image frame? Ya, tampilan gambar yg terindeks Google biasanya ditampilkan di lapisan/bagian atas sebuah halaman blog/web. Gambar yg ditampilkan dibalut dalam tampilan kerangka (frame) Google yg berisi beberapa informasi mengenai gambar dan sama sekali tidak berkaitan dengan isi halaman blog/web yg memuat gambar tersebut. Bisa jadi hal ini cukup mengganggu karena blog/web dimana gambar tersebut dimuat sebenarnya bukan yg dioptimasikan. Tentunya ini agak merugikan karena traffic yg datang tidak seperti traffic yg biasanya. Gambar-gambar yg dimunculkan ini biasanya merupakan ilustrasi dari sebuah artikel atau yg tidak ingin dimunculkan sebagai konten utama. Bagi blog-blog yg demikian, tentunya gambar yg ditampilkan dalam iframe google sama sekali tidak seperti yg diharapkan, terutama dalam kaitannya dengan konten.

Kita dapat menggunakan fungsi script (javascript) sbg respon atas kasus ini. Cara tersebut sebenarnya sejak dulu sudah begitu lazim digunakan oleh para webmaster untuk mengoptimasikan traffic dan memaksimalkan conversion rate. Sobat bisa mendapatlan scriptnya dengan mudah karena script ini termasuk salah satu script paling umum digunakan oleh para webmasters untuk mengoptimalkan website. Salah satu hal yg membuat kasus foto framing terjadi sebenarnya adalah blog/website itu sendiri juga mendukung struktur frame. Demikian halnya di kebanyakan blog seperti Blogger, Wordpress dll. 

Atas permintaan sobat pian uhuy di komentar posting widget Google+, saya share script tersebut. Pertama, kegunaan script ini adalah untuk memanggil fungsi redirect. Tampilan Google Frame, yg memuat gambar di bagian depan halaman blog/web setelah pengunjung meng-klik thumbnail di hasil pencarian, secara otomatis akan di-redirect menuju ke halaman asli yg memuat gambar tersebut. Sehingga frame tersebut akan dipecah (broken) dan halaman yg muncul adalah halaman yg sesungguhnya. WordPress (yg kaya akan plugin itu) telah memiliki plugin yg disebut Frame Breaker, sama seperti nama javascript yg memiliki fungsi sama persis.

Bagaimana dengan script untuk menghapus Google Search Image Frame?

Sangat sederhana sekali. Seperti biasanya fungsi javascript redirect, kita menggunakan dua bagian perintah, yaitu: if dan replace. Kemudian tampilkan dua bagian sumber awal dan tujuan, dalam hal ini: top (bagian atas/awal frame) dan lokasi yg sesungguhnya (self). Hmm,,,, yah sebagai intro saja, siapa tahu nanti sobat tertarik untuk belajar javascript. 

Enough for the theory!! :P

Bagaimana cara memasang script Frame Breaker di Blogger/Blogspot?

1. Buka Dashboard > Design > Edit HTML.

2. Cari (Ctrl + F) </head>

3. Letakkan script berikut tepat di ATAS nya:

<script language='JavaScript' type='text/javascript'> if (top.location != self.location) top.location.replace(self.location); </script>

4. Save template.

5. Done.

Jika ingin melihat hasilnya, cek dengan salah satu gambar yg termuat di posting blog. Kira-kira gambar dengan keyword apa yg sering muncul di dalam Google Image Frame. Cari dengan keyword tersebut di image search Google, kemudian klik. Silahkan buktikan hasil dari salah satu cara hilangkan Google search image frame tersebut.

Yup, itulah sedikit mengenai bagaimana cara kita mengakali agar traffic yg datang di blog benar-benar berkualitas dan bukan sekedar hasil Google Image Frame saja.

Have Fun!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Google search image frame? Ya, tampilan gambar yg terindeks Google biasanya ditampilkan di lapisan/bagian atas sebuah halaman blog/web. Gambar yg ditampilkan dibalut dalam tampilan kerangka (frame) Google yg berisi beberapa informasi mengenai gambar dan sama sekali tidak berkaitan dengan isi halaman blog/web yg memuat gambar tersebut. Bisa jadi hal ini cukup mengganggu karena blog/web dimana gambar tersebut dimuat sebenarnya bukan yg dioptimasikan. Tentunya ini agak merugikan karena traffic yg datang tidak seperti traffic yg biasanya. Gambar-gambar yg dimunculkan ini biasanya merupakan ilustrasi dari sebuah artikel atau yg tidak ingin dimunculkan sebagai konten utama. Bagi blog-blog yg demikian, tentunya gambar yg ditampilkan dalam iframe google sama sekali tidak seperti yg diharapkan, terutama dalam kaitannya dengan konten.

Kita dapat menggunakan fungsi script (javascript) sbg respon atas kasus ini. Cara tersebut sebenarnya sejak dulu sudah begitu lazim digunakan oleh para webmaster untuk mengoptimasikan traffic dan memaksimalkan conversion rate. Sobat bisa mendapatlan scriptnya dengan mudah karena script ini termasuk salah satu script paling umum digunakan oleh para webmasters untuk mengoptimalkan website. Salah satu hal yg membuat kasus foto framing terjadi sebenarnya adalah blog/website itu sendiri juga mendukung struktur frame. Demikian halnya di kebanyakan blog seperti Blogger, Wordpress dll. 

Atas permintaan sobat pian uhuy di komentar posting widget Google+, saya share script tersebut. Pertama, kegunaan script ini adalah untuk memanggil fungsi redirect. Tampilan Google Frame, yg memuat gambar di bagian depan halaman blog/web setelah pengunjung meng-klik thumbnail di hasil pencarian, secara otomatis akan di-redirect menuju ke halaman asli yg memuat gambar tersebut. Sehingga frame tersebut akan dipecah (broken) dan halaman yg muncul adalah halaman yg sesungguhnya. WordPress (yg kaya akan plugin itu) telah memiliki plugin yg disebut Frame Breaker, sama seperti nama javascript yg memiliki fungsi sama persis.

Bagaimana dengan script untuk menghapus Google Search Image Frame?

Sangat sederhana sekali. Seperti biasanya fungsi javascript redirect, kita menggunakan dua bagian perintah, yaitu: if dan replace. Kemudian tampilkan dua bagian sumber awal dan tujuan, dalam hal ini: top (bagian atas/awal frame) dan lokasi yg sesungguhnya (self). Hmm,,,, yah sebagai intro saja, siapa tahu nanti sobat tertarik untuk belajar javascript. 

Enough for the theory!! :P

Bagaimana cara memasang script Frame Breaker di Blogger/Blogspot?

1. Buka Dashboard > Design > Edit HTML.

2. Cari (Ctrl + F) </head>

3. Letakkan script berikut tepat di ATAS nya:

<script language='JavaScript' type='text/javascript'> if (top.location != self.location) top.location.replace(self.location); </script>

4. Save template.

5. Done.

Jika ingin melihat hasilnya, cek dengan salah satu gambar yg termuat di posting blog. Kira-kira gambar dengan keyword apa yg sering muncul di dalam Google Image Frame. Cari dengan keyword tersebut di image search Google, kemudian klik. Silahkan buktikan hasil dari salah satu cara hilangkan Google search image frame tersebut.

Yup, itulah sedikit mengenai bagaimana cara kita mengakali agar traffic yg datang di blog benar-benar berkualitas dan bukan sekedar hasil Google Image Frame saja.

Have Fun!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya

Widget Recent Posts atau Posting terbaru merupakan widget penting karena berfungsi sebagai penunjang navigasi blog. Dengan adanya daftar posting terbaru, pengunjung yg masuk tidak dari halaman utama (homepage) dapat langsung mengetahui beberapa posting terbaru dari sebuah blog. Selain itu, widget recent posts dapat menjadi sebuah tawaran bagi pengunjung blog untuk mengetahui isi posting-posting lain dari blog tersebut.

Widget recent post yg saya share kali ini memiliki fitur dan tampilan yg cukup menarik. Kombinasi script recent posts, auto scroll / spy list menghasilkan widget recent posts Blogger yg memiliki efek hebat dan dapat mengundang ketertarikan pengunjung. Alhasil, tampilan/desain blog pun dapat bertambah nilainya dengan ditambahnya widget recent posts ini. Sudah lama saya menggunakan widget ini dan perannya dalam menambah jumlah pageview blog pun tidak diragukan lagi.

Cara Membuat Blogger Auto Scrolling Recent Posts

Ikuti langkah-langkah berikut dan pastikan tidak ada bagian yg terlewatkan:
1. Copy Script berikut:

Klik >>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

    <script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Reply(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://buka-rahasia.blogspot.com/";
limitspy=5
intervalspy=6000
</script>

<div id="spylist">
    <script type='text/javascript'>
//<![CDATA[
 /*
 * Script dikombinasikan dari bloggerstricks.com
 * spy effect dari jqueryfordesigners.com
 * Oleh Abu Farhan (www.abu-farhan.com)
 * Modifikasi oleh buka-rahasia.blogspot.com
 */
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>

Note: Host sendiri gambar http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg dan ganti dengan url gambar yg telah sobat upload.

2. Ganti http://buka-rahasia.blogspot.com/ dengan url blog sobat. Pastikan ada tanda slash ( / ) di belakang url blog.
3. Buka dashboard > Design/Layout > Add a Gadget / Tambahkan Gadget.
4. Pilih HTML/Javascript.
5. Paste semua kode ke dalam kotak HTML/Javascript.
6. Save.

Kostumisasi Tampilan Widget Recent Post Blogger

Untuk menyesuaikan tampilan recent post dengan template blog, perhatikan dan ganti beberapa poin dasar berikut sebelum memasukkan script:

• boxwidth = 300 adalah lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog.
• text = "Reply(s)" adalah teks di belakang jumlah komentar, ganti Reply(s) sesuai keinginan, misalnya: komentar, comment(s), dll.
• numposts = 10; adalah jumlah posting terbaru yg akan di-crawl, ganti nilainya sesuai keinginan.
• limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai keinginan.
• intervalspy=6000 adalah kecepatan scroll / spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.

Done!

Script combined from bloggertricks.com, spy effect by jqueryfordesigners.com, by Mas Abu Farhan, modified and enhanced by buka-rahasia.blogspot.com
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Baca Selengkapnya