Menampilkan Objek di Halaman Tertentu

Menampilkan Objek di Halaman Tertentu merupakan artikel lama yang sudah saya buat namun saya lupa untuk mempublishnya karena pada artikel ini adalah artikel yang membahas tentang cara menampilkan widget blog di halaman tertentu yang juga biasa telah dibahas oleh banyak teman-teman blogger

Menampilkan objek atau widget di halaman tertentu di blog juga merupakan penggunaan kalimat yang memudahkan para blogger dalam melakukan pencarian tentang tutorial ini, padahal penggunaan judul untuk artikel ini seharusnya adalah Tag Kondisional Blog, namun jika menggunakan tag kondisional untuk judul artikel blog maka kemungkinan kecil jarang digunakan didalam pencarian. Lalu kenapa tidak menggunakan Menampilkan widget tertentu di halaman blog? Karena tidak hanya Widget blog saja yang harus menggunakan tag kondisional, tapi seluruh objek blog yang meliputi widget, artikel, gambar dan elemen lainnya bisa diatur tampilannya pada halaman tertentu dengan menggunakan tag kondisional

Lalu apa itu Tag kondisional itu?

Tag kondisioinal merupakan tag yang digunakan untuk mengatur objek tertentu yang terdapat dan digunakan pada blog agar tampil atau tidak tampil, berfungsi atau tidak berfungsi dalam halaman spesifik yang telah ditentukan dengan menggunakan kode tag tertentu dan berbeda dalam setiap pengaturannya

Seperti apa kode Tag kondisional tersebut?
Tag kondisional ditulis dengan kode tertentu yang menyesuaikan pada kode letak ditampilkannya sebuah atau beberapa objek tertentu. Misalnya; jika ada objek atau widget yang ingin ditampilkan pada halaman depan blog (homepage) maka penggunaan tag kondisionalnya adalah sebagai berikut

<b:if cond='data:blog.url == data:blog.homepageUrl'>OBJEK</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>WIDGET</b:if>

Dan berikut beberapa pengaturan dan pengaturan tag kodisional pada halaman tertentu di blog:
Tag kondisional pada halaman depan blog (Homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
     OBJEK / WIDGET
</b:if>

Tag kondisional pada halaman Artikel

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
     OBJEK / WIDGET
</b:if>

Tag kondisional pada halaman Statis

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
     OBJEK / WIDGET
</b:if>

Tag kondisional pada pada halaman Arsip

<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
     OBJEK / WIDGET
</b:if>

Tag kondisional pada halaman Label

<b:if cond='data:blog.searchLabel'>
     OBJEK / WIDGET
</b:if>

Tag kondisionla pada halaman Index

<b:if cond='data:blog.pageType == &quot;index&quot;'>
     OBJEK / WIDGET
</b:if>

Tag kondisional pada Halaman Tertentu

<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
     OBJEK / WIDGET
</b:if>

Tag kondisional pada Label Tertentu

<b:if cond='data:blog.searchLabel == &quot;Label&quot;'>
    Widget Label
</b:if>

Tag kondisionla pada mobile / ponsel

<b:if cond='data:blog.isMobile'>
   OBJEK / WIDGET
</b:if>

Tag kondisional yang saya sebutkan diatas hanya sebagian dari beberapa tag kondisional yang umum digunakan dan khusus digunakan di Blogger. Dengan menggunakan tag kondisional seperti yang saya tulis diatas, maka dengan mudah Anda menampilkan objek / widget di halaman tertentu didalam Blog

PHP Konversi Array Menjadi Objek/Objek Menjadi Array

1. Array ke Objek

Fungsi

function array_to_object($array) {
    if(is_array($array)) {
        return (object) array_map(__FUNCTION__, $array);
    } else {
        return $array;
    }
}

Contoh Kasus

Sebelum dikonversi…

$test = array(
    'A' => 'Test A',
    'B' => 'Test B',
    'C' => array(
        'CA' => 'Test CA',
        'CB' => array(
            'CBA' => 'Test CBA'
        )
    ),
    'D' => 'Test D'
);

// Pemanggilan...
echo $test['A']; // Hasil => `Test A`
echo $test['C']['CB']; // Hasil => `Test CB`
echo $test['C']['CB']['CBA']; // Hasil => `Test CBA`

Sesudah dikonversi…

...

$object_test = array_to_object($test);

// Pemanggilan...
echo $object_test->A; // Hasil => `Test A`
echo $object_test->C->CB; // Hasil => `Test CB`
echo $object_test->C->CB->CBA; // Hasil => `Test CBA`

2. Objek ke Array

Fungsi

function object_to_array($object) {
    if(is_object($object)) {
        $object = get_object_vars($object);
    }
    if(is_array($object)) {
        return array_map(__FUNCTION__, $object);
    } else {
        return $object;
    }
}

Contoh Kasus

Sebelum dikonversi…

$test = new stdClass;
$test->A = 'Test A';
$test->B = 'Test B';
$test->C = new stdClass;
$test->C->CA = 'Test CA';
$test->C->CB = new stdClass;
$test->C->CB->CBA = 'Test CBA';
$test->D = 'Test D';

// Pemanggilan
echo $test->A; // Hasil => `Test A`

Sesudah dikonversi…

...

$array_test = object_to_array($test);

// Pemanggilan
echo $array_test['A']; // Hasil => `Test A`

Modifikasi Tampilan dan Teks pada Status Message

Contoh tampilan ‘status message’ yang sudah dimodifikasi.

Status Message adalah sebuah pesan yang akan muncul di atas posting ketika kita sedang berada di halaman hasil pencarian atau halaman label. Memodifikasi tampilannya mungkin mudah, yaitu dengan cara menimpa CSS bawaan Blogger dengan kode CSS baru yang mengandung pengaturan tampilan yang berbeda seperti ini:

.status-msg-wrap {
  font-size:110%;
  width:90%;
  margin:10px auto;
  position:relative;
}

.status-msg-border {
  border:1px solid #000;
  filter:alpha(opacity=40);
  -moz-opacity:.4;
  opacity:.4;
  width:100%;
  position:relative;
}

.status-msg-bg {
  background-color:#ccc;
  opacity:.8;
  filter:alpha(opacity=30);
  -moz-opacity:.8;
  width:100%;
  position:relative;
  z-index:1;
}

.status-msg-body {
  text-align:center;
  padding:.3em 0;
  width:100%;
  position:absolute;
  z-index:4;
}

.status-msg-hidden {
  visibility:hidden;
  padding:.3em 0;
}

.status-msg-wrap a {
  padding-left:.4em;
  text-decoration:underline;
}

Tapi bagaimana jika kita ingin memodifikasi tulisan di dalamnya?

Untuk melakukan itu, kita mau tidak mau harus menghapus elemen tersebut dan menggantinya dengan markup yang baru seperti ini:

<!-- b:include data='top' name='status-message'/ -->
<b:if cond='data:blog.searchQuery'>
  <b:if cond='data:numPosts != 0'>
    <p class='custom-status-message'>Menampilkan semua entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong></p>
  <b:else/>
    <p class='custom-status-message-error'>Pencarian entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong> tidak ditemukan.</p>
  </b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
  <p class='custom-status-message'>Menampilkan semua entri dengan kategori <strong>&amp;#8220;<data:blog.searchLabel/>&amp;#8221;</strong></p>
</b:if>

Salin kode di atas, kemudian gunakan untuk menggantikan kode yang tampak seperti ini di dalam template (biasanya ada dua):

<b:include data='top' name='status-message'/>

Kemudian tambahkan kode CSS ini di atas ]]></b:skin> atau </style>:

.custom-status-message,
.custom-status-message-error {
  font:normal normal 13px/normal Segoe,"Segoe UI",Calibri,"Helvatica Neue",Arial,Sans-Serif;
  color:white;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  padding:7px 14px;
  margin:5px 5px 1.7em;
  background-color:#5A6777;
  background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
  border:2px solid #404B55;
  border-bottom-color:#212729;
  border-top-color:#8E97A2;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

.custom-status-message-error {
  background-color:#600;
  border-color:#700 #500 #300;
}

.custom-status-message strong {color:#AADD99}
.custom-status-message-error strong {color:#ff0}

Menciptakan Tampilan yang Berbeda Hanya Pada Posting Pertama

Ini adalah contoh tampilan pembangun deret posting yang masih normal (loop posting):

<!-- posts -->
<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
    &lt;/div&gt;&lt;/div&gt;
  </b:if>
  <data:adEnd/>
</div>

Dan ini adalah loop posting yang sudah dimodifikasi:

<!-- posts -->
<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>

    <b:if cond='data:post.isFirstPost'>
      <div class='first-post'><b:include data='post' name='post'/></div>
    <b:else/>
      <b:include data='post' name='post'/>
    </b:if>

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
    &lt;/div&gt;&lt;/div&gt;
  </b:if>
  <data:adEnd/>
</div>

Kode di atas akan secara otomatis meliputi posting pertama dengan elemen <div class='first-post'>, sehingga kita bisa melakukan sesuatu dengan kelas itu untuk mengubah tampilannya:

.first-post {border:10px solid red}
.first-post .post {font-size:150%}

Kuncinya ada pada kondisional <b:if cond='data:post.isFirstPost'>

Bekerja dengan Blog Seluler

Berikut ini adalah beberapa cara yang bisa Anda lakukan untuk menangani tampilan blog versi mobile/perangkat seluler. Namun sebelum memulainya, ada beberapa hal penting yang harus Saya jelaskan terlebih dahulu sebagai pondasi:

1. URL Blog Desktop dan Seluler

Menampilkan tampilan blog blogspot versi seluler bisa dilakukan dengan cara menambahkan kueri berupa ?m=1 pada URL. Sebagai contoh, jika alamat blog Anda adalah http://nama_blog.blogspot.com, maka untuk menampilkan tampilan blog perangkat seluler, Anda harus mengubah URLnya menjadi http://nama_blog.blogspot.com/?m=1. Tampilan blog versi biasa bisa Anda akses dengan mengubah nilai m menjadi 0, atau cukup buang kueri tersebut dari URL:

URL Blog Seluler: http://nama_blog.blogspot.com/?m=1
URL Blog Normal: http://nama_blog.blogspot.com/?m=0
URL Blog Normal: http://nama_blog.blogspot.com/

2. Perbedaan Elemen HTML Blog Desktop dengan Blog Seluler

Setiap widget posting yang masih asli akan selalu dilengkapi dengan duplikat markup HTML khusus untuk tampilan blog seluler. Ini ditandai dengan munculnya beberapa elemen <b:includable> dengan atribut-atribut bernilai (atau setidaknya memiliki imbuhan kata) “mobile”.

Berikut ini adalah contoh susunan XHTML navigasi halaman blog pada versi tampilan biasa:

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

Beberapa gulungan layar ke bawah, Anda akan menemukan kode yang nyaris sama dengan kode di atas. Perbedaan hanya terlihat pada karakteristik berupa ditambahkannya kelas-kelas dengan imbuhan “mobile” dan/atau hilangnya beberapa elemen HTML dari kode mirip yang pertama kali Anda temukan:

<b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a>
      </div>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a>
      </div>
    </b:if>

    <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>

    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
    </div>

  </div>
  <div class='clear'/>
</b:includable>

Fungsinya adalah untuk membedakan markup HTML antara blog tampilan layar desktop dengan blog tampilan seluler. Sehingga, sebagai contoh, jika kita mengakses halaman blog kita pada perangkat desktop, maka kita akan melihat kode HTML seperti ini pada sumbernya:

<div class='blog-pager' id='blog-pager'>
  <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' href='…' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>Posting Lebih Baru</a>
  </span>
  <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' href='…' id='Blog1_blog-pager-older-link' title='Posting Lama'>Posting Lama</a>
  </span>
  <a class='home-link' href='/'>Beranda</a>
  <div class='blog-mobile-link'>
    <a href='/?m=1'>Lihat versi seluler</a>
  </div>
</div>
<div class='clear'></div>

Namun, saat kita membuka halaman blog pada perangkat seluler, kita akan melihat bahwa elemen-elemen navigasi blog telah berubah:

<div class='blog-pager' id='blog-pager'>
  <div class='mobile-link-button' id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' href='…' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>&amp;lsaquo;</a>
  </div>
  <div class='mobile-link-button' id='blog-pager-older-link'>
    <a class='blog-pager-older-link' href='…' id='Blog1_blog-pager-older-link' title='Posting Lama'>&amp;rsaquo;</a>
  </div>
  <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' href='/'>Beranda</a>
  </div>
  <div class='mobile-desktop-link'>
    <a class='home-link' href='/?m=0'>Lihat versi web</a>
  </div>
</div>
<div class='clear'></div>

Logikanya seperti itu.

Masing-masing elemen <b:includable> akan ditampilkan sesuai keadaannya (dalam hal ini adalah mengenai apakah kita sedang berada pada perangkat desktop ataukah perangkat seluler), yang dalam sebuah widget dapat dikondisikan dengan kondisional <b:if cond='data:mobile'>:

<b:if cond='data:mobile'>
  <!-- menampilkan navigasi halaman versi mobile pada perangkat seluler -->
  <b:include name='mobile-nextprev'/>
<b:else/>
  <!-- menampilkan navigasi halaman versi desktop pada perangkat desktop -->
  <b:include name='nextprev'/>
</b:if>

<b:if cond='data:mobile'> hanya berlaku jika diletakkan/dideklarasikan di dalam <b:includable> dan tidak bisa bekerja di luar elemen itu. Kondisional universal untuk menyatakan tampilan seluler bisa dinyatakan sebagai ini:

<b:if cond='data:blog.isMobile'> … </b:if>

Anda bisa menerapkan kondisional di atas di mana saja.

Pastikan Fitur Blog Seluler Aktif

Jika tidak, aktifkan kembali dengan cara masuk ke tab Template kemudian klik ikon roda gigi yang berada di bawah penayang blog seluler Anda:

Mengaktifkan fitur blog seluler.

Setelah itu Anda akan mendapati pilihan untuk mengaktifkan atau tidak mengaktifkan fitur blog seluler. Pilih untuk mengaktifkan fitur blog seluler.

Dua Metode Modifikasi

Setelah mengerti tentang bagaimana Blogger bisa menangani tampilan blog seluler terhadap tampilan blog biasa, kita bisa memulai untuk mengetahui dua ide yang biasa digunakan untuk membedakan tampilan antara blog versi biasa dengan blog versi seluler.

Metode 1: Menambahkan Kelas Khusus Tampilan Seluler pada Tag <body>

Blogger sudah memiliki tag data tersendiri yang akan menggenerasikan kelas bernama mobile berdasarkan tipe tampilan blog, yaitu data:blog.mobileClass yang bisa kita letakkan pada tag HTML di dalam template sebagai nilai kelas. Misalnya pada tag <body> seperti ini:

<body expr:class='data:blog.mobileClass'>

Dengan cara di atas, maka kita akan mendapati bahwa tag <body> telah dilengkapi dengan kelas mobile pada blog tampilan seluler seperti ini:

<body class=' mobile'>

Saat kita membuka blog pada tampilan desktop, nilai mobile pada atribut akan menghilang. Sehingga kita bisa membedakan tampilan blog seluler dengan blog biasa melalui kelas blog seluler tersebut melalui CSS:

#header-wrapper {
  background-color:#000;
  color:#fff;
}

#main-wrapper {
  width:900px;
  margin:0 auto;
}

/* mobile */
body.mobile #header-wrapper {
  background-color:#fff;
  color:#000;
}

body.mobile #main-wrapper {
  width:auto;
  margin:0 10px;
}

Metode 2: Memanfaatkan Kondisional Seluler

Kita juga bisa menggunakan kondisional universal yang digunakan untuk menyatakan tampilan blog seluler sebagai pembatas tampilnya elemen-elemen HTML —termasuk tag <style>— dengan cara seperti ini:

Membedakan CSS Blog Desktop dengan Blog Seluler

<b:if cond='data:blog.isMobile'>
  <style type='text/css'>
  body {background-color:black} /* blog akan berwarna hitam pada tampilan seluler */
  </style>
<b:else/>
  <style type='text/css'>
  body {background-color:white} /* blog akan berwarna putih pada tampilan desktop */
  </style>
</b:if>

Menghilangkan/Menampilkan Elemen HTML

Beberapa pola yang biasa digunakan:

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
  <div id='header-wrapper' class='desktop-header'>
    Header Blog Tampilan Layar Desktop
  </div>
</b:if>

<b:if cond='data:blog.isMobile'>
  <div id='header-wrapper' class='mobile-header'>
    Header Blog Tampilan Seluler
  </div>
</b:if>

<b:if cond='data:blog.isMobile == &quot;true&quot;'>
  <div id='header-wrapper' class='mobile-header'>
    Header Blog Tampilan Seluler
  </div>
</b:if>

<b:if cond='data:blog.isMobile != &quot;true&quot;'>
  <div id='header-wrapper' class='desktop-header'>
    Header Blog Tampilan Layar Desktop
  </div>
</b:if>

Menggunakan Kondisional Seluler Sebagai Bagian dari Kelas

Pada dasarnya, data:blog.isMobile akan menampilkan nilai berupa true atau false tergantung dari apakah blog tersebut dibuka pada tampilan seluler ataukah pada layar desktop. Sehingga, sebenarnya kita juga bisa menggunakan data tersebut sebagai nama kelas (bagian dari nama kelas) untuk menyatakan bahwa blog tersebut sedang dibuka pada perangkat seluler atau perangkat desktop:

<body expr:class='&quot;mobile-&quot; + data:blog.isMobile'>

Kode di atas akan menampilkan dua kemungkinan nilai kelas, yaitu:

<body class='mobile-true'>

atau

<body class='mobile-false'>

tergantung dengan perangkat apa kita membuka halaman blog tersebut. Sehingga:

/* blog normal */
body.mobile-false #header-wrapper {
  background-color:white;
  color:black;
}

body.mobile-false #sidebar-wrapper {
  background-color:white;
  color:black;
}

/* blog seluler */
body.mobile-true #header-wrapper {
  background-color:black;
  color:white;
}

body.mobile-true #sidebar-wrapper {
  background-color:white;
  color:black;
}

body.mobile-true .desktop-elem {
  display:none !important;
  visibility:hidden;
}

/* dan seterusnya… */

Terakhir…

Agar pengeditan CSS pada blog tampilan seluler bisa bekerja, jangan memilih jenis template apapun pada opsi template seluler. Pilihlah opsi Tersesuai:

Tidak memilih template seluler apapun dengan cara memilih opsi Tersesuai

Menonaktifkan Komentar Tanpa Menyembunyikan Komentar yang Sudah Ada

<b:if cond='data:post.allowComments'> adalah kondisional template yang berfungsi untuk menyatakan bahwa pemilik blog mengizinkan pengunjung untuk menuliskan komentar. Anda biasanya akan melihat kode ini membungkus semua elemen di dalam seksi komentar sehingga jika administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung lain menuliskan komentar baru melalui panel pengaturan utama (bukan opsi pada pengaturan posting), maka seluruh komentar yang telah masuk akan ikut menghilang (disembunyikan):

<div class='comments' id='comments'>
  <b:if cond='data:post.allowComments'>

    <!--
      Seluruh konten di bagian ini akan menghilang jika
      Administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung
      menuliskan komentar baru.
    -->

  </b:if>
</div>

Biasanya hal ini akan merugikan blog-blog bertipe diskusi yang ramai pengunjung, terutama jika komentar-komentar yang diterbitkan berguna untuk pembaca lain sebagai referensi tambahan.

Suatu saat mungkin Anda akan mengalami masa-masa sibuk atau katakanlah “sedang tidak mampu untuk membalas komentar-komentar yang masuk”. Saat Anda mengalami itu biasanya hal yang akan Anda lakukan adalah menutup komentar posting secara temporer dengan cara menyembunyikannya seperti ini:

Menonaktifkan sekaligus menyembunyikan komentar pada semua posting.

Untuk menjaga agar komentar-komentar lama tidak hilang, Anda bisa memindahkan/memperbaharui wilayah kondisional <b:if cond='data:post.allowComments'> menjadi lebih sempit. Cukup hilangkan formulir komentarnya saja dan biarkan komentar-komentar yang sudah ada tetap pada tempatnya. Caranya adalah hapus kode <b:if cond='data:post.allowComments'> ... </b:if> yang mengelilingi elemen <div class='comments' id='comment'> sehingga akan tersisa seperti ini:

<div class='comments' id='comments'>
  ...
</div>

Kemudian cari elemen ini:

<b:include data='post' name='comment-form'/>

Ganti dengan ini:

<b:if cond='data:post.allowComments'>
  <b:include data='post' name='comment-form'/>
</b:if>

Temukan juga kode ini:

<b:include data='post' name='threaded-comment-form'/>

Ganti dengan kode ini:

<b:if cond='data:post.allowComments'>
  <b:include data='post' name='threaded-comment-form'/>
</b:if>

Masing-masing kode biasanya akan ditemukan dua buah, termasuk juga untuk seksi komentarnya. Dimana salah satu adalah elemen komentar yang akan aktif pada blog versi biasa dan satunya lagi aktif pada blog tampilan seluler.

Menambahkan Kelas Spesifik pada Tag BODY Berdasarkan Tipe Halaman

Tipe halaman berubah peran menjadi nama kelas pada tag <body>

Cara termudah untuk menambahkan kelas spesifik pada tag <body> berdasarkan tipe halaman adalah dengan mencantumkan nilai atribut kelas berupa data:blog.pageType seperti ini:

<body expr:class='data:blog.pageType'>

Dengan cara di atas, maka blog Anda akan memiliki kelas spesifik pada tag <body> yang nilainya akan menyesuaikan diri berdasarkan tipe halaman yang sedang diakses.

Kemungkinan akan muncul lima macam nama kelas yaitu:

• index
• item
• archive
• static_page
• error_page

Jika Anda ingin menambahkan lebih dari satu kelas, Anda bisa memisahkannya menggunakan simbol + dan beberapa " Misalnya:

<body expr:class='&quot;loading &quot; + data:blog.pageType'>

Kode di atas nantinya akan menghasilkan markup HTML seperti ini:

<body class='loading tipe_halaman'>

Lalu Bagaimana dengan Halaman Muka, Halaman Label dan Pencarian?

Untuk menambahkan kelas spesifik berdasarkan kondisi-kondisi halaman yang tidak termasuk di dalam data:blog.pageType, caranya menjadi sedikit rumit. Kita harus menambahkan sesuatu berupa elemen divisi tepat setelah tag <body>, kemudian kita tambahkan kelas-kelas tertentu berdasarkan kondisional halaman yang nantinya akan kita terapkan satu per satu. Tag yang kita pakai harus diubah menjadi karakter entitas HTML agar bisa lolos dari editor HTML Blogger:

...
<body>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    &lt;div class=&#39;home-page&#39;&gt;
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      &lt;div class=&#39;item-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      &lt;div class=&#39;archive-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      &lt;div class=&#39;error-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      &lt;div class=&#39;static-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.searchLabel'>
      &lt;div class=&#39;label-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.searchQuery'>
      &lt;div class=&#39;search-page&#39;&gt;
    </b:if>
  </b:if>

  <!-- Konten blog di sini -->

  &lt;/div&gt;
</body>

Saat Anda melihat kode sumber blog Anda melalui peramban, harusnya markup HTML akan tampak kurang lebih seperti ini:

...
<body>
  <div class='kelas-spesifik'>
    ...
  </div>
</body>

---

Untuk Apa Kita Melakukan Ini?

Ya, mungkin Anda ingin membuat warna latar artikel yang berbeda-beda berdasarkan tipe halaman. Saat Anda berhasil menerapkan ini, maka Anda bisa menuliskan kode CSS pada selektor yang diawali oleh nama kelas tersebut untuk membatasi penerapan deklarasi:

.post {
  background-color:white; /* default */
}

.home-page .post {
  background-color:red; /* warna latar artikel saat sedang berada di halaman muka */
}

.item-page .post {
  background-color:orange; /* warna latar artikel saat sedang berada di halaman item */
}

.static-page .post {
  background-color:green; /* warna latar artikel saat sedang berada di halaman muka */
}

.archive-page .post {
  background-color:gold; /* warna latar artikel saat sedang berada di halaman arsip */
}

.error-page .post {
  background-color:blue; /* warna latar artikel saat sedang berada di halaman error */
}

.label-page .post {
  background-color:violet; /* warna latar artikel saat sedang berada di halaman label */
}

.search-page .post {
  background-color:brown; /* warna latar artikel saat sedang berada di halaman hasil pencarian */
}