Menu Navigasi Custom!


Sabtu, 25 Agustus 2012

Resep Ayam Goreng Lengkuas


Ayam goreng lengkuas punya aroma khas dan rasa gurih yang sulit ditolak. Perpaduan ayam yang empuk dengan taburan lengkuas goreng membuat hidangan ini cocok disajikan bersama nasi hangat, sambal, dan lalapan.

Memasak sendiri di rumah memberi kepuasan tersendiri. Selain lebih hemat, rasa juga bisa disesuaikan dengan selera.

Bahan

·         1 ekor ayam, potong menjadi 8 bagian

·         1 batang serai, memarkan

·         2 lembar daun salam

·         250 gram lengkuas, parut

·         1/2 sdm air asam jawa

·         500 ml air

·         Minyak untuk menggoreng

Bumbu Halus

·         4 siung bawang putih

·         6 siung bawang merah

·         1/2 sdt ketumbar

·         3 butir kemiri, sangrai

·         1 cm jahe

·         1 sdm garam

·         1/2 sdm gula merah

Cara Membuat

1.      Campurkan ayam, serai, daun salam, lengkuas, bumbu halus, dan setengah bagian air (250 ml) ke dalam wajan. Masak di atas api kecil hingga mendidih dan air berkurang.

2.      Tuang sisa air secara bertahap. Masak hingga ayam matang dan bumbu meresap. Tambahkan air asam jawa, aduk rata, lalu angkat dan tiriskan.

3.      Goreng ayam dalam minyak panas dengan api sedang hingga kuning kecokelatan. Goreng juga sisa bumbu sampai kering.

4.      Sajikan ayam bersama taburan lengkuas goreng.

Senin, 20 Agustus 2012

Cara Mengatur Ukuran Font Postingan & Sidebar di Blogspot


 

Ukuran font sangat memengaruhi kenyamanan membaca blog. Font yang terlalu kecil melelahkan mata, sementara font terlalu besar membuat tampilan terasa tidak proporsional. Di Blogger, pengaturan font bisa dilakukan dengan dua cara: melalui Tema Designer dan melalui CSS.

Artikel ini membahas cara yang realistis, aman, dan mudah dikontrol, terutama untuk blog yang ingin terlihat rapi dan profesional.

1. Mengatur Ukuran Font Lewat Tema Designer (Cara Paling Aman)

Cara ini cocok jika kamu tidak ingin mengutak-atik kode HTML.

Langkah-langkah:

  1. Masuk ke Dashboard Blogger
  2. Pilih Tema → Sesuaikan
  3. Masuk ke menu Lanjutan
  4. Pilih bagian yang ingin diubah:
    • Post Title (judul postingan)
    • Post Body (isi artikel)
    • Sidebar atau Gadget Text (teks sidebar)
  5. Atur ukuran font sesuai kebutuhan
  6. Klik Terapkan ke Blog

Kelebihan cara ini adalah aman dan minim risiko. Kekurangannya, kontrol ukuran font kadang terbatas tergantung template yang digunakan.

2. Mengatur Ukuran Font Postingan Melalui CSS

Jika ingin ukuran font lebih presisi, CSS adalah pilihan yang lebih fleksibel.

Langkah awal:

  1. Masuk ke Tema → Edit HTML
  2. Klik di dalam kode, lalu tekan Ctrl + F
  3. Cari tag ]]></b:skin>
  4. Tambahkan kode CSS tepat di atasnya

Contoh pengaturan font isi artikel:

.post-body {

  font-size: 16px;

  line-height: 1.7;

}

Ukuran 16px adalah ukuran aman untuk kenyamanan membaca di desktop dan masih nyaman di mobile.

3. Mengatur Ukuran Font Judul Postingan

Untuk judul artikel, gunakan ukuran yang tegas namun tidak berlebihan.

.post-title {

  font-size: 26px;

}

Jika judul terlalu besar di mobile, sebaiknya dikombinasikan dengan media query, bukan sekadar memperbesar ukuran.

4. Mengatur Ukuran Font Sidebar

Sidebar sering diabaikan, padahal terlalu kecil akan sulit dibaca.

.sidebar {

  font-size: 14px;

}

Untuk judul widget sidebar:

.sidebar .widget-title {

  font-size: 16px;

}

Ukuran ini cukup proporsional tanpa membuat sidebar terlihat penuh.

5. Hal yang Perlu Diperhatikan

  • Jangan mengubah terlalu banyak ukuran font sekaligus
  • Selalu cek tampilan desktop dan mobile
  • Gunakan satuan px untuk konsistensi
  • Simpan salinan template sebelum mengedit HTML

Mengatur font bukan soal besar atau kecil, tetapi soal kenyamanan dan keseimbangan tampilan blog secara keseluruhan.

 

Sabtu, 18 Agustus 2012

Cara Membuat Menu Dropdown di Blogspot


 Pada seri sebelumnya, kita sudah membahas cara membuat menu navigasi custom di Blogspot.

Di artikel ini, kita lanjut ke tahap berikutnya, yaitu membuat menu dropdown agar navigasi blog terlihat lebih rapi dan profesional.

Menu dropdown sangat berguna jika blog memiliki banyak halaman, label, atau kategori.
Pengunjung jadi lebih mudah menemukan konten tanpa memenuhi header blog.

Catatan jujur:
Contoh menu dropdown yang benar-benar aktif bisa kamu lihat di dummy blog saya:
https://dsimplecraftcikarang.blogspot.com

 Apa Itu Menu Dropdown?

Menu dropdown adalah menu bertingkat.
Saat kursor diarahkan ke menu utama, sub-menu akan muncul secara otomatis.

Menu jenis ini umum dipakai di blog tutorial, resep, dan personal blog dengan banyak topik.

Struktur Dasar Menu Dropdown

Pastikan kamu sudah punya menu navigasi custom seperti di seri pertama.
Struktur HTML dasarnya kurang lebih seperti ini:

<ul class="menu">

  <li><a href="/">Home</a></li>

  <li>

    <a href="#">Tutorial</a>

    <ul class="submenu">

      <li><a href="/search/label/Blogger">Blogger</a></li>

      <li><a href="/search/label/Canva">Canva</a></li>

      <li><a href="/search/label/Website">Website</a></li>

    </ul>

  </li>

  <li><a href="/p/about.html">About</a></li>

</ul>

HTML ini tidak ditempel di Tema, tetapi di HTML gadget menu navigasi yang sudah kamu buat.

 CSS untuk Menu Dropdown

CSS inilah yang membuat submenu tersembunyi dan muncul saat di-hover.
Paste CSS berikut di Tema → Sesuaikan → Tambahkan CSS.

.menu {

  list-style: none;

  padding: 0;

  margin: 0;

}

.menu li {

  position: relative;

  display: inline-block;

}

.menu li a {

  padding: 10px 15px;

  display: block;

}

.submenu {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  background: #fff;

  min-width: 180px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}

.submenu li {

  display: block;

}

 .menu li:hover .submenu {

  display: block;

}

CSS ini aman dan tidak mengubah struktur template utama.
Jika menu tidak muncul, biasanya karena CSS belum tersimpan atau class berbeda.

Tips Agar Menu Dropdown Tidak Bermasalah

Gunakan dropdown hanya untuk menu yang benar-benar perlu.
Terlalu banyak submenu justru membuat navigasi membingungkan.

Uji menu di versi desktop dan mobile.
Beberapa template membutuhkan penyesuaian tambahan untuk layar kecil.

Catatan Penting

Tutorial ini sengaja dibuat bertahap dan jujur.
Tidak semua menu di blog ini menggunakan dropdown karena fokus blog berbeda.

Contoh real digunakan di blog lain agar tidak merusak blog utama.

Rabu, 15 Agustus 2012

Cara Menambahkan Menu Navigasi Custom di Blogspot

Catatan Penting Sebelum Mencoba Tutorial

Tutorial ini saya tulis sebagai referensi bagi blogger yang ingin mencoba menu navigasi custom di Blogspot. Untuk menjaga kestabilan dan konsistensi tampilan, blog ini sendiri masih menggunakan menu bawaan tema.

Sebagai gambaran hasil jadi, contoh penerapan menu navigasi custom bisa kamu lihat di blog dummy milik saya berikut ini:
👉 https://dsimplecraftcikarang.blogspot.com

Blog dummy tersebut khusus digunakan untuk uji coba, eksperimen CSS/HTML, dan simulasi tutorial sebelum benar-benar diterapkan di blog utama.

Seri Tutorial Blogger (Pemula – Menengah)

Seri ini dibuat khusus untuk kamu yang menggunakan Blogspot/Blogger dan ingin blog terlihat lebih rapi, fungsional, dan enak dipakai pembaca. Bahasa dibuat ringan, langkah jelas, dan bisa dipraktikkan langsung.

Daftar Seri Tutorial:

  1. Cara Menambahkan Menu Navigasi Custom di Blogspot
  2. Cara Membuat Menu Dropdown di Blogspot
  3. Cara Mengatur Ukuran Font Postingan dan Sidebar Blogspot
  4. Cara Menambahkan Widget Penting agar Blog Lebih Interaktif
  5. Cara Merapikan Tampilan Blog agar Lebih Nyaman Dibaca

    Cara Menambahkan Menu Navigasi Custom di Blogspot


    Menu navigasi berfungsi membantu pembaca menemukan halaman penting di blog kamu dengan mudah. Menu yang rapi akan membuat blog terlihat lebih profesional dan meningkatkan kenyamanan pengunjung.

    Pada tutorial ini, kita akan membuat menu navigasi custom menggunakan HTML dan CSS sederhana, tanpa plugin tambahan.

    Persiapan Awal

    Pastikan kamu sudah:

    • Login ke akun Blogger
    • Mengetahui menu apa saja yang ingin ditampilkan (misalnya: Home, About, Blog, Resep, Kontak)

    Langkah 1: Masuk ke Dashboard Blogger

    Masuk ke Blogger → Dashboard → Tata Letak (Layout).

    Langkah 2: Tambahkan Gadget HTML/Javascript

    Klik Tambah Gadget pada bagian header atau area menu, lalu pilih HTML/Javascript.

    Langkah 3: Masukkan Kode Menu Navigasi

    Salin dan tempel kode berikut ke dalam kolom HTML.

    <ul class="menu-navigasi">

      <li><a href="/">Home</a></li>

      <li><a href="/p/about.html">About</a></li>

      <li><a href="/search/label/Resep">Resep</a></li>

      <li><a href="/search/label/Tutorial">Tutorial</a></li>

      <li><a href="/p/contact.html">Contact</a></li>

    </ul>

    Klik Simpan.

    Langkah 4: Tambahkan CSS Menu

    Masuk ke Tema → Sesuaikan → Advanced → Tambahkan CSS atau Edit HTML lalu letakkan kode berikut sebelum </style>.

    .menu-navigasi {

      list-style: none;

      margin: 0;

      padding: 0;

      display: flex;

      gap: 20px;

    }

    .menu-navigasi li a {

      text-decoration: none;

      font-size: 16px;

      color: #333;

    }

    .menu-navigasi li a:hover {

      color: #b40404;

    }

    Simpan perubahan.

    Langkah 5: Cek Tampilan Blog

    Buka blog kamu dan lihat hasilnya. Menu navigasi custom sekarang sudah tampil dan bisa diklik.

    Jika menu terlihat terlalu kecil atau terlalu besar, kamu bisa menyesuaikan ukuran font di bagian CSS.

    Tutorial berikutnya akan membahas cara membuat dropdown menu agar menu blog kamu lebih rapi dan tidak memakan banyak tempat.

     


    Jumat, 10 Agustus 2012

    Resep Kue Bika Ambon



    Hmmm… Bika Ambon. Dulu saya sempat mengira kue ini berasal dari Ambon (maklum, ndeso 😄). Pertama kali mencicipinya, rasanya langsung membekas: legit, harum, dan bersarang cantik. Waktu itu saya mencicipinya dari oleh-oleh teman kantor yang baru pulang mudik dari Medan—kota asal Bika Ambon yang sesungguhnya.

    Bertahun-tahun kemudian, setelah beberapa kali menikmati Bika Ambon asli Medan, akhirnya muncul keinginan untuk mencoba membuatnya sendiri di rumah. Setelah browsing ke sana-sini, saya menemukan resep yang pas dan mulai bereksperimen. Berikut resep Bika Ambon yang bisa kamu coba di rumah.

    Bahan A

    • 100 gram tepung terigu protein sedang
    • 200 ml air kelapa segar
    • 11 gram ragi instan

    Bahan B

    • 16 butir kuning telur
    • 400 gram gula pasir
    • 300 gram tepung sagu tani
    • 600 ml santan kental matang
    • 1 sdt garam
    • 1 sdt vanili

    Cara Membuat

    Aduk semua bahan A hingga rata, lalu diamkan selama 15 menit.

    Aduk rata kuning telur, gula, garam, dan vanili. Masukkan bahan A, kemudian tambahkan tepung sagu. Aduk rata sambil menuangkan santan sedikit demi sedikit hingga habis. Setelah itu, saring adonan.

    Diamkan adonan selama kurang lebih 2 jam.

    Tuang adonan ke dalam cetakan oval yang sudah diolesi minyak tipis-tipis.

    Panggang dalam oven panas dengan posisi pintu oven sedikit terbuka hingga matang.

    Tips Sukses Membuat Bika Ambon

    Buat biang terlebih dahulu, yaitu dari bahan A, agar fermentasi berjalan optimal.

    Untuk santan, gunakan kelapa tua. Ambil santan kentalnya saja, lalu masak dengan api kecil hingga agak berminyak. Tambahkan daun pandan, daun jeruk, dan serai agar aromanya wangi, lalu saring.

    Tepung sagu yang sering direkomendasikan untuk Bika Ambon adalah tepung sagu ubi (biasanya berkemasan kertas putih tebal bertuliskan “Sagu Obi”).

    Saat menambahkan santan ke dalam adonan, aduk perlahan. Jangan mengaduk terlalu kuat agar tekstur tetap bagus.

    Panaskan loyang Bika Ambon terlebih dahulu. Loyang yang cukup panas akan membantu terbentuknya sarang. Tanda loyang sudah panas adalah muncul suara mendesis saat adonan dituang.

    Setelah adonan dituang ke loyang, jangan diaduk lagi.

    Panggang Bika Ambon dengan suhu rendah. Karena itu, pintu oven sebaiknya diganjal agar terbuka sedikit. Jika oven terlalu panas, hasilnya bisa bantat.

    Jika ingin bagian atas berwarna kecokelatan, gunakan api atas sebentar saja setelah kue matang.

    Semoga resep ini bisa membantu kamu yang ingin mencoba membuat Bika Ambon sendiri di rumah.