Cara Merubah Tampilan Header Blog

Cara Merubah Tampilan Header Blog.

Misalkan header blog anda seperti gambar diatas. Kita bisa merubah tampilanya, dibawah ini ada 2 cara yang dapat digunakan.

Cara Pertama: Menggunakan gambar background dengan ukuran yang besar, tulisan judul dan deskripsi blog disembunyikan. Yang terlihat hanyalah gambar saja dan gambar diletakan dibagian tengah. Kekurangaannya adalah, gambar tersebut tidak dapat diklik, seperti tulisan judul-deskripsi blog.

Ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.

2. Lalu klik Desainer Template > Tingkat Lanjut > Tambahkan Css.

3. Selanjutnya masukan kode ini didalamnya.

#Header1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCL93LMoV4rmzhVDcISWaKxfLxide1XoSlPF9dbH-5lZ9oFw62tWicf1lu4uOr0SoqiavFWXvQbU__e7OEzna01bgm2LctbfbdDILUwCxKyhTau3enGV_Q01FmiMmmcx0VCi63kB7BFaA/s1600/Fandra+Juani.jpg)no-repeat center;margin:-40px 0px -40px 0px;}
.Header h1{ visibility: hidden;}
.Header .description{ visibility: hidden;}

 Keterangan kode:

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCL93LMoV4rmzhVDcISWaKxfLxide1XoSlPF9dbH-5lZ9oFw62tWicf1lu4uOr0SoqiavFWXvQbU__e7OEzna01bgm2LctbfbdDILUwCxKyhTau3enGV_Q01FmiMmmcx0VCi63kB7BFaA/s1600/Fandra+Juani.jpg adalah alamat url gambar yang akan dijadikan background.
• no-repeat membuat gambar tidak berulang.
• center adalah posisi gambar ditengah, bisa diganti dengan left(kiri), dan right(kanan).
• margin:-40px 0px -40px 0px; untuk mengatur jarak -40(atas) 0(kanan) -40px(bawah) 0(kiri) dari background gambar.
• .Header h1 tulisan dari judul blog
• .Header .description tulisan dari deskripsi blog.
• visibility: hidden; menyembunyikan tulisan.

4. Klik terapkan ke blog, selesai.

Cara Kedua: Menggunakan background gambar dengan ukuran yang lebih kecil. Gambar diletakan disamping kiri, dan tulisan judul-deskripsi blog di letakan disamping kanannya. 

1. Sama seperti cara pertama, tapi pada bagian langkah 3 masukan kode dibawah ini.

#Header1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlhavvQSecRpB2QMrPW6w_VI65ndmjU8Xm0pfwbvtyxG1mFQpXuk1dS0zcfk4QZT0njcqX7TShQD9M6GFDmbiGjM82bKuiASfjr2h_Kx7xhVU4OUWntnM-wInF0z05NYqk2tvmfDkS6wM/s1600/Fandra-Juani.png)no-repeat left;}
.Header h1{ margin:0px 0px 0px 80px;}
.Header .description{ margin:-20px 0px 0px 80px;}

2. Klik terapkan ke blog, selesai.

Silakan berkreasi sendiri dengan cara-cara diatas, dan baca juga cara cara mengganti judul blog dengan gambar yang bisa menjadi pilihan anda dalam mengubah tampilan header blog anda. Jika ada yang ingin ditanyakan tentang artikel diatas, masukan komentar dibawah. Semoga Bermanfaat.

Read More

Cara Buat Header Dan Tabs Tanpa Jarak

Cara membuat header dan tabs penuh full body, tanpa ada jarak pemisah antara kiri dan kanan blog. Dibeberapa template header dan juga tabs blog tidak menampilkan background secara penuh, ada jarak kosong diantara kiri dan kanannya. Namun ada juga template yang menampilkan header dan tabs secara penuh tanpa ada jarak.

Cara mengubah header atau tabs blog menjadi penuh tanpa batas, Ikuti langkah-langkah dibawah ini.

Cara Membuat Header Penuh

1. Login ke blogger. Lalu pada halaman awal dasbor. Pilih pengaturan Tata Letak.
2. Selanjutnya Klik Desainer Template > Tingkat Lanjut > Dan Klik Tambahkan CSS.
3. Dan Masukan kode dibawah ini.
#header {background:black;margin:0px -235px 0px -235px;padding:0px 0px 0px 240px;overflow:hidden;}
4. Setelah itu lihat dulu perubahan dari warna background blog kamu. Jika sudah pas memenuhi semua body, baru klik Terapkan ke Blog.
5. Jika belum, tambahkan nilai pada kode margin:0px -235px 0px -235px; Contoh:-245. Jika sudah melebihi batas penuh. Silakan dikurangi nilai pada kode marginnya.
6. Keterangan kode margin:0px (Atas) -235px(kanan) 0px(bawah) -235 (kiri).
7. Untuk kode padding sama halnya seperti margin. Tapi padding digunakan untuk merubah posisi bagian dalam, jadi tulisannya bisa kita tempatkan ditengah. Sedangkan margin untuk bagian luar.
8. overflow:hidden; kode ini gunanya agar tampilan header tidak melebihi halaman blog.
9. Setelah semuanya sudah sesuai dengan yang kalian inginkan, Klik Terapkan Blog. Selesai.

Cara Membuat Tabs Penuh

1. Sama seperti cara membuat header penuh. yang berbeda hanya kode yang harus dimasukan. Kodenya dibawah ini.
.tabs-inner .widget ul {margin:0px -265px 0px -265px;padding:0px 0px 0px 240px;overflow:hidden;}
2. Perbedaannya dengan kode header. Kita dapat mengatur warna background tabs dibawah header langsung dari Desainer Template > Tingkat Lanjut > Latar Tab.
3. Jangan lupa diatur juga kode margin dan paddingnya agar sesuai dengan keinginan. Selesai.

Semoga bisa bermanfaat untuk anda.

Read More

Fungsi Margin Dan Padding di Blog

Margin dan Padding merupakan kode CSS yang digunakan untuk membuat jarak atau spasi. Perbedaanya adalah margin digunakan pada bagian luar, dan padding pada bagian dalam. Dengan kode margin kita dapat merubah posisi dari widget yang kita inginkan, sedangkan padding, kita dapat menggunakannya untuk bagian dalam, seperti spasi antar text tulisan, jarak antara text dengan batas garis widget atas-bawah. Untuk lebih jelasnya lihat gambar dibawah ini.

Adapun kode-kode Css Dari Margin dan Padding yang dapat kita gunakan diblog adalah sebagai berikut:

 Margin

1. margin: 10px;  (10px Spasi atas-kanan-bawah-kiri).
2. margin: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
3. margin: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
4. margin: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)
5. Khusus untuk margin dengan kode 4, bisa kita tambahkan kode - untuk merubah posisi dengan arah berlawanan, contoh: margin: margin:-55px -50px 0 0

Padding

1. padding: 10px;  (10px Spasi atas-kanan-bawah-kiri).
2. padding: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
3. padding: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
4. padding: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)

Dari kode-kode diatas sudah terlihat, yang membedakan Margin dan Padding hanyalah nama awalnya saja sedangkan yang lainnya sama.

Langsung saja, dibawah ini adalah contoh penggunaan margin pada bagian Header blog. Tampilan awal Header blog pertama.

1. Susunan elemen dari gambar diatas adalah seperti dibawah ini.

2. Sekarang ke pengaturan template. Dan klik edit HTML.
3. Lalu cari satu persatu kode dari susunan elemen dari langkah 1.

4. Pertama cari kode Header, disini yang berjudul Fandra Juani. Gunakan Ctrl F untuk mempermudah pencarian. seperti dibawah ini.
5. Setelah ketemu, copy kode bertanda merah diatas, lalu pastekan di notepad, dan lanjutkan mencari kode Laman Dan HTML/javascipt.
6. Setelah semuanya ketemu, tambahkan kode margin untuk merubah posisi yang kita inginkan. seperti dibawah ini.
#Header{float:left}
#HTML1{float:right; margin:-115px -195px 0 0}
#PageList1{float:right; margin:-55px -50px 0 0}
7. Letakan kode diatas ]]></b:skin>
8. Save template, selesai.
9. Tampillan Blog setelah diberi kode margin.

Sudah terlihat jelas perbedaan tampilan blog, dari yg awalnya datar kebawah, sekarang datar kesamping. Karena ditambahkan kode margin. kenapa saya beri judul fungsi margin dan padding di blog, karena padding dan margin bisa digunakan pada semua bagian-bagian blog, jadi tidak hanya seperti yang saya contohkan. Yang terpenting adalah kita cari dulu kode dari bagian yang akan kita edit atau kita ubah posisinya.

Keterangan kode float

float digunakan agar posisi widget menjadi teratur, seperti contoh diatas, header float:left berarti header pada posisi kiri, dan laman(Pagelist1) dan HTML1 pada bagian kanan. 

Silahkan berkreasi, maaf jika tutorial dari saya ini kurang jelas. Jika ada pertanyaan silakan masukan komentar dibawah, semoga bermanfaat.

Read More

Cara Mengganti Judul Blog Dengan Gambar

Cara mengganti judul blog dengan gambar. Header blog standar blogger biasanya hanya berbentuk huruf tulisan, dan tulisan tersebut bisa kita ganti dengan gambar yang kita inginkan, tanpa menghilangkan H1 title blog yang bisa mengganggu Seo blog. 

Sebenarnya blogspot sudah menyediakan Tool untuk mengganti judul blog dengan gambar, yaitu dengan menambahkan langsung gambar di widget header blog pada bagian tata letak. Kekurangan dari tool tersebut, gambar akan menghilangkan H1 title dari judul blog, sehingga blog tidak mempunyai H1.

Berikut ini adalah cara mengganti judul blog dengan gambar tanpa menghilangkan H1 header blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman Dasbor pilih pengaturan TATA LETAK.
2. Selanjutnya Add Gadget atau Tambahkan Gadget dan pilih HTML/JavaScript.
3. Lalu Pastekan kode berikut ini ke dalamnya.
<h1>
<a href="http://fandrajuani.blogspot.com/"><img alt="Desain Blog Tutorial dan Tips Trik Blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjS9Wb-b7P2kRy0iMbppFvTPx5eNTVKY2D9QReq4oky22UFEbysESnAvkxH51wtshm0bxllvgsVCRsS9cOF4jtNvi6fAz0tsmPU18VSIDcA9f9IV0nHxRUoaUsv0G4C0rRhTjAyEKBjhEY/s1600/Fandra+Juani.jpg" title="fandrajuani.blogspot.com" /></a>
</h1>
4. Keterangan Kode diatas.
http://fandrajuani.blogspot.com/ Ganti dengan URL Awal Blog Kamu
Desain Blog Tutorial dan Tips Trik Blogspot Ganti dengan img Alt yang kamu inginkan
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjS9Wb-b7P2kRy0iMbppFvTPx5eNTVKY2D9QReq4oky22UFEbysESnAvkxH51wtshm0bxllvgsVCRsS9cOF4jtNvi6fAz0tsmPU18VSIDcA9f9IV0nHxRUoaUsv0G4C0rRhTjAyEKBjhEY/s1600/Fandra+Juani.jpg Ganti dengan URL gambar yang akan menjadi HEADER BLOG
fandrajuani.blogspot.com Ganti Title gambar dengan yang kamu inginkan

5. Setelah itu Beri Judul Gadget HTML dan Save Gadget dan tempatkan dibawah Header Blog.
6. Tampilan template di Tata Letak menjadi seperti ini.

7. Sekarang blog mempunyai 2 Header yaitu Widget header dan gambar Header.
8. Hapus widget Header, contoh: Fandra Juani (Header). Sehingga blog hanya mempunyai 1 Header. Selesai.

Jika Widget Header tidak bisa dihapus, ikuti langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Selanjutnya Klik edit HTML dan cari kode ini.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>
3. Setelah itu ganti kata true dengan false 
4. Terakhir save template, lalu kembali ke pengaturan tata letak, widget header sudah bisa dihapus. Selesai.

Untuk mengembalikan Widget Header Blog yang sudah dihapus, kembali ke Tata Letak dan tambahkan Gadget pilih dasar-dasar, dan pilih Header Halaman.

Menghapus Widget Header seperti contoh diatas Fandra Juani (Header) blog tidak akan mengganggu Seo Blog, karena judul blog header sudah diganti dengan gambar. Gambar tersebut fungsinya sama seperti judul blog standar blogger yang berupa huruf, apabila di klik maka akan kembali ke URL halaman awal blog.

Setelah melakukan cara diatas, silakan cek di situs - situs yang menyediakan cek SEO blog, seperti situs www.chkme.com, www.seositecheckup.com,  www.seoptimer.com dan lain-lain. Untuk melihat masih ada atau tidak Header H1 Title judul blog.

Untuk cara Upload Gambar dan Ambil URL gambar, bisa dibaca di artikel tentang cara cara upload dan ambil url gambar. Silakan dibaca juga Artikel-artikel lainnya yang masih berkaitan dengan memasukan gambar di blog seperti cara membuat menu blog dengan gambar icon disamping kiri judul menu blog.

Jika tidak ingin menggunakan cara diatas, kamu bisa baca artikel cara merubah tampilan header blog. Di artikel itu header blog tidak dihapus, hanya diberi background dibelakangnya, yang dapat anda jadikan pilihan dalam merubah tampilan header dari blog anda. Itulah sedikit cara desain blog sendiri di blogspot menggunakan template asli blogger yaitu dengan mengganti tulisan judul blog dengan gambar. Semoga Bermanfaat.

Read More