10/4/14

Cara Buat Judul pada Widget Rata Tengah

Pada posting sebelumnya telah di bahas tentang Cara Buat Judul Posting Rata Tengah maka pada artikel kali ini akan di bahas pula bagaimana membuat judul pada widget menjadi rata tengah agar tampilan blog kelihatan menjadi lebih padan.

Tips untuk membuat judul pada widget rata tengah prinsipnya sama dengan Cara Buat Judul Posting Rata Tengah, perbedannya terletak pada kode HTML yang terdapat pada elemen template yang akan di update.

Berikut cara Cara Buat Judul pada Widget Rata Tengah :
  • Login ke blogger dengan ID Anda
  • Klik Template >> Edit HTML >> Proceed/Lanjutkan
  • Cari kode h2 atau h3 kemungkinan anda akan menemukan lebih dari satu kode tersebut, pusatkan perhatian pada salah satu kode yang mengandung kata sidebar atau widget, karena kemungkinan akan berbeda untuk setiap template.  Sebagai contoh lihat kode di bawah ini :
  • h2 {
     font: $(widget.title.font);
    color: $(widget.title.text.color);
    margin: 0 0 .5em;
    }
  • Untuk membuat judul pada widget menjadi rata tengah tambahkan kode text-align:center;sehingga kodenya menjadi seperti ini :
  • h2 { 
      font: $(widget.title.font);
      color: $(widget.title.text.color);
      margin: 0 0 .5em;
      text-align:center;
    }
  • Atau kemungkinan anda akan menemukan kode seperti di bawah ini, perhatikan kode text-align:left;
  • .sidebar h2{margin:10px 0 0 0;padding:9px 0 8px 10px;font-size:24px;line-height:24px;font-family:Kaushan Script,Arial,Helvetica,Sans-serif;color:#303030;background:url(https://lh4.googleusercontent.com/-TkjV_KK6sZ4/TyR40diWzmI/AAAAAAAAApg/Xnf76LhTc0c/h120/sidebar-tab4.png) left top repeat-x;border-top:1px solid #E4E3E3;border-left:1px solid #E4E3E3;font-weight:bold;text-align:left;text-shadow: 4px 4px 4px #aaa;}
  • Maka anda tinggal merubah kode text-align:left; menjadi text-align:center; sehingga kode menjadi seperti dibawah ini :
  • .sidebar h2{margin:10px 0 0 0;padding:9px 0 8px 10px;font-size:24px;line-height:24px;font-family:Kaushan Script,Arial,Helvetica,Sans-serif;color:#303030;background:url(https://lh4.googleusercontent.com/-TkjV_KK6sZ4/TyR40diWzmI/AAAAAAAAApg/Xnf76LhTc0c/h120/sidebar-tab4.png) left top repeat-x;border-top:1px solid #E4E3E3;border-left:1px solid #E4E3E3;font-weight:bold;text-align:center;text-shadow: 4px 4px 4px #aaa;}
  • Setelah selesai merubahnya klik tombol Simpan template >> Tutup jendela kode HTML
  • Silahkan periksa tampilan blog Anda, jika berhasil ucapkan Alhamdulillah

Note :
  • Kemungkinan anda akan menemukan kode yang berbeda karena setiap template blog yang digunakan memiliki karakteristik kode HTML tersendiri pusatkan saja perhatian pada kata sidebaratau widget saat pencarian kode.
  • Jika Layout Template yang anda gunakan terdapat widget pada bagian footer cari juga kodeOuter-Wrapper dan tambhakan kode seperti di atas