Cara Mengganti Judul Blog Dengan Gambar

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

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

Berikut ini yaitu 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 instruksi berikut ini ke dalamnya.
<h1>
<a href="http://fandrajuani.blogspot.com/"><img alt=" Cara mengganti judul blog dengan gambar Cara Mengganti Judul Blog Dengan Gambar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKXMMhi5H788JuX6M-uEfPsu1CeqDZuy-81Keq7MM02YQ_Nc6gVr3gArLO3un4jxm2S1lXJbjU9kIGjVXqdBUlIB3T-GmLMrq1X6epYLIrDOlCJFwHRFxbADLaRoY3GoAeOWOi5-KOgp8i/s1600/Fandra+Juani.jpg" title="Cara Mengganti Judul Blog Dengan Gambar" /></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 kau inginkan
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKXMMhi5H788JuX6M-uEfPsu1CeqDZuy-81Keq7MM02YQ_Nc6gVr3gArLO3un4jxm2S1lXJbjU9kIGjVXqdBUlIB3T-GmLMrq1X6epYLIrDOlCJFwHRFxbADLaRoY3GoAeOWOi5-KOgp8i/s1600/Fandra+Juani.jpg Ganti dengan URL gambar yang akan menjadi HEADER BLOG
fandrajuani.blogspot.com Ganti Title gambar dengan yang kau inginkan

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

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

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

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Selanjutnya Klik edit HTML dan cari instruksi 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, kemudian kembali ke pengaturan tata letak, widget header sudah sanggup 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 ibarat referensi diatas Fandra Juani (Header) blog tidak akan mengganggu Seo Blog, sebab judul blog header sudah diganti dengan gambar. Gambar tersebut fungsinya sama ibarat judul blog standar blogger yang berupa huruf, apabila di klik maka akan kembali ke URL halaman awal blog.

Setelah melaksanakan cara diatas, silakan cek di situs - situs yang menyediakan cek SEO blog, ibarat 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, sanggup dibaca di artikel perihal cara cara upload dan ambil url gambar. Silakan dibaca juga Artikel-artikel lainnya yang masih berkaitan dengan memasukan gambar di blog ibarat cara menciptakan sajian blog dengan gambar icon disamping kiri judul sajian blog.

Jika tidak ingin memakai cara diatas, kau sanggup baca artikel cara merubah tampilan header blog. Di artikel itu header blog tidak dihapus, hanya diberi background dibelakangnya, yang sanggup anda jadikan pilihan dalam merubah tampilan header dari blog anda. Itulah sedikit cara desain blog sendiri di blogspot memakai template orisinil blogger yaitu dengan mengganti goresan pena judul blog dengan gambar. Semoga Bermanfaat.

Read More

Fungsi Margin Dan Padding Di Blog

Margin dan Padding merupakan arahan CSS yang dipakai untuk menciptakan jarak atau spasi. Perbedaanya yaitu margin dipakai pada bagian luar, dan padding pada bagian dalam. Dengan arahan margin kita sanggup merubah posisi dari widget yang kita inginkan, sedangkan padding, kita sanggup menggunakannya untuk bab dalam, menyerupai 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 sanggup kita gunakan diblog yaitu 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 arahan 4, sanggup kita tambahkan arahan - 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 yaitu teladan penggunaan margin pada bab Header blog. Tampilan awal Header blog pertama.

1. Susunan elemen dari gambar diatas yaitu menyerupai dibawah ini.

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

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

Sudah terlihat terperinci perbedaan tampilan blog, dari yg awalnya datar kebawah, kini datar kesamping. Karena ditambahkan arahan margin. kenapa aku beri judul fungsi margin dan padding di blog, alasannya yaitu padding dan margin sanggup dipakai pada semua bagian-bagian blog, jadi tidak hanya menyerupai yang aku contohkan. Yang terpenting yaitu kita cari dulu arahan dari bab yang akan kita edit atau kita ubah posisinya.

Keterangan arahan float

float dipakai biar posisi widget menjadi teratur, menyerupai teladan diatas, header float:left berarti header pada posisi kiri, dan laman(Pagelist1) dan HTML1 pada bab kanan. 

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

Read More

Cara Buat Header Dan Tabs Tanpa Jarak

Cara menciptakan 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 isyarat 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, gres klik Terapkan ke Blog.
5. Jika belum, tambahkan nilai pada isyarat margin:0px -235px 0px -235px; Contoh:-245. Jika sudah melebihi batas penuh. Silakan dikurangi nilai pada isyarat marginnya.
6. Keterangan isyarat margin:0px (Atas) -235px(kanan) 0px(bawah) -235 (kiri).
7. Untuk isyarat padding sama halnya ibarat margin. Tapi padding dipakai untuk merubah posisi bab dalam, jadi tulisannya sanggup kita tempatkan ditengah. Sedangkan margin untuk bab luar.
8. overflow:hidden; isyarat ini gunanya semoga 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 ibarat cara menciptakan header penuh. yang berbeda hanya isyarat 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 isyarat header. Kita sanggup mengatur warna background tabs dibawah header pribadi dari Desainer Template > Tingkat Lanjut > Latar Tab.
3. Jangan lupa diatur juga isyarat margin dan paddingnya semoga sesuai dengan keinginan. Selesai.

Semoga sanggup bermanfaat untuk anda.

Read More

Cara Merubah Tampilan Header Blog

Cara Merubah Tampilan Header Blog.

Misalkan header blog anda menyerupai gambar diatas. Kita sanggup merubah tampilanya, dibawah ini ada 2 cara yang sanggup digunakan.

Cara Pertama: Menggunakan gambar background dengan ukuran yang besar, goresan pena judul dan deskripsi blog disembunyikan. Yang terlihat hanyalah gambar saja dan gambar diletakan dibagian tengah. Kekurangaannya adalah, gambar tersebut tidak sanggup diklik, menyerupai goresan pena 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 isyarat ini didalamnya.

#Header1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtkj7yDlHzk91KUy6zEdWhi3ic1fCElY5DgidrnVlX6BSwLjh4gk5iZfNITloMQ9qwa0PxkrUOQGx-Bo7JfaPUUGZpPrDk88bLWCIhGP3tO7_qdHAUiyfTfsvM7tp2cbpd8quRGXhnUg/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/AVvXsEjEtkj7yDlHzk91KUy6zEdWhi3ic1fCElY5DgidrnVlX6BSwLjh4gk5iZfNITloMQ9qwa0PxkrUOQGx-Bo7JfaPUUGZpPrDk88bLWCIhGP3tO7_qdHAUiyfTfsvM7tp2cbpd8quRGXhnUg/s1600/Fandra+Juani.jpg ialah alamat url gambar yang akan dijadikan background.
• no-repeat menciptakan gambar tidak berulang.
• center ialah posisi gambar ditengah, sanggup 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 goresan pena dari judul blog
• .Header .description goresan pena 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 goresan pena judul-deskripsi blog di letakan disamping kanannya. 

1. Sama menyerupai cara pertama, tapi pada bab langkah 3 masukan isyarat dibawah ini.

#Header1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKh0zyHK0tJrmUwIbGp0D1sZ4szLjJjpBA3vyphyG1mD-aLk0lQuIxLNQZ2UabsegrcqRBuPjXKM3cWWa3eSNYZCa3Rz6-TL__0ysDCseFVhXrvxJ-_V_6mQWxeR8xfvsY1X9GMpeCBW4/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 sanggup menjadi pilihan anda dalam mengubah tampilan header blog anda. Jika ada yang ingin ditanyakan wacana artikel diatas, masukan komentar dibawah. Semoga Bermanfaat.

Read More

Fungsi Fixed Dan Cara Menggunakannya

Belajar fungsi arahan Fixed dan cara menggunakannya diblog. Fixed merupakan arahan css yang berarti menetapkan, dalam penggunaannya, fixed akan menciptakan posisi widget atau gadget menjadi menetap. Atau posisinya akan tetap disitu² saja. Walaupun kita mengarahkan mouse hingga kebawah. Untuk lebih jelasnya silakan lihat gambar dengan goresan pena Contoh penggunaan arahan fixed dibawah ini dibawah kiri. 

Dari contoh, posisi gambar tetap, walaupun mouse diarahkan ke atas atau bawah. Bagaimana membuatnya, silakan baca artikel cara membuat hidangan melekat diblog.

Setelah tamat membaca dan mencoba cara menciptakan hidangan melekat diblog. Sekarang aku beri pola penggunaan arahan fixed pada bab header blog, sedikit lebih rumit dari cara sebelumnya. 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. Copy arahan dibawah ini. Lalu pastekan di kotak pada Tambahkan CSS.
#header {
  width: 100%;
  position: fixed;
top: 0px;
  left: 0px;
  right: 0px;
height: 88px;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 10px;
z-index: 99;
white-space: nowrap;
background-color: #33aaff;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #1780dd 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
4. Maka tampilan header blog akan menetap, tapi masalahnya jikalau header kita beri fixed, bab posting(main) dan juga sidebar, posisinya akan naik. Ini dikarenakan posisi pertama dalam sebuah template itu ialah header, dikala header diberi fungsi fixed, maka akan ada kekosongan diposisi pertama, sehingga posisi kedua(main dan sidebar) akan naik menjadi posisi pertama.
5. Untuk mengatur main(posting) dan sidebar turun, tambahkan arahan berikut dibawah arahan dari langkah 3 tadi.
#main{margin:40px 0px 0px 0px;}
.sidebar{margin:40px 0px 0px 0px;}

Keterangan kode:
#main untuk bab posting
.sidebar untuk bab widget kanan dan kiri blog.
40px 0px 0px 0px untuk mengatur posisinya, atas, kanan, bawah, kiri.
6. Atur sesuai dengan yang kalian inginkan. Setelah itu gres save template. Selesai.

Sekarang, Pertanyaannya, berapa banyak widget yang anda gunakan diblog??? Jika kita hanya mengatur header saja, apalagi memakai background warna. Maka widget/gadget lain yang ada di bab header akan tertutup/tidak terlihat.

Solusinya, kita harus memperlihatkan fungsi fixed juga pada gadget lain yang ada diheader. Contoh: Misalkan anda memakai 2 Gadget lain pada bab header, menyerupai pola dibawah ini.

1. Gadget Menu Laman.
2. Gadget Kotak search.

Kita cari dulu kode id dari kedua Gadget/widget diatas. Cara mencarinya dapat dibaca di menciptakan cara menciptakan hidangan menempel diblog. Berikut pola dari kedua arahan id diatas:

1. PageList1
2. CustomSearch1

Setelah ketemu semua kode, selanjtunya menambahkan satu persatu arahan tersebut dengan fungsi fixed. Contoh Dari Keseluruhan arahan diatas.

#PageList1{
width: 100%;
  position: fixed;
  top: 0px;
  left: 790px;
  right: 0px;
  height: 30px;
z-index: 99;
white-space: nowrap;
}

#CustomSearch1{
width:30%;
position:fixed;
top:0px;
right:0px;
margin:40px 0px 0px 0px;
z-index:99;
white-space:nowrap}

Jika sudah memasang background pada header, gadget yang lain tidak perlu diberi background. Cukup dengan mengatur posisinya saja, atur arahan width: top, right, dan margin untuk mengatur posisi widget. Semoga Bermanfaat.

Contoh penggunaan arahan fixed dibawah ini

Read More