efek kursor bertabur bintang
membuat blog menjadi menarik memang suatu hal yang wajib agar memberi keindahan pada blog. saya akan memberi tips untuk mempercantik blog kalian, tips ini adalah memberi efek bertabur bintang pada kursor.
silahkan langsung dipraktekkan ya. untuk contoh boleh dilihat pada kursor blog saya ini. script yang saya gunakan adalah javascript yang saya dapat dari teman.
mari kalian langsung lakukan langkah-langkah berikut:
1. masuk ke blogger, kemudia pada dasbor pilih Rancangan
2. setelah itu pilih elemen laman kemudian klik tambah gadget.
3. kemudian pilih html/javascript, dan masukan script dibawah ini.
pilih script dibawag ini sesuai dengan keinginan kalian, kalian dapat memilih warna dengan script dibawah ini, silahkan pilih salah satu kemudian masukan pada gadget html.javascript yang telah kalian pilih tadi.
Bintang biru
Bintang hijau
Bintang merah
Bintang putih
1. masuk ke blogger, kemudia pada dasbor pilih Rancangan
2. setelah itu pilih elemen laman kemudian klik tambah gadget.
3. kemudian pilih html/javascript, dan masukan script dibawah ini.
pilih script dibawag ini sesuai dengan keinginan kalian, kalian dapat memilih warna dengan script dibawah ini, silahkan pilih salah satu kemudian masukan pada gadget html.javascript yang telah kalian pilih tadi.
Bintang biru
Bintang hijau
Bintang merah
Bintang putih
Bintang ungu
setelah kalian masukan salah satu script diatas pada gadget html/javascript jangan lupa di simpan dan lihatlah hasilnya. semoga bermanfaat. dan saya ucapkan terima kasih untuk teman saya semoga berhasil. jika ada pertanyaan, saran dan kritik silahkan diisi pada kolon komentar.
Kotak Sidebar Terpisah
Sebenarnya saya sudah pernah membahas tentang Kotak Postingan Terpisah yang pada dasarnya agak - agak mirip dengan cara membuat sidebar terpisah - pisah ini. Tadi barusan juga ada pertanyaan dari sobat dalam kotak shoutmix dengan pertanyaan yang hampir sama, yaitu bagaimana cara membuat sidebar terpisah. Karena setiap template mempunyai karakter yang berbeda - beda, makanya saya tulis postingan ini untuk template yang umum digunakan atau template dasar.
- Buka blogger dengan ID sobat.
- Klik Tata Letak --> Edit HTML.
- Contreng Expand Template Widget.
- Lalu cari kode yang seperti ini :
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
- Pisahkan saja sehingga menjadi seperti ini :
.sidebar .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
- Untuk sidebar terpisah sobat rubah menjadi seperti berikut :
.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:0.5em;
}
Buat bagian main. widget atau kolom postingan tinggal sobat kreasikan sendiri, untuk background #FFFFFF adalah warna background putih dan border:1px solid #CCCCCC untuk border warna abu - abu. Kode warna bisa sobat lihat disini. Sedangkan untuk padding adalah jarak antara postingan dengan border, bisa juga sobat merubahnya menjadi padding:15px; agar lebih terlihat rapi antara postingan dengan border tidak terlalu rapat. Untuk kotak sidebar agar membentuk garis melengkung pada sudutnya sobat bisa tambahkan kode sehingga menjadi seperti berikut ini :
.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:15px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}
Sipp, buat sobat sebelum mengedit template nya sebaiknya cuci tangan dulu ya biar mousenya ga kotor..
Oke deh selamat mencobaBrowse » Home » Background Blog » Gambar » Template » Tutorial Blogspot » Mengganti Background Blog Dengan Gambar
Sebuah blog yang cantik dan enak dilihat tentu akan sangat membantu dalam meningkatkan traffic blog kita, karena saya sendiri lebih tertarik mengunjungi sebuah blog yang warnanya cerah dan enak dilihat, daripada blog yang warnanya gelap dan bentuknya tidak karuan alias acak kadut. Walaupun postingannya menarik tetapi membuat sakit mata, lebih baik saya pelototi blog saya selama berjam - jam.
Saya akan berbagi tips sedikit yang saya tahu tentang merubah warna background blog atau mengganti background dengan gambar yang sudah sobat upload ke tempat penyimpanan online, misalnya di Google Sites atau Photobucket.
Berikut langkah - langkahnya :
Saya akan berbagi tips sedikit yang saya tahu tentang merubah warna background blog atau mengganti background dengan gambar yang sudah sobat upload ke tempat penyimpanan online, misalnya di Google Sites atau Photobucket.
Berikut langkah - langkahnya :
- Login ke Blogger.
- Klik Tata Letak --> Edit HTML.
- Kemudian cari kode yang mirip seperti ini :
body { background: #FFFFFF;
margin:0; color:#000000;
font:12px trebuchet ms;
text-align: center }
margin:0; color:#000000;
font:12px trebuchet ms;
text-align: center }
Atau jika bingung silahkan klik Ctrl + F kemudian ketikkan body {, biasanya letaknya diatas.
- Untuk mengganti background dengan warna lain tinggal mengganti kode #FFFFFF dengan kode lain, untuk kode warna bisa dilihat disini. Contoh saya mengganti background dengan warna abu - abu, hasilnya akan menjadi seperti berikut :
body { background: #D8D8D8;
margin:0; color:#000000;
font:12px trebuchet ms;
text-align: justify }
margin:0; color:#000000;
font:12px trebuchet ms;
text-align: justify }
- Untuk mengganti background dengan image atau gambar, misalnya gambar yang sudah saya simpan di blogger, kode url-nya seperti ini :
http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800 - Sehingga hasilnya menjadi seperti berikut ini :
body { background:#FFFFFF url(http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800) repeat-x;
margin:0; color:#000000; font:12px trebuchet ms;
text-align: justify}
margin:0; color:#000000; font:12px trebuchet ms;
text-align: justify}
- Jika sudah selesai kemudian Simpan Template sobat.
Untuk gambar yang continuous sobat tambahkan repeat-x setelah kode url gambar. Lebih jelasnya sobat bisa baca postingan saya tentang cara mengganti backgroud blog dengan gradient image disini.
Selamat mencoba ! 
Text Berjalan Pada Bar Menu
Sebenarnya postingan ini sudah lama sekali ingin saya tulis disini, tapi selalu lupa. Duh mas dody belum tua udah pikun nih..
Dari judul postingan saja sudah terlihat bahwa kali ini saya akan membahas tentang "text berjalan pada bar menu", basi ya..biarin. Dalam tutorial kali ini lagi-lagi sobat harus mengotak-atik HTML template sobat, jadi sekali lagi saya sarankan lebih baik membackup terlebih dahulu template sobat ke dalam hardisk. Sudah siap ? yuk kita lanjutkan.
Dari judul postingan saja sudah terlihat bahwa kali ini saya akan membahas tentang "text berjalan pada bar menu", basi ya..biarin. Dalam tutorial kali ini lagi-lagi sobat harus mengotak-atik HTML template sobat, jadi sekali lagi saya sarankan lebih baik membackup terlebih dahulu template sobat ke dalam hardisk. Sudah siap ? yuk kita lanjutkan.
- Login ke Blogger dengan ID sobat.
- Klik Tata Letak.
- Lalu klik Edit HTML.
- Kemudian letakkan kode berikut ini setelah kode <head>
<script language='JavaScript'>
var txt="Tips Blogging Untuk Blogger Pemula, Tukeran Link, SEO, Cara Pasang Meta Tag, Favicon, Label Cloud, link Berkelip Warna - Warni, Daftar Link PR Tinggi dan Masukkan Link Sobat Disana, Gratis...";
var kecepatan=200;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>
- Save Template dan lihat hasilnya.
- Tulisan yang berwarna merah silahkan sobat ganti dengan tulisan sobat.
Mudah kan..silahkan coba sendiri..
Membuat Gambar Di Pojok Blog
Ini nich, sesuatu yang berbeda. Dengan ini, kamu bisa memasang gambar/animasi dipojok halaman. Serukan?! Adi ndag bosan dengan blogmu sendiri. :P
Berikut langkah-langkahnya :
1. Login ke www.blogger.com
2. Klik Tata Letak -> Edit HTML
3. Beri tanda centang pada Expand
Widget Template
4. Cari kode ]]></b:skin> dalam templatemu. Utk memudahkan pencarian, tekan Ctrl + F
5. Sebelum kode diatas, pastekan kode dibawah ini
#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }
*Yang tulisan tebal merupakan posisi gambar, dapat diganti dgn-> kiri=left, kanan=right, atas=top, bawah=bottom.
6. Selanjutnya, cari kode </body> dalam templatemu
7. Pastekan kode dibawah ini sebelum kode diatas
<div id="trik_pojok">
<a href="http://ywstudy.blogspot.com">
<img src="http://www.boongan.gif" border="0" /></a>
</div>
*http://ywstudy.blogspot.co diganti dengan alamat blogmu
http://www.boongan.gif diganti dengan alamat URl gambarmu
kamu bisa cari gambar/animasi disini >>GIFS<<
8. Dan jika sudah, klik Simpan Template
Sekarang liat blogmu, gambar kesukaanmu akan menghibur disalah satu pojok blog :D
Semoga Berguna !
0 komentar:
Posting Komentar