Blogger Theme Tutorial

Secara umum, situs web yang aman menggunakan standar enkripsi dan otentikasi untuk melindungi kerahasiaan data serta riwayat transaksi yang terjadi di dalam website tersebut.

Menghubungkan domain kustom ( custom domain ) pada Blogger sangat mudah dilakukan. Langkah pertama yang harus Anda lakukan adalah mendaftarkan nama domain yang telah Anda beli ke dasbor BlogSpot.

Setelah artikel blog Anda sukses terindeks (Bagian 1) dan tema blog Anda sudah bersih dari eror teknis (Bagian 2), langkah terakhir dan paling ampuh untuk melejitkan trafik adalah mengoptimalkan konten.

Setelah memastikan artikel Anda berhasil terindeks melalui fitur Inspeksi URL, langkah SEO krusial berikutnya adalah memastikan tema atau template Blogger Anda memenuhi standar teknis Google.

Menekan tombol "Publikasikan" pada dasbor Blogger bukan berarti artikel Anda otomatis langsung muncul di halaman pencarian Google. Proses masuknya artikel baru ke sistem mesin pencari membutuhkan waktu perayapan (crawling). Jika Anda hanya menunggu secara pasif, artikel bisa memakan waktu berhari-hari bahkan berminggu-minggu untuk terindeks.

Ketika Anda selesai membuat sebuah situs Blogger gratis, Anda bisa langsung membagikan tautan blog tersebut ke orang-orang terdekat. Namun, jika Anda ingin menjangkau audiens yang lebih luas—yaitu orang asing yang tidak mengenal Anda tetapi membutuhkan informasi dari blog Anda—maka situs Anda wajib masuk ke daftar indeks mesin pencari seperti Google.

Pada tutorial Bagian 2 , kita sudah berhasil mengisi area kanan header dengan deretan menu horizontal yang tampak premium saat diakses melalui perangkat desktop. Kita juga sengaja menyembunyikan menu tersebut pada layar smartphone agar tampilan blog tidak berantakan.

Pada tutorial sebelumnya , kita telah berhasil merombak fondasi header bawaan Blogger menjadi tata letak full-width (lebar penuh) dan menempatkan logo secara presisi di sebelah kiri. Namun, header tersebut masih menyisakan ruang kosong di sisi kanannya.

Untuk menggunakan fitur Desainer Template bersama dengan CSS pada template blog Anda, terdapat beberapa panduan struktur yang harus diikuti. Menyiapkan Variabel Pada bagian <head> kode template, Anda wajib menyertakan sepasang tag <b:skin> ... </b:skin> . Deklarasi gaya CSS akan diletakkan di antara kedua tag tersebut, bersama dengan nama-nama variabel khusus yang mengintegrasikan desain Anda dengan halaman pengaturan Font dan Warna pada dasbor Blogger. Contoh Implementasi <head> ... <b:skin> <style type='text/css'> /* * Variable definitions: * <Variable name='bgcolor' description='Page Background Color' type='color' default='#fff'/> */ body { background: $bgcolor; margin: 0; padding: 40px 20px; } </style> </b:skin> </head> > 💡 Catatan: Kode deklarasi variabel CSS yang diapit oleh tag ko...

Bagian <body> pada tema tata letak Blogger terdiri dari beberapa bagian ( section ) dan widget. Bagian ( Section ) adalah bidang atau area dari halaman Anda, seperti bilah sisi ( sidebar ) dan footer . Widget adalah elemen halaman seperti halaman ( PageList ), blogroll , atau apa pun yang dapat Anda tambahkan dari tab "Elemen Halaman". Anda dapat menyertakan HTML apa pun yang disukai di sekitar bagian dalam tema. Bagian ( b:section ) Every section dalam tema Anda wajib memiliki tag pembuka dan penutup yang ditulis seperti ini: <b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section> Atribut Tag <b:section> id — (Wajib) Nama unik yang hanya boleh terdiri dari kombinasi huruf dan angka. class — (Opsional) Nama-nama class umum yang sering digunakan meliputi: "navbar" , "header" , "main" , "sidebar" , dan "foot...

Ada berbagai tag yang dapat Anda gunakan untuk menyertakan data tertentu dalam template. Semuanya akan diformat sebagai <data:name/> atau <data:name1.name2/> , 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 Header Halaman Postingan Blog Arsip Blog Widget Profil Widget Teks/HTML/JavaScript Widget Feed Widget Gambar Widget Label Widget Daftar Widget Daftar Link Widget Logo Data yang Tersedia secara Global Informasi ini berlaku untuk seluruh halaman sehingga Anda dapat menggunakannya di mana saja (tidak terbatas pada widget tertentu). Data ini harus direferensikan sebagai bagian dari data "blog...

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...