PANDUAN

Hai Blogger!

Blogdetik dengan wajah baru ini memberikan kebebasan untuk blogger membuat tema blog sendiri yang unik dan beda dengan pengguna blog lainnya.

Terbagi menjadi 2 cara, antara lain :

  1. Modifikasi CSS
  2. Modifikasi HTML

 

MODIFIKASI CSS

Setelah memilih tema, klik tombol MODIFIKASI.
Terdapat 2 cara untuk memodifikasi, a.l :

  1. Kolom kiri untuk pengaturan dengan pilihan menu.
    1. Gambar Header & Latar Gambar. (Catatan : Tidak semua tema memiliki header )Warna
    2. Latar
    3. Judul Postingan
    4. Isi Postigan
    5. Links
    6. Font
    7. Jenis Font Tulisan dan Ukurannya
  2. Kolom kanan untuk pengaturan dengan mengetikkan langsung kode css.

Contoh

Tema yang dipilih adalah Tema 2 Kolom. Anda ingin mengganti gambar header yang sudah ada dengan gambar pilihan lain. Langkah-langkahnya :

  1. Pilih Tema 2 Kolom, kemudian Klik Tombol Modikasi
  2. Pada kolom sebelah kiri, di Gambar Header klik pilih media, kemudian klik Add Files untuk membuka browser file atau drag gambar dari folder lokal komputer ke dalam box Upload. Kemudian klik kembali Add Files dan klik
  3. Upload jika proses sudah 100%.
  4. Terlihat di kolom kanan muncul kode

header
{
  background-image: url('http://blog.detik.com/fs/124/1248084/files/2015/03/baby-pink-pastel-tileable-patterns-16_1_2.jpg')
};

  1. Terlihat di tampilan gambar tersebut pada posisi center dan tidak menutupi seluruh area header. Maka Anda cukup menambahkan tambahan kode pada kolom sebelah kanan

header
{
  background-repeat: repeat-x;
  background-image: url('http://blog.detik.com/fs/124/1248084/files/2015/03/baby-pink-pastel-tileable-patterns-16_1_2.jpg')
};

 

MODIFIKASI HTML

Blogdetik memiliki dua jenis operator khusus yang digunakan untuk membuat konten dalam HTML Anda , variabel dengan pembatas : {{ ... }} dan blok dengan pembatas : { % ... % } . Variabel digunakan untuk memasukkan data dinamis seperti judul blog Anda atau deskripsi.

Contoh

{{ page_title }}

Variabel juga mempunya atribut, dengan cara menggunakan dot [.]

{{ post.post_title }}

Variabel blok digunakan untuk pengkondisian suatu proses tertentu

{% if post.post_related %} 
  <div class="widget"> 
     <h4 class="title"> <span>Related Post</span> </h4>
        <ul class="f13">
        {% for related in post.post_related %}
        <li> <a href="{{ related.post_url }}" _fcksavedurl="{{ related.post_url }}">{{ related.post_title }}</a> </li>
        {% endfor %}
        </ul> </div>
{% endif %}
 

Variabel Dasar

 Variabel

 Deskripsi
{{ page_title }} Judul halaman
{{ domain }} Nama domain
{{ blog_name }} Judul Blog
{{ blog_description }} Tagline Blog
{{ post.post_title }} Menampilkan judul tulisan

{{ post.post_date_detail.d }}
{{ post.post_date_detail.M }}
{{ post.post_date_detail.Y }}

Menampilkan tanggal terbitan dari tulisan
{{ post.post_author }} Menampilkan penulis dari tulisan
{{ post.total_comment }} Menampilkan jumlah komentar dari sebuah tulisan
{{ post.post_content }} Menampilkan isi dari tulisan
{% for category in post.categories %}
<a href="http://{{ http_host }}/category/{{ category.cat_nicename }}" _fcksavedurl="http://{{ http_host }}/category/{{ category.cat_nicename }}">{{ category.cat_name }} </a>
{% endfor %}
Kondisi menampilkan kategori dari sebuah tulisan dan clickable ke indeks tulisan dari kategori tersebut
{% for tag in post.tags %}
<a href="http://{{ http_host }}/tags/{{ tag.tag_nicename }}" _fcksavedurl="http://{{ http_host }}/tags/{{ tag.tag_nicename }}">{{ tag.tag_name }} </a>
{% endfor %}
Kondisi menampilkan tag dari sebuah tulisan  dan clickable ke indeks tulisan dari tag tersebut
{{ prev }} - {{ next }} Menampilkan navigasi halaman dalam bentuk sebelum dan sesudah
{{ paging }} Menampilkan navigasi halaman dalam bentuk list angka

 

Variabel Fitur & Widget

Pada laman ini Anda juga dapat memasang kustom widget dari blogdetik atau widget dari sumber lain (baca : Syarat & Ketentuan).

Langkah-langkahnya :

  • Secara default, pada masing-masing tema blog sudah menyediakan kustom widget dari blogdetik.
  • Jika ingin merubah/menambah pengaturan widget tertentu, maka Anda cukup klik menu-menu widget di kolom Aksesoris. Contoh : Anda ingin menampilkan profil penulis hanya berupa avatar dan tentang saya. Maka klik menu Profil Penulis, kemudian pilih Avatar dan Tentang Saya.
  • Klik tombol Tampilkan Kode, salin kemudian pasangkan pada editor Kode HTML di kolom sebelah kanan. Anda dapat bebas memasang di mana saja, atau cari penanda lokasi widget.
Variabel Deskripsi
{{ search_box }} Fitur pencarian
{{ comment }} Fitur komentar
{{ widget_box_author }} Widget untuk menampilkan profil penulis. Untuk avatar,  nama lengkap
dan email diambil dari data detikconnect. Pengaturan bisa diset di sini. Sedangkan untuk Tentang Saya (Bio) bisa diset di menu Pengaturan.
{{ widget_archieve }} Tulisan-tulisan dari user dikelompokkan berdasarkan tahun pembuatan tulisan. Terdapat 2 jenis kelompok, List & Dropdown.
{{ widget_categories }} Menampilkan tulisan user dikelompokkan dalam Kategori.
{{ widget_links }} Menampilkan list tautan yang sudah didaftarkan sebelumnya
{{ widget_rss }} Widget RSS dapat diatur berapa banyak konten yang ingin ditampilkan
{{ recent_post }} Widget ini menampilkan list tulisan terupdate dari blog tersebut
{{ recent_comments }} User dan postingan yang dikomentari akan muncul di widget ini