Membuat Random Header

Dalam edit Header, adakalanya kita jenuh dengan tampilan itu-itu saja. Belum lagi kita akan merasa bingung untuk memilih dari beberapa gambar untuk dijadikan gambar header. Pilihan yang tepat untuk mengatasi kedua masalah tersebut adalah Membuat Random Header di Blogspot.

Tanpa basa basi yuk kita buat! Sahabat sejuta trik blogger hanya perlu menambahkan kode di Widget sahabat dengan kode berikut ini :

<br /> <script type=”text/javascript”><br /> var banner= new Array()<br /> banner[0]=”Alamat Image01URL”<br /> banner[1]=”Alamat Image02URL”<br /> banner[2]=”Alamat Image03URL”<br /> banner[3]=”Alamat Image04URL”<br /> banner[4]=”Alamat Image05URL”<br /> banner[5]=”Alamat Image06URL”<br /> banner[6]=”Alamat Image07URL”<br /> banner[7]=”Alamat Image08URL”<br /> banner[8]=”Alamat Image09URL”<br /> banner[9]=”Alamat Image10URL”<br /> var random=Math.floor(10*Math.random());<br /> document.write(“<style>”);<br /> document.write(“#header {“);<br /> document.write(‘ background:url(“‘ + banner[random] + ‘”) no-repeat top left;’);<br /> document.write(” }”);<br /> document.write(“</style>”);<br /> </script>

Ganti "alamat image URL dengan alamat url gambar sobat. Ukurannya menyesuaikan header sobat.

Untuk mengatur gambar header blog, Sahabat harus mengetahui Lebar Blog. Dalam kasus ini adalah mengetahui lebar blog. Untuk mengetahuinya silakan klik menu pada Tool Blog di samping kanan posting ini!. Begitulah membuat random header di blogspot. Semoga bermanfaat!

DEMO : http://moelangbotjahesdhe.blogspot.com/
(Dengan klik salah satu jugul posting, maka gambar header akan berubah)

Happy Blogging! by. Sejuta Trik Blogger

Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger

Dalam edit template sobat, perlu kita ketahui berapa ukuran atau lebar elemen-elemen yang ada di blog. Untuk mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger sejuta trik blogger ingin sharing ke teman-teman. Sharing dalam posting ini mudah-mudahan bisa membantu mengedit blog sahabat semua. Yuk mulai saja.
Landscaping company
1. Mengetahui Ukuran / Lebar header

#header-wrapper{
background: #ffffff;
width: 900px;
height: 160px;
font-size: 12px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}

2. Mengetahui Ukuran / Lebar halaman Posting

#main-wrapper{
float:left;
width:590px;
margin:0px 0px 5px 0px;
padding:13px 10px 0px 10px;
overflow: hidden;
}

3. Mengetahui Ukuran / Lebar sidebar

#sidebar-wrapper{
float:left;
width:320px;
margin:13px 0px 5px 0px;
padding:0px;
line-height:19px;
display: inline;
}

Update : Banyak sekali kode sidebar yang bisa dipakai misal #rsidebar-wrapper{ atau #right-sidebar-wrapper{ dll, jadi disesuaikan saja.
4. Mengethui Ukuran / Lebar Footer
/* Footer
----------------------------------------------- */
#footer {
  width:950px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}



a. Untuk mengedit ukuran/lebar Halaman Blog
Cari kode di bawah ini:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

b. Untuk mengedit ukuran/lebar Halaman Posting
Cari kode di bawah ini:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */
}

c. Untuk mengedit ukuran/lebar Sidebar Blog
Cari Code di bawah ini:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


d. Untuk mengedit ukuran Header Blog,
Cari Code di bawah ini:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


e. Untuk mengedit ukuran Footer Blog
Cari Code di bawah ini:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Jika sahabat tidak menemukan kode seperti di atas, untuk mengetahui element seperti header, posting, sidebar dan lebar blogger, cukup mencari kode yang mirip dan ditunjukkan dengan width: (LEBAR) dan height:(TINGGI)

Dengan Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger tentunya akan memudahkan sahabat mengganti dan mengedit blog dengan menyenangkan seperti slogan blog ini.

Happy Blogging! by. Sejuta Trik Blogger

Mengubah Ukuran Font Header Blogger

Mengubah Ukuran Font Header Blogger berikut adalah mengubah tanpa menambah dari google font, hanya mengganti atau mengubah ukurannya saja. Namun bagi yang ingin mengubah font header blogger dengan font khusus web, silakan mencari di gugel, ketik google font.

Ok gak usah lama lama, langsung aj cari kode yang seperti ini :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Rubah variabel text-transform sesuai keinginan.
- uppercase = huruf besar semua
- lowercase = huruf kecil semua
- atau normal

Simpan template.

Catatan:
- Untuk merubah cara penulisan deskripsi blog, cari dan rubah kode text-transform pada baris kode berikut:

    #header .description {
    margin:0 5px 5px;
    padding:0 20px 15px;
    max-width:700px;
    text-transform:uppercase;
    letter-spacing:.2em;
    line-height: 1.4em;
    font: $descriptionfont;
    color: $descriptioncolor;
    }

- Untuk memudahkan pencarian baris kode, gunakan “kotak pencari”, tekan Ctrl + F, lalu ketikan baris kode yang dicari dan tekan enter. Browser yang digunakan disini adalah Internet Explorer (IE). Untuk browser lain, “kotak pencari” letaknya sedikit berbeda. 

Thanks to : asal ngelog.net