Tambahkan Widget AddThis Sharing Buttons Terbaru di Blogmu!

Sobat mungkin sudah tahu dan menggunakan AddThis Sharing Buttons yang cukup terkenal ini. Google Pagerank-nya saja 10, dan Alexa Ranknya sekitar 158 (apa hubungannya ya?). AddThis Social Sharing buttons (begitu nama lengkapnya :)) adalah widget penting bagi para blogger dan webmaster. Alat ini tidak saja menyediakan berbagai macam sharing buttons milik berbagai macam social media, tapi juga dilengkapi dengan fitur analytics untuk memonitor aktivitas sharing. Tentu ini sangat berguna bagi blogger/publisher untuk mengetahui tingkat popularitas kontennya di social media, untuk menganalisis dan mengukur trend berkaitan dengan konten dan topik yang digeluti, dan, tentu saja, untuk mengukur seberapa kuat social media membantu upaya peningkatan traffic.

Nah, dalam prosesnya. AddThis telah berkembang dengan sangat pesat, dalam satu tahun belakangan ini saja jumlah usernya mencapai dua kali lipat. Dan yang lebih hebat lagi, baru-baru ini AddThis sharing tools telah berevolusi dalam bentuk yang lebih kuat, diantaranya adalah perubahan script yang digunakan, kemudahan dalam menggunakan, layout lebih elegan, dan memiliki lebih banyak fitur. Mari kita lihat!

Apa yang Baru dari AddThis?

Ceritanya, beberapa waktu yang lalu saya jalan-jalan ke AddThis karena sudah lama tidak menengok  aktivitas sharing website saya di situs layanan sharing yang sudah cukup "senior" itu. Betapa kagetnya saya (koprol sambil bilang "Waowww!!") karena ketika melihat halaman widget ada beberapa perubahan besar  yang cukup jelas dari widget terdahulu. Yang paling menarik saya adalah desain layout yang tampak fresh dan menyenangkan. Sharing buttons tampak lebih baik dan lebih memiliki presisi. Email form pun kini memiliki tampilan baru. Dan satu lagi, menu dropdown yang muncul kini menggunakan HTML5 dan JQuery dan bersifat asynchronous. Artinya, loading yang dibutuhkan sangat cepat, jauh lebih cepat dari widget sharing buttons lama.

Oya, satu lagi, kini user lebih mudah melakukan sharing karena buttons tidak memunculkan halaman baru, semua bisa dilakukan dari halaman yang sama dan merupakan bagian dari AddThis buttons. Tentu syaratnya user harus dalam kondisi login AddThis terlebih dahulu. Sebagai tambahan lagi, sharing ke Pinterest kini juga jauh lebih mudah karena sekali button Pinterest ditekan, akan muncul lightbox gallery dimana user dapat memilih gambar mana yang hendak dibagi.

Pokoknya, amazing, splendid, incredible lah! (Seperti kata mas Tukul).

Cara Memasang Widget AddThis Sharing Buttons di Blogger

Memasang tool ini sangat mudah dan cepat. Sobat tinggal melakukan setting pada halaman setting AddThis Button dan tinggal memasangnya pada widget atau template. Untuk yang kedua, caranya tidak beda dengan cara memasang widget sharing button yang pernah saya share dahulu. Here we go:

1. Silahkan langsung masuk ke halaman setting AddThis Sharing Buttons (oh ya, sebelumnya saya sarankan untuk mendaftar ke AddThis terlebih dahulu. Dengan menjadi user terdaftar, anda dapat mengatur dan mengakses informasi aktivitas sharing yang sangat bermanfaat sebagai alat analisis).

2. Ada beberapa opsi di bagian pojok kiri untuk menyesuaikan dengan platform blog/website yang digunakan. Saran saya, tetap pilih "A Website" karena kita membutuhkan kode ini jika ingin memasang melalui edit HTML template, kecuali jika sobat ingin menggunakannya sebagai widget/gadget yang tinggal dipasang saja.

3. Pilih layot widget sharing yang diinginkan.

4. Ambil/copy code dan simpan baik-baik.

5. Jika ingin memasang di bagian "gadget", cukup pilih tipe HTML javascript, paste kode, dan simpan. 

6. Jika ingin memasang di bagian atas atau bawah posting, perhatikan clue berikut:
a. Masuk ke:

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

b. 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/> lalu letakkan script/kode tepat di ATASnya.

c. Jika ingin memasang di bawah posting/artikel:

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

d. Save template 'n lihat hasilnya.

Yup, well done. Have a nice blogging and sharing!

© 2012 - 'til drop. buka-rahasia.blogspot.com. All rights reserved.

Membuat Kotak Permalink di Bawah Posting Blog

Halo sobat! Setelah agak lama tidak share tips-trik blogger di blog ini karena persentase fokus lebih besar untuk mengembangkan tautweb.com, di posting ini saya membagi lagi satu widget/elemen fungsional untuk posting blog.

Sudah pernah melihat kotak permalink, bukan? Salah satu elemen blog yang berfungsi untuk memberikan kemudahan bagi blog/web lain membuat tautan/linkback ke salah satu halaman posting blog; seperti yang saya sediakan di bawah posting-posting blog ini. Adanya kotak atau kolom permalink sangat membantu sobat dalam meningkatkan visibilitas dan traffic blog karena apabila ada blogger lain menyukai dan menganggap posting atau artikel blog sobat penting, maka dia dapat dengan mudah menemukan tag permalink di bawah artikel, meng-copy-nya, dan memasang/membaginya di blog; sehingga dia tidak perlu repot-repot membuat tag permalink sendiri. Jika sobat belum memiliki dan ingin membuat, silahkan ikuti tutorial menambahkan kotak permalink di bawah posting berikut. 

Konsep dan Kode Kotak Permalink

Konsep yang saya gunakan adalah kotak permalink otomatis dengan memanfaatkan dua tag XML Blogger, yaitu <data:post.url/> untuk memanggil url posting yang sedang ditampilkan, dan <data:post.title/> untuk memanggil judul posting yang sedang ditampilkan, very easy! Permalink juga dilengkapi dengan tag link </a>. Kemudian permalink tersebut diletakkan pada textarea dengan memanfaatkan beberapa fungsi javascript sederhana. Dengan cara ini, semua isi kotak permalink tampil secara otomatis tanpa harus membuat isi secara manual dan dapat langsung digunakan.

Berikut kode-nya:

<div style='line-height:1.4em;padding: 1px; margin: 2px;background-color: #ffffff;font-size: 11px;text-align: justify'>
<span>Ganti teks ini dengan informasi mengenai permalink atau apapun di sini.</span><br />
<textarea cols='60' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea><br/>
</div><br />

Kostumisasi CSS:

Secara default saya menggunakan:

- background-color: #ffffff (putih), ganti #ffffff dengan kode warna lain sesuai dengan warna background posting blog.

- padding: 1px dan margin: 2px, ganti 1px dan 2px dengan nilai lain untuk menambah atau mengurangi padding dan margin.

- font-size: 11px, ganti  dengan nilai lain untuk menambah/mengurangi ukuran huruf (pada text di atas kotak permalink).

Cara Memasang Kotak Permalink di Bawah Posting Blog

1. Copy kode di atas setelah melakukan kostumisasi, jika belum tahu apa yang harus dikostumisasi agar kotak permalink sesuai dengan desain blog, copy dulu saja.

2. Buka HTML editor blog, Dashboard > Template > Edit HTML.

3. Jangan lupa centang "Expand Widgets Template"

4. Cari <data:post.body>. Bagi yang menggunakan readmore otomatis, akan ada lebih dari satu tag tersebut. Pada kebanyakan template, tag yang ditampilkan secara penuh adalah tag kedua. Jika tidak yakin, pilih dan coba dulu yang pertama, jika tidak bisa pilih tag sama yang kedua.

5. Letakkan kode kotak permalink tepat di bawah <data:post.body>.

6. Save template.

Jika dipasang dengan benar, maka hasilnya akan tampak seperti ini:

Ganti teks ini dengan informasi mengenai permalink atau apapun di sini.
<a href="http://bukan-rahasiia.blogspot.com/2012/06/membuat-kotak-permalink-posting-blog.html">Membuat Kotak Permalink di Bawah Posting Blog</a>

7. Cek hasilnya pada salah satu halaman posting dan lihat apakah dibutuhkan kostumisasi di bagian CSS seperti di atas.

Okay, itu dia langkah-langkah memasang kotak permalink di bawah posting Blogger. Semoga dulu sobat yang pernah menanyakan mengenai kotak permalink yang saya gunakan terpuaskan. And, have a nice blogging, guys!
© buka-rahasia.blogspot.com

Cara Memasang Fitur Blogger Star Rating di Posting Blog

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

Cara Buat/Pasang Fitur Emoticon/Smiley di Comment Blogger

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://bukan-rahasiia.blogspot.com'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_iG9ecCn4PxKWR9f49YZn5z382UdAwnoCqxSB2B2rX48Tqf95S7pO_XQeMscpmSaFWyYSIq0ZCJaZfIHNXLIPsvNyiwUxvL3Iu_-YN8sbwA0nntszwd1Jl8ylVo9LSb3Ydrpj3ATQmwB_/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

Cara Buat/Pasang Share Buttons di Posting Blogger (Like, Tweet, +1)

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

Cara Membuat & Memasang Twitter Follow Button (Official)

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://bukan-rahasiia.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

Cara Hapus Google Search Image Frame (Frame Breaker)

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

Cara Membuat Recent Posts Blogger (Auto Scroll & Thumbnails)

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://bukan-rahasiia.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://bukan-rahasiia.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

Cara Membuat Screensaver (Energy Saving Mode) Blog/Website

Energy saving mode/screensaver di blog/web adalah kondisi standby dimana seluruh process dihentikan sementara. Proses-proses yang berjalan misalnya adalah gambar grafik bergerak (misalnya: .gif), flash video, auto scrolling widget, dan masih banyak lagi. Dengan adanya plugin screensaver tersebut, proses-proses dalam suatu halaman web dihentikan (paused) dan muncul sebuah tampilan baru sederhana di atas halaman. Jadi, energy dan proses yang digunakan oleh komputer dapat diminimalisir. Itulah mengapa, seringkali aplikasi ini dikaitkan dengan gerakan hemat energy dan save green environment. Aplikasi screen saver akan dihentikan kinerjanya oleh browser (dikembalikan ke tampilan semula) ketika pengunjung/visitor menggerakkan mouse (mouse over)

Aplikasi sejenis yang paling mudah digunakan adalah aplikasi screensaver (energy saving mode) buatan onlineleaf.com. Sebelumnya saya pernah mereview kelemahan OnlineLeaf screensaver ini, yaitu waktu browser melakukan request ke server Online Leaf sangat lama karena menunggu respon, sehingga  ikut memperlambat waktu loading blog/web. Namun, saat ini (sampai saat artikel ini ditulis), load-time sudah dalam keadaan normal. Salah satu resiko menggunakan eksternal javascript adalah kasus semacam itu. Jadi, bagi anda yang ingin memasang aplikasi screensaver ini, pertimbangkan matang-matang sebelum menggunakannya.

Cara memasang energy saving mode (screensaver) pada blog (blogger)/web:

1. Masuk ke edit HTML/Edit Template, cari (CTRL + F) tag </head>.

2. Copy dan paste script screensaver berikut tepat di atas/sebelum </head>.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

Script di atas menggunakan Jquery JS library, jika web anda menggunakan javascript library yang lain, gunakan script berikut untuk menghindari crash/conflict dengan jquery dan gagalnya aplikasi:

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
<script>jQuery.noConflict();</script>

KOSTUMISASI SCREENSAVER BLOG
Kostumisasi waktu screensaver sebelum standby mode:
Trik ini sangat sering digunakan pada url javascript untuk meng-override waktu default. Untuk memberikan waktu/jeda sebelum aplikasi screensaver muncul dan bekerja, tambahkan ?time=x di belakang url script. X adalah jumlah detik.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=80' type='text/javascript'/>

Dengan script seperti contoh di atas, energy saving mode akan bekerja setelah 80 detik

Kostumisasi bahasa dalam tampilan screensaver:

Jika ingin mengganti kata-kata dalam tampilan screesaver yang secara default menggunakan bahasa inggris, tambahkan ?lang=kodebahasa. Berikut support bahasa yang dapat digunakan dan kodenya:

ak - Akan	gr - Greek	sl - Slovenian
da - Danish	id - Indonesian	se - Swedish
de - German	jp - Japanese	sk - Slovak
en - English	it - Italian	sw - Swahili
es - Spanish	nl - Dutch	tr - Turkish
fr - French	pl - Polish	vi - Vietnamese
fi - Filipino	pt - Portuguese	hr - Croatian
Table Cell	bpt - Brazilian Portuguese	ro - Romanian

Jika ingin set dalam Bahasa Indonesia, maka tambahkan ?lang=id seperti contoh berikut:

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?lang=id' type='text/javascript'/>

3. Save template.

Bagi pengguna blog WordPress, cara memasang aplikasi ini sangat mudah, cukup download Plugin Screensaver (Energy Saving Mode) saja.

Happy Blogging, guys!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat Menu Pulldown Plus Tombol/Button

Pull down menu seringkali juga disebut sebagai dropdown menu atau jump menu. Disebut pull down karena list menu akan muncul setelah bagian atas menu diklik/ditekan, dan disebut pula dropdown menu karena setelah di-klik sederet list menu akan muncul secara berurutan ke bawah. 

Pull down menu/drop down menu sangat bermanfaat untuk menampilkan list pilihan yang sangat panjang karena dapat memperpendek panjang halaman blog/web dan akan membuat blog/web tampak lebih elegan dan professional. Anda dapat menggunakan menu pull down ini untuk menyusun link-link blogrol, label, arsip, kategori dan lain sebagainya.

Dalam kesempatan ini saya akan sedikit mengulas dan share tentang cara membuat drop down/pull down menu plus button yang berbasis HTML form dan perintah fungsi javascript itu.

Secara mendasar, pulldown menu merupakan rangkaian opsi tag option di dalam selection yang semuanya dirangkum menjadi sebuah form:

<form>
<select>
<option></option>
<option></option>
<option></option>
</select>
</form>

Dan akan tampil seperti ini:

Untuk memberikan isi atau list menu, tambahkan value dan anchor text pada tag option, identitas fungsi (name) pada selection, dan fungsi form:

<form name="lompat">
<select name="menu">
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>
</form>

Nama List 1 Nama List 2 Nama List 3

Akhirnya, tambahkan perintah javascript input button dan link option ketika di klik pada urutan sesuai identitas (name):

<input type="button" onClick="location=document.lompat.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

Ups, karena apa yang tampak di bagian form adalah nama list yang pertama dan kurang informatif, tambahkan option dengan value kosong dan text sebagai informasi bagi pengunjung tentang isi menu tersebut:

<option> -- Pilih Tutorial -- </option>

Berikut script lengkapnya:

<form name="lompat">
<select name="menu">
<option"> -- Pilih Tutorial -- </option>
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>

<input type="button" onClick="location=document.lompat.menu.options[document.lompat.menu.selectedIndex].value;" value="GO">

</form>

 Contoh implementasinya (sekalian chek the link):

-- Pilih Tutorial -- General Blogging Blog Writing HTML-CSS Tricks Blog Design

Kostumisasi:

- Ganti -- Pilih Tutorial -- dengan text yang ingin dimunculkan pada baris paling atas menu pull down.

- Ganti GO dengan kata/perintah lain yang lebih disukai.

Di blog blogger, anda dapat dengan mudah memasangnya sebagai widget/gadget.

Dashboard > Design/Rancangan > Add a Gadget/ Tambah Gadget > HTML/Javascript

That's it. Have fun!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat/Memasang Tombol Google +1 di Blogger/Blogspot

Seperti yang telah ramai diberitakan di dunia internet, Google telah membuat satu fitur baru:" Official Google +1 Button" yang merupakan tool bagi pengunjung blog/web serta search engine untuk memberikan "voting" bagi sebuah halaman blog/web yang menurutnya memiliki nilai (value) manfaat yang besar. Menurut Google, +1 Button juga memberikan referensi dan rekomendasi bagi Google dalam menentukan peringkat suatu halaman web di search engine (SERPs). Oleh karena itu, memasang tombol +1 Google bisa menjadi salah satu alternatif bagi pemilik blog/web untuk meningkatkan SEO blog/web tersebut. Meskipun saat ini fitur Google +1 baru muncul di domain google.com, namun memasangnya mulai sekarang tidak ada salahnya, karena di domain tersebut pun semua website di berbagai belahan dunia juga diperhitungkan, apalagi jika nanti fitur ini juga muncul di domain google.co.id, pasti lebih bermanfaat dan berkali lipat efeknya terhadap SEO dan SERPs.

Cara memasang Tombol +1 Google di Blogger/Blogspot:

Untuk template blogger yang default atau secara official merupakan bawaan blogger, fitur ini dapat dibuat dengan mudah melalui halaman page elements/edit gadget, karena fitur ini sudah secara resmi ditambahkan ke Blogger. Perhatikan gambar berikut:

Tombol +1 Google dapat dengan mudah ditampilkan dengan mencentang "Show Share Button". Masuk ke dashboard > design/rancangan > kemudian klik "edit post " di bagian badan template dan akan tampil pop up window seperti gambar di atas.

Namun, bagi template yang sudah dimodifikasi dan bukan default template, fitur "share button" biasanya telah dihapus. Oleh karena itu diperlukan editing template HTML untuk menambahkan fitur/tombol +1 Google tersebut.

Secara official, ada 3 jenis button atau tombol Google +1:

standard

medium

small

1. Masuk ke dashboard > design/rancangan > edit HTML >"expand widget templates"

2. Copy kode berikut dan paste tepat SEBELUM </head>

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

3. Copy kode berikut:

<!-- Google +1 Button  -->

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

<div class='post-share-buttons' style='float:right;padding:4px;'>
<g:plusone size="standard"></g:plusone>
</div>

</b:if>

<!-- http://bukan-rahasiia.blogspot.com -->

Kostumisasi Tombol Google +1:

a. Ganti standard dengan medium atau small jika ingin mengubah ukuran tampilan button/tombol seperti contoh di atas.

b. Ganti right dengan left jika ingin button/tombol berada di sisi kiri.

c. Kode berwarna biru akan menampilkan tombol hanya ketika halaman posting dibuka. Jika anda menggunakan auto readmore, maka tombol tersebut tidak akan muncul di post summary, sehingga tampilan post summary tidak akan rusak.  Jika anda tidak menggunakan auto readmore atau menggunakan readmore tapi tetap ingin menampilkannya di post summary, hapus kode biru tersebut.

Cara Memasang Google +1 Button:

(Update: Ini sekaligus untuk menjawab beberapa permasalahan yang disampaikan dalam beberapa komentar di bawah):

>> Karena banyaknya permasalahan ketika memasang tombol Google +1, kode yang harus dicari saya ubah untuk memudahkan pemasangan (meskipun sebenarnya sama saja, hanya untuk memudahkan pencarian)

4. Jika ingin memasang button di bagian bawah posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya. Jika kode tersebut tidak ketemu, letakkan kode di ATAS <data:post.body/>.

5. Jika ingin memasang button di bagian bawah posting, cari  <data:post.body/> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya.

6. Save template.

>> Tombol Google +1 sebenarnya sampai saat ini masih menjadi uji coba Google, baik dalam script-nya (beta) maupun dalam fungsinya sebagai vote dan share hasil pencarian. Seperti yang saya amati, script Google +1 masih tidak stabil; baik dalam fase file downloading-nya maupun ketika diload oleh beberapa browser tertentu. Kadang-kadang tombol tidak muncul atau kita tidak bisa melakukan vote, sehingga, ketika setelah script dipasang tombol tidak muncul, kemungkinan juga disebabkan oleh permasalahan itu.


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

Cara Membuat Spoiler di Blogger/Blogspot

Tips dan trik membuat spoiler ini sebenarnya sudah banyak yang posting dan share. Akan tetapi, tidak ada salahnya juga jika saya ikut share tentang spoiler dan sedikit tentang kegunaannya.

Spoiler dibuat dengan menggunakan javascript button. Sedangkan untuk menyembunyikannnya digunakan properti CSS display, dalam hal ini, "display:none;". Fungsinya ada banyak sekali, diantaranya untuk memperpendek teks atau gambar yang sangat besar/panjang dan memakan space halaman atau untuk menyembunyikan kejutan bagi pengunjung (maka seringkali disebut pula sebagai "peek-a-boo", Indonesianya kurang lebih, "ci-luk-ba!", hehe)

Pada posting blog, spoiler dapat digunakan untuk memperpendek panjang halaman sementara sebelum di-klik oleh pengunjung, sehingga tampak tidak ruwet.

Spoiler juga dapat digunakan untuk menghibur pengunjung juga loh, misalnya seperti ini:

Cara membuat dan memasang spoiler di Blogger/Blogspot:

1. Copy dan gunakan script berikut:

<div id="spoiler" style="display:none">
Konten Yang Disembunyikan
</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Buka/Tutup</button>

Kostumisasi spoiler:

- Ganti Konten Yang Disembunyikan dengan konten (text, url, url gambar, script dll) yang ingin disembunyikan.

- Ganti title Klik untuk melihat/menyembunyikan dengan title sekehendak anda. Title berfungsi memberi informasi ketika mouse di hover di atas tombol spoiler.

- Ganti Buka/Tutup dengan teks sesuai keinginan, teks tersebut akan menjadi perintah yang terlihat pada tombol spoiler.

2. Untuk membuat spoiler di badan posting, buat spoiler melalui menu Edit HTML, letaknya dibagian pojok kanan atas kotak posting, semua editing dilakukan pada menu tersebut, jika tidak maka script tidak akan bekerja.

3. Jika ingin membuatnya di widget, pilih menu "HTML/Javascript".

Enjoy your Peek-A-Boo Spoiler!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com