Apa Itu Blogger Page Types dan Conditional Tags

Blogger page types dan conditional tags adalah dua hal yang berkaitan, kenapa bisa berkaitan? Karena untuk bisa menggunakan tag kondisional harus dilengkapi dengan jenis halaman blogspot tersebut. Perlu diketahui sebelum mempelajari jenis halaman blogspot dan kondisional tag ini, sangat disarankan memiliki pemahaman dasar mengenai HTML untuk mempermudah memahami susunan penulisan kode.

Baca juga : Apa itu HTML?

Apa fungsi blogger page types

Blogger page types bisa juga disebut dengan jenis halaman blogger dan nama - nama dari halaman tersebut digunakan pada sebuah kondisional tag. Sebagai contoh kita ingin memberikan sebuah CSS pada class "post-title entry-title" khusus untuk halaman static page saja, kita bisa menggunakan kondisional tag hanya untuk static page seperti dibawah ini.

Baca juga : Apa itu static page atau halaman statis?

Berikut contoh penulisan kondisional tag.

<b:if cond='data:blog.pageType == "static_page"'>
  <style>
    .selektor1 {property: value; property: value;}
    .selektor2 {property: value; property: value;}
  </style>
</b:if>

Hasil dari penulisan kode diatas khususnya kode yang berada didalam tag kondisional hanya akan berjalan apabila berada pada halaman yang dituju, dalam contoh diatas adalah halaman statis.

Maka penulisan kode CSS tersebut walaupun menggunakan selektor class tetap saja akan berjalan pada halaman statis saja dan tidak mempengaruhi halaman lainnya, seperti halaman index atau beranda dan halaman post atau artikel.

Baca juga : Selektor class pada CSS?

Kode yang bisa digunakan didalam tag kondisional tidak hanya sebatas kode CSS saja, melainkan kode JavaScript pun bisa di kondisikan hanya pada halaman tertentu.

Setelah kita memahami fungsi penggunaan tag kondisional atau conditional tags untuk blogger, berikut ada beberapa kondisional yang bisa digunakan pada platform blogger.

Daftar tag kondisional blogger

Berikut beberapa tag yang bisa digunakan pada blogger dan perlu diketahui penempatan kondisional tag ini bisa diletakkan di edit HTML atau pada widget juga (penambahan widget HTML).

1. Kondisional tag homepage

   Kondisional tag ini akan berjalan pada halaman utama blogspot.
   
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
     BERJALAN HANYA DI HOMEPAGE
   </b:if>

2. Kondisional tag post dan statis

   Kondisional tag ini akan berjalan pada halaman post dan statis.
   
   <b:if cond='data:blog.url == data:post.url'>
     BERJALAN HANYA DI HALAMAN POST DAN STATIS
   </b:if>

3. Kondisional tag halaman statis

   Kondisional tag ini akan berjalanan pada halaman statis saja.
   <b:if cond='data:blog.pageType == "static_page"'>  
     BERJALAN HANYA DI HALAMAN STATIS
   </b:if>

4. Kondisional tag halaman post

   Kondisional tag ini akan berjalanan pada halaman post atau artikel saja.
   <b:if cond='data:blog.pageType == "item"'>  
     BERJALAN HANYA DI HALAMAN POST ATAU ARTIKEL
   </b:if>

5. Kondisional tag halaman index

   Kondisional tag ini akan berjalan pada halaman utama, halaman label, dan halaman arsip.
   
   <b:if cond='data:blog.pageType == "index"'>
     BERJALAN HANYA DI HALAMAN INDEX
   </b:if>

6. Kondisional tag halaman label

   Kondisional tag ini akan berjalan pada halaman label atau search label.
   
   <b:if cond='data:blog.searchLabel'>
     BERJALAN HANYA DI HALAMAN LABEL
   </b:if>

7. Kondisional tag halaman label tertentu

   Kondisional tag ini akan berjalan pada halaman label atau search label secara spesifik.
   
   <b:if cond='data:blog.searchLabel == "NAMA LABEL"'>
     BERJALAN HANYA DI HALAMAN LABEL TERTENTU
   </b:if>

8. Kondisional tag halaman pencarian

   Kondisional tag ini akan berjalan pada halaman pencarian.
   
   <b:if cond='data:blog.searchQuery'>
     BERJALAN HANYA DI HALAMAN PENCARIAN
   </b:if>

9. Kondisional tag halaman arsip

   Kondisional tag ini akan berjalan pada halaman arsip.
   
   <b:if cond='data:blog.pageType == "archive"'>
     BERJALAN HANYA DI HALAMAN ARSIP
   </b:if>

10. Kondisional tag postingan pertama

    Kondisional tag ini akan berjalan pada halaman yang berisi beberapa post atau artikel dan efek yang diberikan hanya untuk postingan pertama pada sebuah halaman yang berisi beberapa postingan.
    
    <b:if cond='data:post.isFirstPost'>
      HANYA BERJALAN DI SEBUAH POSTINGAN PERTAMA PADA HALAMAN MULTI POST
    </b:if>

11. Kondisional tag halaman error 404

    Kondisional tag ini akan berjalan pada halaman error 404 atau halaman tidak ditemukan.
    
    <b:if cond='data:blog.pageType == "error_page"'>
      HANYA BERJALAN DI HALAMAN ERROR 404
    </b:if>

12. Kondisional tag halaman URL tertentu

    Kondisional tag ini akan berjalan pada sebuah halaman URL tertentu.
    
    <b:if cond='data:blog.url == "URL"'>
      HANYA BERJALAN DI SEBUAH HALAMAN URL TERTENTU
    </b:if>

Alternatif lain cara penggunaan tag kondisional blogger

Setelah mengetahui beberapa tag kondisional untuk blogger, pada poin ini ada sedikit tips atau cara lain untuk menggunakan tag kondisional tersebut dan cara alternatif ini menurut saya cukup penting untuk dipelajari yang mungkin kedepannya berguna saat iki mencoba membuat template sendiri.

1. Membalik kondisional tag

   Cara ini bisa digunakan untuk membalik sebuah kondisi yang ditetapkan, dengan memberi tanda != (artinya tidak atau tidak sesuai) sedangkan tanda == (artinya sama dengan atau sesuai).
   Lihatlah contoh penulisan dibawah ini untuk lebih jelasnya.
   
   <b:if cond='data:blog.pageType != "item"'>
     BERJALAN HANYA PADA KONDISI DILUAR HALAMAN ARTIKEL
   </b:if>

2. Menggunakan dua kondisional dalam satu kondisional tag

   Cara ini dapat digunakan apabila dalam kondisi tertentu kita menginginkan lebih dari satu kondisi yang akan kita tetapkan.
   
   <b:if cond='data:blog.pageType == "item"'>
     BERJALAN APABILA KONDISI SESUAI DENGAN YANG DITETAPKAN
       <b:else/>
     BERJALAN APABILA KONDISI TIDAK SESUAI DENGAN YANG DITETAPKAN
   </b:if>

Setelah kita mencoba memahami fungsi - fungsi dari penggunaan tag kondisional untuk blogger, maka kita memiliki peluang untuk membuat perubahan dari sebuah template blogger atau mungkin kita ingin mencoba membuat template blogger hasil karya sendiri. Banyak orang - orang mengira bahwa membuat halaman blog menggunakan platform blogger tampilannya membosankan atau monoton itu - itu saja, seharusnya anggapan seperti itu bisa kita hilangkan menggunakan kondisional tag dan pemahaman jenis halaman blogger. Sebagai contohnya saja dengan memafaatkan tag kondisional ini kita juga bisa membuat sebuah deskripsi dan judul pada sebuah halaman index, seperti halaman index untuk search label yang pada umumnya halaman tersebut memiliki judul dan deskripsi sama dengan halaman homepage atau halaman utama blog.

Penggabungan kondisional tag dengan meta open graph juga bisa membuahkan sebuah hasil tampilan rendering judul, deskripsi, dan bahkan gambar untuk sebuah halaman index tertentu. Trik ini tidak susah selama kita memahami cara kerja tag kondisional dan penggunaan meta open graph.

Baca juga : Meta Tag Open Graph Khusus Blogger

Tapi pastinya tetap ilmu dasar seperti HTML, CSS, dan JavaScript wajib kita pelajari juga walaupun tidak semuanya kita bisa memahami.
Terima kasih semoga artikel ini berguna bagi kita pengguna blogger yang ingin mencoba memodifikasi template sendiri.

Artikel ini ditulis oleh :
Amateur Blog Design

Baca Selengkapnya »

Cara Optimalisasi Heading Tags Judul Blogspot SEO Friendly

Heading tags bukanlah tags yang digunakan untuk membuat huruf - huruf menjadi lebih besar, tetapi heading tags memiliki fungsi yang bermanfaat untuk kualitas konten di mata robot mesin pencari. Artikel ini akan membahas mengenai "Optimalisasi Heading Tags" untuk template platform Blogger. Tentunya kita yang ingin melakukan optimalisasi pada heading tags judul artikel dan judul blog pasti mengerti fungsi dari heading tags tersebut kan? Sebetulnya ini sebuah trik untuk menukar heading tags khususnya heading tags H1 pada judul blog dan judul artikel, dimana kita tahu dalam SEO yang baik pada setiap halaman wajib memiliki satu buah heading tags H1 dan heading tags H1 tersebut terdapat pada judul.

Mungkin kita pengguna platform Blogger pernah berpikir seperti ini, "kalau disebuah halaman artikel atau postingan, yang harus menggunakan H1 itu yang mana ya? Judul blog atau judul artikel?". Menurut saya itu pertanyaan yang sangat bagus, karena kita tahu dalam template Blogger umunya hanya judul blog saja yang menggunakan tag H1 sedangkan judul artikel menggunakan tag H3 atau bisa juga tag H2.

Tapi perlu kita ketahui bahwa dalam dunia SEO heading tags H1 memiliki prioritas lebih tinggi dari sebuah kalimat deskripsi atau isi artikel, dan setidaknya bisa sedikit membayangkan cara orang lain atau bahkan kita sendiri dalam mencari sebuah informasi seperti gimana.
Pencarian sebuah informasi umum atau spesifik mayoritas orang akan mencari langsung dengan menggunakan keyword, sangat jarang sekali pencarian langsung menggunakan judul sebuah halaman blog atau website terkecuali blog atau website tersebut sudah terkenal sebagai gudang informasi. Inilah hal yang perlu diperhatikan yaitu cara membuat judul artikel blog diprioritaskan oleh mesin pencari dengan menempatkan tag H1 pada judul artikel, dengan tujuan untuk memudahkan judul artikel kita mengenai keyword yang diketikan oleh calon pembaca.

INGAT UNTUK MELAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU SEBELUM MELAKUKAN PERUBAHAN.
DWYOR (Do With Your Own Risk), KEGAGALAN ATAU KESALAHAN YANG TERJADI ADALAH TANGGUNG JAWAB MASING - MASING PEMILIK BLOGSPOT.
Beberapa hal yang wajib diketahui sebelum mencoba cara optimalisasi judul ini.

• Langkah - langkah dibawah ini sebatas perubahan struktur kode HTML untuk date header, judul blog, dan judul artikel agar lebih optimal di mata robot mesin pencari.
• Penerapan CSS sangat di wajibkan, dikarenakan perubahan struktur kode HTML pada heading tags.
  Contoh apabila sebelumnya menggunakan heading tags H3 atau H4 maka selektor CSS harus disesuaikan dengan heading tags yang diperbarui.

Baca juga : Apa itu CSS Syntax dan Selector

Mengubah heading tags date header

Date header secara default memiliki heading tags, kita tahu bahwa sebuah heading tags sangatlah penting dalam SEO dengan catatan penggunaan yang tepat. Date header yang hanya menampilkan sebuah informasi tanggal publikasi artikel seharusnya tidak diwajibkan harus menggunakan heading tags, cukup menggunakan div saja karena terlalu banyak heading tags pada sebuah halaman juga tidak baik untuk SEO. Cara mengganti heading tags pada date header bisa dilakukan dengan mencari kode dibawah ini.

class='date-header'

Mungkin kita akan menemukan lebih dari satu atau bahkan sampai tiga kali, tidak masalah itu tergantung template blogspot kita.
Apabila pada kode tersebut menggunakan heading tags H1 atau H2 atau H3 dan seterusnya, kita harus mengganti heading tags tersebut menjadi div dan tentunya tag penutup pun juga harus menggunakan /div.
Lebih jelasnya bisa dilihat pada kotak kode dibawah ini.

<div class='date-header'><span><data:post.dateHeader/></span></div>

Memberi conditional tag pada heading tags judul blog

Heading tags untuk judul pada widget header secara default adalah tag H1. Pada tahap ini kita memberikan conditional tag atau tag kondisional, yang berarti kode di dalam tag kondisional tersebut hanya berlaku sesuai kondisi yang telah ditentukan. Fungsi utama dari kode ini adalah merubah heading tags judul halaman blog pada widget header menjadi tag "p" pada saat di halaman artikel dan sebaliknya jika pada halaman beranda yang menampilkan daftar postingan maka heading tags judul blog pada widget header akan kembali menjadi tag H1.

Cari kode dibawah ini, kode dibawah ini harusnya terletak di dalam widget header dan kode ini bisa kita temukan sebanyak dua kali

<h1 class='title' style='background: transparent; border-width: 0px'>
  <b:include name='title'/>
</h1>

Ganti kode tersebut dengan kode dibawah ini, apabila menemukan dua kali maka ganti semua kode tersebut.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
  </h1>
<b:else/>
  <p class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
  </p>
</b:if>

Masih pada poin heading tags untuk judul blog, cari lagi kode dibawah ini dan lokasi kode ini juga masih di dalam widget header.

<h1 class='title'>
  <b:include name='title'/>
</h1>

Kemudian ganti kode diatas menggunakan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <h1 class='title'>
    <b:include name='title'/>
  </h1>
<b:else/>
  <p class='title'>
    <b:include name='title'/>
  </p>
</b:if>

Memberi conditional tag pada heading tags judul artikel blog

Cari kode dibawah ini untuk memberi tag kondisional di judul artikel blog, kode dibawah ini akan ditemukan lebih dari satu kali.
Untuk mempermudah pencarian gunakan kode ini class='post-title entry-title' sebagai keyword pencarian dan penampakan susunan kode standart template blogger tersebut kurang lebih seperti dibawah ini.
(untuk mempermudah mengenali mana yang kode pertama dan kode kedua, perhatikan perbedaan pada kode yang memiliki tanda tanya "?" seperti "data:post.link ? data:post.link" itu adalah kode kedua.)

Langkah untuk kode pertama

Kode standart template blogger yang pertama.

<b:if cond='data:post.title'>
  <h2 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h2>
</b:if>

Ganti kode ditas dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:post.title'>
    <h2 class='post-title entry-title' >
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link' expr:title='data:post.title' ><data:post.title/></a>
          <b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
            <b:else/>
          <a expr:href='data:post.link' expr:title='data:post.title' ><data:post.title/></a>
       </b:if>
    </h2>
  </b:if>
<b:else/>
  <h1 class='post-title entry-title' >
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link' expr:title='data:post.title' ><data:post.title/></a>
        <b:else/>
          <b:if cond='data:post.url'>
            <a expr:href='data:post.link' expr:title='data:post.title' ><data:post.title/></a>
          <b:else/>
        <a expr:href='data:post.link' expr:title='data:post.title' ><data:post.title/></a>
      </b:if>
    </b:if>
  </h1>
</b:if>

Langkah untuk kode kedua

Kode standart template blogger yang kedua.

<b:if cond='data:post.title'>
  <h2 class='post-title entry-title'>
    <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
      <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
      <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title'><data:post.title/></a>
    </b:if>
  </h2>
</b:if>

Ganti kode ditas dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:post.title'>
    <h2 class='post-title entry-title' >
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title' ><data:post.title/></a>
          <b:else/>
        <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title' ><data:post.title/></a>
      </b:if>
    </h2>
  </b:if>
<b:else/>
  <h1 class='post-title entry-title' >
    <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
      <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title' ><data:post.title/></a>
        <b:else/>
      <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title' ><data:post.title/></a>
    </b:if>
  </h1>
</b:if>

Cara memastikan optimalisasi heading tags tersebut berjalan

Kita bisa membuka halaman blogspot kita sendiri kemudian lakukan inspect page pada judul blog atau judul pada postingan artikel, pada saat di beranda seharusnya heading tags untuk judul postingan artikel adalah H2 dan sebaliknya pada saat di halaman postingan artikel maka heading tags untuk judul artikel adalah H1. Perubahan tersebut juga berlaku untuk heading tags pada judul blog.

Berikut beberapa contoh screenshot hasil optimalisasi heading tags pada judul blog dan judul artikel blogspot.

Gambar diatas menunjukan pada halaman artikel, heading tags pada judul artikel adalah H1.


Gambar diatas menunjukan pada halaman beranda atau index, heading tags pada judul artikel menggunakan H2.


Gambar diatas menunjukan pada halaman beranda atau index, heading tags pada judul blog menggunakan H1.


Gambar diatas menunjukan pada halaman artikel, pada judul blog menggunakan tag p.

Sampai disini dulu informasi seputar cara membuat judul artikel dan judul blogspot lebih mudah terindex oleh Google, tapi jangan lupa untuk tetap melakukan update atau pembaruan konten agar tidak sampai Google mengabaikan halaman blog kita karena jarang melakukan update konten.

Artikel ini ditulis oleh :
Amateur Blog Design

Baca Selengkapnya »

Cara Menambahkan Meta Tag Open Graph Protocol

Topik pembahasan kali ini mengenai Meta Tag Open Graph Protocol, bagi yang mungkin baru pertama kali membaca atau mendengar Meta Tag Open Graph Protocol ini sedikit saya beri penjelasan yaitu sebuah kode meta tag yang berguna untuk membantu mesin media sosial menampilkan informasi konten yang lebih informatif pada saat dibagikan atau dipublikasi. Konten lebih informatif ini yang dimaksud sanggup menampilkan judul, gambar, dan deskripsi halaman yang kita bagikan atau share di media sosial dengan kata lain tampilan konten tidak monoton yang hanya beruba judul atau bahkan tulisan link saja.
Berpengaruh dengan traffic atau pengunjung apa nggak? Menurut saya pasti berpengaruh terutama konten yang terlihat menarik dan informatif di sebuah sosial media juga akan mengundang rasa penasaran calon pengunjung untuk berkunjung.

Baca juga : Microdata Schema dan Open Graph Protocol Penunjang SEO Blogger

Cara Menambahkan Meta Tag Open Graph Protocol

Ikuti langkah - langkah dibawah ini untuk menambahkan kode Meta Tag Open Graph Protocol pada halaman blogspot.

Khusus untuk template yang tidak menggunakan kode <b:include data='blog' name='all-head-content'/> pada bagian <head>, cukup mengikuti langkah 1,2,3 saja.

Sedangkan untuk template yang menggunakan kode <b:include data='blog' name='all-head-content'/>, tidak perlu melakukan langkah 3 atau dilompatin saja untuk langkah nomor 3.

Baca juga : Apa itu All Head Content

INGAT UNTUK MELAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU SEBELUM MELAKUKAN PERUBAHAN.
DWYOR (Do With Your Own Risk), KEGAGALAN ATAU KESALAHAN YANG TERJADI ADALAH TANGGUNG JAWAB MASING - MASING PEMILIK BLOGSPOT.

1. Buka halaman Blogger dan login akun Blogger.
2. Pilih Edit Template kemudian Edit HTML
3. Cari kode </head> dan copy kode Open Graph dibawah ini, letakkan diatas kode </head>
   Kode Open Graph dibawah ini khusus untuk template yang tidak menggunakan kode <b:include data='blog' name='all-head-content'/> pada bagian <head>
   
   <!-- Open Graph Meta Tags BEGIN -->
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='website' property='og:type'/>
    <meta content='URL FANPAGE ATAU PROFILE FB' property='author'/>
    <meta content='URL FANPAGE' property='publisher'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <meta expr:content='data:post.snippet' name='og:description'/>
    <meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 1200x630 -->
    <meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 200x200 squared -->
   <!-- Open Graph Meta Tags END -->
4. Sama seperti langkah 3, tapi kode Open Graph dibawah ini dikhususkan hanya untuk template yang menggunakan kode <b:include data='blog' name='all-head-content'/> pada bagian <head>
   
   <!-- Open Graph Meta Tags BEGIN -->
    <meta content='website' property='og:type'/>
    <meta content='URL FANPAGE ATAU PROFILE FB' property='author'/>
    <meta content='URL FANPAGE' property='publisher'/>
    <meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 1200x630 -->
    <meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 200x200 squared -->
   <!-- Open Graph Meta Tags END -->
5. Selesai.

Proses penambahan kode Meta Tag Open Graph Protocol diatas masih belum sempurna tanpa adanya URL atau LINK sebuah gambar logo blog kita masing - masing, perhatikan tulisan URL LOGO BLOG nah isi URL LOGO BLOG ini dengan URL logo blog kita sendiri agar saat kita proses Debug (sebagai contoh menggunakan tools Sharing Debugger Facebook atau kunjungi URL ini https://developers.facebook.com/tools/debug/.) halaman blog beranda kita bisa memunculkan logo tersebut.

Mengenai ukuran gambar sangat disarankan menggunakan gambar berukuran 1200px X 630px untuk mendapatkan hasil yang lebih menarik, dikarenakan dengan ukuran tersebut tampilan gambar pada saat kita share akan tampak lebih besar. Tapi tidak menutup kemungkinan apabila kita tetap menginginkan ukuran gambar kotak atau squared picture bisa menggunakan ukuran 200px X 200px (jangan dibawah 200 pixel karena gambar tidak akan muncul saat kita proses debug maupun kita share di media sosial), umumnya ukuran 200px X 200px ini lebih cocok digunakan untuk simbol atau favicon halaman blogspot.

Baca juga : Apa itu CSS

Lebih jelasnya contoh tampilan gambar besar 1200px X 630px dan gambar kotak 200px X 200px, bisa perhatikan contoh gambar dibawah ini.

Sampai disini dulu artikel mengenai Cara Menambahkan Meta Tag Open Graph Protocol, semoga artikel ini bermanfaat bagi kita pemilik blog yang ingin mengembangkan halaman blog kita.
Terima kasih

Baca juga : Meta Tag Dasar Penunjang SEO Halaman Blogspot

Artikel ini ditulis oleh :
Amateur Blog Design

Baca Selengkapnya »

Cara Menambahkan Title Tag Pada Judul Postingan Blogspot

Artikel kali ini masih berkaitan dengan SEO khusunya untuk platform Blogspot, yaitu cara penambahan title tag pada judul postingan halaman blogspot dan proses penambahannya pun hanya cukup sekali saja tanpa harus berulang kali setiap penulisan judul artikel. Tujuan dari penambahan title tag pada judul postingan blogspot tentu saja untuk memperkuat SEO dari halaman tersebut agar mesin pencari lebih mudah untuk mengindex setiap artikel kita berdasarkan kata kunci yang kita target.

Baca juga : Meta Tag Dasar Penunjang SEO Halaman Blogspot

Hasilnya seperti apa pada halaman blogspot? Coba lihat gambar dibawah ini untuk lebih jelasnya.

Langkah - langkah menambahkan title tag pada judul postingan blogspot

1. Buka halaman Blogger dan login akun masing - masing.
2. Pilih Template.
3. Kemudian pilih Edit HTML.
4. Cari kode dibawah ini
   
   <a expr:href='data:post.link'><data:post.title/></a>
5. Ganti kode diatas dengan kode dibawah ini
   
   <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
6. Cari lagi kode seperti dibawah ini
   
   <a expr:href='data:post.url'><data:post.title/></a>
7. Ganti kode diatas dengan kode dibawah ini
   
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
8. Selesai, save template

Setelah itu coba buka halaman blogspot dan arahkan cursor mouse pada judul artikel selama kira - kira 1 detik sampai 1.5 detik, apabila trik penambahan title tag diatas dilakukan dengan benar maka akan muncul kotak tulisan dengan tulisan sama persis seperti judul artikel yang dilalui oleh cursor mouse.

Baca juga : Cara Memasang Microdata Schema Blogger

Sampai disini dulu artikel tentang Cara Menambahkan Title Tag Pada Judul Postingan Blogspot, semoga artikel ini dapat membantu kita pemilik blogspot yang ingin meningkatkan SEO untuk halaman blogspot.
Terima kasih

Artikel ini ditulis ulang oleh :
Amateur Blog Design

Baca Selengkapnya »

Cara Menambahkan Kotak Pesan di Atas Kolom Komentar Blogger

Artikel kali ini mengenai trik untuk membuat kotak pesan kolom komentar pada halaman blogspot selalu berada di bagian atas kolom komentar. Mungkin beberapa dari kita sebagai blogger akan berpikir seberapa penting kah menggunakan kolom komentar ini?
Menurut saya pribadi trik penambahan kotak pesan ini cukup penting, karena dengan kotak pesan ini memungkinkan kita sanggup memberi catatan (kurang lebih hampir sama seperti sticky notes) agar mudah dibaca oleh calon komentator dan dengan begitu maka calon komentator pun bisa memahami persyaratan untuk meninggalkan komentar dihalaman tersebut.

Langsung saja kita bisa mencoba memulai membuat atau menambahkan kotak pesan tersebut dengan melakukan 3 langkah mudah dibawah ini.

INGAT UNTUK MELAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU SEBELUM MELAKUKAN PERUBAHAN.
DWYOR (Do With Your Own Risk), KEGAGALAN ATAU KESALAHAN YANG TERJADI ADALAH TANGGUNG JAWAB MASING - MASING PEMILIK BLOGSPOT.

Langkah - langkah menambahkan kotak pesan

Cukup dengan 3 langkah kita bisa menambahkan kotak pesan diatas kolom komentar, berikut langkahnya :

1. Menambahkan kode HTML seperti dibawah ini.
   
   <div id='threaded-comment-form'>
   ......
   </div>
   Baca juga : Apa itu HTML
2. Mengubah sedikit kode JavaScript kolom komentar seperti dibawah ini.
   
   document.getElementById(domId).insertBefore(replybox, null);
3. Menambahkan kode CSS untuk memberikan tampilan menarik kotak pesan tersebut.
   Baca juga : Prinsip Dasar Penulisan CSS

Langkah 1

Sekarang mari kita mulai dari langkah pertama yaitu dengan mencari kode <p><data:blogCommentMessage/></p>
Perhatikan kode dibawah ini untuk lebih jelasnya.

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Kita akan menemukan kode tersebut sebanyak 4 kali namun kita cukup memberikan sedikit perubahan pada kode yang ke 2 dan yang ke 4. Kode ke 2 untuk memunculkan kotak pesan sebelum ada komentar dan kode ke 4 untuk memunculkan kotak pesan setelah ada komentar. Berikut perubahan yang perlu dilakukan yaitu dengan menambahkan kode yang dibawah ini pada kode <p><data:blogCommentMessage/></p>

<div id='threaded-comment-form'>
......
</div>

Perubahan kode tersebut akan menjadi seperti kode dibawah ini

<div id='threaded-comment-form'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

Langkah 2

Cari kode JavaScript seperti dibawah ini

document.getElementById(domId).insertBefore(replybox, null);

Kita hanya menemukan 1 kali dan ganti kode JavaScript tersebut dengan kode dibawah ini.

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Langkah 3

Langkah terakhir cari kode ]]></b:skin> untuk menempatkan kode CSS guna memberikan tampilan menarik pada kotak pesan.
Setelah menemukan kode ]]></b:skin>, copy kode dibawah ini dan paste diatas kode ]]></b:skin>

/* Comment Message START */
#threaded-comment-form p {
    position: relative;
    background: #4085b8;
    border: 3px solid #5899c9;
    padding: 10px;
    font-size: 11px;
    line-height: 1.6em;
    color: #fff;
    margin-top: 10px;
    font-size: 11px;border-radius:2px;
    }
#threaded-comment-form p::after, #threaded-comment-form p::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }
#threaded-comment-form p::before {
    border-top-color: #5899c9;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #4085b8;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }
/* Comment Message END */

Setelah selesai sampai tahap terakhir kita bisa save template kemudian coba untuk membuka halaman salah satu post kita, namun sebelumnya kita wajib menyalakan opsi komentar pada menu tata letak atau layout dibagian widget blog posts, untuk lebih jelasnya bisa melihat contoh gambar dibawah ini.

Untuk mengganti isi pesan didalam kotak pesan kita bisa mengeditnya melalui setting > post, comments and sharing > comment form message, untuk lebih jelasnya bisa melihat gambar dibawah ini.

Sampai disini dulu artikel tentang Cara Menambahkan Kotak Pesan di Atas Kolom Komentar Blogger, semoga artikel ini dapat membantu kita yang ingin memodifikasi tampilan kolom komentar blogspot menjadi lebih menarik.
Terima kasih

Artikel ini ditulis oleh :
Amateur Blog Design

Baca Selengkapnya »