Cara Memasang Widget Alexa Traffic Rank, Traffic Graph, Atau Site Stats Button Di Blog Seluler

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.

1. 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.
2. Bila Anda sudah mendapatkan kode untuk widget yang akan dipasang, maka login ke akun Blogger Anda.
3. Pada ‘Dasbor Blogger’ klik nama blog Anda dan kemudian klik menu ‘Template’.
4. Klik tombol ‘Edit HTML’ kemudian klik tombol ‘Lanjutkan’.
5. Centang pilihan ‘Expand Template Widget’.
6. Cari kode , dan kemudian sisipkan tepat di atas kode

yang terletak diantara kode dan seperti pada contoh di bawah ini.

<b:includable id='mobile-main' var='top'>
    
    <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'>
    
    <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.

Sumber: