Kali ini I'am mau ngasih tau untuk para Blogger supaya tampilan blognya jadi lebih bagus lagi.
Biasanya kalau download template dari situs-situs biasa, sidebarnya masih original dari templatenya.
Kalau bosen dengan sidebarnya yang gitu-gitu aja, I'am punya tips baru yang pasti bisa di coba.
Sekarang ikuti langkah-langkah barikut ini:
1. Masuk ke Blogger
2. Pilih Tata Letak
3. Edit HTML
4. Sekarang cari kode .sidebar h2 { dengan menekan tombol Ctrl+F pada keyboard supaya nyarinya gampang
.sidebar h2 {
font-size:100%;
font-weight:bold;
text-transform:uppercase;
text-align:right;
border: 1px solid #000;
background:url(Alamat Sidebar)no-repeat top left;
padding;5px;
}
5. Jika di template Blogger belum ada kode setelah kode .sidebar h2 {, anda bisa menambahkannya dari kode yang diatas
6. Ingat yang di copy cuma kode yang berwarna merah!!!
7. Nah... kalau masih bingung cara menyisipkannya, nih contohnya kaya begini...!!!
.sidebar h2 {
font-size:100%;
font-weight:bold;
text-transform:uppercase;
text-align:right;
border: 1px solid #000;
background:url(ILham\'s\ Blog_files/RGsdbar0.gif)no-repeat top left;
padding;5px;
margin: 0 0 0 0; padding: 10px 0 0 0px; font: normal bold 118% Georgia, Times, serif; color: #960A09; text-decoration: underline; height: 32px !important; /* for most browsers */ height /**/:57px; /* for IE5/Win */ }
.sidebar .widget { margin-left:6px; margin-right:2px ; margin-top:0px ; margin-bottom:1em; padding-left:30px; padding-right:15px; padding-top:0px; padding-bottom:30px; text-aling: justify; font-size: 85%; background: url('ILham\'s\ Blog_files/gears_si.jpg') no-repeat bottom center; }
.sidebar a {color: #960A09; text-decoration: none;}
.sidebar a:hover {color: #960A09; }
.sidebar li { padding-left: 5px; }
.profile-textblock { margin:.5em 0 .5em; text-aling: justify; }
.profile-img { float: left; margin: 0 5px 5px 0; border: 0px solid #ddd; padding: 4px;}
8. Kalau udah tau cara menyisipkannya, sekarang supaya bisa tau fungsi dari kode-kode diatas. Mari kita lihat fungsi masing-masing kodenya!!!
Kode font-size:100%;
Berfungsi untuk mengatur besarnya huruf. Satuan yang digunakan bisa pakai % atau pixels (px). Angkanya bisa diganti sesuai keinginan anda.
Kode font-weight:bold;
Berfungsi untuk menunjukan judul yang tampil dengan huruf tebal. Kata bold bisa anda ganti dengan normal, jika penampilanya tidak ingin tebal atau ganti dengan italic jika ingin penampilan hurufnya miring.
Kode text-transform:uppercase;
Berfungsi untuk menunjukan bahwa huruf yang tampil semuanya berupa huruf kapital (besar). Anda dapat menggantinya dengan kata lowercase (semuanya huruf kecil) atau capitalize (hanya huruf depannya yang besar).
Kode text-align:right;
Berfungsi untuk menunjukan letak judul sidebar di bagian kanan. Anda dapat menggantinya dengan left (jika ingin judulnya berada dikiri) atau center (jika ingin judulnya berada di tengah).
Kode border: 1px solid #000;
Berfungsi untuk menampilkan garis di sekeling judul sidebar. Sobat dapat mengganti ukuranya dan warna dari garis tersebut.
Kode background:url(Alamat Sidebar)no-repeat top left;
Berfungsi untuk menunjukan gambar latar dari judul sidebar.
Kode padding;5px;
Berfungsi untuk memberi jarak antara bagian pinggir judul sidebar dengan tulisan judul sidebarnya, dengan maksud agar kelihatan tidak mepet ke bagian pinggir.
9. Nah... udah tau kan maksud dari kode-kode diatas??? Kalau anda mau mengganti gambar latar judul sidebar anda. Anda bisa mengganti tulisan Alamat Sidebar dengan alamat gambar latar judul sidebar kesukaan anda.
Nih... I'am kasih tau beberapa contoh alamat sidebar!!!! Tinggal pilih ajah salah satunya...!!!!
http://i634.photobucket.com/albums/uu61/adetea/RGsdbar.gif
http://i634.photobucket.com/albums/uu61/adetea/side1.gif
http://i634.photobucket.com/albums/uu61/adetea/side3.gif
http://i634.photobucket.com/albums/uu61/adetea/header.gif
10. Kalau langkah-langkah tadi udah selesai, tinggal di simpan dech...!!!
Selamat Mencoba!!!
Sebarkan cara ini untuk teman-teman anda ya...!!!!
Kalau ilmu itu harus berbagi!!!
Huh... Akhirnya selesai juga posingannya. Ini semua I'am lakukan supaya para Blogger bisa menjadikan blognya menjadi tambah keren. Tips ini bisa di coba kalau komputer anda loadingnya cepet. Kalau komputernya lola, lebih baik jangan di coba. Kalau di coba, tips ini bakal membuat komputer anda menjadi tambah lola. Efek dari tips ini akan membuat window berputar saat blog anda dibuka. Yang udah I'am coba, efek ini bisa bekerja pada Mozila Firefox dan Google Chrome saja. Kalau di Opera dan IE efek ini tidak berkerja. Jadi jangan bingung ya kalau blog anda di buka di OP atau di IE efek window berputarnya tidak berkerja!!!
Tapi bagi penasaran, seperti apa sih efek window berputar itu???
Mari ikuti langkah-langkah berikut!!!
1. Seperti biasa LogIn dulu ke Blogger
2. Pilih Tata Letak
3. Edit HTML
4. Sisipkan kode berikut dibawah kode </head> dan diatas <body>
</script>
<script type='text/javascript'>
//<![CDATA[
scrW=screen.availWidth
scrH=screen.availHeight
window.resizeTo(10,10)
window.focus()
for(a=0;a<100;a++){
window.moveTo(0,0)
window.resizeTo(0,scrH*a/100)
}
window.resizeTo(0,0)
for(b=0;b<100;b++){
window.moveTo(0,scrH/1)
window.resizeTo(scrW*b/100,0)
}
for(c=0;c<100;c++){
window.moveTo(scrW/1,scrH/1)
window.resizeTo(0,scrH*c/100)
}
for(d=0;d<100;d++){
window.moveTo(scrW/1,0)
window.resizeTo(scrW*d/100,0)
}
for(e=0;e<100;e++){
window.resizeTo(scrW*e/100,scrH*e/100)
}
window.moveTo(0,0)
window.resizeTo(scrW,scrH)
//]]>
</script>
<script type='text/javascript'>
5. Lalu tinggal simpan dech...!!!!
Sekarang gimana??? udah tau kan seperti apa efek window berputar???
Jangan lupa komentarnya ya...!!!!
Ada yang baru di postingin lagi nih dari I'am. kali ini kita akan mempelajari "Cara Menmbuat Scroll di Postingan"
Supaya postingan para blogger tidak terlalu penuh, mendingan di kasih scroll ajah...!!!
Udah, dari pada banyak cingcong, mendingan tuukk.. kita ikuti langkah-langkah berikut:
1. Masuk ke Blogger
1. Masuk ke Blogger
2. Pilih Tata Letak
3. Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin>
6. Copy kode dibawah ini, tepat di bawah kode ]]></b:skin>
.scrollbox {
height:150px;
width:450px;
overflow:auto;
}
7. Nah.. kode yang berwarna biru itu adalah ukuran scrollbar, anda bisa menggantinya sesuai keinginan anda.
8. Lalu simpan template anda.
9. Pada saat anda memposting, letakan isi postingan anda diantara kode <div class="scrollbox"> dan </div>
Kalau masih bingung cara meletakannya, nih... ada contohnya!!!
<div class="scrollbox">
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
</div>
Maka hasilnya akan seperti ini:
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Nah... isi postingan anda disini....!!!!
Mudah kan..!!!
Jangan lupa..!!!
1. Membuat teks bergerak secara horizontal dari kiri ke kanan
Misalnya kalimat "WELCOME TO ILHAM'S BLOG" ingin diberikan efek marque yang membuatnya bergerak dari kanan ke kiri, maka perintahnya seperti ini :
<marquee>WELCOME TO ILHAM'S BLOG</marquee>
perhatikan hasilnya seperti ini :
Untuk membuat teks bergerak bolak balik dari kiri ke kanan atau sebaliknya, maka perintahnya adalah sebagai berikut :
<marquee behavior="alternate">WELCOME TO ILHAM'S BLOG</marquee>
hasilnya akan seperti ini :
2. Membuat teks bergerak secara vertikal dari bawah ke atas
Perintah marquee untuk membuat teks bergerak dari bawah ke atas adalah sebagai berikut :
<marquee direction="up">WELCOME TO ILHAM'S BLOG</marquee>
Hasilnya seperti ini :
Untuk mebuat teks tersebut bergerak bolak balik secara vertikal, maka perintahnya seperti ini :
<marquee direction="down" behavior="alternate">WELCOME TO ILHAM'S BLOG</marquee>
dan hasilnya akan seperti ini :
Sebarkan untuk teman - teman anda!!!
Selamat Mencoba
Google Translate
