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.
Perihal: Cara Memasang Widget Alexa Traffic Rank, Traffic Graph, Atau Site Stats Button Di Blog Seluler
0 komentar:
Posting Komentar