Cara Memperbanyak Klik Artikel & Meningkatkan Pageview

Banyak cara untuk meningkatkan pageview dan memperbanyak klik artikel di blog. Salah satu cara yang mungkin belum pernah dicoba adalah dengan membuat desain yang menarik perhatian pengunjung. Tampilan artikel terkait yang menonjol dan menggoda. Mungkin Anda sudah memperhatikan pada bagian bawah, dia bagian bawah khusus bagian artikel terkait/ related post. Pada bagian itu nampak terlihat list artikel terkait bergerak-gerak, bergoyang sambil sedikit zoom in dan zoom out. Lalu bagaimana caranya supaya tampilan artikel menarik perhatian seperti itu? Jawabnya adalah dengan menambahkan sedikit kode css. Dan sebenarnya kode css bergoyang ini bisa diterapkan di mana saja. Bukan hanya pada bagian artikel terkait tapi pada bagian-bagian lain seperti kotak berlangganan, kotak komentar, dan sebagainya. Kode ini akan membuat bagian tersebut bergerak-gerak sendiri walau tanpa mengarahkan mouse. Sehingga menarik perhatian dan menggoda pengunjung untuk mengklik, berlangganan dan seterusnya.

Memperbanyak Klik Artikel Terkait dengan CSS Menarik

Meskipun kode CSS ini bisa diterapkan ke bagian manapun dari blog Anda, namun pada kesempatan kali ini saya akan memberi contoh untuk menerapkannya pada bagian artikel terkait. Dengan tujuan untuk menarik perhatian pengunjung, memperbanyak klik artikel terkait dan akhirnya meningkatkan pageview blog Anda. Adapun caranya titdak begitu susah, yang perlu Anda lakukan adalah menyisipkan class “dvs_cirigih” pada kode related post yang sudah ada. Lihat juga cara membuat artikel berkaitan

1. Tambahkan kode CSS unik ini pada stylesheet (CSS) theme yang sudah Ada:

   @-webkit-keyframes bump {
   0%{top:0}
   5%{top:3px;background:#e7f3f0;-webkit-transform:scale(1) rotate(0.5deg)}
   10%{top:0;-webkit-transform:scale(1) rotate(-0.5deg)}
   100%{top:0;-webkit-transform:scale(1) rotate(0.5deg)}
   }
   @-o-keyframes bump {
   0%{top:0}
   5%{top:3px;background:#e7f3f0;-o-transform:scale(1) rotate(0.5deg)}
   10%{top:0;-o-transform:scale(1) rotate(-0.5deg)}
   100%{top:0;-o-transform:scale(1) rotate(0.5deg)}
   }
   @-moz-keyframes bump {
   0%{top:0}
   5%{top:3px;background:#e7f3f0;-moz-transform:scale(1) rotate(0.5deg)}
   10%{top:0;-moz-transform:scale(1) rotate(-0.5deg)}
   100%{top:0;-moz-transform:scale(1) rotate(0.5deg)}
   }
   @keyframes bump {
   0%{top:0}
   5%{top:3px;background:#e7f3f0;transform:scale(1) rotate(0.5deg)}
   10%{top:0;transform:scale(1) rotate(-0.5deg)}
   100%{top:0;transform:scale(1) rotate(0.5deg)}
   }
   .cirigih {-webkit-animation:bump 5s linear 0s infinite normal;position:relative;-moz-animation:bump 5s linear 0s infinite normal;-o-animation:bump 5s linear 0s infinite normal;animation:bump 5s linear 0s infinite normal;}
   

   Update: jika dulu prefix vendor untuk css seperti -moz (Firefox), -ms (Internet Explorer), dan -webkit (Chrome) masih dalam tahap pengembangan, maka kode di atas sudah valid demi kompatibilitas semua browser. Tapi untuk saat ini browser sudah seragam menterjemahkan property transform, animation, keyframe dan lainnya. Sehingga penulisan kode bisa lebih sederhana dan singkat menjadi:

   @keyframes bump {
   0%{top:0}
   5%{top:3px;background:#e7f3f0;transform:scale(1) rotate(0.5deg)}
   10%{top:0;transform:scale(1) rotate(-0.5deg)}
   100%{top:0;transform:scale(1) rotate(0.5deg)}
   }
   .cirigih {animation:bump 5s linear 0s infinite normal;}
   

2. Pada bagian itu nampak class baru (.dvs_cirigih), maka tambahkan kode itu pada bagian DIV artikel terkait / related post yang sudah ada.
3. Silahkan cari dan temukan bagian related post dan tambahkan class “dvs_cirigih” seperti berikut:
   
.... <div class="related_posts"> menjadi:
.... <div class="related_posts dvs_cirigih">
   Catatan: kode related_posts pada contoh di atas mungkin tidak sama dengan kode related post pada css theme Anda. Jadi pastikan Anda menemukannya dengan benar. Lihat Contoh hasil trik ini seperti artikel berkaitan pada blog ini.

Cukup mudah dengan 3 langkah saja bukan? Anda juga bisa membuat penyesuaian dan merubah kode css di atas supaya animasi dan goyangannya berbeda. Misalnya ingin merubah background (background:#e7f3f0), merubah lama durasi animasi (bump 5s linear 0), membuat zoom in (out) lebih besar dan seterusnya. Dan tidak perlu bingun memilih diantara 2 kode css di atas karena pada dasarnya kodenya bisa berjalan di semua browser. Mudah-mudahan dengan tips ini bisa memperbanyak klik artikel terkait dan meningkatkan pageview blog Anda. Dan ingat, jika Anda sudah paham dengan ini Anda juga sebenarnya bisa menerapkan cara yang sama pada bagian-bagian lain blog Anda seperti kotak komentar, tombol berlangganan, dan sebagainya. Demikian, semoga bermanfaat dan selamat mencoba.