Membuat Beranda Asli untuk Blog Blogger (Blogspot)

Halaman beranda (homepage), landing page, atau halaman yang dimuat saat pembaca mengunjungi URL utama blog Anda, dapat membantu blog mendapatkan lebih banyak pengunjung.

Fitur ini berguna untuk membuat blog memuat lebih cepat, mendapatkan lebih banyak pelanggan (subscriber), memperkenalkan tajuk utama blog, atau membuat tampilan blog Anda terlihat lebih profesional.

Jika Anda mengunjungi blog Blogspot milik seseorang, biasanya beranda tersebut berisi beberapa postingan berurutan (berdasarkan nomor), bilah sisi (sidebar), serta desain yang terlihat sama di setiap halaman atau artikel yang Anda kunjungi. Blog Anda akan terlihat jauh lebih keren jika halaman beranda atau URL utama blog memiliki desain yang berbeda dari halaman artikelnya.

Jika Anda mengunjungi blog Blogspot milik seseorang, biasanya beranda tersebut berisi beberapa postingan berurutan (berdasarkan nomor), bilah sisi (sidebar), serta desain yang terlihat sama di setiap halaman atau artikel yang Anda kunjungi. Blog Anda akan terlihat jauh lebih keren jika halaman beranda atau URL utama blog memiliki desain yang berbeda dari halaman artikelnya.

Di sini, kita akan membuat Beranda Asli (Real Homepage), bukan halaman statis dengan pengalihan (custom redirect)! Kita akan membuat sebuah landing page khusus untuk menyambut pengunjung.

Langkah 1: Memodifikasi Konten Utama (Blog1)

Pertama, buka menu Tema -> Edit HTML. Cari widget Blog1 dengan mengeklik fitur "Lompat ke Widget" (Jump to Widget) dan pilih Blog1. Setelah itu, perluas (expand) bagian kode Main pada widget tersebut.

Di dalamnya, Anda akan menemukan atribut tag `<b:loop>` bawaan yang strukturnya terlihat seperti ini:

<b:loop values='data:posts' var='post'>
  </b:loop>

Pada kode di atas, atribut 'data:posts' berarti artikel Anda akan diambil untuk ditampilkan di halaman tersebut dan diulang sebanyak "X" kali sesuai dengan jumlah postingan yang Anda atur pada setelan Blogger (misalnya jika Anda mengatur 7 postingan, maka akan muncul 7 artikel di halaman utama).

Karena pada halaman landing page atau beranda baru ini kita tidak ingin menampilkan daftar postingan artikel, kita harus menambahkan tag kondisi (conditional tag) agar daftar postingan tersebut disembunyikan khusus di halaman beranda.

Setelah ditambahkan kondisi, struktur kodenya akan menjadi seperti ini:

<b:if cond='!data:view.isHomepage'>
  <b:loop values='data:posts' var='post'>
    </b:loop>
</b:if>

Kondisi cond='!data:view.isHomepage' menggunakan operator ketidaksamaan (tanda seru !), yang berarti kode di dalamnya hanya akan berjalan (bernilai True) ketika halaman yang diakses BUKAN beranda.

Langkah 2: Menyembunyikan Navigasi Halaman

Beranda khusus yang kita buat ini tidak memerlukan navigasi halaman (seperti tombol Older Posts / Newer Posts) layaknya beranda bawaan. Oleh karena itu, pindahkan komponen tag <b:include> navigasi di dalam widget Blog1 ke dalam kondisi pengecualian beranda tadi.

Contoh penempatan kodenya untuk navigasi halaman (`nextprev`) adalah sebagai berikut:

<b:if cond='!data:view.isHomepage'>
  <b:loop values='data:posts' var='post'>
    </b:loop>
  <b:include name='nextprev'/>
</b:if>

Langkah 3: Membuat Konten Khusus Beranda

Sekarang, untuk menentukan konten atau tampilan yang hanya muncul di halaman beranda, kita gunakan kondisi sebaliknya (tanpa tanda seru):

<b:if cond='data:view.isHomepage'>
  </b:if>

Kondisi di atas akan bernilai benar (True) hanya jika pengunjung sedang mengakses halaman beranda utama blog Anda.

Jika digabungkan secara utuh di dalam widget Blog1, maka kerangka dasarnya akan menjadi seperti ini:

<b:if cond='!data:view.isHomepage'>
  <b:loop values='data:posts' var='post'>
    </b:loop>
  <b:include name='nextprev'/>
</b:if>

<b:if cond='data:view.isHomepage'>
  </b:if>

Source Code Contoh Desain Beranda

Berikut adalah contoh kode HTML dan CSS siap pakai yang bisa Anda masukkan di dalam kondisi halaman beranda (data:view.isHomepage) untuk membuat tampilan landing page yang profesional lengkap dengan tombol aksi:

<style>
@media (min-width: 480px){
  .page-homepage-header {
    padding: 55px 0 50px 0;
  }
}
.page-homepage-header {
    background: #f7f7f7;
    color: #43464b;
    padding: 35px 0;
    text-align: center;
}
.page-homepage-header .advanced {
    letter-spacing: .025em;
    padding-bottom: 1.5em;
    margin-bottom: 1.31818em;
}
@media (min-width: 768px){
  .size-22 {
    font-size: 22px;
    line-height: 1.63636;
  }
}
.size-22 {
    font-size: 18px;
    line-height: 1.66667;
}
.page-homepage-header .title {
    margin-bottom: .5em;
}
@media (min-width: 480px){
  .size-84 {
    font-size: 56px;
    line-height: 1;
  }
}
.size-84 {
    font-size: 34px;
    line-height: 1.17647;
}
@media (min-width: 480px){
  .page-homepage-header .bonus {
    margin-bottom: 3.4em;
  }
}
.page-homepage-header .bonus {
    font-size: 15px;
    line-height: 1.66667;
    color: #a0a3a7;
    letter-spacing: .025em;
    margin-bottom: 2em;
}
.blog-title {
    font-size: xx-large;
    font-weight: bold;
    color: rgb(250, 140, 4);
    display: inline-block;
    letter-spacing: 0;
    margin: 0;
    vertical-align: top;
}
@media (min-width: 480px){
  .page-homepage-header .btn {
    padding: 20px 30px 18px 30px;
  }
}
.page-homepage-header .btn {
    letter-spacing: .16em;
    border-color: #f16334;
    font-size: 12px;
    line-height: 1.66667;
    height: auto;
}
.btn-wrr {
    background-color: #f16334;
    border-color: #f16334;
}
@media (min-width: 480px){
  .btn {
    width: auto;
    min-width: 140px;
    padding-right: 20px;
    padding-left: 20px;
  }
}
.btn {
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: 700;
    letter-spacing: .126em;
    padding: 21px 10px 19px 10px;
    width: 100%;
    border: solid 1px;
    cursor: pointer;
    border-radius: 2px;
    white-space: normal;
    color: #fff !important;
}
.btn-wrap a {
    color:#fff;
    text-decoration: none;
}
.page-homepage-header .btn:hover {
    text-decoration:none;
    background: #f16334;
    color: #fff;
    -webkit-box-shadow: 0 20px 28px 0 rgba(241,99,52,.16);
    box-shadow: 0 20px 28px 0 rgba(241,99,52,.16);
}
@media (min-width: 1024px){
  .page-homepage-header .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}
@media (min-width: 1024px){
  .page-homepage-header .text {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    padding: 80px 0 0 6.77966%;
    align-self: center;
  }
}
@media (min-width: 769px){
  .page-homepage-header .photo {
    display: block;
    width: 30.25424%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    align-self: center;
  }
}
@media (max-width: 768px){
  .page-homepage-header .photo {
    display: none;
  }
}
.regular {
    font-weight: 400 !important;
}
.light {
    font-weight: 300 !important;
}
</style>

<div class='page-homepage-header'>
 <div class='inner'>
  <div class='text'>
   <div class='blog-title'>NamaBlogAnda</div>
   <div class='size-22 regular border advanced'>Panduan Blogspot <span class='bold'>LANJUTAN</span></div>
   <h1 class='size-84 light title'>Cara membuat blog Blogspot kita terlihat lebih indah dari yang lain</h1>
   <div class='size-15 regular bonus'><span class='bold red'>BONUS GRATIS:</span> Catatan ringkas tentang bagaimana saya membuat halaman ini untuk Anda</div>
   <div class='btn-wrap'>
       <button class='btn btn-wrr'><a href='/search/'>MASUK KE BLOG</a></button>
   </div>
  </div>
  <div class='photo'>
   <img alt='Hero Image' class='img' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJAOqN7yf218pLZnIW_5hWlVnGPX05vE51aOvAhJkRZ_M-phqB0wFRriuboQ7UtmLDI4M4V8VFPV7iOh1D6b5bgwVOTRHneLzqDerO3x9W41wlHBx0RMLbF2F6Vpdx9V9ju88wwl5_oQx-dr01jKcHdyEVofS16moXULx9RsyrOmRToY/s1600/free_royalty_nature_photos_0002.jpg' width='100%'/>  
  </div>
 </div>
</div>

Catatan Penting untuk Tema Versi Baru (Soho, Emporio, Contempo, dll.)

Untuk tema-tema bawaan Blogger generasi baru, struktur kode looping artikel di atas sudah tidak digunakan lagi. Struktur perulangan tersebut digantikan oleh satu baris kode inklusi bawaan yaitu: <b:include name='super.main'/>.

Jika Anda menggunakan tema versi baru tersebut, Anda cukup membungkus tag super.main dengan kondisi pengecualian beranda seperti ini:

<b:if cond='!data:view.isHomepage'>
  <b:include name='super.main'/> 
</b:if>

Bagaimana cara mengakses beranda bawaan setelah dimodifikasi?

Mungkin Anda bertanya-tanya, jika halaman beranda utama sudah diubah menjadi landing page, ke mana arah tujuan tombol "MASUK KE BLOG" agar pengunjung bisa melihat daftar artikel Anda?

Jika Anda perhatikan baris tombol pada kode contoh di atas, tautannya diarahkan menuju tautan internal /search/ (https://NAMA_BLOG.blogspot.com/search/). Mengakses tautan tersebut akan memicu Blogger untuk menampilkan struktur halaman indeks artikel biasa, persis seperti beranda bawaan blog Anda sebelum dimodifikasi.

Bagaimana dengan komponen Bilah Sisi (Sidebar)?

Karena beranda khusus ini membutuhkan tata letak penuh (full-width), Anda tentu perlu menyembunyikan elemen bilah sisi. Anda bisa menerapkan logika operator ketidaksamaan yang sama (!data:view.isHomepage) pada pembungkus tag b:section milik komponen sidebar Anda agar komponen tersebut otomatis hilang saat beranda diakses.

Lokasi: Malang, Kota Malang, Jawa Timur, Indonesia

Komentar

Posting Komentar

Postingan populer dari blog ini

Tag Widget untuk Tata Letak

Bila menggunakan tema Tata Letak untuk membuat bagian badan blog, Anda dapat menggunakan widget untuk menambahkan elemen halaman seperti gambar dan blogroll. Jenis tag Bagian ini menjelaskan HTML yang dapat Anda gunakan dalam tag penutup Blogger. 1. Include ( b:include & b:includable ) Kapan include digunakan Include paling berguna jika Anda memiliki bagian dari kode yang ingin digunakan kembali di beberapa tempat yang berbeda, atau hanya disertakan dalam keadaan tertentu. Untuk melakukannya, tulis konten dalam b:includable , lalu gunakan b:include di tempat Anda ingin menampilkannya. Format <b:includable id='main' var='thiswidget'> [sisipkan konten yang Anda inginkan di sini] </b:includable> Atribut id (wajib): Pengenal unik yang terdiri dari huruf dan angka. Setiap widget harus memiliki satu includable dengan id='main' . var (opsional): Pengenal yang terdiri dari huruf dan angka, untuk referensi data dalam bagian ini. Ca...
Baca selengkapnya

Tag Data Tata Letak

Ada berbagai tag yang dapat Anda gunakan untuk menyertakan data tertentu dalam template. Semuanya akan diformat sebagai ` ` atau ` `, dengan `name` adalah nama data tertentu yang ingin Anda gunakan. Dalam contoh `name1.name2`, `name2` merupakan item tertentu yang ada di dalam set data bernama `name1`, misalnya `photo.url`. Karena tiap jenis widget menggunakan data yang berbeda, daftar utama dari semua data yang tersedia ini dibagi menjadi beberapa bagian berdasarkan elemen halaman: * [Data yang Tersedia secara Global](https://www.google.com/search?q=%23data-yang-tersedia-secara-global) * [Header Halaman](https://www.google.com/search?q=%23header-halaman) * [Postingan Blog](https://www.google.com/search?q=%23postingan-blog) * [Arsip Blog](https://www.google.com/search?q=%23arsip-blog) * [Widget Profil](https://www.google.com/search?q=%23widget-profil) * [Widget Teks/HTML/JavaScript](https://www.google.com/search?q=%23widget-tekshtmljavascript) * [Widget Feed](https://www.google.com/s...
Baca selengkapnya