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://buka-rahasia.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://buka-rahasia.blogspot.com'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz0yIYXJuXKEZkYNzeORzEFbyKkl3FToz6Ro6Xdw_YxonH02ndQ9kfbCqPTGf7T_M4FmSAo7QOe0yHjUoNOV6GytyNBoGrYJxFLkhq_9LV7yF225EAVVB2Lx9Ar8oxjzKGocxE8xoGZq9S/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://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

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://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

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