Home Web & Blogging Blogger Tutorial 10 Cara Membuat Template Blogger yang Responsif

10 Cara Membuat Template Blogger yang Responsif

Dq Syafrullah 17 Februari 2025 22 min read

Mengembangkan template Blogger atau mendesain template Blogger tidaklah mudah. Namun, panduan komprehensif berikut dengan tutorial-tutorial terpisah akan membantu kalian membuat template Blogger yang responsif untuk perangkat mobile dari awal, LANGKAH DEMI LANGKAH.

Mungkin kalian menemukan Aplikasi perancang template Blogger melalui pencarian Google, tapi Aplikasi tersebut memiliki banyak keterbatasan yang mungkin tidak kalian sukai.

Kekurangan Menggunakan Software Perancang Template Blogger

Kalian terpaksa memilih contoh desain yang sudah ditentukan: menu, tata letak, dll.
Kalian tidak akan pernah belajar cara membuat kode pada template Blogger di masa mendatang. Sehingga, kalian tidak bisa mengkustomisasi template sesuai kebutuhan.
Kalian tidak akan mempelajari struktur dasar template Blogger. Namun, panduan desain template Blogger ini akan membantu kalian sukses membuat tema atau template Blogger yang sepenuhnya responsif, profesional, dan kustom yang akan terpasang dengan sukses sehingga pengunjung akan melihat perubahan yang kalian lakukan sekarang.

Memilirkan ketika menerbitkan postingan di blog yang kalian desain dan kembangkan sendiri itu memang sangat menyenangkan, bukan?

Cara Membuat Template Blogger dari Awal

Sebelum Memulai Pengembangan Tema Blogger

Cek kemampuan kalian terlebih dahulu. Apakah kalian sudah mahir dalam hal-hal berikut? Jika belum, setidaknya kalian harus menguasai HTML & CSS. Kalian bisa belajar desain web melalui kursus HTML & CSS di w3schools atau Petanikode yang juga menawarkan kursus populer lainnya secara gratis, seperti Bootstrap, JavaScript, dan jQuery.

HTML (Wajib)
CSS (Wajib)
JavaScript (Opsional)
XML (Opsional)
Framework Responsif (Opsional)

Komponen yang kalian butuhkan:

Editor HTML/CSS. Direkomendasikan secara offline, misalnya Notepad++, Sublime Text, Dreamweaver, Geany, dll sesuai dengan preferensi kalian untuk coding.
Notebook untuk menyimpan kode-kode penting, tips, dll.

Mungkin kalian pernah mencoba mengunggah template HTML yang kalian desain secara manual atau dengan copy-paste ke Blogger.

Namun, setiap kali, kalian gagal melihat perubahan karena banyak error yang muncul di notifikasi Editor HTML Blogger.

Hari ini, kalian tidak akan gagal melihat template HTML yang kalian desain melalui platform Blogger. Tidak hanya tampilan template yang berubah, kalian juga akan membuat template HTML menjadi dinamis sehingga bagian Header, Judul Post, Isi Post, Sidebar, dan Footer akan menampilkan data yang dihasilkan. Kalian pun bisa mengkustom logo, Judul Blog, Sidebar, dll melalui Dashboard Blogger tanpa perlu mengubah kode HTML.

Hello World di Blogger

Dari Dashboard Blogger → Tema → Edit HTML, bersihkan semua kode. Pilih semua dengan Ctrl + A lalu tekan DELETE atau Backspace.
Tempelkan HTML mentah dari halaman dasar pada ruang kosong tersebut, lalu simpan temanya. Misalnya, kode yang kalian masukkan adalah sebagai berikut:

<html>
  <head>
     <title>Title of Blog</title>
  </head>
  <body>
     <p>Hello World</p>
  </body>
</html>

Jika kalian mencoba menyimpan tema, akan muncul notifikasi:"There should be one and only one skin in the theme, and we found: 0"

Notifikasi ini muncul karena kita harus menempatkan tepat satu skin di dalam tag <head></head>. Yaitu:

<b:skin>
  <![CDATA[
     /****CSS CODE*****/
  ]]>
</b:skin>

Silakan letakkan kode di atas tepat setelah tag </title> dan simpan temanya.

Ops! Notifikasi muncul lagi:
"We did not find any section in your theme. A theme must have at least one b:section tag."

Editor Blogger menampilkan notifikasi ini karena kalian belum menambahkan section di dalam tag <body>. Jadi, cukup salin dan tempel kode berikut ke dalam tag <body> tepat sebelum <p>Hello World</p>:

<b:section id="hello" class="hello"></b:section>

NB: Kita akan membahas ini nanti.

Sekarang, simpan temanya.

Yes! Tidak ada notifikasi yang muncul lagi.

Santai saja dan coba preview. Ternyata tampilannya hanya menampilkan “Hello World”, bukan?

Sekarang, kunjungi URL blog kalian dan lihat apa yang terjadi.

Selamat! Kalian telah menyampaikan Hello World melalui Blogger! Kalian berhasil menjalankan kode HTML kalian!

Meski ini belum cukup untuk membuat template Blogger, kalian sudah hampir selesai. Ini adalah langkah awal yang paling utama dan mendasar.

Mungkin kalian bertanya-tanya, apa itu tag <b:skin>...</b:skin>?

Tag ini digunakan untuk menampung kode CSS kustom yang berguna untuk mendekorasi blog kalian.

Membuat Post Baru untuk Melihat Tampilan

Mari buat post baru dari Dashboard Blogger → Postingan → Post Baru dan tulis beberapa teks dummy untuk melihat apa yang terjadi di blog yang sudah diterbitkan.

Setelah menerbitkan post baru, ternyata tidak ada post atau teks yang tampil.

Kalian mungkin terkejut,

“Apa!!! Tidak ada yang terlihat! Di mana post kita? Kenapa bisa begini?”

Itu terjadi karena kita belum memberitahu Blogger di mana post akan ditampilkan. Kita belum membuat dan memilih section untuk blog. Tidak hanya untuk post, jika kalian ingin menampilkan Header, Sidebar, dan Footer, kalian harus menentukan itu dengan membuat section dan widget.

Langsung saja, salin dan tempelkan kode berikut ke dalam tag <body></body>:

<b:section class='main' id='main' showaddelement='yes'>
  <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'/>
</b:section>

Simpan temanya.

Jika kalian melihat preview, post yang telah diterbitkan beserta judul dan isinya pun tampil. Itu berarti, kalian telah berhasil menerbitkan blog kalian.

Sekarang, kunjungi blog kalian, pasti kalian akan senang!

Jika kalian memuat ulang Editor Blogger, kalian akan melihat beberapa kode tambahan yang telah digenerate secara otomatis:

Beberapa kode muncul sebelum tag <head>.
Beberapa kode muncul di dalam tag <b:widget></b:widget>.
Kode yang muncul sebelum tag <head> mendefinisikan versi XML dan lainnya agar template ini dirender dengan benar.

Jika kalian memperluas kode di dalam widget blog, kalian akan melihat elemen seperti main, post, comment-form, share-button, dll. Ini adalah alat-alat default yang diperlukan ketika kita menerbitkan post.

Memahami Section dan Widget di Blogger

Walaupun kalian sudah berhasil menerbitkan blog dengan mengikuti instruksi di atas, kemungkinan kalian belum memahami tentang section dan widget. Kenapa demikian?

Kalian harus mempelajari alasannya, karena hal ini akan sangat dibutuhkan di masa mendatang untuk membuat section dan widget baru, apalagi kita belum melihat bagaimana sidebar dan header yang dinamis bekerja.

Karena kita akan belajar dan membuat tema Blogger yang profesional, sebaiknya kita bekerja dengan template HTML yang didesain ulang dan sepenuhnya responsif, yang mencakup Header, Navbar, Main, Sidebar, Footer, dll. Fitur-fitur ini tidak tersedia pada template HTML yang sedang kita kerjakan saat ini.

Keputusan yang lebih baik adalah menggunakan framework responsif bawaan seperti Bootstrap, W3CSS, dll. Namun, saya lebih memilih bekerja dengan Bootstrap dan blog ini pun dibangun dengan Bootstrap.

Kalian tidak perlu mengunduh Bootstrap.

Berikut adalah template HTML kosong Bootstrap yang sudah jadi, dan kita akan bekerja dengan template ini.

Pergi ke Dashboard Blogger → Tema → Edit HTML dan bersihkan semua kode dari tema kalian saat ini. Kalian bisa mencadangkan tema terlebih dahulu.

Sekarang, tempelkan template HTML Bootstrap berikut ke editor dan simpan. Kita akan bekerja dengan template ini dan lupakan template sebelumnya. Ini adalah template percobaan kita.

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Tiga meta tag di atas *harus* ditempatkan pertama di dalam tag head; konten head lainnya harus ditempatkan setelah tag tersebut -->
    <title>My First Blogger Theme</title>

    <!-- Bootstrap -->
    <!-- CSS terbaru yang sudah dikompilasi dan diminify -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />

    <!-- JavaScript terbaru yang sudah dikompilasi dan diminify -->
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"
    ></script>

    <!-- HTML5 shim dan Respond.js untuk dukungan IE8 terhadap elemen HTML5 dan media query -->
    <!-- WARNING: Respond.js tidak berfungsi jika halaman dilihat melalui file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <b:skin>
      <![CDATA[
        /**LETakkan SEMUA CSS KALIAN DI SINI**/
      ]]>
    </b:skin>
  </head>

  <body>
    <div class="header-wrapper">
      <div class="container">
        <div class="brand">
          <!--Letakkan Section Header di Sini-->
        </div>
      </div>
    </div>

    <div class="content-wrapper">
      <div class="container">
        <div class="row">
          <div class="col-md-9">
            <div class="post-wrapper">
              <!--Letakkan Section Utama di Sini-->
            </div>
          </div>
          <div class="col-md-3">
            <div class="sidebar-wrapper">
              <!--Letakkan Section Sidebar di Sini-->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-wrapper">
      <div class="container">
        <p>Powered by <a href="http://www.blogger.com">Blogger</a></p>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </body>
</html>

Bentuk desain template ini seperti berikut:

Kita sudah sampaikan bahwa, untuk menampilkan post yang kita buat, dibutuhkan sebuah section. Membuat section pada tema Blogger sangat mudah.

Apa Itu Section di Blogger?

Section di Blogger adalah ruang yang dialokasikan pada tema Blogger untuk menampung widget.

Aturan Membuat Section di Blogger

Setiap section memiliki tag pembuka dan penutup. Tag pembuka adalah <b:section> dan tag penutup adalah </b:section>. Setelah menerbitkan post, jika kalian memeriksa section melalui browser dengan Inspect Element, kalian akan melihat sebuah <div> dengan class alih-alih tag section. Namun, di Editor HTML Blogger, section tidak diubah menjadi <div>.
Setiap section harus memiliki class dan id yang unik. Menamai class dan id dari satu section yang sama dengan section lain tidak diperbolehkan. Karena section diubah menjadi <div>, class dan id tersebut tetap ada sebagai atribut pada <div>. Sehingga, kalian dapat mengkustomisasi section menggunakan class dan id tersebut.
Tidak diperbolehkan menyisipkan section di dalam section. Di bawah sebuah section, membuat section lain tidaklah valid.
Kalian hanya boleh menyisipkan atribut yang telah ditentukan.
Sebaiknya, buat section di dalam sebuah <div>.

Atribut pada Tag Section

Atribut	Nilai	Wajib/Opsional	Keterangan
id	Nama unik. Hanya huruf dan angka yang diperbolehkan. Contoh: header, navbar, sidebar, footer, dll.	Wajib	Menentukan dan mengkustomisasi section dengan id.
class	Sama seperti id.	Opsional	Menentukan dan mengkustomisasi section dengan class.
maxwidgets	Dalam angka. Contoh: 1, 2, 3, 10, dll.	Opsional	Jumlah widget yang ingin disimpan dalam section ini.
showaddelement	Nilainya Boolean. Ya atau Tidak.	Opsional	Jika ya, maka section akan memungkinkan penambahan gadget sebagai widget; jika tidak, maka tidak.
growth	horizontal dan vertical.	Opsional	Jika nilainya vertical, maka section akan diatur berdampingan; jika horizontal, maka ditumpuk.

Apa Itu Widget di Blogger?

Widget di Blogger dapat dianggap sebagai plugin. Jika kalian ingin menyisipkan atau menginstal gadget eksternal, widget menciptakan ruang untuk plugin di dalam section Blogger.

Secara default, gadget seperti Postingan Populer, Kolom Pencarian, Email Subscription, Daftar Tautan, Gambar, Teks, Label, serta kode HTML/CSS/JavaScript sudah tersedia di Blogger.

Aturan Widget

Kalian bisa menggunakan tag pembuka dan penutup saat mendeklarasikan widget. Tag pembuka adalah <b:widget> dan tag penutup adalah </b:widget>, atau kalian bisa menggunakan tag penutup tunggal seperti <b:widget/>. Setelah menerbitkan post, jika kalian memeriksa widget melalui browser dengan Inspect Element, kalian akan melihat <div> dengan class alih-alih widget. Namun, di Editor HTML Blogger, widget tidak diubah menjadi <div>.
Setiap widget harus memiliki id dan atribut type yang unik. Menamai id atau class dari satu widget menggunakan id atau class yang sama dengan widget yang lain tidak diperbolehkan. Karena widget diubah menjadi <div>, id widget tetap ada sebagai atribut pada <div>, sehingga kalian dapat mengkustomisasi widget menggunakan id tersebut.
Tidak diperbolehkan menyisipkan widget di dalam widget. Di dalam sebuah widget, membuat widget lain tidak valid.
Kalian hanya boleh menyisipkan atribut yang telah ditentukan.
Widget harus dibuat di dalam sebuah section.
Tidak diperbolehkan menyisipkan HTML di dalam widget.

Atribut pada Tag Widget

Atribut	Nilai	Wajib/Opsional	Keterangan
id	Nama unik. Hanya huruf dan angka yang diperbolehkan. Contoh: header, navbar, sidebar, footer, dll.	Wajib	Menentukan dan mengkustomisasi widget dengan id.
type	Header, Blog, Profile, PageList, AdSense, Attribution, HTML	Wajib	Mendefinisikan tipe widget.
locked	yes, no	Opsional	Jika yes, maka kalian tidak bisa menghapus atau memindahkan widget ini.
title	Isi dengan nama judul. Contoh: Tools, Advertisement, Lists, dll.	Opsional	Menampilkan judul widget.
pageType	all, archive, main, item, static, all	Opsional	Mendefinisikan tipe halaman untuk widget.
mobile	yes, no, default	Opsional	Jika yes, maka widget akan ditampilkan di perangkat mobile.

Perbedaan antara Section dan Widget di Blogger

Section	Widget
Section adalah area independen.	Elemen halaman yang bergantung pada section.
Setiap section dapat menampung satu atau beberapa widget.	Widget tidak dapat menampung section.
Section tidak dapat ditambahkan secara dinamis.	Widget dapat ditambahkan melalui Tab Elemen Halaman (Tambah Gadget).
Section tidak memiliki atribut untuk mengontrol tampilan di mobile.	Widget memiliki atribut untuk mengontrol tampil atau tidaknya di perangkat mobile.
Section tidak memiliki atribut judul untuk menampilkan atau menyembunyikan judul.	Widget memiliki atribut judul untuk menampilkan atau menyembunyikan nama judul.
Section memungkinkan penambahan HTML secara langsung.	Widget tidak memungkinkan penambahan HTML secara langsung.

Persamaan antara Section dan Widget di Blogger

Section	Widget
Section tidak dapat menampung section lain.	Widget juga tidak dapat menampung widget lain.
Di blog yang diterbitkan, tag section digantikan oleh `<div>` baru.	Widget juga digantikan oleh `<div>` baru.
Setiap section memiliki id yang unik.	Setiap widget memiliki id yang unik.
Section tidak memiliki atribut untuk mengontrol tampilan di mobile.	Widget memiliki atribut untuk mengontrol tampil atau tidaknya di perangkat mobile.
Section tidak memiliki atribut judul untuk menampilkan atau menyembunyikan judul.	Widget memiliki atribut judul untuk menampilkan atau menyembunyikan nama judul.
Section memungkinkan penambahan HTML secara langsung.	Widget tidak memungkinkan penambahan HTML secara langsung.

Keuntungan dari Penamaan Class pada Section

Meskipun opsional untuk memberi nama pada class section, sebaiknya kalian menambahkannya karena penamaan tersebut akan membantu Blogger menentukan bagaimana mentransfer konten blog saat mengganti tema.
Nama-nama class bawaan antara lain:
- navbar untuk menu navigasi,
- header untuk bagian header,
- main untuk bagian post,
- sidebar untuk area sidebar (tempat menaruh post populer, post terbaru, label, dll.)
- footer untuk bagian footer blog.

Sekarang, buatlah section dan widget baru di tempat yang kalian inginkan. Tanpa widget header & blog, saya sarankan untuk membuat semua section, namun sebaiknya jangan membuat widget di editor karena kalian bisa menambahkan widget dari Dashboard → Tata Letak.

Cara Membuat Menu Navigasi Responsif untuk Blogger

Kalian bisa membuat menu navigasi bar atas yang responsif untuk tema Blogger seperti yang telah kalian lakukan pada mentahan template HTML.

Menggunakan menu navigasi statis di Blogger adalah cara terbaik untuk menghindari banyak masalah. Meskipun kalian bisa menggunakan gadget ‘Pages’ atau ‘Link list’ untuk menyisipkan tautan secara dinamis ke dalam menu, hal tersebut akan menyulitkan pembuatan menu drop-down.

Jadi, kalian tidak perlu data dinamis seperti yang kalian lakukan untuk tata letak lain di Blogger.

Jika kalian menggunakan framework Bootstrap, maka kalian bisa menggunakan navebar dari sini. Atau, kalian bisa cek artikel tentang menu responsif dari w3schools.

Masukkan kode-kode berikut ke dalam tema XML kalian di tempat yang diinginkan untuk menampilkan bar menu navigasi. Setelah membuat menu responsif untuk mobile, cukup tempel URL target ke dalam tag anchor. Contoh:

<ul>
  <li><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Contact</a></li>
</ul>

Namun, kalian juga bisa membuat URL homepage dinamis ke dalam tag <li> seperti berikut:

<li>
  <a expr:href='data:blog.homepageUrl'>Homepage</a>
</li>

Membuat Blogger Dinamis

Karena struktur dasar Tema Blogger adalah:

Header
Blog
Sidebar
Footer

kita harus membuatnya dinamis agar tidak perlu dikodekan ulang.

1. Membuat Header Dinamis:
Masukkan kode berikut ke dalam <div> header:

<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
  <b:widget id='Header1' locked='true' title='' type='Header' />
</b:section>

2. Membuat Post Blog Dinamis:
Masukkan kode berikut ke dalam <div> post:

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1' />
</b:section>

3. Membuat Sidebar Dinamis:
Masukkan kode berikut ke dalam <div> sidebar:

<b:section 
  class='sidebar' 
  id='sidebar' 
  preferred='yes' 
  showaddelement='yes'>
</b:section>

4. Membuat Footer Dinamis:
Masukkan kode berikut ke dalam <div> footer:

<b:section 
  class='sidebar' 
  id='sidebar' 
  preferred='yes' 
  showaddelement='yes'>
</b:section>

Penggunaan Data Default Dinamis di Blogger

Blogger menyediakan beberapa tag data default yang bisa kalian gunakan untuk menampilkan data tertentu.

Contoh: Jika kalian ingin menampilkan nama penulis dari setiap post yang diterbitkan, kalian dapat menggunakan.

<data:post.author/>

Gunakan tag diatas setelah tag berikut:

<div class='post-footer-line post-footer-line-1'>

Demikian pula, ada banyak tag data Blogger untuk menampilkan data spesifik di blog yang diterbitkan. Tag data Blogger ini hanya akan berfungsi di dalam widget Blog.

Tag Data Blogger	Hasil
`<data:post.dateHeader/>`	Tanggal post sebagai header.
`<data:title/>`	Judul blog.
`<data:description/>`	Deskripsi blog.
`<data:olderPageTitle/>`	Judul halaman lama dari post.
`<data:newerPageTitle/>`	Judul halaman baru dari post.
`<data:commentLabel/>`	Jumlah Komentar.
`<data:authorLabel/>`	Menampilkan “diposting oleh”.
`<data:post.title />`	Judul post.
`<data:post.body/>`	Isi post.
`<data:post.author/>`	Nama penulis post.
`<data:post.url/>`	Tautan URL post.
`<data:post.timestamp/>`	Tanggal dan waktu post.
`<data:label.name/>`	Label post.

Kalian dapat memperoleh lebih banyak Tag Data Blogger dari Blogger Support.

Apa Itu Tag Anchor Dinamis di Blogger?

Tag Anchor Dinamis di Blogger diubah menjadi teks anchor umum dengan URL.
Contoh: Jika URL homepage adalah https://www.domain.com, maka tag berikut:

<a expr:href='data:blog.homepageUrl'>Homepage</a>

akan diubah menjadi:

<a href="https://www.domain.com">Homepage</a>

Beberapa tag anchor dinamis untuk Tema Blogger:

Tag Anchor Dinamis	Hasil
`<a expr:href='data:blog.homepageUrl'>Homepage</a>`	Teks dengan URL homepage
`<a expr:href='data:post.url'>Read More</a>`	Teks “Read More” dengan URL post
`<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a>`	Nama label dengan URL label
`<a expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>`	Teks post baru dengan URL post baru
`<a expr:href='data:post.olderLinkUrl'><data:post.newerLinkText/></a>`	Teks post lama dengan URL post lama
`<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>`	Nama penulis dengan URL
`<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>`	Teks komentar dengan URL

Operasi Dinamis Lanjutan

Tampilkan/Sembunyikan, Desain Kustom, Landing Page
Tergantung pada tipe halaman dan URL, jika kalian ingin menyembunyikan sidebar di halaman beranda namun menampilkannya di post atau halaman tertentu, atau jika kalian ingin menampilkan desain baru secara terpisah pada body sebagai contoh URL blog adalah http://www.domain.com/p/contact.html, hal tersebut bisa dilakukan dengan menggunakan tag kondisional.

Dengan tag kondisional, kalian dapat menambahkan HTML, CSS, atau JavaScript tambahan sesuai kebutuhan, sehingga membuat Blogger menjadi lebih dinamis.

Membuat Landing Page di Blogger

Kalian bisa menempatkan kode ini sebelum tag </head> atau setelah tag <body>:

<b:if cond='data:blog.pageType == "index"'>
  <style>
      .sidebar {
          display: none;
      }

      .post-wrapper {
          width: 100%
      }
  </style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
  <b:if cond='data:blog.pageType == "static"'>
      <style>
          .sidebar {
              display: block;
          }
      </style>
  </b:if>
</b:if>

Dengan tag kondisional ini, kalian dapat menargetkan URL, halaman, dan yang lainnya secara spesifik.

Membuat Tag Judul Dinamis

Sekarang, mari kita buat tag judul blog kalian menjadi dinamis. Ini merupakan kombinasi dari Tag Data Blogger dan Tag Kondisional.

Ganti tag <title></title> kalian dengan kode berikut:

<b:if cond='data:blog.pageType == "index"'>
  <title>Blogger, Code and Ubuntu Platform - <data:blog.pageTitle /></title>
  <b:else />
  <b:if cond='data:blog.pageType != "error_page"'>
    <title>
      <data:blog.pageName /> - <data:blog.title />
    </title>
  </b:if>
</b:if>

<b:if cond='data:blog.pageType == "error_page"'>
  <title>Page Not Found - <data:blog.title /></title>
</b:if>

Gantikan teks Blogger, Code and Ubuntu Platform dengan nama judul yang kalian inginkan untuk blog kalian.

Desain Kustom Template Blogger dengan CSS

Kita sudah menyelesaikan 80% dari Pengembangan Tema Blogger. Sisanya, 20% adalah tentang mendesain kustom menggunakan CSS.

Sebelum mengedit desain, sebaiknya kalian belajar cara mengedit template Blogger.

Menemukan semua class & id dari elemen seperti <div>, <section>, <nav>, dll secara manual itu sangat sulit, membosankan, dan membuang waktu.

Tapi saya akan berbagi trik untuk mengumpulkan semua class dan id dari CSS default dalam hitungan detik.

Salin semua kode CSS gratis untuk Blogger dari tautan ini.
Tempelkan ke alat beautify atau formatter.
Setelah terformat, salin seluruh CSS dan tempelkan ke editor HTML/CSS pilihan kalian.
Ubah class dan id CSS jika ada yang kurang terformat dengan baik.
Tempelkan ke Tema Blogger kalian di dalam tag <b:skin> seperti berikut: <b:skin> <![CDATA[ /******LETakkan CSS kalian di sini******/ ]]> </b:skin>
Simpan temanya.
Selanjutnya, kustomisasi CSS kalian menggunakan alat Inspector pada browser.

Tips untuk Bootstrap:
Kalian bisa menyisipkan class CSS ke dalam elemen HTML tertentu. Misalnya, jika kalian ingin menambahkan label Bootstrap ke dalam <data:post.author/>, bungkus elemen tersebut dengan <span> dan tambahkan class label seperti berikut:

<span class='label label-success'><data:post.author/></span>

Tips untuk Font-Awesome:
Kalian bisa menyisipkan ikon Font Awesome seperti berikut:

<span class='label label-success'>
  <i class='fa fa-user'/>
  <data:post.author/>
</span>

Kustomisasi Tema Blogger Lebih Lanjut

Bagaimana Mengatur Posisi Penulis, Label, dan Tanggal di Atas/Bawah Isi Post?

Pertama, pergi ke Dashboard Blogger → Tata Letak → Post Blog → Edit dan kalian akan melihat jendela pop-up.
Pada bagian Post Page Options, centang tombol yang ingin kalian tampilkan dan hilangkan centang opsi yang ingin disembunyikan.
Setelah menggulir ke bawah, kalian akan menemukan bagian Arrange Items. Seret item yang kalian pilih ke atas atau ke bawah untuk mengatur posisinya.
Simpan pengaturan.
Jika tidak berhasil, pindahkan kode terkait dari Editor Blogger secara manual.

Bagaimana Cara Mengkustomisasi Header Tanggal di Blogger?

Tambahkan CSS berikut ke Tema Blogger kalian sesuai dengan kustomisasi:

.date-header { }

Bagaimana Menampilkan/Menyembunyikan Label di Blogger?

Tambahkan CSS berikut ke Tema Blogger:

Untuk menyembunyikan label: .post-labels { display: none; visibility: hidden; }
Untuk menampilkan label: .post-labels { display: block; }

Bagaimana Menghapus Tanggal dan Waktu dari Post di Blogger?

Masukkan CSS berikut ke Tema Blogger kalian:

.post-timestamp { display: none; visibility: hidden; }

Cara Menambahkan Tanggal dan Waktu di Blogger

Ada dua cara untuk menambahkan tanggal dan waktu di postingan blog kalian:

Melalui Dashboard Blogger:
Pergi ke Dashboard Blogger → Tata Letak → Post Blog → Edit → Post Page Options. Centang opsi tanggal yang ingin kalian tampilkan.
Menggunakan Kode di Tema Blogger:
Tempelkan kode berikut setelah tag <div class='post-footer-line post-footer-line-1'> di dalam tema kalian:

<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel />
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url.canonical' itemprop='url' />
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
        <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
          <data:post.timestamp />
        </abbr>
      </a>
    </b:if>
  </b:if>
</span>

Cara Mengubah Nama Penulis di Blogger

Untuk mengubah nama penulis pada postingan, cari kode <data:post.author/> di Editor HTML Blogger kalian, lalu ganti dengan nama yang kalian inginkan menggunakan tag <p>. Contoh:

<p>Coki</p>

Cara Menghapus Nama Penulis dari Post di Blogger

Jika kalian ingin menghapus tampilan nama penulis dari postingan, tambahkan kode CSS berikut ke dalam Tema Blogger:

.post-author.vcard {
  display: none;
  visibility: hidden;
}