Cara membuat header untuk blog

Beberapa teman sering menanyakan cara membuat gambar header untuk blog mereka. So, kali ini akan kubahas cara membuat sebuah gambar header.
Untuk membuat sebuah header, tentu kita perlu program yang bisa mengolah/membuat gambar dalam format bitmap. Ada banyak program yang bisa digunakan, pilih aja yang familiar dengan kamu, ada Adobe Photosop, Corel Photopaint, Macromedia Firework, dan masih banyak lagi. Tapi yang kubahas sekarang adalah yang pake Photoshop.

Sebelum kita mulai membuat gambarnya, ada beberapa hal yang perlu kita siapkan sebelumnya, yaitu:

• Ukuran header yang sesuai.
  Ini harus dilihat sendiri dari template blog yang dipake. Untuk contoh yang akan kita buat, ukuran header ini adalah 780 kali 180 pixel. Sama dengan ukuran header yang sekarang aku pake di blog ini, aku pakai template yang namanya Nyoba-780 buatan mas Isnaini.
  Kalo pake template dari Blogger, ukurannya bisa disesuaikan sendiri (tapi aku pernah nyoba kukasih gambar, gambarnya nggak muncul sebagai background header, mungkin biar muncul ada CSS yang harus dirubah (aku agak katrok kalo soal css, apalagi php..). Bisa juga diakali dengan membuat page element baru tentang Image sih sebenarnya, tapi nggak bisa diletakkan sebagai background header.). Kalo mau digunakan sebagai page element, ukur dulu berapa ukuran maksimal dari letak page element tadi.
• Bahan gambar atau materi yang akan digunakan.
  Ingat bahwa gambar tersebut bakalan nongol terus di blog kamu.
• Siapkan juga makanan kecil dan minuman di samping komputer, siapa tahu waktu keasyikan mbuat gambar merasa laper...

Terus caranya bikin header dengan Photoshop:

1. Buka dulu program photoshop, kemudian buat file baru dengan memilih menu File > New. Pada kotak dialog New, isikan ukuran header yang akan dibuat. Misalnya pada width=780 dengan satuan ukur pixel, terus pada height=180. Jangan lupa pada resolusi harus 72 pixel/inch. Klik OK jika semua ukuran sudah sesuai.
   
   Untuk lebih jelasnya bisa dilihat pada gambar dibawah ini.
   
   
2. Kemudian buat gambar yang kamu inginkan pada file baru ini.
   Gambar header bisa dengan memasukkan gambar lain, kasih tulisan, atau apa aja terserah dengan ide dan kreativitasmu. Kalo bingung, nggak ada ide? Buka aja website dan blog yang ada di internet, banyak sekali kan, tinggal cari aja ide dari gambar-gambar tersebut. Tapi ingat, JANGAN ngopi paste gambar header orang lain terus dipasang lagi, itu sama kayak mencuri. Cari Ide, bukan Curi Ide.
3. Setelah gambar jadi, jika gambar tersebut menggunakan lebih dari satu layer, pilih dulu menu Layer > Flatten Image agar semua layer menjadi satu di layer background.
4. Kemudian simpan (File > Save) dengan format JPEG/JPG atau GIF. Ini agar ukuran file-nya kecil. Jika pake JPEG/JPG aturlah nilai kompresi yang dilakukan pada kotak dialog JPG option yang muncul setelah kamu klik tombol Save. Seberapa banyak kompresi yang diperlukan, itu tergantung kondisi gambar, misalnya ukuran dan warna yang digunakan. Sesuaikan sendiri antara ukuran file hasil jadi dengan kualitas gambar, karena semakin banyak dikompres maka kualitas gambar akan turun.
   
   
   
   Gambar dalam lingkaran merah, yang sebelah kiri adalah ukuran file yang akan disimpan (dalam kilobyte), dan yang sebelah kanan adalah waktu yang diperlukan saat gambar tersebut diakses dalam ukuran kbps tertentu.
5. Setelah gambar udah jadi, tinggal diupload aja pakai software blog kamu.
   
   Gambar: contoh gambar header
   
   Misalnya kamu pake Blogger, gunakan page element-nya. Kalo hosting sendiri, upload di cpanel-nya. Atau bisa juga diupload dulu ke web yang melayani image hosting, misalnya Photobucket, ImgPlace, atau yang lain.http://sadewo-photology.blogspot.com/2007/07/cara-membuat-header-untuk-blog.html

Cara Setting Background Blog Dengan Blogger Template Designer

ni untuk yang settingan blogspot dalam bahasa Inggris, silahkan yang settingan bahasa Indonesia, sementara rubah dahulu ke Inggris dengan cara di Dashboard, language rubah ke English.

Pertama, masuk ke blogspot melewati pintu http://draft.blogger.com
Kedua, pilih blog mana yang ingin di setting lalu klik Layout
Ketiga, klik menu Template Designer (paling kanan)
Keempat, klik menu background
Kelima, klik foto dibawah tulisan Background image
Keenam, silahkan pilih ingin yang bertemakan art, nature, family. Pokoknya ada sekitar 18 tema.
Ketujuh, klik foto tema piilihan lalu klik Done.
Kedelapan, klik Apply to blog
Kesembilan, klik View Blog
Kesepuluh, Selesai... tinggal bereksperimen dengan Template Editor Blogger yang baru ini.

Cara Memasang Buku Tamu

Memasang sebuah Buku Tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup penting,karena buku tamu (shoutbox/guestbook) ini merupakan salah satu sarana untuk berinteraksi antara yang mempunyai blog atau website dengan para pengunjung blog. Ada banyak buku tamu (shoutbox/guestbook) yang terdapat google, misal shoutmix, oggix, freeshoutbox dll. Kebanyakan blogger memakai salah satu dari itu. Tapi disini saya ingin memakai yang shoutmix. Sebetulnya semua itu sama cara memasangnya.

Berikut adalah langkah untuk memasang Buku Tamu (shoutbox/guestbook):

1. Anda harus daftar terlebih dahulu dengan cara mengklik tulisan CREATE YOUR SHOUTBOX NOW ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis data-data anda pada form yang telah di sediakan.
2. Jika sudah terdaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda.
3. Pada kolom yang berjudul Style, klik menu appearance.
4. Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur tampilan buku tamu anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save Setting.
5. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di bawah menu Quick Start.
6. Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan.
7. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda.

Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini:

1. Silahkan Login dengan id anda.
2. Klik menu Layout (Tata Letak).
3. Klik Add a Gadget (Tambahkan Gadget).
4. Pilih HTML/JavaScript.
5. Copy Paste Code HTML Shotmix yang tadi di simpan di Notepad.
6. Klik Save Setting.

Selamat Mencoba!

Membuat Cursor Selalu Diikuti Oleh Text

Jika sobat tertarik untuk menciptakan cursor dengan text sendiri, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten


<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='pingin belajar'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>


7. Silahkan ganti tulisan berwarna merah dengan tulisan pilihan anda
8. Klik Simpan
9. Selesai