terbaru

Cara Mengganti Posisi Header Blog Kiri dengan Kanan

: Sabtu, Januari 28, 2017

Cara Mengganti Posisi Header Blog Kiri dengan Kanan



Bisa jadi saat ini anda sudah merasa cocok dengan header blog 2 kolom yang anda gunakan. Tapi dengan berbagai alasan, anda ingin antara header kiri dengan header kanan ganti posisi seperti gambar diatas. Maka beginilah cara mengaturnya:

Prinsip dasar dari posisi elemen template adalah pada pengaturan float pada script CSS atau scipt layout tampilan. Apakah kode yang digunakan untuk memerintahkan pada posisi kiri atau kanan. Berikut cara penulisannya:


float: left (posisi di sebelah kiri)
float: right (posisi di sebelah kanan)


Anda tinggal ganti nilai float pada script CSS atau pengaturan template header blog anda dengan salah satu pilihan seperti penulisan diatas. Jika kode floatnya tidak ada, maka anda tinggal tambahkan sendiri diantara kode yang ada pada pengaturan CSS elemen header tersebut. Jika anda masih awan dengan coding, berikut cara detailnya:


Sekarang silahkan login dulu ke halaman dasbor Blogger anda. Setelah dasbor blog anda terbuka, lihat pada menu-menu yang terdapat di sebelah kiri. Tampilannya seperti ini:


Cara Memberi & Mengganti Warna Background Header Blog


Sekarang kliklah pada menu Tema, sehingga terbuka tampilan seperti gambar di bawah ini:


Cara Memberi & Mengganti Warna Background Header Blog


Nah seperti gambar diatas kliklah pada tombol Edit HTML, sehingga terbuka form edit HTML template anda seperti ini:



Cara Mengganti Posisi Header Blog Kiri dengan Kanan


Nah disinilah semua script atau kode yang membentuk template anda tersimpan, termasuk kode untuk mengatur tampilan header blog anda. Sekarang carilah kode dengan variasi seperti ini:


#header2
#header-right
#header-kanan

.header2
.header-right
.header-kanan


Kenapa ada beberapa variasi penulisan? Karena setiap template, menggunakan penamaan yang berbeda. Tapi secara umum, kata-kata "header", biasanya tetap ada. Jadi temukan penamaan untuk kode header anda yang berada pada kolom kedua atau sebelah kanan. Kemudian kenapa ada tanda pagar atau titik di depannya? Itulah standar karakter yang digunakan untuk pengaturan tampilan pada halaman web/blog. Jadi silahkan anda cari salah satu kode tersebut pada script template blog anda. Atau mungkin dengan variasi lain yang khas pada pengaturan header template blog anda sendiri.

Jika anda kesulitan mencari kode header tersebut diantara ribuan kode yang ada pada template blog anda, gunakan trik ini: Cara Cepat Mencari Kode pada Form Edit HTML Template.

Setelah anda temukan, lihat kode pengiring di belakang atau dibawahnya. Misalnya seperti ini:


#header-kanan:{
float: right
padding: 20px;
margin: 10px;
background: #ff6600;
}


Atau bisa juga susunan penulisannya seperti ini:


#header-kanan:{float: right; padding: 20px; background: #ff6600;}


Seperti sudah dijelaskan sebelumnya, gantilah nilai floatnya dengan left atau right sesuai posisi yang anda inginkan. Jika kode float tidak ada pada pengaturan header anda, maka tambahkan sendiri sebaris kode tersebut seperti penulisan diatas.



Cara Mengganti Posisi Header Blog Kiri dengan Kanan


Setelah selesai melakukannya, jangan lupa Simpan Tema anda seperti gambar diatas. Lalu tunggu sampai prosesnya selesai. Setelah itu baru lihat perubahannya, apakah header sebelah kanan blog anda sudah pindah posisi ke kiri dan sebaliknya. Jika tidak ada perubahan, jangan putus asa. Bisa jadi penempatan script floatnya belum cocok dengan rumpun kode headernya. Karena script CSS untuk header, biasanya cukup banyak. Jika anda belum memahami fungsi setiap kelompok penamaannya, terpaksa anda harus banyak uji coba pada setiap kelompoknya, sampai berhasil.

Komentar yang tidak relevan, jorok, spamming dan promosi link akan dihapus

Copyrights @ blogernas ■ Desember 2015 - Erianto Anas | Powered by Blogger