Dysipi

Tampilkan postingan dengan label Javascript. Tampilkan semua postingan

Cara Memasang Facebook Activity Feed Widget di Blogger

Background Tips

Jika sebuah widget blog bermanfaat besar dalam meningkatkan jumlah pageview sehingga jumlah traffic semakin naik, apakah anda akan menolak memasangnya? :) Tentu tidak. Tidak ada orang yang tidak memiliki akun Facebook (mungkin ada ya, tapi kecil), sehingga seluruh plugin Facebook memiliki fungsi besar dalam menampilkan hal-hal yang personalized di dalam blog. Dengan demikian, user engagement pengguna Facebook akan terasa juga apabila kita menggunakan plugin-pluginnya di web/blog.

Nah, plugin Facebook satu ini juga memiliki andil besar, Facebook Activity Feed Plugin, yang dari namanya bisa dipahami bahwa fungsinya menampilkan seluruh feed aktivitas user Facebook di dalam sebuah website/blog. Yang paling sering kita lakukan adalah "like" atau "recommend". Maka widget ini berfungsi menampilkannya secara personalized (berdasarkan akun anda dan keterkaitan dengan teman-teman anda di Facebook). Jadi menurut saya, plugin ini adalah salah satu plugin Facebook yang wajib nempel di widget sidebar blog anda! Demonya sudah ada di sidebar blog ini dengan title "Hot: Recent Activities On Facebook!".

Jadi, mari kita pasang widget Facebook Activity Feed ini dengan langkah-langkah yang cukup sederhana, karena plugin ini sudah saya buat dalam bentuk pre-made, tinggal pasang saja, tanpa perlu langkah-langkah lain. Namun jika anda ingin menelusuri lebih jauh setting plugin ini, ada 3 tipe konfigurasi: App ID, action types, dan domain. Dari ketiga jenis tersebut, yang paling lengkap sekaligus membatasi penampilan aktivitas user adalah jenis domain. Sehingga ini setting yang saya pilih karena lebih cocok. Jika tertarik mengulik-ngulik lagi, kunjungi FB developers page untuk Activity feed plugin.

Cara Menambahkan Facebook Activity Feed ke dalam Widget Blog

Note: Lewati langkah 1 - 5 jika anda sudah menggunakan plugin Facebook Recommendation Bar yang dulu saya share, Facebook Comments, dan plugin-plugin Facebook lain yang menggunakan format HTML5 dan langsung masuk ke langkah 6.

1. Buka dashboard > template

2. Klik "Edit HTML" (note: jika perlu backup template lebih dulu)

3. Cari (Ctrl+F) tag <body> atau jika anda sudah menggunakan template-template modifikasi atau bawaan Blogger, cari <body (tanpa penutup).

4. Tepat di bawah tag <body> paste/letakkan code berikut:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

5. Save template.

----------------------

6. Buka halaman "Layout"

7. Klik "add a / tambah gadget" sesuai posisi yang diinginkan dan pilih HTML/Javascript.

8. Copy, edit/customize, dan masukkan code berikut ke dalam kolom HTML/Javascript:

<div class="fb-activity" data-site="http://buka-rahasia.blogspot.com" data-width="340" data-height="340" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>

Ubah beberapa perintah dan nilai untuk melakukan kostumisasi:

Ganti http://buka-rahasia.blogspot.com dengan url blog anda.
Saya sudah set default lebar dan tinggi sebesar 340 piksel , jika ingin mengaturnya ubah nilai dalam data-width="340" untuk mengatur lebar widget sesuai blog dan ubah nilai dalam height="340" untuk mengatur tinggi widget.
Ubah #ffffff (putih) untuk mengganti warna border (gunakan generator kode warna). Warna yang sama seperti background akan membuat widget tampak transparan.
Ubah nilai dalam data-header="false" menjadi true untuk menampilkan header activity feed (sama seperti Facebook Like Box).
Terakhir, ubah nilai dalam data-recommendations="true" menjadi false untuk tidak menampilkan rekomendasi. Namun jika aktivitas pada web/blog anda minim, rekomendasi tetap akan ditampilkan.

9. Save widget. Jika perlu susun posisi widget melalui halaman layout pada tempat yang sesuai.

10 Kunjungi blog untuk melihat hasilnya.

Troubleshooting

Mengatur setting dan menambahkan plugin Facebook activity feed ini cukup mudah. Tapi jika ada problem, silahkan tinggalkan komentar. Saya menghindari penggunaan app ID di atas karena fungsinya tidak begitu penting pada widget ini dan supaya tidak kompleks, tidak seperti widget recommendation bar yang mewajibkan ID aplikasi. Jika widget tidak muncul, ada kemungkinan sebenarnya anda belum menambahkan kode Javascript SDK, namun melewati langkah 1 - 5. Bagaimanapun, tetap tinggalkan komentar jika ada problem. :)

Have a nice blogging, writing, and sharing, as usual :)

Tombol Back/Scroll to Top Dengan Efek Fading & Smooth untuk Blogger

Sudah banyak sobat blogger yang menanyakan tentang tombol back to top (tombol kembali ke atas) Blogger yang saya gunakan, karena berbeda dengan tombol yang sebelumnya sudah saya bagi. Jika yang lama hanya menggunakan fungsi hashtag pada url HTML (#top atau #), maka yang saya gunakan menggunakan fungsi javascript dan jquery. Tapi saya sempat agak bingung untuk berbagi karena script yang saya gunakan saya host secara tersendiri di server lain dan telah mengalami modifikasi penuh sehingga hanya cocok untuk template saya. Jika saya memberikannya secara mentah maka sangat sulit untuk dimodifikasi sesuai keinginan sobat. Padahal setiap tampilan blog berbeda, efek yang diinginkan sobat pada tombol scroll to top mungkin juga berbeda, dan yang terpenting adalah memasang tombol dengan mudah tanpa perlu melakukan modifikasi pada javascript seperti yang saya lakukan.

So, pada prosesnya, saya telah menemukan script back/scroll to top yang jauh lebih cocok, buatan dynamicdrive, dan dapat dengan mudah saya modifikasi sehingga cocok untuk Blogger. Script ini nantinya dihost sendiri di server Blogger (dimasukkan melalui widget/gadget editor), sehingga modifikasi dapat dilakukan sewaktu-waktu tanpa harus mengupload dan meng-host file javascript ke server lain.

Apa yang Berbeda?

Telah banyak tutorial blog yang berbagi script scroll/back to top (kembali ke atas), yang berbeda pada script back to top pada tutorial ini adalah:

1. Perampingan script agar tidak memperberat loading blog

2. Pengurangan, perampingan, dan modifikasi bagian script agar sesuai dengan Blogger.

3. Efek fading dan efek smooth sekaligus (dengan bantuan jquery)

4. Panduan modifikasi penuh pada script untuk menampilkan efek yang personal, agar sesuai dengan desain blog dan keinginan.

5. Pemasangan melalui widget/gadget (layout editor).

Cara Buat dan Pasang Tombol Back To Top dengan Efek Fading & Smooth Blogger

Script ini memiliki dua bagian, yang pertama adalah script fungsi back to top itu sendiri, dan yang kedua script jquery untuk membantu efek smooth dan fading (in and out).

Jquery adalah script yang sudah sangat lazim digunakan, sehingga apabila blog anda sudah menggunakan jquery, tidak perlu lagi menambahkannya. Cek apakah blog anda sudah menggunakan jquery atau belum, masuk ke Edit HTML lalu search (CTRL+F) dengan keyword jquery, letaknya ada di dalam elemen head (antara <head> dan </head>). Jika sudah ada, tidak perlu lagi menambahkan script jquery.

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

/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Advanced modification by buka-rahasia.blogspot.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img src="URL Gambar Back To Top" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Langkah Pemasangan:
1. Copy code script di atas
2. Jika sudah melakukan pengecekan jquery dan ternyata sudah ada (note: minimal versi jquery yang bisa digunakan adalah 1.3.0), hapus script jquery di bagian atas, yaitu:

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

3. Modifikasi terpenting adalah pada URL gambar back to top, masukkan URL gambar anda menggantikan teks URL Gambar Back To Top. Modifikasi tingkat lanjut (jika dibutuhkan) akan saya sampaikan di bagian akhir artikel. Untuk gambar back to top anda dapat mencari sendiri melalui Googling, atau bisa gunakan beberapa contoh berikut :

(save as/save image as, resize jika perlu, dan upload sendiri)

4. Masuk ke dashboard > Layout > Add/tambah gadget.
5. Pilih jenis gadget HTML/Javascript.
6. Masukkan seluruh kode ke dalam kotak editor dan save.
7. Agar tidak mengganggu widget lain, dan dimuat belakangan, pastikan widget di posisikan di bagian paling bawah. Geser widget baik ke bagian footer widget (jika ada) atau di sidebar paling bawah.
8. Save lagi dan cek apakah widget back to top sudah terpasang dengan baik.

Advanced modification pada Tombol Scroll/Back to Top

Untuk melakukan modifikasi efek pada tombol back to top, perhatikan poin-poin berikut:

- startline: Integer nilai pixel ke bawah dimana tombol back to top akan dimunculkan. Menambah nilainya berarti tombol akan ditampilkan lebih ke bawah setelah user scroll down. Nilai default di atas adalah 100

- scrollto: Integer, tujuan scroll setelah tombol diklik. Nilai 0 (dalam pixel) seperti default di atas berarti scroll akan kembali ke bagian paling ujung atas (titik nol). Menambah nilainya berarti akan menurunkan titik tujuan scroll.

- scrollduration: kecepatan/durasi scroll (dalam miliseconds), semakin tinggi nilainya, semakin lambat. Default adalah 1000 (1 detik).

- fadeduration: kecepatan/durasi fading (dalam miliseconds), nilai pertama adalah nilai fade in, yang kedua adalah nilai fade out. Nilai default di atas adalah 500 dan 200.

- offsetx: nilai posisi x tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke dalam. Default 5.

- offsety: nilai posisi y tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke atas. Default 5.

Important note:

Jangan mencoba menambahkan script ke dalam template melalui HTML editor, karena akan terjadi kesalahan parsing, widget parsing dan template parsing Blogger berbeda.
Never remove the attributions on the script, respect creators.

Okay that's it. Semoga tutorial di atas tidak hanya memberi manfaat dalam hal pemasangan tombol back to top, tapi juga memberikan sedikit gambaran mengenai penggunaan javascript. Have a nice blogging, as always.

Menambahkan URL Sumber Otomatis Pada Artikel yang DiCopas

Catatan kecil:

Artikel ini ternyata sudah nangkring di jajaran draft artikel saya cukup lama. Jadi, mumpung kantor dan jam ngajar lagi libur, project website sudah kelar, tidak ada salahnya merayakan kebebasan (hahaha) dengan menerbitkan artikel ini, dengan sedikit revisi, meskipun mungkin sudah banyak yang mengimplementasikan dan membagi caranya. Selain itu, sia-sia rasanya jika sudah menyusun sebuah script kecil, menuliskan artikelnya, dan menyimpannya dalam draft dalam waktu cukup lama, namun tidak menerbitkannya. So, let's go to the topic.

Sempat saya berpetualang ke beberapa artikel blog yang berbicara mengenai topik yang setidaknya hampir sama; yaitu tentang script anti right-click, anti copy (ctrl+C), anti text-selection, dan anti dragging (biasa digunakan untuk copy gambar dengan cara dragging/menggeser). Sayangnya, sebagian besar menyebutnya sebagai script anti copas. Padahal, secara logika, script-script tersebut fungsinya hanya untuk "mematikan" sebagian fitur browser saja, bukan untuk menghindarkan dari tindakan copy paste. Fungsinya hanya mengurangi kemungkinan/peluang teks atau gambar dicopas, namun sama sekali TIDAK BISA menghindarkan tindakan copas. Maksudnya? Tukang copas sekarang pada pinter, booo! Jika mereka tidak bisa copy langsung dari halaman web karena dihalangi beberapa script, biasanya mereka akan membuka page source (firefox) atau view-source (chrome), kemudian mengcopy text, bahkan code javascript, HTML, atau CSS yang mereka inginkan. Jadi kesimpulannya, nonsense kalo ada script yang berfungsi sebagai anti copas.

Topik yang saya bicarakan pada artikel ini sama sekali tidak berkaitan dengan script di atas. Melainkan mengenai memberi tanda tertentu pada sebagian teks atau artikel yang dicopy paste. Mungkin sebagian besar dari anda sudah menggunakan script ini, dan sebagian menggunakan script yang hampir sama namun melalui layanan sebuah website, tynt.com. Ada beberapa proses yang mesti dilewati untuk menggunakan tynt.com. Bahkan ketika menggunakan scriptnya di blog, ada beberapa proses muat terlebih dahulu (tynt akan merekam terlebih dahulu url halaman yang dicopy, menyimpannya dalam database, dst...). Padahal kebanyakan yang dicari hanya satu fiturnya saja, yaitu menampilkan url sumber pada teks yang dicopas.

Nah, karena yang disebut sebagai script anti copas sebenarnya tidak ada, menggunakan script url source adalah salah satu cara lain untuk menunjukkan bahwa suatu text/artikel memiliki sumber utama. Minimal anda dapat memberikan notifikasi pada si copaser bahwa artikel/teks yang dicopy wajib dicantumi sumber (meskipun si copaser mungkin saja menghapusnya, tahu lah saya isi otak tukang copas). Setidaknya ini merupakan upaya. Dan tidak ada salahnya berupaya, bukan? Copas selamanya tetap ada, dan copaser akan tetap berupaya bagaimanapun caranya untuk mendapatkan yang dia inginkan. Ibaratkan copas sebagai sebuah kejahatan, maka seorang penjahat akan menghalalkan segala cara dan melakukan apapun yang mungkin untuk mendapatkan yang diinginkan. Jika yang anda inginkan adalah menindak dan menghapus artikel yang dicopas dan dimuat di blog lain, caranya adalah dengan mengontak blog tersebut. Jika dirasa tidak mempan, maka harus ditempuh cara legal, minimal dengan menggunakan DMCA Notice. Selain itu, tidak ada cara lain lagi.

Kembali ke laptop. Karena penggunaan script url source melalui tynt.com harus menempuh beberapa proses tetek bengek, dan juga berpengaruh pada loading blog, maka saya menawarkan penggunaan script langsung yang dapat anda tanam di bagian body. Script ini awalnya terdiri dari dua jenis, PHP dan Javascript, dan biasa saya gunakan pada website berplatform WordPress. Dengan sedikit modifikasi dan memurnikan ke dalam javascript, script ini dapat digunakan pada Blogger. Mungkin anda pernah menemui script sejenis. Jika belum, dan tertarik, silahkan gunakan saja :)

<script type='text/javascript'>
function addLink(){var a=document.getElementsByTagName("body")[0];var b;b=window.getSelection();var c="<br/><br/> Sumber: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Konten adalah milik dan hak cipta buka-rahasia.blogspot.com";var d=b+c;var e=document.createElement("div");e.style.position="absolute";e.style.left="-99999px";a.appendChild(e);e.innerHTML=d;b.selectAllChildren(e);window.setTimeout(function(){a.removeChild(e)},0)}document.oncopy=addLink
</script>

a. Copy script di atas
b. Ganti teks pada bagian script yang berwarna merah sesuai dengan keinginan anda
c. Buka dashboard > template > Edit HTML
d. Letakkan di bagian body (antara <body> dan </body>). Agar tidak mengganggu kinerja script lain dan dimuat belakangan, letakkan tepat di atas </body> saja. Tag tersebut ada di bagian paling bontot alias paling bawah sebelum tag penutup </html>, jadi langsung scroooooooolll aja, bablaaaassss ke bawah.
e. Save template and done.

Contoh hasil teks yang dicopy dan dipaste di media lain (Facebook status editor):

Note: Script ini akan bekerja pada berbagai jenis teks dan di manapun letaknya, jadi mungkin akan sangat mengganggu user apabila artikel di blog anda memuat script yang dibagi dan bebas dicopy. Jadi perlu diperhatikan betul penggunaannya.

That is it and have a nice blogging.

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

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!

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;'><a href="<data:post.url/>"><data:post.title/></a></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("annotations", "1");
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/AVvXsEjQsZ5Y4ktlQ_LD2Cu1u0qG6_5HbF6EllxuTRlD7UsNTSIaUojl436OR42Pimcy_KQjQV46ldwHppXyw-7Hqndh6ftzFpPYCeB3J83uVCNQPDeCVS5hoF77YZ20ChdG5R1cfKBGpxuSsIE-/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 == "item"'>
<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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' 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:

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).

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.

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

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.