Logo SMPN 1 Kotabaru dan Cara Memasangnya Pada Blog

Gambar Animasi 1 : Logo SMPN 1 Kotabaru
Dimensi : 250px X 250px  size : 411kb
Alamat url : http://i1052.photobucket.com/albums/s459/denidt28/LogoSakobarddt28_zps329e12f9.gif

Gambar Animasi 2 : Logo SMPN 1 Kotabaru
Dimensi : 500px X 500px  size : 597kb
Alamat url : http://i1052.photobucket.com/albums/s459/denidt28/LogoSakobarddt28b_zps385cad87.gif

Salam sejahtera buat sobat semua... khususnya buat sobat SMPN 1 Kotabaru... yang sedang belajar TIK. Kali ini aku mau berbagi dengan kalian berupa Logo SMPN 1 Kotabaru dalam bentuk animasi GIF dan cara memasangnya di Blogger sobat, ok.. langsung aja :

Tahap 1 :			(Menyimpan Rancangan HTML Sebagai File Cadangan)
1.	Login ke akun blogger sobat
2.	Simpan dulu Rancangan HTML sobat sebagai cadangan bila file Rancangan HTML sobat tidak jalan atau mengalami error,  caranya :
	a.	Klik>> Template >>Klik>> Cadangkan/Pulihkan (lihat kanan atas)
	b.	Klik>> Unduh Template Lengkap (setelah selesai menyimpan Rancangan HTML cadangan) >>Klik>> Tutup

Tahap 2 :		(Menambah Perintah Tambahan untuk Memasang Gambar Animasi GIF pada Rancangan HTML)
1.	Klik Template >>Klik>> Tata Letak
2.	Klik Edit HTML >>Klik>> Lanjutkan >>Centang>> Expand Template Widget
3.	Selanjutnya sobat cari perintah :

---

]]></b:skin

---

	►	Untuk mencarinya Gunakan [Ctrl+F] atau Klik [F3] --> (di kanan atas muncul gadget pencari);
	►	Copas (copy paste) perintah ( ]]></b:skin> ) pada gadget pencari.
4.	Setelah ketemu, selanjutnya copy perintah dibawah ini:

---

#gambar1 {

position:absolute; top:15px; left:10px; clip:inherit; z-index:+1000;}

#gambar2 {

position:fixed; _position:absolute; top:15px; right:10px; clip:inherit; z-index:+1000;}

---

Paste di atas perintah ( ]]></b:skin> ), dan hasilnya seperti berikut :

---

#gambar1 {

position:absolute; top:15px; left:10px; clip:inherit; z-index:+1000;}

#gambar2 {

position:fixed; _position:absolute; top:15px; right:10px; clip:inherit; z-index:+1000;}

]]></b:skin>

---

5.	Setelah langkah 4 selesai, selanjutnya sobat cari perintah :

---

</head>

---

►

Untuk mencarinya sama dengan langkah 3, kemudian copy perintah di bawah ini :

---

<div id='gambar1'>

<img alt='Photobucket' border='0' height='100' src='http://i1052.photobucket.com/albums/s459/denidt28/LogoSakobarddt28_zps329e12f9.gif' width='100'/>

</div>

<div id='gambar2'>

<img alt='Photobucket' border='0' height='100' src= http://i1052.photobucket.com/albums/s459/denidt28/LogoSakobarddt28b_zps385cad87.gif' title='Logo SMPN 1 Kotabaru' width='100'/>

</div>

---

Paste di bawah perintah </head>, dan hasilnya menjadi seperti berikut :

---

</head>

<div id='gambar1'>

<img alt='Photobucket' border='0' height='100' src='http://i1052.photobucket.com/albums/s459/denidt28/LogoSakobarddt28_zps329e12f9.gif' title='Logo SMPN 1 Kotabaru' width='100'/>

</div>

<div id='gambar2'>

<img alt='Photobucket' border='0' height='100' src= http://i1052.photobucket.com/albums/s459/denidt28/LogoSakobarddt28b_zps385cad87.gif' title='Logo SMPN 1 Kotabaru' width='100'/>

</div>

---

6.	Klik Pratinjau (untuk memastikan bahwa perintah di atas sudah berjalan dengan baik).
	►	Bila Pratinjau menampilkan blog sobat, itu berarti perintah berjalan dengan baik;
	►	Bila yang tampil pemberitahuan error, sobat harus memeriksa ulang perintah tersebut, karena kesalahan 1 karakter saja dapat mengakibatkan error.
7.	Bila hasil Pratinjau berjalan dengan baik Klik>> Simpan Template >>Klik>> Tutup

Selesai --> Lihat Blog sobat, dan teliti dengan baik, letakkan kursor pada gambar

Keterangan :

position:absolute (posisi gambar dipengaruhi scroll bar)

position:fixed (posisi gambar tidak dipengaruhi scroll bar)

top:15px; bottom:0px; left:0px; right:10px; (penempatan gambar)

border='0' (tanpa garis)

height='100' (ukuran tinggi gambar)

width='100'  (ukuran lebar gambar)

alt='....' (menampilkan keterangan alternatif)

<img src='..../> (menampilkan gambar)

http://i1052.photobucket.com/albums/s459/denidt28/LogoSakobarddt28_zps329e12f9.gif (alamat url gambar)

title='..... ' (menampilkan keterangan)

Nah... sobat silakan pilih dari dua gambar animasi yang ada... [gambar1] atau [gambar2] atau keduanya... terserah deh... aku sih setuju ajah... cius lah...

Semoga berhasil...