Ada yang baru pada tampilan dasbor blogger yang lama tidak saya sentuh, yaitu tambahan menu baru pada samping kiri halaman dasbor. Menu tersebut adalah Kampanye. Maksudnya apa ya menu kampanye ini, pertama sempat bingung apakah menu kampanye ini menggantikan menu Penghasilan atau bagaimana? Saya kira jika blog masih baru maka menu Penghasilan tidak muncul dan sebagai gantinya ditampilkanlah menu Kampanye.

Ternyata setelah 6 bulan berlalu saya tunggu-tunggu menu Kampanye masih saja hadir menghiasi dasbor blogger dan menu Penghasilan yang ditunggu masih saja tidak muncul. Setelah cari referensi disana sini akhirnya dapat informasi jika menu Penghasilan bisa dimunculkan dengan mengganti setelan bahasa menjadi bahasa inggris. Lalu apa maksud dan fungsi dari menu Kampanye ini?

Menu Kampanye adalah sistem periklanan yang disediakan oleh Google untuk meningkatkan pengunjung dan mempromosikan blog kita. Ada tiga step Kampanye pada ilustrasi di dasbor, yaitu membuat iklan kemudian orang-orang dapat melihat blog kita di Google dan akhirnya meningkatkan pengunjung blog. Inti dari menu Kampanye ini adalah program Adwords dari Google.

Google Adwords adalah salah satu produk periklanan Google yang berbasis kata kunci (keyword). Artinya blog kita akan muncul pada hasil pencarian Google dengan kata kunci tertentu. Dengan demikian orang-orang akan melihat blog kita dan tertarik untuk mengunjungi blog dan membaca artikel yanga da pada blog.

Tampilan Menu kampanye Pada Blogger

Berikut ini step by step menu Kampanye pada Blogger :

1. Membuat Iklan

Ini adalah step awal kampanye blog. Dengan membuat iklan kita bisa memberitahukan blog kita kepada orang lain. Iklan menceritakan tentang blog kita dan bagaimana iklan itu muncul pada pencarian Google.

Contoh Iklan pada Google

Sistem ini terkait dengan program Google Adwords, artinya iklan kita akan muncul pada saat pengguna melakukan pencarian dengan kata kunci tertentu. Iklan yang muncul akan diberi keterangan tambahan berupa iklan.

2. Orang-orang Melihat Blog Anda di Google

Dengan memasang iklan maka blog kita akan muncul pada hasil pencarian Google. Hal ini membuat orang-orang yang melakukan pencarian di Google dapat melihat informasi tentang blog kita. Jika apa yang kita sampaikan melalui iklan dapat menarik minat pengunjung maka iklan kita akan di klik dan akhirnya orang-orang dapat mengunjungi blog kita.

Ada tiga opsi jaringan perikalanan untuk orang-orang melhat blog kita di Google yaitu Hanya Jaringan Penelusuran, Hanya Display Network dan Jaringan Penelusuran dengan Display Select. Dengan opsi ini maka kita bisa atur kemunculan iklan selain pada hasil pencarian kita juga diberikan opsi untuk menampilkan iklan pada jaringan periklanan Google lainnya seperti Youtube, Mail, Aplikasi dan lainnya.

3. Anda Mendapatkan Lebih banyak Pembaca

Dengan tampilnya iklan kita di jaringan periklanan Google dan dilihat banyak orang tentu peluang untuk mendapatkan lebih banyak pembaca akan terbuka lebar. Blog kita akan lebih banyak pengunjung dan akhirnya artikel pada blog kita akan lebih banyak pembaca jika iklan kita di klik oleg pengunjung layanan Google seperti mesin pencari, youtube. mail dan lainnya.

Pengunjung blog ini adalah aset bagi pemilik blog karena dengan banyaknya pengunjung akan mempopulerkan blog dan jika memang blog tersebut berkualitas maka selanjutnya pengunjung dimungkinkan untuk datang lagi pada lain waktu.

Itulas sedikit ulasan tentang menu Kampanye pada Blogger semoga memberi gambaran tentang cara meningkatkan pengunjung dan pembaca blog kita.

Alexa sebagai layanan webmaster menyediakan beberapa fitur seperti yang terkenal adalah alexa rank. Sebagai pengelola blog kita bisa menggunakan fitur selain alexa rank seperti fitur claim situs. Fitur ini membuat kita terverifikasi sebagai pemilik blog atau website. Dengan mengklaim situs, kita bisa mendapatkan data-data penting seperti pengunjung, minat, kata kunci, situs backlink dan sebagainya.

Untuk mengklaim situs pada alexa sebenarnya bisa dilakukan secara mudah dan tidak perlu upgrade ke akun yang pro. Yang dibutuhkan adalah sebuah alamat email untuk mendaftar alexa. Setelah terdaftar kita bisa login dan mulai mengklaim situs atau blog kita. Jumlah blog atau website yang bisa diklaim tidak harus satu, bisa lebih. Saya sendiri telah mengklaim beberapa blog saya dengan cepat dan mudah.

Berikut ini cara mudah claim situs di alexa :

1. Pastikan kita sudah terdaftar di Alexa, jika belum daftar dulu dialamat //www.alexa.com/register?resource=%2Fsecure%2Flogin.
   
2. Silahkan isi alamat email lalu klik tombol Create dan ikuti proses pendaftaran sampai selesai.
3. Jika sudah terdaftar langsung saja login di alamat //www.alexa.com/secure/login?resource=%252Fsecure%252Flogin.
   
4. Silahkan isi dengan alamat email dan password sesuai saat pendaftaran lalu klik tombol Sign in.
5. Karena pada halaman dasbor Alexa tidak terdapat link untuk claim situs, jadi lebih mudahnya silahkan langsung klik link ini saja, //www.alexa.com/siteowners/claim.
   
6. Isi site URL dengan nama blog yang akan di claim lalu klik continue.
7. Selanjutnya kita akan diminta untuk memilih metode verifikasi situs, silahkan pilih saja yang nomor dua karena relatif mudah untuk blog.
   
8. Akan muncul kode verifikasi disebelah bawah yang harus kita taruh pada blog kita.
   
9. Silahkan kopi kode tersebut dan jangan tutup dulu window alexa-nya.
10. Silahkan buka tab baru untuk menaruh kode pada blog misalnya pada blogger klik Template pilih Edit HTML lalu taruh kode tersebut dibawah <head> diantara kode <meta …/> yang lain. Lebih jelas lihat contoh berikut ini :
    
11. Simpan halaman lalu buka kembali window alexa-nya.
12. Silahkan klik tombol Verify myID untuk mulai proses verifikasi blog.
13. Jika berhasil akan muncul notifikasi “Your Site Successfully Claimed“.
    
14. Sampai disini langkah claim situs di Alexa telah selesai dan situs blog kita telah berhasil di claim.

Beberapa kabar mengatakan kalau Claim situs di Alexa akan melangsingkan peringkat Alexa sebuah blog. Hal inii sudah pernah saya bahas pada artikel tentang 7 mitos Alexa yang ternyata tidak benar. Memang untuk situs baru yang sudah banyak pengunjung, claim situs bisa mempercepat proses indeks rangking oleh alexa namun tidak mempengaruhi rangking. Tanpa diklaim sekalipun peringkat Alexa akan ramping dengan sendirinya jika memang blog berkualitas.

Halaman peta situs atau yang dalam bahasa inggris disebut dengan sitemap adalah sebuah halaman yang berisi peta atau jalur menuju semua artikel yang ada pada sebuah blog. Fungsi peta situs mirip dengan daftar isi pada buku. Dengan peta situs diharapkan pengunjung dapat menemukan dan mengakses seluruh artikel yang ada pada blog.

Untuk membuat sebuah halaman peta situs kita menggunakan format halaman statis atau static page seperti saat membuat halaman kontak kami yang dijelaskan pada artikel selanjutnya. Membuat halaman situs yang dimaksud disini adalah membuat halaman yang secara otomatis bisa menampilkan keseluruhan artikel pada blog. Jadi kita tidak perlu memasukkan judul artikel satu persatu ke dalam halaman peta situs.

Halaman peta situs atau sitemap berfungsi untuk mempermudah navigasi didalam blog. Dengan halaman peta situs diharapkan pengunjung tidak “tersesat” ketika mengunjungi blog kita karena sudah memegang “peta”. Halaman peta situs juga berfungsi mempermudah mesin pencari saat mengindeks artikel yang ada pada suatu blog, jadi peta situs juga berfungsi mengarahkan crawler dari mesin pencari agar tidak “tersesat” pada blog kita.

Cara membuat halaman peta situs pada blogger atau blogspot sebenarnya sangat mudah. Kita cukup membuat script yang menampilkan semua judul artikel secara otomatis memanfaatkan fitur umpan artikel (feed) yang tersedia. Script tersebut kita buat dalam format javascript dengan beberapa kode CSS untuk mempercatik tampilan.

Berikut ini cara membuat halaman peta situs pada blogger/ blogspot:

1. Buat halaman baru dengan cara klik menu Laman lalu klik Laman Baru.
   
2. Beri judul halaman baru tersebut dengan nama Peta Situs.
3. Klik tab HTML untuk mengubah mode teks editor.
   
4. Taruh kode berikut ini pada isi halaman.

    <style type="text/css">  
    #toc{  
    width:99%;  
    margin:5px auto;  
    border:1px solid #2D96DF;  
    -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);  
    -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);  
    box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);  
    }  
    .labl{  
    color:#FF5F00;  
    font-weight:bold;  
    margin:0 -5px;  
    padding:1px 0 2px 11px;  
    background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);  
    background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));  
    border:1px solid #2D96DF;  
    border-radius:4px;-moz-border-radius:4px;  
    -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;  
    -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;  
    }  
    .labl a{  
    color:#fff;  
    }  
    .labl:first-letter{t  
    ext-transform:uppercase;  
    }  
    .new{  
    color:#FF5F00;  
    font-weight:bold;  
    font-style:italic;  
    }  
    .postname{  
    font-weight:normal;  
    margin-left: 20px;  
    background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);  
    background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));  
    }  
    .postname li{  
    border-bottom: #ddd 1px dotted;  
    margin-right:5px  
    }  
      
    </style>  
      
    <br />  
    <div id="toc">  
    <script src="//googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>  
    <script src="//www.nulis-ilmu.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">  
    </script></div>  
   

   Note : Ganti alamat //www.nulis-ilmu.blogspot.com dengan nama blog anda.

5. Setelah selesai langsung saja klik Publikasikan.
6. Halaman Peta situs akan dipublikasikan dengan alamat URL p/peta-situs.html.
7. Silahkan tambahkan link menuju halaman peta situs tersebut pada menu.
8. Berikut ini contoh tampilan halaman peta situs pada blog nulis-ilmu ini:
   
9. Saat kita buka halaman peta situs ini memang agak sedikit lambat dikarenakan proses mengindeks semua halaman yang ada pada blog membutuhkan waktu yang relatif lama tergantung dari banyaknya artikel dan kecepatan jaringan internet yang kita pakai.

Demikian cara membuat halaman peta situs pada blogger/blogspot. Untuk menyesuaikan tampilan pada blog masing-masing silahkan edit saja kode CSS yang ada didalam halaman peta situs tadi, atur padding, margin, warna dan sebagainya menurut selera masing-masing.

Salah satu kelengkapan sebuah blog adalah adanya halaman kontak. Khusus untuk blog dengan platform blogger atau blogspot kita bisa membuat halaman kontak dengan cukup mudah menggunakan widget kontak form. Sebetulnya widget kontak form ini bisa ditaruh dimana saja sebagai widget seperti disamping atau dibawah, namun kebanyakan blogger menginginkan halaman kontak yang dibuat tersendiri.

Halaman kontak merupakan sarana komunikasi pengunjung dengan admin blog selain komentar. Dengan mengirim pesan menggunakan halaman kontak maka apa yang disampaikan akan bersifat rahasia dan tidak dibaca oleh umum. Hal ini dilakukan jika ingin bertanya tentang sesuatu yang pribadi atau hal-hal yang tidak pantas untuk konsumsi pembaca umum. Halaman kontak dianggap salah satu kelengkapan sebuah blog selain halaman tetang kami, privacy policy, peta situs dan disclaimer.

Berikut ini step by step membuat halaman kontak pada blogger menggunakan widget kontak form :

1. Klik Tata Letak pada menu kiri lalu Tambahkan Gadget disembarang lokasi (bebas).
   
2. Pada halaman Tambahkan Gadget pilih Gadget Lainnya Lalu pilih Formulir Kontak.
   
3. Simpan tata letak dengan klik Simpan Setelan.
4. Buat halaman baru dengan cara klik menu Laman lalu Klik Laman Baru.
   
5. Isi kode berikut pada Halaman baru :

   <form name="contact-form">
   <p></p>
   Nama
   <br>
   <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text">
   <p></p>
   Email
   <span style="font-weight: bolder;">*</span>
   <br>
   <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text">
   <p></p>
   Message
   <span style="font-weight: bolder;">*</span>
   <br>
   <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
   <p></p>
   <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button">
   <p></p>
   <div style="text-align: center; max-width: 222px; width: 100%">
   <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
   <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
   </div>
   </form>

   Note : Untuk mengkopi kode diatas silahkan klik view plain lalu kopi kode yang muncul

6. Berikut ini contoh tampilan kode html halaman kontak kami.
   
7. Atur opsi jangan ijinkan komentar lalu Publikasikan halaman.
8. Klik Menu Template lalu pilih Edit HTML.
   
9. Klik Lompat ke Widget Contactform1.
   
10. Hapus kode diantara <b:includable id=’main’> dan </b:includable> didalam widget ContactForm1.
    
11. Jika benar akan tampil seperti ini:
    
12. Cari kode ]]></b:skin> kemudian tambahkan kode dibawah ini tepat diatas kode ]]></b:skin>.

     .contact-form-name, .contact-form-email { max-width: 200px; width: 100%; } .contact-form-email-message { max-width: 400px; width: 100%; height: 150px; } 
    

13. Perhatikan contoh berikut ini:
    
14. Simpan template dan halaman kontak kami telah berhasil dibuat.
15. Selanjutnya tinggal menambahkan link ke halaman Kontak kami pada menu. Caranya dengan dengan menambahkan link p/kontak-kami.html pada menu.

Sebuah blog yang responsive akan mampu menyesuaikan ukuran layar pada browser komputer klien secara dinamis. Untuk mengecek sebuah blog responsive atau tidak sebenarnya cukup mudah yaitu melalui browser pada komputer. Mengapa komputer, karena ukuran layar komputer dianggap memiliki resolusi lebih besar dibanding dengan table atau smartphone.

Selain itu kita juga bisa mengecek responsive blog dengan tool yang menyediakan simulasi ukuran layar beberapa perangkat. Cara ini lebih spesifik dan bisa menjadi acuan bagi kita untuk melihat bagaimana atampilan blog saat diakses melalui perangkat lain seperti smartphone atau tablet.

Mengecek Responsive Blog Dengan Resize Layar Monitor

Mengecek responsive blog bisa dilakukan dengan mengubah ukuran layar pada komputer atau istilah umumnya dengan meresize layar. Caranya adalah ubah mode layar dari maximize ke mode resizeable dengan klik icon resizeable.

Kemudian ubahlah ukuran lebar layar menjadi lebih kecil dan pastikan tata letak halaman blog tampak secara dinamis mengikuti perubahan ukuran layar. Untuk lebih jelas perhatikan beberapa gambar berikut ini :

Tampilan blog saat layar lebar

Tampilan blog saat layar lebih sempit

Mengecek Responsive Blog Dengan Responsivetest

Kelemahan dari mengecek responsive dengan memperkecil ukuran layar komputer adalah kita tidak bisa mengecek dengan pasti tampilan-tampilan pada smartphone atau tablet. untuk itu kita bisa menggunakan tool untuk mengecek responsive blog yang disediakan oleh //responsivetest.net. Pada halaman pengecekan tinggal kita masukkan saja alamat blog atau website yang akan dicek di kolom URL kemudian tekan enter untuk merender halaman.

Tampilan responsivetest ukuran 1024×768

Akan muncul tampilan blog dengan ukuran standar 1024×768 yang merupakan ukuran rata-rata layar komputer bukan wide screen. Kita bisa mengubah mode tampilan untuk jenis-jenis gadget seperti smartphone dan tablet dengan beberapa pilihan type layar seperti Iphone dan Ipad. Jika sebuah blog responsive maka tampilan blog akan mampu menyesuaikan ukuran layar perangkat yang disetel.

Seperti contoh berikut ini misalnya saat saya set ukuran layar menjadi ukuran smartphone 320×480 maka tampilan blog nulis-ilmu yang responsive mampu perubahan ukuran layar dengan menghilangkan menu dan diganti dengan dropdown menu seperti berikut ini.

Tampilan responsivetest ukuran 320×480

Kesimpulannya sebuah blog dianggap responsive jika mampu menata ulang tata letaknya secara dinamis mengikuti ukuran browser pada layar perangkat yang mengaksesnya. Dengan semakin banyaknya jenis-jenis perangkat mobile saat ini sudah menjadi keharusan agar blog kita menggunakan template yang responsive. Jika tidak maka lambat laun blog kita akan ketinggalan zaman dan ditinggalkan pengunjung.

Saat memilih dan mencari template untuk blog ini saya mendapati sebuah istilah yang benar-benar baru bagi saya yaitu Responsive. Saat itu saya membaca sebuah artikel bahwa salah satu syarat template blog yang baik adalah template yang responsive. Maksud dari kata Responsive disini artinya tampilan blog harus bisa merespon terhadap kondisi layar dari browser pada perangkat klien.

Istilah Responsive web design pertama kali muncul dalam sebuah artikel tulisan Ethan Marcotte yang bisa dibaca di alamat //www.alistapart.com/articles/responsive-web-design. Dalam tulisannya Marcotte menjelaskan beberapa teknik layar fleksibel yang ada seperti fleksibel layout, fleksibel image dan media kueri. Perpaduan ketiga teknik ini kemudian yang disebut dengan teknik Responsive Web Design.

Istilah Responsive semakin populer seiring dengan perkembangan gadget seperti smartphone dan tablet. Berbagai ukuran layar perangkat membuat tampilan blog harus bisa berubah bentuk mengikuti ukuran layar. Sebuah blog yang responsive akan unggul pada mesin pencari ketika diakses melalui sebuah perangkat tertentu.

Pengertian Responsive Design

Responsive Design adalah sebuah teknik pengaturan tampilan (dalam hal ini khusus pada kode CSS) yang membuat layout website bisa beradaptasi dengan tampilan browser pada perangkat klien. Yang dimaksud dengan tampilan adalah ukuran dan orientasi layar. Misalnya layar komputer memiliki resolusi 1366×768 atau 1024×768, layar tablet memiliki ukuran 640×480 dan layar smartphone yang memiliki bervariasi seperti 240×320 dan 320×480.

Sebuah blog yang responsive akan mampu menyusun tata letak tampilannya mengikuti lebar layar. Jadi pengguna tidak perlu scrol atau geser posisi view layar ke samping kanan dan kiri untuk membuka semua bagian halaman blog tersebut. Dengan cara ini diharapkan kenyamanan pengguna dalam mengakses blog menjadi prioritas sehingga meningkatkan reputasi blog tersebut.

Memilih Template yang Responsive

Sebuah template yang responsive artinya sudah “dipersenjatai” dengan fitur responsive oleh pembuatnya. Kita bisa mencari template yang responsive dengan menggunakan kata kunci template responsive. Seiring dengan semakin populernya fitur responsive banyak pembuat template yang membuat versi responsive dari template yang sudah ada seperti misalnya template TruPixel yang saya gunakan saat menulis artikel ini.

Contoh template responsive Sang SEO

Template yang responsive dapat dilihat dari kode CSS-nya yang berisi pilihan tampilan berdasarkan ukuran layar seperti penggunaan kode @media screen dan @media min width untuk mendeteksi ukuran lebar layar perangkat browser. Untuk mengujinya kita bisa coba akses dari beberapa perangkat gadget yang berbeda atau sekesar meresize ukuran window browser pada komputer.

Pengaruh Responsive Design Terhadap SEO

Responsive atau tidaknya sebuah blog akan mempengaruhi kenyamanan pengguna dalam mengakses blog tersebut. Oleh karena itu faktor responsive juga mempengaruhi penilaian dan menjadi salah satu syarat kaidah SEO pada blog. Blog yang responsive akan unggul pada pencarian yang diakses pada semua perangkat.

Misalnya ada dua buah blog dengan isi yang relatif sama dan menggunakan kaidah-kaidah SEO yang berimbang maka blog yang responsive akan unggul pada peringkat pencarian. Hal inilah salah satu yang membuat pentingnya fitur responsive pada blog kita jika tidak mau ketinggalan dengan perkembangan dunia internet.