Selasa, 29 Mei 2012

Memasang Widget Blogger Follow Button Pada Blogspot Versi Mobile

Ilustrasi Tombol Follow Blogger
Sebagai seorang pengguna internet aktif sekaligus pengelola sebuah blog, tidak jarang saya menggunakan perangkat seluler dalam mengakses internet, dalam hal ini adalah telepon seluler yang lebih populer disebut dengan istilah ponsel atau HP untuk melakukan kegiatan browsing maupun blogwalking. Pengalaman browsing dengan menggunakan ponsel memang tidaklah semudah seperti bila menggunakan komputer, karena sebuah situs atau blog akan ditampilkan dengan tampilan serba minimalis. Salah satunya adalah dengan tidak dimunculkannya berbagai widget yang umumnya akan tampil bila dibuka dengan menggunakan komputer, termasuk diantaranya adalah gadget Google Friend Connect yang dapat digunakan untuk mem-follow atau mengikuti sebuah blog.

Seringkali saya merasa kesulitan ketika ingin mem-follow atau mengikuti sebuah blog yang saya buka dengan memakai perangkat seluler, karena untuk mengeklik tombol follow terpaksa harus membuka situs atau blog tersebut dalam tampilan web. Belum lagi bila ternyata loading atau penayangan halaman blog cukup berat, yang akhirnya akan semakin mempersulit lagi ketika ingin mengeklik tombol follow yang terdapat pada blog tersebut.

Atas dasar inilah akhirnya saya berpikir bukankah akan lebih baik bila tombol follow Blogger ini juga ditampilkan di blog versi seluler, sehingga akhirnya nanti akan mempermudah pengunjung yang memakai perangkat seluler dalam mengakses halaman blog untuk mem-follow atau mengikuti blog yang dimaksud. Kemudian saya pun berinisiatif untuk memasang Blogger Folow Button di halaman versi seluler dari blog ini, dengan harapan bila ada yang ingin mem-follow atau mengikuti blog ini, maka yang bersangkutan tinggal mengeklik tombol follow yang ditampilkan di halaman blog versi mobile, dan tidak perlu repot-repot menampilkannya dalam tampilan web.
Nah, terkait dengan pemasangan widget Blogger Follow Button pada blog versi mobile atau tampilan seluler, bila Anda juga ingin menerapkannya di blog yang Anda kelola, maka langkah-langkahnya adalah serupa dengan cara memasang tombol follow Twitter pada blog versi seluler dan juga serupa dengan cara memasang tombol like untuk Facebook Fan Page pada blog seluler, seperti di bawah ini.
  1. Login ke akun Blogger Anda.
  2. Pada ‘Dasbor Blogger’ klik nama blog Anda dan kemudian klik menu ‘Template’.
  3. Klik tombol ‘Edit HTML’ kemudian klik tombol ‘Lanjutkan’.
  4. Centang pilihan ‘Expand Template Widget’.
  5. Cari kode <b:includable id='mobile-main' var='top'>
  6. Kemudian perhatikan bahwa di bawah kode tersebut terdapat kode <div class='blog-posts hfeed'>. Nah, sisipkan kode berikut ini tepat di bawahnya.
    <a href="http://www.blogger.com/follow-blog.g?blogID=944413042420217262" target="_blank"><img src="https://lh4.googleusercontent.com/-w9eYnIbsNVo/T5A9BGa7r0I/AAAAAAAAAbI/J0EE4Y502lY/s800/Tombol%2520Follow%2520Blogger.PNG"/></a>
    Catatan: Sebelum template disimpan, ganti terlebih dulu 944413042420217262 dengan ID blog Anda.
  7. Simpan template Anda.

Sehingga akhirnya bila halaman blog dibuka dengan memakai perangkat seluler, maka Blogger Follow Button akan tampil seperti yang tampak pada gambar di bawah ini.
Tampilan Tombol Follow Blogger Pada Blog Seluler
Screenshot: eltelu.blogspot.com

Namun bila Anda ingin memasang Blogger Follow Button, Twitter Follow Button, dan Facebook Like Button sekaligus, maka Anda dapat menggunakan kode di bawah ini sebagai pengganti kode yang terdapat pada langkah nomor 6 (enam).
<div style='-moz-border-radius: 7px 7px 7px 7px; background-color: #599ad6; border: 1px solid rgb(33, 33, 33); height: auto; margin: 0px; overflow: auto; padding: 4px; text-align: center; width: auto;'>
<a href='http://www.blogger.com/follow-blog.g?blogID=944413042420217262' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRP5N5jrwt1WMNTH2Ov06Abaivscgd2JeL80vzIUGNgpy1Yo5kbdB7pP-R7hxkrH8ny_b-TwWzjCVTmhS75g7ztUSZe4AvmS6QH6RvczbW5Qv7-B5CJdldsJWMHJdW0iIbiVjGiY9oJGs/s800/Tombol%2520Follow%2520Blogger.PNG'/></a> <a class='twitter-follow-button' data-lang='id' data-show-count='false' data-show-screen-name='false' href='https://twitter.com/semarbingung'>Ikuti @semarbingung</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fsemarbingungweblog&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=20' style='border:none; overflow:hidden; width:85px; height:20px;'/>
</div>
Catatan:

Tidak ada komentar:

Posting Komentar