Sesuaikan Seksyen Pengepala Blog Blogger.com Anda
Dalam tutorial lepas, kami menyesuaikan bahagian Pautan untuk Blogger andaTM weblog. Sekarang, kami akan menyesuaikan bahagian Header di bahagian atas blog. Header tersebut mengandungi tajuk dan perihalan blog anda. Kami akan menukar typeface, atau font, untuk teks dan menambah latar belakang berwarna.

Seperti dalam tutorial lepas, kami akan membuat penambahbaikan ini dengan menukar beberapa baris kod HTML templat. Klik pada tab Template dalam menu di bahagian atas halaman yang akan membawa anda ke bahagian templat Edit Semasa. Anda akan menemui kod HTML untuk templat dalam kotak di bawah. Kami akan membuat beberapa perubahan pada kod gaya CSS. (Untuk mengetahui lebih lanjut mengenai Cascading Style Sheets, ikuti pautan di bawah.) Tatal ke bawah kod itu sehingga anda mencapai bahagian Header dalam tag gaya CSS. Seperti yang anda lihat, teg gaya sangat panjang dan bahagian Header tag gaya mempunyai enam bahagian.

  1. @media semua
  2. @media genggam
  3. #tajuk blog
  4. # blog-title a
  5. # blog-title a: hover
  6. #description

  • Bahagian pertama kod (@media semua) mengawal ciri-ciri Header termasuk lebar, margin dan saiz sempadan. Bahagian kedua (@media genggam) mewarisi ciri-ciri ini dari bahagian pertama dan juga mengubah lebar Header menjadi 90 peratus untuk monitor genggam. Kerana kita mahu warna latar belakang yang baru digunakan dalam kedua-dua keadaan, kita akan menambah garis kod untuk warna latar belakang di bahagian pertama (@media all). Barisan kod baru ini adalah berani di bawah. Dalam contoh di bawah, kami telah menggunakan warna kelabu yang terang tetapi berasa bebas untuk menggunakan mana-mana warna yang anda inginkan.

    @media all {
    #kepala {
    warna latar belakang: # EFE3EF;
    ...

  • Seterusnya, kami akan menukar jenis huruf untuk tajuk ke font yang popular dan gaya kasual yang dikenali sebagai Comic Sans MS. Sudah tentu, anda bebas menggunakan mana-mana fon yang anda suka. Tiga bahagian seterusnya kod CSS template (# blog-title, # blog-title a, # blog-title a: hover) mengawal ciri-ciri untuk judul blog. Bahagian pertama mengawal ciri umum dan dua bahagian lain mengawal rupa teks apabila berfungsi sebagai hiperpautan. Untuk menetapkan tajuk tajuk, atau fon, untuk semua keadaan, kami akan menambah kod CSS untuk keluarga font ke bahagian pertama (# blog-title). Oleh kerana nama font kami mengandungi ruang, ia juga perlu diletakkan di dalam tanda petikan ("komik sans ms").

    #tajuk blog {
    font-family: "comic sans ms";
    ...

  • Akhirnya, kami akan bekerja pada kod CSS untuk perihalan blog anda (#description). Ini adalah bahagian terakhir enam yang asal. Seperti yang anda lihat di bawah, semua kod CSS yang mengawal ciri-ciri fon untuk teks penerangan disenaraikan bersama dalam satu baris. Apa yang perlu kita lakukan ialah menambah "comic sans ms" di hadapan senarai fon yang akan menjadikan Comic Sans MS fon lalai untuk teks penerangan.

    #description {
    ...
    fon: 78% / 1.4em "comic sans ms", "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
    ...
    }

Apabila anda selesai, klik butang Pratonton untuk melihat pratonton perubahan anda dan tutup tetingkap penyemak imbas untuk kembali ke laman web sebelumnya. Klik pada butang Simpan Template Perubahan. Apabila anda melihat mesej pengesahan yang menunjukkan perubahan itu disimpan, klik pada butang Republish. Untuk mengesahkan bahawa blog anda telah dikemas kini, klik pada tab Lihat Blog dalam menu di bahagian atas halaman. Anda mungkin perlu memuat semula laman web blog anda untuk melihat perubahannya.





Tembakan skrin dicetak semula dengan kebenaran daripada Google Inc. GoogleTM, BloggerTM dan BlogSpotTM sama ada tanda dagangan atau tanda dagangan berdaftar Google Inc. di Amerika Syarikat dan / atau negara lain.