Selasa, 21 Maret 2017

4 Tema Baru Untuk Blogger Dirilis Secara Official. Dijamin Keren!

Memang menurut saya hal yang masih kurang di blogger adalah dalam hal tampilan dan temanya. Karena hal ini, banyak blogger yang merancang template tanpa mengikuti standar yang ada, sehingga fitur penyesuaian template dan pengaturan layout seringkali tidak bisa menyesuaikan dengan fitur template yang telah dibuat.

Saya sangat senang, hari ini blogger sudah mulai aktif berinovasi kembali. Setelah template dinamis yang sebelumnya diusung ternyata tidak selaris yang diharapkan, kali ini Blogger kembali menyajikan muka template baru. Totalnya ada 4 buah template baru dengan masing-masing varian warna yang berbeda, antara lain:

  • Contempo;
  • Soho;
  • Emporio; dan
  • Notable.



Setiap template memiliki keunikan yang berbeda-beda. Sama halnya dengan template-template ini. Berikut ulasan yang kami kutip dari blog official Blogger:

Contempo
Bagus untuk berbagi foto dan juga untuk berbagi sebuah cerita, Contempo menempatkan, sentuhan modern segar pada banyak petualangan hidup


Soho
Bertampilan lapang dan sederhana, Soho adalah template galeri yang dibangun untuk menampilkan foto terbaru Anda, desain atau renungan dalam cahaya terbaik mereka.


Emporio
Dari proyek ke objek, Emporio dapat mengambil berbagai tulisan dan menampilkan mereka dalam cara yang teratur dan rapi.

Notable
Apakah anda merasa penuh arti atau banyak hal yang ingin dibagi, Notable adalah notepad anda untuk membagikan coretan, cerita, dan banyak lagi.

Sudah mencoba salah satu dari mereka? Yuk, langsung aja dibuka bloggernya. Siapa tahu, template ini cocok untuk niche blog kalian, lho,
Read more

Selasa, 14 Maret 2017

Apakah Atribut Title Berpengaruh Terhadap SEO? Ini Hasil Riset Saya!


Setelah sukses mengoptimalkan SEO pada situs info lomba kepunyaan saya sebelumnya (www.lomba.asia), saya mulai semakin tertarik untuk melakukan eksperimen ulang pada objek yang baru. Maka dari itu, www.competitions.asia saya buat. Selain untuk melakukan ekspansi audien, pembelajaran mengenai SEO juga akan sangat saya perhatikan.

Analisis dari eksperimen sebelumnya menunjukkan bahwa Google mulai merayapi situs secara optimal setelah umur situs 1 bulan. Berikut buktinya saya ambil dari statistic AWStats lomba.asia di kurun waktu 1 bulanan (Oktober - November 2016).




Terlihat bahwa dalam kurun waktu 1 bulan semenjak situs dibuat dan disubmit, trafik mengalami fluktuasi yang tidak begitu memuaskan. Hal ini serupa dengan situs baru saya yang belum juga genap berusia 1 bulan. Bedanya, trafiknya terlihat jauh lebih terpuruk.


Saya analisa, ternyata dalam 1 hari hanya ada beberapa saja jumlah halaman terindeks oleh Google, mungkin antara 1 - 10. Padahal upaya off-page SEO telah saya lakukan lebih rutin daripada situs sebelumnya. Mungkin ini karena faktor off-page SEO akibat banyaknya pesaing di kancah internasional. Memang, situs baru ini saya targetkan untuk audien internasional. Tapi, ada juga sedikit kecurigaan soal on-page SEO yang tidak sengaja terlewatkan. Berikut checklist upaya on-page SEO yang perlu saya lakukan:

  • Membuat struktur heading yang tepat, yaitu judul web dengan h1 dan judul artikel sebagai h2;
  • Membuat description yang baik, dengan memperbanyak keyword target di banyak bagian halaman. Saya yakin, kombinasi kata adalah parameter penentu keccocokan dengan kata kunci yang diketikkan saat mencari informasi di search engine. Misalnya, jika di halaman anda banyak tertulis kombinasi kata info lomba terbaru, maka kemungkinan halaman untuk dapat muncul di halaman pertama dengan keyword tersebut semakin besar;
  • Membuat halaman ber-schema, sehingga terstruktur di mata search engine. Lebih lengkapnya, silahkan browsing di Google mengenai site structured data atau site schema data;
  • Meminimalkan warning dan error di struktur data halaman tersebut; dan yang terlupa adalah...
  • Membuat setiap elemen yang dicrawl lebih informatif. Yaitu dengan menambahkan atribut title di link dan image. Saya juga yakin, nilai title ini dapat digunakan sebagai alat penyumbang kombinasi kata. Jika ingin menargetkan kata kunci mengenai lomba, banyak-banyak gunakan kata ini di atribut title.

Sebelum sadar telah melewatkan hal ini, salah satu hal yang ternyata juga belum saya kerjakan dengan baik adalah poin ketiga. Rupanya, saya lupa menambahkan struktur schema WPHeader, WPSideBar dan WPFooter. Selain ketiga schema ini, saya telah merancang schema Event dengan warning yang sangat saya minimalkan keberadaannya.


Hasilnya akan menunjukkan rich snippet pada hasil pencarian seperti berikut. Percaya atau tidak, rich snippet ini bisa muncul langsung dalam beberapa hari setelah halaman saya mulai saya submit dan bisa terindeks.


Meski terlihat banyak warning, faktanya. Jumlah ini sebenarnya jauh lebih sedikit dibanding situs sebelumnya, lho. Anehnya, situs itu justru bisa merayap menjadi primadona dibandingkan yang baru lahir ini. Setelah saya analisis lebih jauh lagi, ternyata saya baru mulai sadar bahwa telah melewatkan atribut title di semua link.

<a href='http://competitions.asia/event/790/dysphagia-surgical-society'>details</a>

Tentu saja, akhirnya saya mencoba mengupayakan untuk segera menangani masalah ini. Sehingga kenampakan source halaman ber-link akan terlihat lebih informatif.

<a href='http://competitions.asia/event/790/dysphagia-surgical-society' title='Competition detail: Dysphagia Surgical Society'>details</a>

Abra kadabra, hari ini efeknya belum banyak terlihat. Tapi saya sadar betul, bahwa hal ini ternyata dapat meningkatkan daya tarik Google untuk merayapi situs saya.

Jika sebelumnya laman yang dirayapi per hari seringkali tidak sampai 10, hari ini rupanya kenaikan pesat terjadi secara signifikan. Saya ingat betul, kemarin, jumlah laman yang terrayapi masih belum sampai 150, hari ini sudah 200 lebih saja (Lihat screenshot hasil pencarian di atas).

Jadi, dari riset ini saya bisa menyimpulkan bahwa hipotesis yang menyatakan bahwa atribut title dapat mempengaruhi SEO itu 70 % benar adanya. Sisanya, kemungkinan karena efek penambahan schema WPHeader, WPFooter danWPSideBar. Yang membuat saya yakin bahwa atribut title yang lebih memiliki pengaruh adalah karena banyak blog yang saya temui tidak memiliki struktur schema tersebut, namun masih bisa tayang di halaman pertama.

UPDATE:
Kira-kira, setelah 12 jam menulis ini ternyata Google sudah lebih banyak mengindeks halaman-halaman saya. Dari 200, kini sudah hampir mendekati angka 300!



Sekian sharing dari saya. Mudah-mudahan bisa menjadi referensi yang bermanfaat.
Read more

Sabtu, 11 Maret 2017

Cara Membuat Judul Posting Berhuruf Kapital Pada Blogger (3 Baris Kode)


Judul posting blog nolmalnya sesuai dengan saat kita menulis post. Tapi, kadang template yang kita pakai menggunakan pengaturan CSS agar teks judul tampil dalam bentuk khusus, misalnya uppercase(kapital), lowercase(non-kapital) ataupun capitalize(kapital tiap awal kata).


  • Ini judul posting normal (none)
  • INI JUDUL POSTING UPPERCASE (uppercase)
  • ini judul posting lowercase (lowercase)
  • Ini Judul Posting Capitalize (capitalize)

Jika kita mau, kita bisa mengubah judul posting menjadi UPPERCASE hanya dengan 3 baris kode CSS, atau bisa juga ke salah satu bentuk di atas. Caranya mudah, cukup paste kode berikut, tepat di atas </head>. Buka dulu pengaturan template Blogger, pilih edit HTML, lalu temukan kode </head>.

<style>
.post-title {text-transform: uppercase !important;}
</style>

Penting untuk menambahkan kode !important pada atribut set CSS di atas. Ini berguna untuk meng-override pengaturan bawaan template yang sedang digunakan. Dengan !important, artinya kita memaksa pengaturan ini sebagai pengaturan yang penting disamping adanya pengaturan lain.

Sebenarnya bisa juga pengaturan ini bekerja dengan normal tanpa kode tersebut, namun untuk berjaga-jaga, kode ini sengaja di taruh di urutan paling bawah (di atas </body>). Hal ini karena pengaturan yang valid adalah pengaturan yang paling terakhir terbaca oleh engine web browser. Kalaupun di pengaturan lain sudah ada yang memberlakukan catatan !important dengan bentuk teks lain, yang berlaku tetaplah yang ada di bagian terakhir.

O iya, jika ingin style judul postingan selain uppercase, silahkan ubah kode uppercase pada baris kode di atas sendiri. Berikut rekomendasi pilihan yang valid untuk text-transform:

  • uppercase
  • lowercase
  • capitalize
  • none

OK, selamat mencoba.
Read more

Jumat, 10 Maret 2017

Cara Mengetahui Apakah Situs Hoax Atau Legit (3 Langkah Mudah & Pasti)


Internet bisa menjadi ladang rejeki bagi siapa saja orang yang mengetahui ilmunya. Setelah tahu ilmunya, ternyata belum cukup. Kita juga harus tahu, selain sebagai sarana perekonomian yang bersifat positif, internet justru juga bisa menjadi lahan ganja bagi para penipu yang menawarkan keuntungan yang menggiurkan untuk para calon korbannya. Jadi, sebelum terjun untuk beraksi ke target sasaran, pastikan dulu sasaranmu adalah yang benar-benar kamu inginkan. Jangan sampai, kita menginginkan daging sapi, tapi yang kita lakukan adalah membidik ayam.

Cara untuk mengetahui hoax atau legitnya sebuah situs dapat dilakukan dengan 3 langkah. Apa saja ketiga langkah itu?

1. Cari komunitas pengguna / fans-page / forum-nya
Tempat-tempat ini bisa menjadi sumber informasi yang akurat untuk meramalkan kredibilitas sebuah situs. Jika sebuah situs menyediakan forum, sudah hampir bisa dipastikan bahwa ia termasuk situs legit. Jika bukan forum, carilah grup/komunitas penggunanya di facebook, G+, atau situs media sosial lain. Semakin banyak anggotanya, kemungkinan hoaxnya pun semakin tipis. Jika kedua sumber tersebut tidak bisa ditemukan, paling tidak temukan informasi dari fans-page yang mereka miliki. Situs legit pasti akan transparan terhadap semua jenis informasinya. Dari ketiga sumber informasi ini, keberadaan komunitas dan forum adalah hal yang paling mencerminkan kejujuran sebuah situs.

2. Periksa "Janji-Janji"-nya
Kadang, beberapa situs memang bukan situs hoax, namun TOS dan aturan mainnya kurang begitu transparan atau tidak masuk akal. Sebagai contoh, kita dibuat terlena dengan tawaran PTC rate tinggi, tapi ternyata besar minimum payoutnya terlampau besar. Yang jadi masalah, informasi ini disembunyikan dari sepengetahuan user.

3. Lihat di beberapa situs review
Berbekal google, kita bisa menemukan berbagai situs review. Kadang ada yang menunjukkan bukti payout yang telah berhasil dilakukan. Ini bisa menjadi nilai plus dalam menentukan legit/tidaknya sebuah situs. Tapi perlu hati-hati juga dengan komentar para reviewer. Reviewer bisa jadi adalah orang dalam yang mencoba mengangkat nama baik perusahaannya, atau bisa jadi adalah orang luar yang mencoba bersaing dan menjatuhkan nama baik perusahaan lain. Jenis reviewer ini bisa mengelabuhi pengguna dalam memeriksa kebenaran informasi mengenai legit/hoax-nya sebuah situs. Jadi, ada baiknya jika anda melihat lebih dari 1 sumber review.

Yap, itulah tadi 3 langkah mudah mengetahui apakah sebuah situs legit atau hoax. Mudah-mudahan bisa memberikan pencerahan bagi siapa saja yang ingin mendulang emas dai internet.
Read more

Kamis, 09 Maret 2017

Cara Ganti Domain Blogger Tanpa Kehilangan Trafik (Dengan 7 Baris Kode)


Cara mengganti domain bukanlah hal yang sulit. Tapi yang sulit adalah mengganti domain tanpa kehilangan trafik, khususnya yang datang dari mesin pencari.

Kalau sudah yakin tak apalah berharap ganti domain.
Tapi kalau trafik sudah tinggi, perasaan dilema pun akan datang di sini.
Apalagi jika faktanya sebagian besar trafik blog ini berasal dari mesin pencari.
Semua pengunjung kamu nantinya bisa dipastikan akan tersesat, di halaman 404.
Apa boleh buat, blog harus tetap diisi, meski nama domainnya belum sreg di hati.

Eits, jangan kawatir, masalah ini sebenarnya bisa diatasi dengan sangat mudah, kok. Setelah membaca ini kamu akan bisa mengganti domain tanpa kehilangan trafik dari mesin pencari. Simak saja penjelasan singkat yang disajikan berikut ini.

Sebagai contoh, studi kasus ini akan berusaha mengubah domain dari situslama.blogspot.com ke situsbaru.blogspot.com. Untuk melakukan hal ini dengan benar adalah; pertama-tama, ganti domain atau subdomain blog kamu ke situsbaru.blogspot.com saat sepi pengunjung. Cocoknya ya, malam hari kalau situs beraudien lokal. Paling jam 10 sudah banyak yang tidur, kok.

Kemudian buat blog baru dengan nama domain lamamu (situslama.blogspot.com). Kontennya tidak perlu diisi, ya. :D

Sekarang masuk ke edit HTML template blog baru kamu yang sudah diatur sehingga berdomain situslama.blogspot.com. Yang perlu kamu lakukan adalah memasukkan kode berikut tepat di bawah kode tag <head>.

  <script>
  //<![CDATA[
   var u = window.location.href;
   u = u.replace(window.location.host, 'situsbaru.blogspot.com');
   window.location.href = u;
  //]]>
  </script>

Simpan, dan selesai. Mulai dari sini, apabila situslama.blogspot.com diakses, secara otomatis browser akan teralih ke situsbaru.blogspot.com, tapi tetap dengan list konten artikel yang sama seperti sebelumnya.

Bukan cuma homepagenya saja, semua artikel yang memiliki permalink unik dengan alamat basis situslama.blogspot.com pasti akan diarahkan secara otomatis dengan benar.
Contohnya:
situslama.blogspot.com/2017/03/cara-menyembunyikan-link-aktif-pada.html

akan mengarah menuju:
situsbaru.blogspot.com/2017/03/cara-menyembunyikan-link-aktif-pada.html

Tambahan tips opsional ini juga bisa kamu lakukan untuk mempercepat proses pengalihan. Ini karena saat situs lama dibuka, browser harus mengunduh dan memproses seluruh kode HTML sebelum pengalihan dilakukan. Tentu saja ini perlu waktu sedikit lebih lama, karena browser harus melakukan loading 2 kali untuk benar-benar bisa menampilkan konten yang diminta. Untuk itu, baik juga apabila kode template situslama.blogspot.com ini kita sederhanakan scriptnya.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
  <b:skin><![CDATA[]]></b:skin>
  <script>
  //<![CDATA[
   var u = window.location.href;
   u = u.replace(window.location.host, 'situsbaru.blogspot.com');
   window.location.href = u;
  //]]>
  </script>

  </head>

  <body>
 <b:section id='main' name='Main'/>
  </body>
</html>

Paste saja semua kode di atas untuk menggantikan kode template yang lama dari situslama.blogspot.com. Insyaallah ini bisa membantu mempercepat proses pengalihan. Setelah terlihat pengalihan terproses dengan benar, anda juga tidak boleh lupa mensubmit ulang sitemap dan URL ke direktori dan banyak mesin pencari, seperti awal membuat domain. Maaf saja, SEO dari domain lama tidak bisa dengan mudah ikut serta di domain baru. Kecuali untuk Google. Setelah, kita mengkonfirmasikan penggantian domain dari webmasters tools, semua skor reputasi SEO domain lama akan diikutkan secara otomatis olehnya.

Oke, mudah-mudahan artikel ini bermanfaat... :)
Read more

Cara Menyembunyikan Link Aktif Pada Komentar Blogger (Dengan 15 Baris Kode Saja)


Komentar dengan link aktif bisa menurunkan reputasi SEO blog, begitulah kata para bloggers yang sering saya baca. Tapi dari pribadi saya sendiri, hal ini kurang begitu saya akui kebenarannya. Buktinya saja Facebook, Twitter, Instagram dan banyak situs besar lainnya tetap bisa menduduki peringkat atas, meskipun sebagian besar situs di dunia ini menautkannya.

Kalau anda termasuk golongan orang yang percaya hal ini, maka pilihan yang paling tepat adalah segera menghapus komentar semacam ini. Lalu bagaimana jika jumlah pengunjung dan komentar hariannya relatif besar? Tetap, anda harus menghapusnya secara manual. Terkhususnya untuk yang menggunakan platform Blogger. Tidak seperti Wordpress, Blogger tdak memiliki banyak pilihan plugin untuk dipakai. Sebagian besar atribut widget tambahan dibuat dengan Javascript. Termasuk dalam hal menyembunyikan komentar dengan link aktif pada blog.

Lihat Juga : Komentar Blogger Sembunyi Karena Pakai Link Aktif? Tenang, Masih Bisa Terindex

Nah, pada kesempatan kali ini, Komputoo akan menunjukkan serta menjelaskan bagaimana cara menyembunyikan komentar blogger dengan javascript. Sangat cocok bagi kalian yang menginginkan cara instan untuk mengusir spammer secara halus. Perlu diingat ya, meski komentar dengan link aktif ini sudah sembunyi, kita tetap harus menghapusnya secara manual. Kenapa? baca saja postingan yang saya lampirkan di atas.

Di Blogger, seluruh komentar blog tersimpan pada elemen <div> dengan nama atribut id "comment-block", lalu tiap teks komentar yang berhasil diposting akan ditampilkan dalam blok elemen <p>teks komentar</p>. Untuk mendeteksi adanya link aktif pada komentar tersebut, kita akan memeriksa apakah di dalam blok <p> tersebut terdapat tag semacam <a ...>...</a>. Jika iya, langsung saja kita bantai komentar tersebut. Metode inilah yang akan dilakukan oleh script berikut:

<script>
//<![CDATA[
function blockComments() {
    var comments = document.getElementById('comment-holder'),
        content = comments.getElementsByTagName('p');
    for(var i = 0; i < content.length; i++) {
        if(content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "Maaf, dilarang menambahkan link aktif di komentar!";
            content[i].className = "blocked-comment";
        }
    }
}
blockComments();
//]]>
</script>

Masuk ke bagian manajemen Template di Blogger kamu, lalu pilih Edit HTML. Paste kode di atas, tepat di atas </body>. Simpan dan selesai. Sangat mudah! Hasilnya pun tidak diragukan lagi, bro.


Secara detil, fungsi kerja script di atas sangat sederhana lho sebenarnya. Misalnya salah satu komentar berwujud seperti ini:
<p>
   <a href='http://www.numpanglewat.xxx'>numpang lewat</a>
</p>

Setelah script tersebut bekerja, komentar tersebut akan berubah menjadi seperti ini:
<p class='blocked-comment' >
   Maaf, dilarang menambahkan link aktif di komentar!
</p>

Loh, kenapa ada tambahan class='blocked-comment' ?
Ini sebenarnya untuk mempermudah kita jika ingin pesan block komentar tersebut memiliki gaya tertentu, Misalnya, jika ingin teks pesan blokir tersebut berwarna merah, tambahkan script CSS ini di atas </head>. Sisanya, anda bisa menambahkan style lain juga pada script ini.

<style>
   p.blocked-comment {
     color: red;
   }
</style>

Ok, That's all...
Read more

Rabu, 08 Maret 2017

Ingin Namamu Dijadikan Nama Planet Baru? Ikut Kontes Ini!


Sekitar 2 minggu yang lalu, tepatnya pada 22 Februari 2017,  National Aeronautics and Space Administration (NASA) telah berhasil menemukan 7 buah planet asing baru, yang disebut sebagai TRAPIST-1. Diduga ketujuh planet ini memiliki ukuran yang sama dengan ukuran planet kita. Dan, kabar baiknya lagi, 3 di antaranya diperkirakan memiliki suhu yang pas untuk menyimpan air seperti bumi.

Kendati demikian, NASA mengungkapkan bahwa untuk menamai planet baru bukanlah hal yang mudah. Untuk itu, NASA mencoba melirik internet untuk mencari saran dari para netizen mengenai penamaan ketujuh planet baru tersebut. Dalam twitter-nya, NASA sengaja menulis sebuah  tweet dengan tagar #7NamesFor7NewPlanets untuk mendapatkan saran nama yang pas.



Dalam sekejap, tweet ini menjadi viral dengan reaksi yang cukup menarik dari para netizen.
@LuizJa_Sensei :
#7NamesFor7NewPlanets
Vegeta
Goku
Gohan
Trunks
Goten
Bra
Pan

@polaroidjwd:
imagine
being
this
sad
all
the
time
#7NamesFor7NewPlanets

@pirvik:
#7NamesFor7NewPlanets
b-Monday
c-Tuesday
d-Wednesday
e-Thursday
f-Friday
g-Saturday
h-Sunday
@NASA

Punya nama yang lebih bagus daripada yang sudah disarankan oleh para netizen lain? atau mungkin, nama kamu dan beberapa orang yang kamu kenal rasanya akan cocok jika digunakan sebagai nama planet baru tersebut? Coba saja, ajukan kepada NASA. Siapa tahu, kalian yang beruntung.
Read more

Kamis, 02 Maret 2017

Komentar Blogger Sembunyi Karena Pakai Link Aktif? Tenang, Masih Bisa Terindex

Saking bencinya blogger dengan yang namanya spam, beberapa di antara mereka sengaja menyisipkan kode javascript untuk menyembunyikan komentar yang mengandung link aktif. Karena ini, beberapa blog walker pun kadang merasa frustasi, 1 menit waktu yang dihabiskan di blog ini untuk berkomentar mau tak mau harus terbuang dengan sia-sia.

Di artikel sebelumnya Komputoo juga sudah menunjukkan sebuah fakta, bahwa Google telah berhenti mendukung Javascript dan konten berbasis AJAX dalam proses crawling. Jadi, sebenarnya, dengan membuat script semacam ini, yang akan terjadi hanyalah menyembunyikan komentar saja. Di belakang, si Google masih dapat membaca link tersebut dengan mudahnya.

LIHAT JUGA : WARNING! Widget Link Exchange Blog Tidak Akan Meningkatkan SEO Kamu. Ini Alasannya

Jika anda ingin melihat kode halaman yang sebenarnya Google lihat (tanpa modifikasi javascript), tinggal klik kanan halam tersebut, pilih menu Lihat kode sumber laman/View page source. Disana, link aktif spammer ternyata masih terlihat dengan begitu jelas.


Kesimpulannya, jika kalian mendapati hal semacam ini terjadi saat BW, janganlah sekali-kali merasa galau, sakit hati, apa lagi sampai nekat bunuh diri. Setelah membaca ini, kalau perlu duplikasi komentar di posting lain. Saya yakin, si mimin akan approve komentar spam anda sambil ketawa-ketiwi, karena tidak tahu apa yang sebenarnya terjadi.
Read more

Cara Membuat Template Blogger Sendiri Dari 0 [PART 2]


Untuk sepenuhnya menguasai cara membuat template blogger, belum cukup dengan mengutak-atik CSS dan HTML, seperti pada tutorial PART 1 yang telah sebelumnya dibahas. Jadi, pada bagian ini Komputoo akan menunjukkan beberapa syntax kode template dasar yang wajib diketahui oleh seorang programmer template blogger.

LIHAT JUGA : Cara Membuat Template Blogger Sendiri Dari 0 [PART 1]

Dalam sebuah template akan ditemui banyak kode HTML yang akan mengatur susunan setiap elemen dalam website. Semua kode ini bersifat statik, artinya tidak bagian ini tidak akan berubah. Kemudian di antara kode tersebut akan ditemui definisi section dari template. Definisi ini bersifat dinamis dan akan menyesuaikan dengan konfigurai blog anda sendiri. Pada umumnya, struktur terluar dari body akan terlihat seperti di bawah ini (bagian "..." adalah dimana semua definisi section berada).

<body>
    <div class='content'>
      <div class='content-outer'>
        <div class='content-inner'>
          <header>
            <div class='header-outer'>
              <div class='region-inner header-inner'>
                 ...
              </div>
            </div>
          </header>
          <div class='tabs-outer'>
              ...
          </div>
          <div class='main-outer'>
            <div class='region-inner main-inner'>
              <div class='columns-inner'>
                <div class='column-center-outer'>
                  <div class='column-center-inner'>
                      ...
                  </div>
                </div>
                <div class='column-right-outer'>
                  <div class='column-right-inner'>
                      ....
                  </div>
                </div>
              </div>
            </div>
          </div>
          <footer>
              ...
   </footer>
        </div>
      </div>
    </div>
</body>

Kode di atas adalah bentuk yang sudah disederhanakan. Pada bentuk lain, kadang ada pula template yang memiliki 2 buah sidebar. Secara keseluruhan, kira-kira bentuknya seperti ilustrasi berikut ini.


Biasanya, bagian section akan disisipkan pada setiap elemen div yang berperan sebagai inner. Sebuah section sebenarnya nanti akhirnya juga akan diterjemahkan ke bentuk HTML juga. Definisi section ini kemungkinan besar dilakukan oleh blogger untuk mempermudah proses penataan letak/layout pada saat desain. Pada tag ini, akan ditemui beberapa atribut yang mengatur cara kerjanya, antara lain:

  • showaddelement (yes/no) : apabila di-set yes, kita dapat menambahkan widget baru di dalam section ini.
  • maxwidgets : jumlah widget maksimum yang dapat berada pada section


Salah satu section yang hampir selalu ada adalah section main. Di sinilah terdapat widget utama yang bertugas menampilkan semua posting blog kita. Dalam sebuah section anda akan menemui tag <b:widget>. Ini adalah tag yang berperan sebagai wrapper/penampung widget yang sudah kita tambahkan pada saat mengatur tata letak/layout blog. Atribut yang dapat ditambahkan pada sebuah widget antara lain:

  • locked (true/false) : apabila true, widget tidak bisa dipindah-pindahsaat mengatur layout
  • visible (true/false) : apabila true, widget tidak akan terlihat saat mengatur layout


<div class='column-center-outer'>
  <div class='column-center-inner'>
     <b:section class='main' id='main' name='Main' showaddelement='no'>
       <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>
          <b:includable id='main' var='top'>
           ...
          </b:includable>
          <b:includable id='backlinkDeleteIcon' var='backlink'>
           ...
          </b:includable>
          <b:includable id='backlinks' var='post'>
           ...
          </b:includable>
          <b:includable id='post' var='post'>
             ...
          </b:includable>
       </b:widget>
     </b:section>
  </div>
</div>

Lalu apa itu includable? Definisi includable bekerja layaknya sebuah prosedur/fungsi/subrutin dalam bahasa pemrograman pada umumnya. Untuk itu, includable juga hadir dengan atribut id sebagai nama fungsi dan var sebagai parameternya.

<b:includable id='post' var='post'>
   ...
</b:includable>

Lalu, kapan setiap fungsi dalam bentuk includable tersebut akan dipanggil/digunakan?
Pertanyaan yang bagus!

Setiap widget akan selalu memiliki includable bernama main. Bagian inilah yang akan dieksekusi paling awal. Dari bagian ini, sering kali akan dipaggil includable lain yang berada dalam bagian widget yang sama. Lihat cuplikan contohnya di bawah ini.

<b:section class='main' id='main' name='Main' showaddelement='no'>
 <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>
  <b:includable id='main' var='top'>
   ...
   <div class='post-outer'>
     <b:include data='post' name='post'/>
     ...
   </div>
   ...
  </b:includable>
  <b:includable id='post' var='post'>
  ...
  </b:includable>

 </b:widget>
</b:section>

Pada contoh di atas, salah satu baris kode includable main mencoba memanggil includable post dengan cara memanfaatkan tag <b:include>. Pada tag tersebut terdapat atribut data yang merupakan argumen yang dikirimkan sebagai parameter. Nama dari includable yang dipanggil tersebut ditentukan dengan atribut name.

Setiap widget memiliki cara kerja yang berbeda, untuk itu includable main dari widget tersebut seringkali memiliki jenis parameter yang berbeda. Misalnya saja, untuk widget type=Blog, includable main biasanya akan memiliki parameter bernama top. Argumen dalam parameter ini berisi konfigurasi umum dalam sebuah widget bertipe Blog.

Setiap blog memiliki data global yang dapat diakses dari widget manapun. Data ini direferensikan sebagai <data:blog>. (Lihat link referensi). Selain data yang bersifat global, ada pula serangkaian data yang hanya bisa diases sepesifikdi bawah elemen berjenis widget tertentu saja. (Lihat referensinya di link ini). Di tiap objek ini terdapat beberapa properti yang bisa diakses, antara lain:

  • title: The blog's title.
  • pageType: The type of the current page. One of 'item', 'archive', or 'index'.
  • url: The URL of the current page.
  • homepageUrl: The homepage of the blog.
  • pageTitle: The title of the current page. This is often the blog title, but may contain additional information on archive or post pages.
  • encoding: The encoding to use for the blog, e.g. UTF-8.
  • languageDirection: Either "ltr" or "rtl" for left-to-right and right-to-left languages, respectively.
  • feedLinks: The autodiscovery feed links for the page header.


Misalnya dalam template Komputoo ada kode seperti ini:
<a expr:href='data:blog.url'><data:blog.url /></a>

Setelah dieksekusi di bagian home page, akan dihasilkan kode HTML seperti ini:
<a href='http://www.komputoo.pw'>http://www.komputoo.pw</a>

Dari contoh diatas saja, kita mulai mempelajari bagaimana mengakses data yang disediakan oleh blogger untuk blog kita. Yap, berikut adalah penjelasan singkat mengenai keduanya:
<data:blog.url /> akan mengakses data secara langsung.
<a expr:href='data:blog.url'> akan mengakses data sebagai atribut href.

Selain untuk mengakses data yang disediakan blogger,kedua metode di atas juga berlaku untuk mengakses data sebuah parameter dari includable.

<b:includable id='myincludable' var='mypost'>
  <data:mypost.title />
</b:includable>

TIPS: Cara mudah mengamati struktur ini adalah dengan Notepad++. Dengan fitur code foldingnya, kita bisa melihat masing-masing struktur secara lebih dekat, dengan menyembunyikan struktur lain yang tidak diamati.


Oke, sampai disini dulu tutorialnya ya. Nanti akan kita sambung di tutorial PART berikutnya.
Read more

Menarik Perhatian Pengunjung Baru Di Search Result Melalui Emoji 😀 ?


Meski emoji tidak bisa menaikkan ranking halaman blog di search engine, emoji bisa bekeja seperti magnet untuk menarik pengunjung-pengunjung baru anda. Apalagi, saat ini ternyata masih sedikit sekali yang menggunakan emoji di bagian judul dan deskripsi blog mereka. Ini adalah peluang yang sangat bagus. Dengan memasang emoji, situs anda akan terlihat mencolok di daftar hasil pencarian. Meski bukan 3 besar, saya yakin kali ini pengunjung baru mulai melirik.


Sebenarnya, pada Juni 2015 lalu, Google sudah mantap untuk menghapus emoji di hasil pencarian. Namun, baru-baru ini rupanya mereka berubah pikiran.

Sayangnya, sepertinya metode untuk menarik perhatian melalui emoji ini harus terhalang oleh mekanisme algoritma Google Panda. Pada awalnya, Google memang sengaja menonaktifkan hasil pencarian yang tampak emoji, karena dikawatirkan oleh adanya unsur penipuan. Sehingga, kali ini Google membawa emoji kembali dengan algoritma baru Google Panda.

Sesuai algoritma tersebut; misalnya, jika kita mengetik Google Panda Update, kita tidak akan melihat emoji apapun. Padahal salah satu situs tersebut ada yg memakai emoji panda. Namun, apabila kita mengetik Google Panda Emoji, serangkaian hasil penelusuran akan menunjukkan cukup banyak situs yang memakai emoji.

Meski begitu, tidak ada salahnya jika sesekali menggunakan emoji di judul artikel, karena masih ada banyak peluang untuk masuk di hasil pencarian Google dengan emoji yang tampil manis di judul artikel anda.

Contohnya, setelah posting artikel ini, saya coba lihat dengan kata kunci seperti judul artikel. Memang tampil, tapi saat ini masih belum tahu apakah hasil dengan emoji juga akan muncul di hasil pencarian biasa (selain G+)

Read more