Tampilkan postingan dengan label Widgets. Tampilkan semua postingan
Tampilkan postingan dengan label Widgets. Tampilkan semua postingan

Cara Memasang Facebook Activity Feed Widget di Blogger

Background Tips

Pasang Facebook Activity Feed Blog.
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 :)

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

Mengapa Widget Traffic Feedjit Merugikan Blog dan Pengunjung?

Hi, All. Dalam kesempatan ini saya ingin menyampaikan hasil analisis review salah satu widget traffic yang cukup terkenal dan memiliki fitur display yang bisa dibilang cukup (atau terlalu) komplit. Widget blog ini sangat lazim digunakan, khususnya pengguna Blogger, karena kemudahan setting dan "kekayaan" statistiknya. Saya sangat yakin tidak ada yang tidak tahu apa itu Feedjit Live Traffic Feed Widget.

Feedjit adalah widget traffic yang menampilkan data pengunjung secara langsung (live) dalam bentuk feed. Meskipun bukan secara realtime, namun ketika sebuah halaman web/blog dibuka oleh pengunjung, maka data-data yang ditampilkan adalah informasi terakhir (refreshed). Jika sebuah website/blog memiliki traffic cukup tinggi, maka frekuensi refresh akan semakin tinggi pula, dengan data yang lumayan lengkap. Ini yang membuat banyak blogger kepincuti. Selain praktis digunakan, widget ini bisa digunakan untuk ajang unjuk gigi capaian traffic blog, yah seperti beberapa widget dari platform lainnya. Bedanya, widget ini menampilkan informasi yang jauh lebih lengkap, langsung ke hadapan umum, tanpa harus melalui proses klik sekalipun. Meskipun kebanyakan menggunakan versi free, dan tidak menampilkan IP, tapi widget ini masih cukup lengkap datanya.

Saat Mengunjungi Blog Pengguna Widget Feedjit, Saya...


Saya sangat yakin sobat semua pernah secara tidak sengaja datang ke sebuah blog yang menggunakan Feedjit. Perhatian akan langsung terfokus pada widget istimewa satu ini. Saya pun juga demikian. Yang pertama saya lihat adalah list atau daftar pengunjung, dan mendapati statistik traffic saya ada di urutan ke atas, yah... semacam "0 Seconds ago, a visitor from Jakarta viewed "Judul Halaman Blog" dan seterusnya...". Apalagi ada data keyword search engine yang sebelumnya saya gunakan untuk menuju blog tersebut. Hmmm... Pemilik blognya akan senang, atau merasa rugi?

Efek Feedjit dan Widget Traffic Sejenis Bagi Privasi Pengunjung


1. Bagi pengunjung umum.

Sebagai pemilik halaman web di dunia internet, saya dan anda harus mawas dan menjaga privasi pengunjung. Menghindari kemungkin log dan cookies (pada web membership atau yang menyimpan data pengunjung sebagai data kunjungan berikutnya) memang tidak mungkin karena semua pemilik web pasti membutuhkan dan menggunakan statistics tracker untuk menyimpan, mengetahui, serta menganalisis data kunjungan. Ini adalah konsekuensi dari pengunjung web yang sudah dimahfumi. Tapi jika harus menampilkan data-data traffic tersebut di muka umum, inilah masalahnya. User berhak mendapatkan jaminan privasi dan pemilik web, dan ini juga merupakan aturan tersirat (maupun tersurat, biasanya dalam halaman "privacy policy") yang sudah lazim dipahami dan diterima banyak orang.

Sedangkan feedjit menampilkan terlalu banyak hal di muka publik, bukan hanya jumlah visitor online atau kunjungan, tapi juga waktu, asal/referral kunjungan, kota, juga halaman yang dibuka. Saya pribadi merasa risih dengan tampilan seperti ini. Meskipun tahu bahwa setiap kunjungan pasti "dimata-matai" oleh pemilik web/blog, tapi jika hasil "permata-mataan" itu kemudian dipampangkan di depan umum, saya merasa seperti "ditelanjangi". Dan, tentu saja, ini juga dialami oleh banyak pengunjung web/blog. Dalam sebuah case study kecil, saya lihat traffic pengunjung terlalu fluktuatif (bounce rate tinggi); pengunjung yang melihat data kunjungannya ditampilkan di halaman web yang dia kunjungi cenderung cepat lari meninggalkan/menutup halaman web tersebut.

Beberapa widget sejenis feedjit, meskipun tidak "segahar" feedjit, yang memungkinkan pengunjung untuk dapat membuka statistik traffic secara bebas sebenarnya membuat risih juga. Ketika dia membuka link pada widget statistik blog yang dipasang, dia akan melihat statistik pribadinya di sana.

2. Bagi pengguna/member Feedjit

feedjit
Tahukah bahwa jika anda merupakan pengguna widget Feedjit, baik versi free, advanced, maupun pro, maka anda bersedia untuk memberikan kewenangan bagi Feedjit untuk menampilkan data-data anda? Setiap member yang mengunjungi halaman web/blog yang menggunakan Feedjit akan ditampilkan dengan data lengkap sesuai informasi membership yang anda simpan.

Seperti data di samping, data anda sebagai member feedjit akan ditampilkan di manapun. Feedjit berdalih, dengan cara ini anda akan lebih dikenal oleh pemilik web/blog dan bisa menjalin pertemanan. Bagi blog, ini akan memperluas popularitas dan viralitas bisnis. Benarkah demikian?  Tidak, pengunjung akan jauh lebih merasa lebih risih! Saya rasa masih ada banyak cara yang jauh lebih santun untuk membuat jalinan pertemanan dan membuat bisnis semakin viral tanpa harus mengorbankan privasi pengunjung!

Tentu akan ada yang berdalih: gunakan anonymous proxy, bersihkan cookies, hapus data pribadi dari feedjit, ubah data kota di feedjit, dan seterusnya. Gitu aja repot?! Tapi, apakah semua pengunjung mengerti, mawas, dan mau direpotkan dengan cara seperti itu? Saya kira tidak. Lagipula, cookies bersifat sementara saja. Lain kali anda mengunjungi, data pribadi baru akan terbaca dan tersimpan lagi.

Efek Widget Feedjit Bagi Website atau Blog


1. Feedjit menampilkan informasi lengkap sebuah kunjungan blog

Karena saking lengkapnya data yang ditampilkan, efek buruk dari widget ini jauh lebih banyak dari efek positifnya. Yang paling vital adalah penampilan keyword pencarian yang digunakan oleh pengunjung. Keyword-keyword yang memiliki persaingan tinggi lengkap dengan informasi halaman tujuan akan menjadi bahan empuk bagi pesaing web/blog anda untuk mengoptimasi web/blognya. Jangan heran apabila dalam beberapa waktu kemudian pengunjung yang datang dari keyword-keyword tersebut akan berkurang, entah dari halaman anda yang dicopas dan kemudian dioptimasikan, atau dengan halaman yang sudah ada dan dioptimasi sesuai keyword.

Satu lagi. Bisakah statistik suatu website bisa dilihat oleh siapapun tanpa harus masuk ke website tersebut? Ya, bisa! Dengan mengetikkan live.feedjit.com/live/urlhomepage/0/ di address bar browser anda, anda bisa langsung mengintip statistik traffic website/blog lain! Sebaliknya, jika anda menggunakan  widget feedjit, bersiap-siaplah juga untuk dimata-matai orang lain langsung melalui feedjit, secara bebas, tanpa harus masuk ke halaman blog anda.

2.  Feedjit menampilkan iklan

Saya kira, mayoritas user feedjit adalah member free account. Artinya, penggunaan widget tidak dibebani biaya apapun. Sayangnya, sebagian tidak benar-benar paham bahwa account ini tidak free. Widget Feedjit pada free acccount diikuti dengan iklan di bagian bawahnya. Inilah biaya yang harus anda bayar: iklan gratis! Bagi saya, tidak ada alasan apapun bagi saya untuk mempertahankan widget seperti ini. Saya tidak mau ada konsep "iklan" ada pada widget di blog saya, sedangkan saya tidak mendapatkan imbalan apapun kecuali fungsi widget yang sebenarnya juga merugikan. Saya juga tidak mau kehilangan pengunjung dengan mengirimkan mereka ke website pengiklan tanpa kompensasi apapun. Iklan adalah iklan, berbeda dengan referensi. Referensi adalah apa yang diketahui betul dan disarankan untuk dikunjungi.

3. Obsesi pencapaian traffic yang berlebihan

Sebenarnya kasus ini tidak hanya terjadi pada pengguna Feedjit, tapi juga pengguna widget yang menampilkan statistik traffic lainnya, namun pada feedjit bisa lebih parah lagi. Upaya untuk merefresh data akan semakin meningkat karena keingintahuan besar pada perkembangan traffic setiap detiknya. Bisa dibilang, orang yang terobsesi secara keterlaluan terhadap traffic adalah maniak traffic. Isi aktivitasnya hanyalah mengetahui traffic, traffic, dan traffic. Traffic blog penting, tapi memahami statistik traffic tidak harus per detik! Justru, memahami statistik traffic seharusnya dalam kuantitas per minggu, per bulan, yah atau secepat-cepatnya satu hari lah, jika tidak bisa menahan. Itu sudah cukup untuk melakukan analisis. Per hari, bahkan per jam atau per detik tidak akan memberikan analisis yang valid.

4. Pembatasan log traffic

Feedjit adalah satu-satunya layanan statistik traffic gratis yang memiliki log cukup singkat dan pendek. Bayangkan, jika anda hanya memiliki traffic cukup tinggi, dapatkah anda melakukan analisis? Tidak sama sekali! Satu-satunya akun feedjit yang menampilkan informasi tanpa batas, dan bisa dengan hidden tracker, adalah pro membership, 9.95 dollar per bulan, coy. Saya pilih "say no to feedjit"! Ada layanan tracker lain yang tidak berbayar, sedikit batasan, namun dengan fitur yang wah dan ada hidden tracker-nya. Sebut saja di antaranya adalah Histats, StatCounter, Google Analytics, SiteMeter, dan lain-lain. Bahkan statcounter dan sitemeter ada laporan rangkuman statistik traffic mingguan via email.

-----------

Saya dulu pernah membahas tentang bahaya menampilkan statistik traffic pada widget blog. Selain itu, jika anda menengok pada web-web atau blog-blog yang sudah cukup handal dan terkenal, anda tidak akan melihat widget traffic semacam feedjit, atau minimal mereka hanya akan menampilkan online users saja, tanpa akses ke statistik yang lebih lengkap. Privacy pengunjung adalah hal yang sangat penting, sama seperti kenyamanan mereka ketika melakukan browsing, dan ketika menikmati konten. Akses statistik adalah wilayah pemilik web/blog, dan akses memungkinkan lainnya adalah para advertiser, atau pihak-pihak yang benar-benar membutuhkannya. Mungkin anda pernah melihat review feedjit pada techblog berkelas seperti TechCrunch (milik AOL), jangan percaya. Jelas lah itu adalah review bayaran. Saya yakin TechCrunh sendiri tidak menggunakan Feedjit.

-----------

Kesimpulan

Esensi dari wacana di atas bersumber pada privasi pengunjung dan efek suatu fungsi layanan, baik layanan dari web/blog maupun dari eksternal (pihak ketiga, misalnya widget). Terkadang kita terlalu bersemangat, lupa, dan berusaha menampilkan banyak hal, namun tidak menyadari bahwa sebagian darinya justru merugikan; baik untuk pengunjung maupun untuk web/blog.

Have a nice blogging, as always.... :)

© Copyright 2013 - 'til drop. buka-rahasia.blogspot.com

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

Back To Top Blogspot
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.

Demo Back To Top Button

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.
<!--Back to top script by dynamicdrive.com and buka-rahasia.blogspot.com-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
<!-- hapus script di atas jika template sudah menggunakan jquery-->
/*********************************************** 
* 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>
<!--Back to top script by dynamicdrive.com and buka-rahasia.blogspot.com end-->
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 :
top button 1top button 2top button 3top button 4top button 5top button 6
(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.

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

Berhati-hatilah Jika Menggunakan Widget Statistik Traffic Blog (agar tidak disalahgunakan)


Ada banyak sekali web service yang menyediakan layanan pemantauan dan analisis traffic. Salah satu yang paling kita kenal adalah Google Analytics. Meskipun sangat terkenal, penggunaan Google Analytics bersifat stealth, hanya pemilik website/blog saja yang bisa melihat statistik traffic yang terekam. Beberapa blogger, termasuk saya dan mungkin juga sobat semua, memilih untuk menayangkan sebagian kecil capaian traffic harian melalui widget blog. Oleh karena itu, layanan-layanan statistik blog yang memiliki fitur widget blog kemudian lebih menjadi pilihan. Sebut saja Sitemeter, Histats, Statcounter, Feedjit, Hitwebcounter, dan segudang layanan widget traffic blog lainnya adalah nama-nama yang acapkali menjadi bagian dari widget blog kita.

Keuntungan Menggunakan Widget Statistik Traffic

Tentu saja ada banyak tujuan dari penayangan widget traffic tersebut, dari menunjukkan jumlah visitor dan jumlah pageview blog kepada pengunjung, sebagai alat analisis traffic harian yang cepat (tinggal klik bagian link di dalam widget dan pada halaman yang muncul kita bisa langsung melihat kondisi traffic blog, tidak seperti Google Analytics yang terlalu ribet untuk sekedar melihat perkembangan traffic hari ini), hingga untuk "memamerkan" capaian traffic kepada advertiser (pengiklan) agar mereka semakin yakin. Kita tidak bisa begitu saja mempercayai satu sumber statistik traffic seperti site stats-nya Blogger, karena tentu memiliki beberapa kekurangan. Diantaranya adalah statistik yang dihimpun hanya pada permukaan saja dan hanya menampilkan jumlah berdasarkan pageview, bukan visitor.

Kerugian Menggunakan Widget Statistik Traffic

Inilah poin utama dari topik yang saya bicarakan kali ini. Penggunaan widget statistik traffic blog memiliki beberapa kelemahan yang disebabkan oleh beberapa hal. Sebagai suatu contoh riil, saya akan menggunakan kasus saya sendiri sebagai gambaran atas kerugian penggunaan widget ini. Sudah hampir dua tahun ini saya menggunakan widget Histats untuk menampilkan jumlah pengunjung yang sedang online. Pada awalnya saya tidak hanya menampilkan jumlah visitor online saja, tapi juga visitor harian, total visitor, pageview harian, dan total pageview. Hasilnya cukup baik untuk menarik advertiser dan yah, katakanlah "sedikit pamer" lah :). Namun saya kemudian mengurangi beberapa statistik yang ditampilkan (hanya menampilkan online visitor) karena pada akhir 2011 lalu saya mulai "mencium" ada yang mengambil kode widget tersebut melalui page source dan menayangkan di blognya. Ini mirip seperti beberapa kasus kecurangan yang saya tulis dalam salah satu artikel satir saya, Cara [Curang] Meningkatkan "Kualitas" Blog dengan Cepat.

Atas saran seorang sobat blogger, saya juga menutup akses ke beberapa halaman statistik di Histats agar halaman analisis keyword yang mendatangkan cukup banyak traffic ke blog saya tidak dapat dilihat. Karena memang, setelah si pelaku mengetahui keyword apa saja yang tampil di halaman pertama dia kemudian meng-copas beberapa artikel saya dan menerbitkannya di blog miliknya, dengan judul dan isi yang sama persis. Sempat beberapa waktu saya kalang kabut karena artikel-artikel curian itu berada di atas peringkat artikel saya, meskipun kemudian dengan sedikit upaya link building natural dan juga kedatangan Google Panda serta Penguin, artikel saya terselamatkan.

Sekitar 6 atau 7 bulan yang lalu, saya kembali menemukan kejanggalan pada dashboard Histats. Ada satu atau dua link referral dari Google yang sama sekali tidak berhubungan dengan artikel apapun di blog ini.  Beberapa keyword berkaitan dengan sebuah produk dan menuju ke halaman-halaman sebuah toko online (atau landing page, saya kurang begitu tahu, karena tidak melakukan cek). Beberapa keyword lainnya menuju ke halaman-halaman sebuah blog yang ber-niche (maaf) p*rno. Saya cukup terkejut, namun bisa langsung menebak apa yang terjadi.Sampai pada tahap ini saya masih membiarkan. Biarlah, toh dengan memasang widget saya bukan berarti toko itu langsung laris, atau blog p*rno tersebut kemudian kebanjiran traffic. (Note: Mungkin sampai saat ini, beberapa web/blog masih menggunakannya)

Datang lagi kejanggalan lain! Sebelumnya, terus terang saya memiliki aktivitas yang cukup minim di blog ini selama hampir 1 tahun ini, sebab pekerjaan online dan offline lain cukup menumpuk, hingga saya jarang memperhatikan widget statistik yang dipasang tepat di footer widget sebelah kiri. Kira-kira dua minggu yang lalu, saya mendapatkan pesan dari seorang advertiser yang hendak memasang iklan, namun juga mempertanyakan jumlah pengunjung online yang cukup sedikit. Hal ini bertolak belakang dengan screenshot pengunjung unik harian dan bulanan pada Google Analytics dan Histats yang saya sodorkan pada advertiser tersebut. Saya tidak langsung membalas namun memutuskan untuk menelusuri lebih jauh.
Contoh stats traffic harian riil dari Histats

The Case Study

Saya mulai melakukan case study kecil-kecilan untuk melihat hal yang sebenarnya. Pengamatan saya mulai dari widget Histats. Dan memang benar, saya melihat penurunan drastis pada jumlah pengguna online. Namun demikian, herannya jumlah online user di dashboard histat cukup tinggi! Memang, jumlah online user pada histats (live) akan sangat jarang memiliki jumlah sama persis dengan wudget karena widget akan refresh jika halaman di reload, tapi perbedaannya sangat signifikan! Widget menunjukkan 11 online user sedangkan halaman users online (live) pada dashboard histat pada saat yang hampir bersamaan menunjukkan 44 orang online! Saya refresh halaman blog berkali-kali, namun tetap menunjukkan jumlah yang tidak jauh dari sebelumnya. Dan saya menyayangkan diri saya sendiri karena ini baru disadari sekarang, sebab mungkin sudah terjadi cukup lama, berbulan bulan. Setelah jarang online dan sibuk dengan pekerjaan di "dunia nyata" saya hanya melihat dan berpatokan pada Google Analytics. Tentu ini sebuah pola buruk yang tidak patut ditiru oleh para pelaku dunia online. :)

Kasus lain yang lebih membuat saya geleng-geleng kepala adalah, kadang-kadang widget histats "diam di tempat" alias "macet" meskipun sudah direfresh dengan jarak satu sampai dua menit, dan hal ini sering terjadi, bahkan kadang hingga beberapa jam. Ada apa gerangan?!  Dua kejanggalan aneh.

Saya kemudian teringat bahwa widget Histats ini juga digunakan oleh beberapa website lain. Jika referral link menuju website yang memasang widget saya juga ikut terlacak, maka logika seharusnya adalah traffic tersebut ikut terhitung, dan tentunya jumlah visitor justru bertambah (karena visitor website-website itu ikut terhitung, menguntungkan bukan? tuing2 :p ). Tapi... kenyataannya tidak. Yang terjadi adalah, menurut dugaan saya saat ini, tracker pada widget menjadi kacau, jumlah mana yang seharusnya ditampilkan, milik blog saya atau milik blog yang memasang widget histats blog saya? Dan jumlahnya tidak hanya satu.... Saya juga berhipotesis bahwa "kemacetan" itu mungkin juga disebabkan oleh banyaknya halaman dari beberapa website berbeda yang harus direkam, sehingga justru statistik pada widget menjadi kacau balau.

Mungkin agak kurang meyakinkan, namun sebelum membuat hipotesis di atas, saya telah mencoba hal yang sama pada Sitemeter yang dipasang pada dua website berbeda, namun dengan satu ID user. Hasilnya, jumlah traffic, visitor, dan online user jauh berbeda jauh dari statistik lain yang saya gunakan. Ini sekaligus menjawab pertanyaan mengapa banyak webmaster yang memakai salah satu dari 3 layanan statistik traffic seperti Statcounter, Sitemeter, dan Histats kini menggunakan hidden tracker atau hanya memasang widget logo atau tulisan. Logo ini masih berfungsi sebagai tracker, apabila diklik tetap akan menampilkan halaman statistik (kondisi login), tapi tidak akan membuat yang lain curang dan menggunakannya karena tidak menampilkan apapun.

Sebagai kesimpulan awal, ternyata meskipun widget memiliki ID, tapi bisa digunakan di sembarang tempat dan tracker tidak melakukan pembatasan pada website yang seharusnya dilacak. Sistem pun menjadi kacau. Saya sudah melayangkan informasi bug dan complaint ini ke Histats. Seharusnya ID unik memang benar-benar digunakan dan diijinkan pada satu blog yang sudah didaftarkan dan ID hanya milik blog itu, yah seperti widget PPC KlikSaya setidaknya lah (bukan promo!), saya sekedar kagum dengan sistem yang digunakan kliksaya.

Mungkin akan ada yang bilang, "Ah repot-repot amat sih ngurusin statistik traffic". Tidak repot kok. Justru ini adalah bagian pekerjaan penting. Mengetahui dan menganalisis traffic adalah bagian keseharian dalam memantau perkembangan traffic blog. Apakah traffic naik atau turun? Apakah user baru persentasenya jauh lebih banyak dari user yang sudah menjadi pelanggan? Dari mana saja datangnya user? Browser apa yang mereka gunakan? Post/artikel apa saja yang paling disukai/mendapat kunjungan terbanyak? dan masih panjaaaang lagi daftar pertanyaannya. Dengan mengetahui berbagai aspek statistik traffic, kita dapat merancang berbagai strategi untuk meningkatkan kualitas traffic, bukan hanya kuantitasnya. Nah, kalo statistik itu kacau, tidak benar, salah, bahkan palsu, bagaimana kita bisa melakukan analisis dengan benar? Permasalahannya bukan pada jumlah traffic yang besar atau kecil, tapi pada akurat atau tidaknya.

Sekarang (baru saja) saya sudah melepas widget Histats dan menggunakan versi hidden tracker. Karena jika harus melepaskannya secara total, sayang. Histats menurut saya adalah tracker dan alat statistik traffic yang cukup akurat, lengkap, dan gratis 100%.

Semoga dari kasus di atas ada beberapa bagian yang bisa diambil pelajaran. Terutama mengenai arti penting kebijakan penggunaan statistik traffic blog dan bagaimana agar kasus ini bisa dihindari.

Ke depan akan saya bahas mengenai analisis traffic dan bagaimana menggunakan hasil analisis untuk mengembangkan blog/web, salah satunya untuk mengukur tingkat konversi traffic. Kalo tidak saya bahas di sini, kemungkinan besar akan saya tuangkan di tautweb.com

Salam dan happy blogging, as always :)

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

Google Luncurkan GooglePlus Followers Gadget untuk Blogger

Blogger Google+ Followers. Informasi ini cukup menggembirakan bagi para pengguna Blogger, terutama bagi sobat yang telah mengintegrasikan profil Blogger dengan profil Google+. Widget ini disebut "Google+ Followers Gadget" dan berfungsi menampilkan follower Blog (atau profil) lengkap dengan foto profil pengikut. Widget ini seperti gabungan dua widget yang sudah sangat kita kenal, Google Plus Add to Circle/Follow Widget dan Google Friend Connect. Di bawah link/title profile, terdapat tombol follow.

Tentu, dalam perspektif saya, kehadiran widget ini memberikan banyak keuntungan, diantaranya adalah memperluas jangkauan readership, semakin menggabungkan profile Google+ dengan Blogger dalam satu atap, memperkuat authorship, dan menjangkau follower dari dua tempat sekaligus, yaitu dari stream Google+ dan langsung dari blog.

Lalu Bagaimana Nasib Google Friend Connect?

Google menyampaikan bahwa pengguna Google Friend Connect tidak perlu khawatir dengan adanya fitur widget baru ini. Meskipun integrasi Google Friend Connect dengan beberapa platform lain telah dihentikan dalam beberapa tahap sebelumnya, namun integrasinya dengan Blogger tetap akan dijalankan. Saya pribadi hingga saat ini masih tetap setia dengan widget ini, belum (atau mungkin tidak akan) mengintegrasikan profil Blogger dengan Google+, dan tentu saja tidak ingin kehilangan blog follower yang sudah cukup banyak. Melepaskan Google Friend Connect dapat merugikan karena sama saja akan kehilangan banyak subscriber yang selalu menunggu-nunggu update terbaru. Selain itu, Google Friend Connect juga dapat diraih (di-follow) dengan menggunakan akun G+.

Tentu akhirnya ini adalah pilihan, dan menggunakan kedua widget ini saya rasa justru akan memberikan kelebihan dan keuntungan yang jauh lebih besar. Jadi bagi anda yang sudah menghubungkan akun Blogger dengan G+, maka menggunakan widget baru "Google+ Followers Widget" sangat dianjurkan. Bagi yang belum atau tidak melakukan integrasi profil, menggunakan Google Friend Connect tetaplah hal yang penting.

Cara Memasang Widget Google+Followers di Blogger

Syarat agar sobat bisa menggunakan widget ini adalah sebelumnya telah menggabungkan/mengintegrasikan  atau meng-upgraged profil Blogger ke profil Google+. Langkah selengkapnya adalah:
1. Integrasikan atau pindahkan profil Blogger ke Google+ (jika belum, simak cara Integrasi Profil Blogger ke Google+).
2. Setelah mengintegrasikan profil, anda bisa memilih untuk mengasosiasikan blog-blog yang dimiliki dengan Google+ Profile atau Google+ Page sesuai keinginan. (pastikan profil tidak diset dalam kondisi "private" karena widget tidak akan muncul di blog. Simak selengkapnya tentang ini dalam artikel rujukan di poin 1).
3. Dari Dashboard, langsung masuk ke halaman Layout. Lalu klik "Add a Gadget/Tambahkan Gadget".
4. Cari dan pilih Gadget baru "Google+ Followers".
add google+ followers gadget
5. Di halaman setting gadget, edit/ganti title dengan kata-kata yang diinginkan. Jika sebelumnya (sesuai langkah 1) sobat belum mengintegrasikan profil, akan muncul link untuk melakukan integrasi. Lalu save.
configure google+ followers gadget
6. Jika diperlukan, susun atau letakkan gadget pada posisi yang diinginkan di halaman layout, lalu save lagi.

Troubleshooting

Jika gadget sudah ditambahkan namun tidak tampil di halaman blog, besar kemungkinan profil belum tervalidasi dengan benar. Kembali ke tab Google+ di dashboard Blogger dan lakukan proses integrasi dan validasi.

© 2012 buka-rahasia.blogspot.com. All rights reserved.

Memperbaiki Berbagai Problem Pada Widget "LinkWithin Related Posts"


Saya dulu pernah membahas mengenai cara memasang Widget/gadget LinkWithin Related Posts, salah satu asesoris blog yang cukup menjadi favorit karena kemudahan pemasangan dan akurasi relevansinya. Meskipun ada banyak widget sejenis, baik yang dibuat secara manual ataupun sudah dalam paket siap pakai, namun LinkWithin jauh lebih unggul, baik dalam relevansi, dalam hal kecepatan loading (penggunaan LazyLoad script), dan support. Saya dulu juga pernah memberikan beberapa tips untuk menampilkan LinkWithin hanya dalam halaman posting, menampilkan pada urutan/posisi tertentu, dll. Nah, dalam artikel ini, saya akan menyampaikan penggunaan fitur support pada website LinkWithin yang sangat bermanfaat sebagai sarana untuk menyelesaikan berbagai jenis permasalahan yang muncul pada penggunaan widget related posts ini.

Sangatlah mungkin ada beberapa masalah yang muncul pada penggunaan LinkWithin Mulai dari widget related post tidak muncul, menampilkan posting yang sudah dihapus, hingga kesalahan dalam menampilkan gambar posting yang sudah diubah. Masalah-masalah ringan hingga terberat butuh pemecahan agar LinkWithin dapat berfungsi optimal sehingga upaya meningkatkan pageview dan mengurangi bounce rate benar-benar terasa. Problem ini tidak hanya terjadi pada Blogger, namun juga terjadi pada platform-platform lainnya, misalnya WordPress, sebab beberapa permasalahan general terjadi karena kasus caching, crawling, dan fetching, bukan dari blog secara langsung.

Nah, karena LinkWithin menggunakan script external, konten widget disimpan pada server luar, serta ditampilkan melalui sistem caching, maka upaya perbaikan tidak bisa dilakukan langsung oleh sobat. Semua problem yang berkaitan dengan penampilan widget ini harus dilakukan oleh pihak LinkWithin. Untungnya, support untuk permasalahan/trouble penggunaan LinkWithin disediakan secara penuh oleh pihak LinkWithin. Jadi apa yang harus dilakukan apabila sobat menemui permasalahan dengan widget LinkWithin?

1. Masuk ke halaman LinkWithin support.
2. Isikan alamat email (ingat, email yang sama seperti dulu ketika mendaftarkan blog), url blog, dan klik "Continue".
masalah pada LinkWithin related post

3. Sobat akan dibawa ke halaman berisi form list permasalahan. Pilih jenis problem yang paling sesuai.
LinkWithin widget fix
Berikut adalah jenis-jenis problem sesuai urutan di atas:
  • Widget sama sekali tidak tampil di dalam blog.
  • Widget muncul, tapi tidak menampilkan daftar posting yang direkomendasikan.
  • Widget menampilkan posting yang sudah dihapus.
  • Widget menampilkan lebih dari satu posting yang sama.
  • Pergantian domain blog dilakukan, namun widget masih menautkan link posting pada domain lama.
  • Judul pada posting yang ditampilkan salah/tidak benar.
  • Widget selalu menampilkan link saja, meskipun pada sebagian besar posting memiliki gambar.
  • Widget masih menampilkan gambar lama, meskipun gambar posting telah diganti/diupdate.
  • Lainnya. Pilih opsi ini jika pada list di atas tidak ditemukan problem yang terjadi pada widget LinkWithin sobat. Kemudian tuliskan secara specific permasalahan yang terjadi (in English, of course. Jika sobat memiliki kesulitan untuk menuliskan permasalahan tersebut dalam bahasa Inggris, Insya Allah saya siap bantu).
4. Setelah itu klik "Continue".

Perlu diketahui bahwa beberapa jenis permasalahan tertentu akan diperbaiki secara otomatis. Namun untuk melihat hasilnya, dibutuhkan waktu hingga paling lama 24 jam sesuai urutan query dan update. Beberapa jenis permasalahan lain akan diperbaiki secara manual oleh tim LinkWithin. Apabila penyelesaian masalah perlu keterlibatan sobat, maka akan ada informasi dan petunjuk yang dikirimkan.

Well, that's it. Semoga ini dapat memberikan solusi bagi sobat yang mengalami problem dengan Widget LinkWithin yang dipasang di blog. Next time, saya akan berbagi hack kostumisasi widget LinkWithin agar sesuai dengan tampilan blog atau keinginan. See you, then.

© 2012 buka-rahasia.blogspot.com. All rights reserved.

Cara Memasang Facebook Recommendation Bar di Blogger

Blogger Facebook Recommendation Bar.
Akhir 2011 lalu Facebook mengumumkan akan menambahkan fitur baru yaitu "Facebook Recommendation Bar". Akhir Juni 2012 lalu, fitur ini kemudian dirilis dalam bentuk beta. Saya sudah pernah mencobanya, namun karena terlalu berat, dan terlalu banyak fitur, maka saya kembali melepaskannya. Beberapa waktu kemudian, fitur seperti "Add to Timeline" yang juga muncul di recommendation bar tersebut dihilangkan. Script diperbaiki sehingga menghasilkan load yang lebih cepat dan efisien. Settingnya pun bisa dikostumisasi sendiri dengan mengubah beberapa parameter sehingga sesuai dengan keinginan pemilik web/blog.

Pada dasarnya, script Facebook Recommendation Bar berbasis pada pengambilan (fetching) beberapa meta informasi di dalam blog/web; sehingga basic penggunaanya tergantung pada template dan susunan strukturnya. Penggunaan fitur ini ditujukan sebagai alat rekomendasi posting/artikel setelah pembaca artikel blog selesai membaca sebuah artikel. Secara default, recommendation bar akan terbuka secara otomatis dalam waktu dan posisi tertentu pada sebuah halaman, berisi beberapa rekomendasi posting (default 3 buah), dan juga sebuah like button.

Ada Manfaat atau Keuntungan Menggunakan Facebook Recommendation Bar?

Tentu saja ada! Facebook Recommendation Bar telah saya buktikan memberikan keuntungan yang sangat banyak. Di antaranya adalah meningkatkan jumlah pageview, meningkatkan traffic, mengurangi bounce rate, dan tentu saja meningkatkan revenue. Sinergi widget ini dengan widget lainnya seperti LinkWithin Related Posts, Recent Posts Widgets, dan beberapa widget sejenisnya akan memberikan dampak yang signifikan terhadap traffic blog. Facebook Recommendation Bar memiliki keunggulan menampilkan jumlah like pada sebuah post, dan ini akan menjadi daya tarik tersendiri bagi pembaca blog untuk mengetahui isi posting yang direkomendasikan.

Cara Menambahkan Widget Facebook Recommendation Bar

Widget ini bekerja berdasarkan otorisasi aplikasi. Kemungkinan anda gagal menggunakannya adalah karena menggunakan App ID milik user lain yang tidak diotorisasi untuk domain tertentu. Oleh karena itu, sebaiknya menggunakan Facebook App yang dibuat sendiri. So, langkah yang harus dilakukan dalam memasang widget ini adalah:

Langkah 1: Membuat Facebook Application

Note: Jika anda sudah memiliki aplikasi yang berkaitan atau digunakan di blog anda dan telah terotorisasi, lewati langkah ini. Langsung copy App ID yang tertera dan simpan terlebih dahulu.

1. Masuk ke halaman Facebook Apps (pastikan sudah login).
2. Klik Create New App.
3. Akan muncul pop up box, masukkan nama aplikasi (terserah saja, misalnya "Buka Rahasia Recommendation"). Klik continue.
create new app
4. Masukkan kode captcha, klik submit.
5. Anda akan masuk ke halaman setting aplikasi. Lihat pada bagian bawah, tepatnya pada "Website with Facebook Login". Klik, lalu masukkan url blog. Jangan klik opsi lainnya, karena ini akan menyebabkan kesalahan setting dan memang tidak perlu diaktifkan untuk jenis aplikasi ini. Lalu klik "Save Changes".
add app url
6. Setelah itu akan muncul informasi App Id dan App Secret. Copy angka-angkan pada App ID, simpan di tempat yang aman. Berikut contohnya:
app ID
Langkah 2: Menginstall Facebook Recommendation Bar

1. Masuk ke Blogger > Template > Edit HTML.
2. Kemudian setelah pop up box muncul, klik "proceed" (lanjutkan).
Note: Bila perlu backup template terlebih dahulu.
3. Cari kode ini:
<html 
Tujuannya adalah untuk memasukkan xlmns Facebook yang berfungsi sebagai fetcher, masukkan xmlns:fb='http://ogp.me/ns/fb#' tepat setelahnya. 
<html xmlns:fb='http://ogp.me/ns/fb#'
Oh ya, jika anda telah menggunakan xlmns:fb versi lama sebelumnya, hapus dan ganti dengan yang diatas.
4. Kemudian cari <body>. Pada template-template Blogger versi baru (simple, awesome, travel, dll), ada kemungkinan tambahan script atau informasi di belakang body, jadi cukup cari saja dengan <body (tanpa penutup). Copy kode berikut tepat setelahnya/di bawahnya:

<div id='fb-root'/>
<script>
//Facebook Recommendation bar - buka-rahasia.blogspot.com
//<![CDATA[
(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&appId=123456789012345";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://buka-rahasia.blogspot.com' trigger='50%'/></div>
</b:if></b:if>

Buat perubahan script di atas dengan petunjuk berikut:
  • Ganti 123456789012345 dengan App ID yang sebelumnya telah dibuat.
  • Ganti http://buka-rahasia.blogspot.com dengan url blog sobat.
5. Save template dan coba cek hasilnya.

Kostumisasi Tingkat Lanjut (Opsional)

Jika sobat ingin melakukan kostumisasi pada bagaimana Facebook Recommendation Bar ditampilkan, perhatikan poin-poin berikut:
  • max_age adalah maksimum usia posting yang akan ditampilkan dalam rekomendasi, ubah nilai 0 menjadi maksimal usia posting dalam hitungan hari, misalnya 100, berarti maksimal usia posting yang ditampilkan adalah 100 hari. Nilai 0 adalah default yang artinya tidak ada batasan usia posting.
  • num_recommendations adalah jumlah rekomendasi dalam setiap tampilan/load, ubah nilai 3 untuk menampilkan jumlah posting yang diinginkan.
  • read_time adalah waktu yang dibutuhkan untuk load seketika user/pembaca mencapai titik scroll dimana widget muncul dan menampilkan isi rekomendasi. Saya telah menyettingnya hingga sama dengan 10 detik, jika ingin widget menampilkan lebih lama, tambah nilai 10.
  • side adalah di sisi mana widget akan ditampilkan. Default settingan saya di atas adalah right dimana widget ditampilkan di sisi kanan. Jika ingin ditampilkan di sisi kiri, ubah menjadi left.
  • trigger adalah posisi awal dimana widget akan muncul. Setting di atas saya beri nilai 50% yang artinya widget akan muncul setelah user/pembaca blog scroll hingga separuh halaman. Ubah nilainya jika ingin widget muncul lebih ke atas atau ke bawah. Semakin besar nilai persentasenya, semakin ke bawah.
  • Script saya set untuk ditampilkan pada halaman posting dan statis (untuk halaman statis, tergantung template, kadang tidak ditampilkan), untuk menampilkan di semua halaman hapus tag b if conditional (semua yang berwarna pink). Untuk menampilkan di halaman-halaman tertentu lainnya, pelajari Menampilkan Widget Blogger hanya di Halaman Tertentu.

Analisa Permasalahan Jika Widget Tidak Bekerja Sempurna

Kemungkinan permasalahan yang akan muncul adalah gambar yang tidak sesuai, title yang salah dan sejenisnya. Beberapa template Blogger memiliki struktur yang tidak baik atau susunannya tidak sempurna sehingga ketika fetcher mengambil informasi, bisa terjadi kekeliruan atau bahkan kegagalan. Jika anda menemui masalah demikian, gunakan meta:og tambahan di dalam template blog anda. Simak tutorial selengkapnya di Memperbaiki Gambar & Deskripsi Posting/Blog di Facebook

Well, that's it and have a nice blogging!

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

Tambahkan Widget AddThis Sharing Buttons Terbaru di Blogmu!

Addthis Sharing Buttons for Blogger.
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.
widget sharing AddThis
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).
Membuat Kode Widget Addthis.

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.

Cara Menampilkan Widget Hanya di Homepage/Halaman Posting


Ketika melakukan setting desain blog, terkadang kita terkendala dengan banyaknya widget yang ditampilkan, sehingga widget tampak berdesakan dan halaman menjadi begitu panjang. Dalam kasus lain lagi, terkadang kita hanya ingin widget tertentu hanya muncul di halaman spesifik, baik homepage, halaman statis, maupun halaman posting saja. Dulu saya pernah berbicara mengenai bagaimana menyembunyikan sidebar Blogger di halaman tertentu, dengan menggunakan conditional tags dan CSS (display), dan jika yang diinginkan hanya untuk menyembunyikan satu atau beberapa widget, maka tentu kurang tepat jika diterapkan. So, dalam kesempatan ini, saya ingin berbagi mengenai bagamana menampilkan atau menyembunyikan salah satu atau beberapa widget dalam halaman tertentu, dan menampikannya pada jenis halaman lain.

Konsep Hack Menampilkan Widget Pada Halaman Tertentu

Cara ini sebenarnya masih sama dengan artikel yang sebelumnya sudah saya sebutkan, yaitu menggunakan conditional tags (b if), salah satu tag XML Blogger, untuk memberikan perintah agar suatu elemen ditampilkan pada bagian/halaman tertentu saja dan menyembunyikannya pada bagian/halaman lain.  Conditional (if) juga dikenal penggunaanya pada PHP, dan juga dikenal dalam bahasa Inggris (if clause, conditional sentence) hehehehe..... Bedanya dengan cara sebelumnya, cara yang saya tawarkan ini tidak akan menggunakan CSS, melainkan menggunakan conditional tags langsung pada elemen yang hendak diberikan perintah, yang dalam hal ini adalah elemen-elemen widget.

Langkah-langkah Menampilkan Widget Pada Halaman Tertentu

1. Mencari ID Widget
Sebelum memberikan conditional tags, anda harus mengetahui ID widget yang hendak ditampilkan pada halaman tertentu. Cara mencarinya sangat mudah:
a. Ada dua cara untuk mengakses editor widget (sebenarnya ada 3, yaitu melalui edit HTML, tapi cara ini akan lebih rumit:
- Jika anda dalam kondisi login Blogger, anda dapat langsung mengakses "quickedit" langsung dari halaman blog, quickedit adalah tool untuk mengedit widget secara langsung, letaknya biasanya adalah di bagian pojok kanan bawah widget, berupa ikon obeng dan kunci (screwdriver and wrench). Klik icon pada widget yang diinginkan dan akan muncul pop-up window dimana anda dapat mengedit konten widget.
- Atau akses editor widget melalui halaman "Layout", lalu klik link "edit" di salah satu bagian widget. Kemudian akan muncul pop-up window.
b. Lihat di bagian URL/address di browser pada halaman pop up window tersebut. Letak ID widget berada di bagian akhir URL (geser URL ke kanan). Perhatikan contoh gambar berikut:
buka-rahasia.blogspot.com

d. Simpan Id Widget tersebut, misalnya dari contoh di atas, Id widget yang hendak saya edit adalah "HTML11".

2. Memberikan Conditional Tags Pada Elemen Widget
Untuk menampilkan widget di halaman tertentu, anda harus menambahkan conditional tags (b if cond) pada elemen widget yang diinginkan. Berikut langkah menambahkannya sesuai dengan contoh widget yang sudah disampaikan di atas:
a. Masuk ke halaman template (Dashboard > Template)
b. Klik "Edit HTML" > Proceed.
c. Jangan lupa klik/centang "Expand Widget Templates" untuk menampilkan seluruh elemen widget di dalam editor.
d. Tekan CTRL+F, masukkan ID widget yang diinginkan yang sebelumnya telah dicari dan dipersiapkan. Dalam contoh ini saya akan menggunakan id widget "HTML11" sebagai contoh dan berikut kurang lebihnya elemen widget sobat:
buka-rahasia.blogspot.com
e. Kemudian tambahkan conditional tag setelah <b:includable id='main'> dan tag penutupnya sebelum </b:includable>. Berikut conditional tags berdasarkan jenis halaman dan cara menambahkannya, perhatikan tag berwarna merah dan itulah yang harus ditambahkan:

Cara Menampilkan Widget Hanya di Halaman Utama/Indeks (Homepage)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Posting

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Statis

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Arsip (Archive)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Salah Satu Halaman (Berdasarkan URL)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Ganti dengan URL Halaman di sini"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

f. Setelah conditional tags ditambahkan, save template.

Jika ingin melakukan hal yang sama pada beberapa widget, anda harus melakukan dan mengulang cara yang sama seperti di atas: cari ID widget, cari elemen widget sesuai ID di edit HTML, dan masukkan conditional tags berdasarkan jenis halaman ke dalam elemen widget. Save and Done.
Semoga bermanfaat and have a nice Blogging.

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