Blogspot: Cara menambahkan border atau gambar di tepi atas blog

Blogger.com-Tutorial hari ini adalah tentang menambahkan batas atau gambar ke bagian atas blog Anda di sepanjang jendela browser. Ini benar-benar cepat dan mudah tetapi dapat benar-benar membawa desain blog Anda bersama. Jika Anda mencobanya, beri tahu saya di bawah ini. Saya ingin melihat bagaimana Anda menyesuaikannya.

MATIKAN BLOGGERS NAV BAR

Pergi ke Layout > Tata Letak > Navbar dan pilih off. Kami mematikannya karena jika tidak akan ditampilkan di atas gambar kami.

TAMBAHKAN GAMBAR KE ATAS BLOG

Buat gambar Anda, Anda dapat menggunakan GIMP yang merupakan alternatif gratis untuk Photoshop. Anda dapat membuatnya kecil lebarnya karena diatur untuk mengulang secara horizontal.
Unggah gambar Anda ke Dropbox, Photobucket, Flickr atau situs hosting gambar lainnya. Di Blogger, buka Tema > Edit HTML dan cari ]]> </b:skin>. Tepat di atas ]]> </b:skin> tempel kode berikut. Tempel kode gambar Anda dan sesuaikan tingginya.

body .navbar {
height: 50px; /* ADJUST THE HEIGHT */
padding: 0;
margin: 0;
background: url('DIRECT IMG URL HERE') repeat-x; /* ADD IMAGE */
}

Alternatif - Anda juga bisa menambahkan kode di atas ke badan {...} di Tema > Edit HTML. Jika Anda pengguna WordPress, Anda dapat menggunakan tutorial ini dengan body {...} sebagai ganti body .navbar { ... }.

TAMBAHKAN BORDER KE TOP OF BLOG

Di Blogger, buka Tema > Edit HTML dan cari ]]> </b:skin>. Tepat di atas ]]> </b:skin> tempel kode berikut, ubah ketebalan batas, jenis gaya dan warna. Anda mungkin perlu menyesuaikan tingginya juga jika ada terlalu banyak ruang di antara batas dan header Anda.

body .navbar {
height: 20px; /* ADJUST THE HEIGHT */
padding: 0;
margin: 0;
border-top: 10px solid #EEEEEE; /* ADJUST THICKNESS, TYPE, COLOUR */
}

Alternatif - Anda juga bisa menambahkan kode di atas ke badan {...} di Tema > Edit HTML. Jika Anda pengguna WordPress, Anda dapat menggunakan tutorial ini dengan body {...} sebagai ganti body .navbar { ... }.