Bisa jadi kita sudah tidak asing lagi dengan Alexa Widgets yang umumnya
dapat dijumpai terpasang pada halaman depan sebuah situs atau blog, yang
salah satu manfaatnya adalah agar kita atau pengunjung dapat dengan
mudah mengetahui tingkat popularitas sebuah situs atau blog yang sedang
dikunjungi. Termasuk diantaranya untuk mengetahui traffic kunjungan dan
juga jumlah tautan yang terhubung dengan situs yang dimaksud. Namun bila
umumnya widget tersebut dipasang di halaman situs versi web atau
halaman yang dikhususkan untuk dibuka dengan menggunakan komputer, maka
untuk pemasangan Alexa Widget dalam pembahasan artikel ini bisa jadi
belum lazim digunakan oleh pengelola blog, karena pemasangan widget
dilakukan untuk halaman blog versi seluler yang dikhususkan untuk dibuka
dengan memakai perangkat mobile atau telepon seluler.
Seperti halnya dengan pemasangan Alexa Widget di halaman situs atau blog
versi web, tujuan dari pemasangan widget tersebut di halaman blog versi
seluler secara prinsip adalah sama, yaitu untuk mempermudah kita atau
pengunjung mengetahui tingkat popularitas situs berdasarkan perhitungan
dan analisa yang dilakukan oleh Alexa. Namun demikian dari segi
pemasangannya sangatlah berbeda. Bila pemasangan untuk halaman blog
versi web dapat dilakukan langsung dengan menggunakan gadget ‘HTML/Java
Script’ yang telah disediakan oleh Blogger, maka untuk memasangnya di
halaman blog versi seluler hanya dapat dilakukan dengan cara memasang
script untuk widget tersebut ke dalam template blog yang dipakai.
Akan tetapi bila Anda belum memahami tata cara pemasangan widget untuk
halaman blog versi seluler, maka Anda tidak usah khawatir karena dapat
membuka artikel yang berjudul “Cara Memasang Gadget Pada Template Blogspot Versi Seluler” untuk mempelajarinya agar dapat memahami tata cara pemasangan widget pada template untuk halaman blog versi seluler.
Sementara itu untuk pemasangan Alexa Widgets sendiri adalah serupa dengan cara memasang kotak penggemar (like box) pada blog seluler.
Dimana nantinya widget ini akan kita letakkan di bawah bidang posting,
dengan tujuan agar tampilan widget tidak mengganggu ‘pemandangan’
pengunjung yang membuka blog yang kita kelola, karena tujuan utama
pengunjung membuka halaman blog kita tentunya adalah untuk melihat dan
membaca konten artikel yang ada. Dan selanjutnya bila Anda ingin
memasang Alexa Widget di halaman blog untuk tampilan mobile, maka Anda
dapat mengerjakan langkah-langkah di bawah ini.
- Buka http://www.alexa.com/siteowners/widgets
untuk mendapatkan kode widget sesuai dengan jenis widget yang akan Anda
pasang. Misalnya Alexa Site Stats Button, Alexa Traffic Rank Button,
ataukah Alexa Traffic Graph.
- Bila Anda sudah mendapatkan kode untuk widget yang akan dipasang, maka login ke akun Blogger Anda.
- Pada ‘Dasbor Blogger’ klik nama blog Anda dan kemudian klik menu ‘Template’.
- Klik tombol ‘Edit HTML’ kemudian klik tombol ‘Lanjutkan’.
- Centang pilihan ‘Expand Template Widget’.
Cari kode <b:includable id='mobile-main' var='top'>, dan kemudian sisipkan tepat di atas kode </div> yang terletak diantara kode <b:includable id='mobile-main' var='top'> dan </b:includable> seperti pada contoh di bawah ini.
<b:includable id='mobile-main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
<a href="http://www.alexa.com/siteinfo/www.eltelu.blogspot.com"><script type='text/javascript' language='javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=www.eltelu.blogspot.com'></script></a>
</div>
<b:include name='mobile-nextprev'/>
</b:includable>
- Simpan template Anda.
Namun demikian bila Anda ingin ‘mempercantik’ tampilan widget, maka Anda
dapat menambahkan bingkai diantara kode Alexa Widgets tersebut. Sebagai
contoh perhatikan rangkaian kode di bawah ini.
<b:includable id='mobile-main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
<div style="-moz-border-radius: 7px 7px 7px 7px; background-color: inherit; border: 1px solid rgb(33, 33, 33); height: auto; margin: 0px; overflow: auto; padding: 0px; text-align: center; width: auto;" >
<a href="http://www.alexa.com/siteinfo/www.eltelu.blogspot.com"><script type='text/javascript' language='javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=www.eltelu.blogspot.com'></script></a>
</div>
</div>
<b:include name='mobile-nextprev'/>
</b:includable>
Sehingga hasilnya bila halaman blog dibuka dengan memakai perangkat
seluler, maka sebagai contohnya adalah seperti yang tampak pada gambar
di bawah ini.
Screenshot: eltelu.blogspot.com
Sebagai catatan, bila warna garis dan latar untuk bingkai belum sesuai
dengan keinginan Anda, maka warna garis dapat disesuaikan dengan
mengganti kode rgb(33, 33, 33); dan warna latar dapat diubah dengan cara mengganti inherit; dengan kode kode warna yang tepat.