Pasang Jadwal Sholat

Dari kemarin yang di omongin kayanya soal ngotak-ngatik template melulu, biar tidak jenuh kali ini saya akan membahas tentang aksesori blog. Bagi sobat yang notabene muslim, ada nih aksesori blog plus buat mengingatkan kepada kita akan waktu sholat biar para pengunjung blog kita tidak terlalu terlena ketika memmbaca berbagai artikel yang kita tulis di blog. Jadwal waktu sholat ini bisa sobat dapatkan di
http://www.islamicfinder.org, untuk cara mendapatkannya silahkan ikuti langkah-langkah berikut ini :

1. Silahkan sobat kunjungi situs http://www.islamicfinder.org atau hanya klik di sini !






2. Klik link yang bertuliskan Add new sevices to your site di halaman bagian bawah





3. Alihkan perhatian ke nomor pilihan ke 2. Klik menu Dropdown yang bertuliskan Select a Country





4. Klik nama negara yang sobat inginkan, lalu klik Go. Contoh : Indonesia





5. Klik nama kota yang sobat inginkan. Contoh : Jakarta





6. KLik tombol Generated Code





7. Copy kode yang di berikan, lalu paste pada notepad untuk nanti keperluan di simpan ke blok kita





8. Silahkan tutup window situs tersebut





9. Selesai.

Itu tadi cara mendapatkan kode jadwal sholatnya, untuk memasukan kode tersebut ke dalam blog, silahkan ikuti langkah berikut :




Untuk Template Klasik

1. Sign in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template, paste pada notepad lalu simpan untuk backup data





5. Copy kode jadwal sho;at yang tadi lalu paste pada tempat yang sobat inginkan





6. Klik tombol Pratinjau untuk melihat perubahan





7. Bila sudah Ok, klik tombol Simpan Perubahan Template





8. Selesai.

Untuk Template baru

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Elemen Halaman





4. Klik tulisan Tambahkan sebuah Elemen Halaman





5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript





6. Paste kode Jadwal sholat tadi ke kolom yang di sediakan





7. Klik tombol Simpan Perubahan





8. Pindahkan elemen yang baru di buat pada tempat yang sobat sukai





9. Klik tombol Simpan





10. Selesai

Contoh jadwal sholat yang saya terangkan diatas seperti ini :




Yang arah vertical :









Yang arah horizontal












Selamat mempunyai jadwal sholat dan jangan lupa sholat ye jangan ngeblog melulu !

Read more »

Pelacak IP Address

Bagi sobat yang suka akan aksesori blog, ada lagi nih blog toolsekaligus sebagai aksesori blog. Tool ini berfungsi untuk melacak alamat IP (Internet Protocol) sang pengunjung blog kita. Selain IP address, tool ini juga bisa melacak browser serta Operating system yang dipakai oleh pengunjung.



Untuk mendapatkan tool ini, sobat bisa mendapatkannya di banyak situs pada internet. Agar tidak usah bingung mencari, saya ambil contoh salah satunya adalah http://www.ipnow.org.
Salah satu contoh tampilan yang di miliki situs ini adalah sebagai berikut :





     
     





Tertarik memasang ini? Silahkan ikuti langkah-langkah berikut ini :

1. Silahkan buka situs http://www.ipnow.org




2. Di bawah tulisan Custom Image ada beberapa tampilan yang bisa di pilih. Ambil contoh : klik yang Custom Graphical Info Image




3. Pilih warna backround serta warna text yang di inginkan oleh sobat




4. Klik tombol Create My Image




5. Tunggu beberapa saat sampai proses selesai




6. Copy kode yang di bawah tulisan Linked Image, paste pada notepad untuk keperluan nanti di masukan ke blog




7. Silahkan tutup situs tersebut

Untuk cara memasukan kode yang di copy tadi, silahkan ikuti petunjuknya !



Untuk template klasik :

1. Sign in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template sobat, lalu paste pada notepad, silahkan save dulu untuk backup data





5. Copy kode yang ada di notepad tadi lalu paste pada tempat yang sobat inginkan





6. Klik tombol Pratinjau untuk melihat perubahan





7. Jika sudah OK, klik tombol Simpan Perubahan Template





8. Selesai.

Untuk template baru :

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Elemen halaman





4. Klik tulisan Tambah sebuah Halaman Elemen





5. Klik tulisan TAMBAHKAN KE BLOG di bawah tulisan HTML/javascript





6. Copy kode yang ada pada notepad, kemudian paste pada kolom yang tersedia





7. Klik tombol SIMPAN PERUBAHAN





8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN





9. Selesai.

Situs lain yang menyediakan layanan seperti ini bisa sobat kunjungi :

1. http://www.danasoft.com





2. http://www.ip2phrase.com

Mau lihat contoh blog yang memakai fasilitas ini? Silahkan klik di sini !



Selamat mencoba deh !

Read more »

Tips Mengubah Warna Link

Jika pada postingan yang lalu membahas tentang bagaimana cara menghilangkan garis bawah pada sebuah tulisan yang berbentuk link, maka pada kesempatan ini saya ingin mengulas tentang cara mengubah warna link. kenapa merubah warna link di perlukan? alasannya begini, pernah saya mengunjungi beberapa blog yang mempunyai latar belakang bergambar, masalahnya yaitu warna latar belakang dengan warna link hampir sama, sehingga penglihatan kita menjadi kabur dan tidak bisa membaca tulisan link.
Sebenarnya kejadian tersebut tidak perlu terjadi, karena warna link dapat kita ubah sendiri.



Bagi sobat yang memakai template baru, tentunya hal ini bukan masalah besar, karena fasilitas untuk merubah warna dan huruf sudah di sediakan. Lain halnya bagi sobat yang memakai template klasik, untuk merubah warna link, sobat harus sedikit berkeringat karena harus merubah kode-kode yang ada pada kode template sobat.




Kode-kode yang manakah yang harus ubah?



Untuk mengubah warna link, setiap template tentunya berbeda-beda, Akan tetapi untuk gambaran saja saya ambil contoh di dalam template ada kode seperti ini :



a:link {

color:#3333FF;

text-decoration:underline;

}



a:hover {

color:#000066;

text-decoration:underline;

}



a:visited {

color:#663366;

text-decoration:underline;

}





Agar menjadi faham, akan saya uraikan :




a:link {

color:#3333FF;

text-decoration:underline;

}



kode ini mempunyai arti --> sebuah link akan berwarna biru dan bergaris bawah.




a:hover {

color:#000066;

text-decoration:underline;

}


Sebuah link apabila di sorot oleh mouse akan berubah warna menjadi biru tua dan bergaris bawah.





a:visited {

color:#663366;

text-decoration:underline;

}



Sebuah link apabila pernah di klik oleh komputer yang sama akan berwarna ungu dan bergaris bawah.






Pertanyaan selanjutnya manakah kode diatas yang menentukan warna link? jawabnya adalah kode :



color:#3333FF;




Tulisan yang saya cetak merah adalah penentu warna atau di sebut juga dengan kode warna heksa, kode tersebutlah yang menentukan warna sebuah link. Bagaimana cara merubahnya? caranya tentu saja kita harus mengganti kode warna tersebut dengan kode warna yang kita inginkan. untuk mencari tau kode heksa dari warna, saya biasanya menggunakan bantuan dari program photoshop, disana telah disediakan contoh warna lengkap dengan kode heksa nya, kita tinggal memilih warna yang diinginkan kemudian secara otomatis akan di perlihatkan kode heksanya. Masih bingung? kalau masih bingung
soal warna, sobat kunjungi deh blognya bang iwan di link ini http://free-7.blogspot.com,
ada juga di bagian Side bar blog beliau di tuliskan berbagai kode heksa.



Saran dari saya, apabila sobat menggunakan warna latar belakang yang terang, maka pilihlah warna link yang gelap. Sebaliknya, apabila warna latar belakang berwarna gelap, maka warna link haruslah berwarna terang.



Selamat mencoba !

Read more »

Menghilangkan Garis Bawah Link

Pernah ada salah satu sobat yang mengirimkan email ke saya, beliau ini menanyakan cara menghilangkan garis bawah yang ada pada setiap link. Garis bawah ini menurut beliau sangat mengganggu keindahan tulisan-tulisannya. Memang seperti kata-kata saya terdahulu, lain orang lain keinginan, untuk urusan link pun ada yang suka memakai garis bawah dan ada juga yang tidak suka akan garis bawah tersebut.



Menurut kebiasan yang berlaku, sebuah tulisan yang berbentuk link biasanya memang mempunyai garis bawah, akan tetapi sebenarnya garis bawah tersebut bisa di hilangkan apabila kita mau. Bagaimana cara menghilangkan garis bawah pada link? untuk menghilangkannya sobat perlu merubah beberapa kode yang ada pada style sheet CSS, kode tersebut biasanya seperti ini :





a:link {

color:#58a;

text-decoration:underline;

}



a:hover {

color:#c60;

text-decoration:underline;

}



a:visited {

color:#969;

text-decoration:underline;

}





Agar menjadi faham, akan saya uraikan :




a:link {

color:#58a;

text-decoration:underline;

}



kode ini mempunyai arti --> sebuah link akan berwarna biru dan bergaris bawah.





a:hover {

color:#c60;

text-decoration:underline;

}


Sebuah link apabila di sorot oleh mouse akan berubah warna menjadi biru tua dan bergaris bawah.





a:visited {

color:#969;

text-decoration:underline;

}




Sebuah link apabila pernah di klik oleh komputer yang sama akan berwarna biru tua (banget) dan bergaris bawah.






Pertanyaan selanjutnya manakah kode diatas yang membuat link menjadi bergaris bawah? jawabnya adalah kode :



text-decoration:underline;




Tulisan underline lah yang membuat link menjadi bergaris bawah. Apabila kita tidak menginginkan adanya garis bawah pada sebuah link, maka kita hanya cukup merubahnya dengan kata none, nanti kodenya akan menjadi seperti ini :



text-decoration:none;




Dari pengertian tadi diatas tentu saja kita dapat mengatur ingin ada atau tidak ingin ada garis bawah, tergantung dari selera masing-masing, apakah sebuah link ingin bergaris bawah atau tidak? apakah apabila sebuah link di sorot oleh mouse ingin bergaris bawah atau tidak? apakah apabila sebuah link pernah di kunjungi
atau di klik ingin bergaris bawah atau tidak? semua terserah sobat sebagai pemilik blog. Ingin bergaris bawah?
ya pakai underline, kalau tidak ingin bergaris bawah ya tingal ganti dengan none,
gampang bukan?

Read more »

Download Scribe 3 kolom (XML)

Pada postingan yang lalu, saya sudah berikan template scribe 3 kolom bagi sobat yang memakai template klasik, dan kali ini saya persembahkan lagi satu template, judulnya masih sama yaitu Scribe 3 kolom. Akan tetapi yang ini adalah dalam format XML atau template yang baru.




Bagi sobat yang suka memotong postingan dengan fasilitas Read more.. atau
Baca Selengkapnya.., sobat tidak harus menambahkan berbagai kode lagi karena
sudah saya tambahkan. Sobat hanya harus menambah kode <span id="fullpost"> ... </span> pada saat posting artikel, atau biar lebih jelasnya lagi silahkan baca postingannya di sini ! Pada header sudah ada navigasi, tinggal ganti alamat link nya dengan milik sobat sendiri, untuk lebih jelasnya coba baca postingannya di sini ! Serta aksesoris yang lainnya.



Template ini silahkan download kemudian ekstrak dulu dengan software Winzip sebelum di upload ke blogger. Permintaan saya, tolong jangan menghapus banner yang saya pasang ! jika mau di pindahkan tempatnya silahkan saja asal jangan
di hapus. Sebagai pemberitahuan saja, template ini sudah saya coba dan hasilnya tidak ada kendala atau dengan kata lain tidak ada masalah. Untuk cara instalasi, silahkan baca secara seksama di sini !



Untuk contoh blog yang memakai template ini, silahkan klik di sini !. Untuk mendownload silahkan sobat klik di sini !



Selamat menikmati wajah baru.

Read more »

Cepat Terindeks di Google

Menyambung postingan kemarin bahwa saya akan memposting tips-tips bagaimana agar blog kita lebih cepat terindeks di google. Tentunya tips-tips berikut tidaklah seratus persen menjamin bahwa blog kita akan lebih cepat terindeks, akan tetapi bolehlah untuk di coba dan sebenarnya ini sudah saya buktikan sendiri kebenarannya.



Seperti keterangan yang lalu, bahwa setelah kita mendaftar di google,
blog kita tidaklah langsung terindeks pada mesin pencari google, akan tetapi bisa memakan waktu 3 sampai 4 minggu bahkan apabila bernasib kurang baik bisa sampai 8 minggu barulah blog kita terlisting pada mesin pencari nya. Nah agar tidak terlalu bosan menunggu, sedikit tips bagi sobat, silahkan coba dan buktikan.

• Memperbaiki Pengaturan blog

Untuk langkah-langkah pengaturan (Setting) blog, secara lengkap sudah saya posting
silahkan baca di sini !,
akan tetapi karena postingan tersebut di buat sebelum ada layanan blogger berbahasa indonesia, maka settingannya berbahasa inggris. Tapi toh saya yakin bahwa sobat pasti faham dengan yang saya tulis.

• Link ke blog dengan page rank tinggi

Salah satu cara agar blog kita lebih cepat terindeks di google adalah kita di link oleh blog yang mempunyai page rank yang tinggi, dan biasanya blog-blog tersebut adalah blog terkenal. Contoh blog Indonesia yang sangat terkenal adalah blog miliknya mas fatih syuhud yaitu http://fatihsyuhud.com, blognya kang Agus hery di http://edittag.blogspot.com, dan masih banyak lagi yang lainnya. Saran saya pasanglah terlebih dahulu link blog mereka pada halaman blog milik sobat, setelah itu mintalah agar blog sobat di linkback atau di link balik oleh mereka. Permintaan untuk di linkback bisa di ajukan pada buku tamu (shoutbox) atau bisa juga melalui komentar pada postingan atau jika ingin lebih pribadi kirim melalui email. Saya yakin mereka akan segera memasang link sobat pada blog mereka, atau jika dalam waktu tiga hari masih belum di linkback, ajukan kembali permintaan untuk dilinkback karena untuk blog-blog terkenal dalam sehari tidak hanya satu atau dua blog saja yang pasang link blog mereka, maka wajar saja apabila ada satu atau dua blog yang terlewatkan untuk di linkback.

• Pasang tag meta

Salah satu cara agar blog kita lebih di lirik atau di kenali oleh mesin pencari miliknya om google adalah memasang tag meta di bagian header pada kode template blog. contoh tag meta untuk blogger seperti ini :

<meta name="robots" content="INDEX, FOLLOW"/>


<meta name="description" content="Deskripsi dari blog sobat di sini "/>


<meta name="keywords" content="kata kunci atau keyword simpan disini, buatlah beberapa keyword yang sobat anggap sangat berhubungan dengan blog sobat "/>

Yang harus diperhatikan adalah tulisan-tulisan yang tercetak merah. Tulisan-tulisan tersebut haruslah di sesuaikan dengan kondisi blog sobat.



Untuk deskripsi, silahkan isi dengan deskripsi blog sobat. contoh untuk blog milik saya adalah "Panduan praktis membuat blog di blogger.com. tips, trik, serta download software secara gratis".



Untuk kata kunci (keyword), silahkan isi dengan kata kunci yang berhubungan dengan blog sobat. contoh untuk blog ini adalah : blog tutorial, cara membuat blog, bikin blog, cara bikin blog, dan sebagainya. Jangan lupa untuk menyisipkan tanda koma untuk memisahkan antara keyword yang satu dengan keyword yang lainnya.



Untuk judul blog, silahkan isi dengan judul dari blog sobat.Contoh : untuk blog ini adalah Blog tutorial.




Bagi yang belum mengetahui dimanakah tag meta di simpan, jawabannya adalah di dalam kode header blog, atau jika masih bingung simpan saja di bawah kode <title><data:blog.pageTitle/></title> .




Sebenarnya masih ada beberapa tips yang bisa dilakukan, akan tetapi kayanya udah lemes nih ngetiknya, jadi dicukupkan sekian dulu deh, selamat mencoba dan mudah-mudahan blog sobat lebih cepat terindeks di google. Satu pertanyaan aja deh buat tambahan, sudahkah blog sobat terindeks di google? coba tuliskan alamat blog sobat pada search engine google di bawah postingan ini !



Update : di revisi tanggal 06 april 2008.

Read more »

Cara Daftar Search Engine

Tak di sangkal bahwa tujuan utama dari membuat blog antara lain adalah agar tulisan-tulisan kita bisa di baca oleh orang lain atau pengunjung blog, semakin banyak yang berkunjung apalagi memberikan komentar pada apa yang kita posting tentunya akan membuat hati kita merasa senang dan bahagia. Akan tetapi tentunya tidak serta merta blog kita akan ramai di kunjungi, ini memerlukan usaha publikasi yang gencar dari pemilik blog apabila ingin banyak pengunjungnya.



Banyak cara yang bisa kita lakukan agar blog kita bisa dikenal dan di kunjungi, antara lain adalah dengan rajinnya kita blogwalking atau berkunjung ke blog milik orang lain, mendaftarkan ke berbagai agregator, dan yang paling efektif adalah melalui search engine atau mesin pencari.



Bagi blogger pemula mungkin berangggapan bahwa apabila kita membuat website atau blog akan secara otomatis terindeks atau berada pada list berbagai search engine, dan kenyataannya tidaklah demikian. Seperti halnya sebuah sekolah, agar nama kita terdaftar pada buku daftar siswa, tentunya kita harus melakukan pendaftaran terlebih dahulu ke sekolah tersebut. Sama halnya dengan mesin pencari, agar blog kita terindeks pada mesin pencari, maka kita harus terlebih dahulu mendaftarkan blog milik kita pada situs pemilik mesin pencari.



Mesin pencari tentu jumlahnya sangat banyak sekali, dan pada saat ini yang paling terkenal di dunia adalah Google, Yahoo, serta Msn. Apabila blog kita ingin terindeks pada mesin pencari mereka, maka kewajiban kita adalah mendaftarkan URL blog kita pada mesin pencari mereka. Bila ada yang belum tahu ke manakah harus mendaftarkan blognya, maka silahkan simak tulisan berikut :

Daftar Google

Untuk mendaftar ke google, silahkan sobat kunjungi http://www.google.com/addurl/, nah apabila sudah berada pada halaman pendaftaran ada beberapa langkah yang harus di lakukan, yaitu mengisi form yang di sediakan :

• URL --> Isi dengan URL blog sobat.


• Comments --> Isi dengan keyword atau kata kunci yang berhubungan dengan blog sobat


• Isi kotak kosong dengan huruf Verifikasi yang tersedia


• Klik tombol Add URL


• Selesai.

Setelah sobat melakukan pendaftaran ke Google, maka tidak serta merta blog sobat terindeks pada mesin pencari nya, akan tetapi memerlukan 3 sampai 4 minggu baru blog sobat bisa terindeks. Jika sudah 3 sampai 4 minggu, maka cobalah ketik alamat blog sobat pada mesin pencari google, apakah sudah terindeks atau belum? jika belum, coba tunggu beberapa minggu lagi, dan tuliskan kembali alamat blog sobat, Jika ternyata masih belum juga, coba deh daftarin lagi blog nya ke google seperti langkah di atas. Atau mungkin sobat tidak sabar ingin cepat terindeks, sebenarnya bisa saja ini terjadi, hanya dalam 3 atau 4 hari saja blog sobat sudah bisa terindeks di google. Ingin tahu caranya? simak saja postingan berikutnya ya, mungkin satu dua hari ke depan artikelnya selesai saya buat.



Daftar Yahoo!

Untuk mendaftar ke yahoo! silahkan sobat kunjungi https://siteexplorer.search.yahoo.com/submit. Akan tetapi untuk mendaftar ke yahoo, sobat harus terlebih dahulu mempunyai account yahoo, karena di perlukan log in terlebih dahulu ke account yahoo. Bagi yang belum punya account yahoo (email di yahoo) silahkan bikin dulu, bagi yang sudah punya, sobat tinggal login dengan username serta password sobat. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi kolom tersebut dengan URL sobat, kemudian klik tombol Add URL, selesai. Jika ingin memasukan alamat feed sekalian, sobat bisa memasukannya. Ingat, alamat feed di blogger hanya tinggal menambahkan atom.xml di belakang uRL blog sobat, contoh : untuk blog saya ini mempunyai alamat feed sebagai berikut :



http://kolom-tutorial.blogspot.com/atom.xml



atau memakai www pun sama saja :



http://www.kolom-tutorial.blogspot.com/atom.xml



Daftar ke Msn

Untuk daftar ke Msn, silahkan sobat kunjungi http://search.msn.com/docs/submit.aspx?FORM=WSDD2 silahkan sobat isi huruf verifikasi dan URL sobat pada kotak yang tersedia, kemudian klik tombol Submit URL, selesai.



Sudahkan blog sobat terindeks di google? coba masukan alamat blog sobat pada mesin pencari google yang tersedia di bawah postingan ini !

Read more »

Pasang Kode Tuker Link

BangDhika beberapa waktu yang lalu mengajukan pertanyaan melalui shoutbox mengenai bagaimana cara membuat kode untuk tukeran link, dan sekarang saya akan coba membahasnya. Mudah-mudahan informasi ini bermanfaat juga bagi sobat lainnya yang belum mengetahui mengenai hal ini.



Untuk membuat kode tukeran link, kebanyakan para blogger menggunakan banner yang
berukuran kecil atau di sebut juga dengan chiklet sebagai ciri khas dari blog masing-masing. Maka dari itu, saya akan mencoba mengulas pembahasan ini bermula dari pembuatan chiklet nya.




Untuk membuat sebuah chiklet, sobat bisa menggunakan berbagai software grafik & design semacam photoshop, corel, atau lain sebagainya. Tak hanya sebatas chiklet yang berupa gambar diam, sebuah animasi pun bisa di jadikan chiklet tukeran link, tentunya ini terserah kepada keahlian masing-masing dalam hal membuat chiklet.



Akan tetapi, bagi sobat yang belum bisa atau hanya sekedar malas untuk membuatnya karena memerlukan waktu yang cukup lama untuk berkreasi, sobat bisa menggunakan layanan berbagai situs pembuat chiklet. Salah satu situs yang menyediakan layanan ini adalah www.chicklette.net. Melalui situs ini sobat hanya perlu menentukan warna serta tulisan yang di inginkan, kemudian apabila sudah selesai, sobat tinggal save picture lalu menyimpannya dalam komputer sobat.



Itu tadi merupakan langkah pertama. langkah kedua adalah meng upload file chiklet tadi ke hosting untuk menyimpan gambar, boleh di blogger atau di hosting lain, untuk cara upload gambar sudah sering di bahas, apabila masih bingung coba baca lagi di sini ! Jika proses upload selesai, sobat tinggal mencatat atau mengcopy alamat URL gambar tersebut. Misal saya ambil contoh untuk chiklet blog ini adalah :



http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif



langkah selanjuatnya adalah membuat kode link dari alamat gambar tadi, contoh kodenya seperti ini :


<a href="http://kolom-tutorial.blogspot.com" target="_blank">
<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>


Nah itu tadi merupakan contoh link untuk membuat link ke blog ini, untuk ngelink
ke blog sobat ya tinggal sesuaikan saja.



Apabila kode link sudah ada, langkah selanjutnya adalah membuat text area untuk menampung seluruh kode agar nanti bisa di copy oleh pengunjung yang mau nge link ke blog sobat, kodenya seperti ini :


<textarea name="code" rows="6" cols="20">



<a href="http://kolom-tutorial.blogspot.com" target="_blank">

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>



</textarea>





Beberapa langkah sudah di lewati, langkah selanjutnya adalah merangkaikan kode-kode tadi, misalkan kode tukeran link ingin di bawah gambar chicklet agar tampak lebih menarik, kodenya kira-kira seperti ini :


<h2>Tukeran link</h2>

<br/><br/>

Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali

<br/><br/>


<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial ">


<br/><br/>


<textarea name="code" rows="6" cols="20">

<a href="http://kolom-tutorial.blogspot.com" target="_blank">

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>



</textarea>





Hasilnya nanti akan seperti ini :



Tukeran link



Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali








<br /><br /><a href="http://kolom-tutorial.blogspot.com" target="_blank"><br /><img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a><br /><br />




Dari tulisan diatas, terlihat ada tulisan yang memanjang kekanan. Akan tetapi jangan kawatir karena tulisan tersebut akan turun secara otomatis
mengikuti lebar dari sidebar. Untuk mengatur lebar serta tinggi dari text area, sobat tinggal mengganti nilai dari rows serta cols saja.



Ada juga blogger yang suka memasang tombol LINK TO ME pada blog nya, ini di maksudkan agar ketika pengunjung yang ingin membuat link
ke blog sobat tinggal mengklik tombol tersebut. Akan tetapi ini bekerja bagi mereka (yang ingin membuat link ke blog sobat) yang memakai
template baru saja, sedangkan untuk yang template klasik tidak bisa, jadi menurut saya kurang efektif. Contoh tombolnya seperti :

<br /> <a href="http://kolom-tutorial.blogspot.com" target="_blank" /><br /><img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a><br />

The button image will displayed on your site like this

Coba buktikan deh, klik saja pada tombol yang saya berikan.



Kode untuk membuatnya seperti ini :


<center>

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="FAVOURITE" name="widget.title" type="hidden"/><textarea style="display:none;" name="widget.content">

<a href="http://kolom-tutorial.blogspot.com" target="_blank" />

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>

</textarea><input value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>

<input value="LINK TO ME" name="go" type="submit"/></form><p>The button image will displayed on your site like this</p><br/>

<img src="http://i162.photobucket.com/albums/t253/rohman24/kolomtutorial.gif" border="0" alt="Kolom blog tutorial "></a>
</center>



Silahkan ganti alamatnya dengan yang di miliki sobat.




bagi sobat yang menggunakan template klasik, sobat tinggal menyimpan kode di atas pada sidebar
yang sobat inginkan. Untu yang memakai template baru, sobat tinggal memilih tambah elemen, trus pilih
HTML/Javascript, kemudian masukan kode yang seperti diatas, simpan dan selesai.



Semoga mudah untuk di mengerti.



Salam buat blogger sejati semua......

Read more »

Image dalam Kode Marquee

Sobat guest (karena beliau tidak memperkenalkan namanya) mengajukan pertanyaan sampai dua kali pada shoutbox dalam dua hari berturut-turut. Sebuah keinginan yang di dorong rasa ingin tahu tentang apakah bisa sebuah gambar atau image di masukan ke dalam kode marquee ( kode untuk membuat text bisa bergerak/berjalan ). Keingintahuan yang harusdi jawab, dan sebenarnya sudah saya jawab melalui shoutbox/buku tamu pula.
Akan tetapi sebuah jawaban singkat saja mungkin tidak akan dapat mewakilinya, dan
agar jawabannya dapat di cerna dengan mudah sengaja saya tuangkan ke dalam artikel ini.



Jawabannya adalah sebuah ataupun beberapa buah gambar dapat di masukan ke dalam kode
marquee. Seperti halnya teks biasa, kita hanya perlu memasukan kode gambar ke dalam kode marquee.



Prinsip dasarnya seperti ini :



<marquee>



Teks, links, gambar, atau apa saja yang ingin di masukan.



</marquee>



Dari prinsip dasar diatas, maka kita hanya perlu memasukan kode gambar diantara kode marquee, sangat sederhana. Kode marquee yang dipakai tentu saja banyak variasinya, tergantung mana yang akan di pakai. Dan tidak hanya terpatok di situ saja, kita bisa memadukan berbagai kode HTML di dalam marquee, semisal apabila teks ingin berada di tengah-tengah, rata kiri, rata kanan, rata kiri-kanan, memakai bingkai, menggunakan warna latar belakang, dan atau apa saja. Tentunya di perlukan suatu kreatifitas agar kita bisa memadukannya.



Perlu di ketahui bahwa kode marquee ini tidak terlalu dimengerti oleh browser Firefox, terutama versi yang terdahulu. Untuk versi terbaru pun memang sudah bisa mengerti (soalnya sekarang saya pake versi terbaru) akan tetapi tetap saja tidak seindah seperti ketika kita melihatnya melalui internet explorer. Akan tetapi lagi nih, jangan dulu berburuk sangka bahwa browser firefox tidak bagus, tentunya banyak kode-kode HTML yang lain akan berfungsi dengan baik apabila di lihat dengan firefox dan tidak berfungsi dengan baik apabila di lihat dengan internet explorer. Jadi pikir-pikir dulu apabila ingin menggunakan kode marquee, terlebih dalam jumlah yang banyak alias setiap sudut halaman blog menggunakan kode marquee.



Kembali lagi ke bahasan utama yaitu membuat gambar bisa bergerak dengan marquee, sobat tinggal memasukan kode gambar di dalamnya. Jika ingin ada beberapa buah gambar untuk memisahkannya (tidak berdempetan), sobat harus menyisipkan kode <br/> diantara kode gambar untuk arah vertikal dan kode &nbsp; (jika sobat memakai firefox, kode yg sobat lihat mungkin salah kode yg benar ini -->       & n b s p ;     tapi tanpa sepasi alias bersatu). Saya berikan contoh, alamat foto yang saya miliki seperti ini :





http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg



http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg





Untuk membuat foto tersebut tampil harus menggunakan kode html tambahan :



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" />



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" />



hasilnya seperti ini :
















yang di tampilkan di atas adalah dalam ukuran asli, jika ingin memperkecil maka tinggal memasukan atribut width="..." serta height="...". sebagai contoh saya ubah menjadi, tinggi 130 pixel dan lebar 190 pixel maka kodenya menjadi seperti ini :



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />



Maka hasilnya akan seperti ini :














Sekarang bagaimana memasukan kode gambar tersebut ke dalam marquee?



Saya ambil contoh, kode marquee yang di pakai adalah dengan variasi agar ketika mouse menyorot pada gambar berhenti, maka kodenya akan seperti ini :



<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" align="center">



<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />


<br/><br/>

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />



</marquee>



Itu tadi yang polos alias gambar saja yang yang bergerak. Jika ingin sedikit variasi bisa memakai bingkai.
kodenya seperti ini :

<table border="10" cellpadding="3" height="135" width="195"/>

<tr>

<td>

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />

<br/>

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>

</td>

</tr>

</table>

Itu tadi memakai bingkai dengan warna latar belakang default (putih), jika ingin ada warna latar belakang (background) maka tinggal menyisipkan atribut background pada kode tabel, contoh dengan warna background biru muda :

<table border="10" cellpadding="3" height="135" width="195" bgcolor="#b1c3d9" />

<tr>

<td>

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />

<br/>

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>

</td>

</tr>

</table>

Untuk melihat efek dari kode-kode yang saya tulis, silahkan sobat klik di sini !



Mudah-mudahan mudah untuk di mengerti. Selamat mencoba !

Read more »

Download Template Scribe 3 kolom

Waduh, dua hari sudah tidak nongol-nongol di blog ini di akibatkan lagi seneng ngotak-ngatik template supaya menjadi tiga kolom. Dan ternyata .....twew....twew....
ada juga nih yang sudah jadi, tapi cuma yang model template klasik dulu kalau yang model baru nya belum jadi. Yoi men, bagi sobat yang menyukai template Scribe buatan dari Todd Dominey, yang aslinya cuma dua kolom, dan sekarang sudah saya sulap menjadi 3 kolom.



Template ini sudah saya coba di review di internet explorer serta firefox dan hasilnya cukup memuaskan, untuk browser lainnya saya tidak mencobanya karena saya tidak punya programnya, males installnya.




Biar lebih menarik, kali ini saya akan perlihatkan screen shootnya. Tapi maaf nih sobat, gambarnya jelek banget tidak sesuai aslinya. Silahkan klik pada gambar di bawah ini untuk melihat contoh blog yang sudah memakai template yang saya modifikasi :
















Sudah dilihat? menarik tidak? Jika tertarik silahkan baca dulu instruksinya. Template ini sudah saya masukan fungsi Read more , sobat tinggal memasukan
kode <div class="fullpost"> .... </div>
pada saat posting. Biar lebih jelas lagi, silahkan klik di sini !
Fasilitas lainnya yaitu sudah saya tambahkan menu navigasi pada headernya, kalau mau baca-baca seputar menu ini, silahkan baca di sini ! dan tentunya masih ada aksesoris lainnya yang saya tambahkan.



Templatenya saya berikan gratis, cuma syaratnya sobat jangan menghapus banner yang saya pasang ya, itung-itung menghargai hasil kerja saya selama berjam-jam di depan komputer gitoe loe !



Biar tidak terlalu banyak energi yang keluar untuk membaca artikel yang tidak terlalu bermanfaat, silahkan bagi yang berminat mendownload template ini, klik saja di sini !

Read more »

Gambar Berbingkai

Rupanya postingan yang kemarin lusa salah alamat alias ga nyambung, maksud dari sobat
edelweis adalah membuat bingkai gambar yang ada di postingan, eh postingan saya malah photo profile. Saya yang salah apa bukan ya? tapi biarin deh, kan itupun lumayan buat pengetahuan.




Baiklah, saya kutif pertanyaan lanjutan dari sobat edelweis :




"Maaf Mas, sepertinya cara bertanya saya salah. Maksud saya bingkai untuk postingan gambar, bukan foto profile"





Memang keinginan setiap orang tidak sama, ada yang berkeinginan agar gambar yang ada di blog tidak mempunyai bingkai ada juga malah yang mau ada bingkai nya. Ok, saya coba jawab ya, mudah-mudahan jawaban kali ini tidak salah alamat lagi.




Pertama, tentu saja kita harus mempunyai alamat gambar yang mau di tampilkan, caranya yaitu gambar yang kita miliki harus di upload, bisa ke blogger atau ke hosting lain. Topik ini sudah saya bahas pada postingan terdahulu, bagi yang masih bingung silahkan klik di sini untuk membacanya kembali.
Bagaimana kita mengetahui kode HTML dari gambar yang kita upload di blogger? caranya yaitu setelah upload gambar selesai , maka sobat harus berpindah menu ke Edit HTML apabila sedang berada pada menu Compose. Saya ambil contoh gambar yang telah saya upload mempunyai kode seperti ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmdj-F_IJGG_vg22sQV19QkYo3EsnkQbJnHuh0B-C51fYy_JA9i4QcIfmjf8gIU4Q75Kfwa7OdMlzRagjeBKAMP4ZUsvQFUtLfII7ebYAbr-oeesWiEYl-s2mQ0MDLt5ZDPUFqS35lgQ/s1600-h/DSC01367.JPG"><img id="BLOGGER_PHOTO_ID_5058536746814715122" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 133px; CURSOR: hand; HEIGHT: 113px" height="150" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmdj-F_IJGG_vg22sQV19QkYo3EsnkQbJnHuh0B-C51fYy_JA9i4QcIfmjf8gIU4Q75Kfwa7OdMlzRagjeBKAMP4ZUsvQFUtLfII7ebYAbr-oeesWiEYl-s2mQ0MDLt5ZDPUFqS35lgQ/s200/DSC01367.JPG" width="133" border="0" /></a>

Gambarnya seperti ini :


















Bagaimana caranya agar kita bisa membuat gambar tersebut menjadi ada bingkainya? Ini bisa dilakukan dengan menyisipkan beberapa atribut atau kode ke dalam kode gambar tersebut. Tampak pada kode yang saya berikan diatas sengaja saya cetak merah, nah kita bisa menyisipkan beberapa kode di dalamnya, antara lain padding serta border, contoh :



padding:3px;

border:15px solid #BEBBBB;




padding:3px; --> padding adalah jarak atau ruang kosong yang kita buat agar terpisah dengan border (bingkai) dalam contoh ini yaitu sebesar 3 pixel. Apabila sobat tidak menginginkan ada jarak, maka jangan tambahkan kode ini.



border:15px solid #BEBBBB; --> border adalah besarnya bingkai yang akan di buat, saya ambil contoh sebesar 15 pixel. #BEBBBB --> adalah kode warna yang mau di tampilkan, dalam contoh ini warna coklat.



Merujuk pada kode yang saya cetak merah di atas, apabila kita sisipkan kode tambahan maka potongan kode gambar diatas akan menjadi seperti ini :



style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 133px; CURSOR: hand; HEIGHT: 113px; padding:3px; border:15px solid #BEBBBB;"



Maka gambar yang di hasilkan akan seperti ini :




















Agar bingkai tampil lebih menarik, ada kode html yang bisa di pakai, contoh kodenya seperti ini :






<table border="20" cellpadding="6" />

<tr>

<td>



kode gambar yang ingin di tampilkan di sini !

</td>

</tr>

</table>

Sebagai contoh saya ambil alamat gambar yang sama yaitu pada kode gambar di atas. Untuk mengetahui alamat gambar diatas adalah kita ambil setelah kode src=", yaitu yang di awali dengan http dan di akhiri dengan JPG, sehingga alamat gambar diatas adalah sebagai berikut :




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmdj-F_IJGG_vg22sQV19QkYo3EsnkQbJnHuh0B-C51fYy_JA9i4QcIfmjf8gIU4Q75Kfwa7OdMlzRagjeBKAMP4ZUsvQFUtLfII7ebYAbr-oeesWiEYl-s2mQ0MDLt5ZDPUFqS35lgQ/s200/DSC01367.JPG




Untuk menampilkan gambar, kodenya jadi seperti ini :




<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmdj-F_IJGG_vg22sQV19QkYo3EsnkQbJnHuh0B-C51fYy_JA9i4QcIfmjf8gIU4Q75Kfwa7OdMlzRagjeBKAMP4ZUsvQFUtLfII7ebYAbr-oeesWiEYl-s2mQ0MDLt5ZDPUFqS35lgQ/s200/DSC01367.JPG">




Jadi apabila di satukan dengan kode HTML untuk bingkai, kodenya menjadi seperti ini :




<table border="15" cellpadding="6" />

<tr>

<td>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmdj-F_IJGG_vg22sQV19QkYo3EsnkQbJnHuh0B-C51fYy_JA9i4QcIfmjf8gIU4Q75Kfwa7OdMlzRagjeBKAMP4ZUsvQFUtLfII7ebYAbr-oeesWiEYl-s2mQ0MDLt5ZDPUFqS35lgQ/s200/DSC01367.JPG">

</td>

</tr>

</table>

dan gambar yang akan di tampilkan adalah seperti ini :













Untuk bingkai yang ini menurut saya lebih menarik daripada bingkai yang pertama karena ada kesan tiga dimensi.




Agar sobat lebih faham, ada kode yang nilainya bisa sobat rubah sesuai keinginan, yaitu :




boder="15" --> nilai "15" adalah tebalnya bingkai sebesar 15 pixel, ini bisa sobat ganti dengan nilai yang di inginkan.



cellpedding="6" --> nilai "6" adalah nilai jarak antara gambar dengan bingkai sebesar 6 pixel, ini bisa sobat ganti dengan nilai yang di inginkan.



Saya rasa cukup nih, selamat mencoba deh.



Salam blogger sejati buat semua !

Read more »

Download minima 3 kolom (XML)

Sesuai dengan janji saya kemarin lusa bahwa akan membuat template minima 3 kolom dalam versi XML (new blogger template), akhirnya template ini selesai juga saya modifikasi. Template ini adalah hasil desain dari Douglas Bowman dan telah di hack oleh Ramani, yang terakhir di modifikasi lagi oleh saya sendiri.



Lagi-lagi template ini saya berikan gratis, syaratnya hanya satu yaitu tidak diperkenankan untuk menghapus banner kolom-tutorial yang saya pasang. Jika mau di pindahkan, silahkan saya izinkan asal jangan di hapus aja ya.



untuk melihat contoh blog yang memakai template ini, silahkan klik di sini ! Fitur-fitur yang telah di masukan kedalam template ini antara lain sudah di pasang system Read more dengan system baru, tugas sobat hanya membubuhkan kode <span id="fulpost"> ... </span> lebih jauh tentang fungsi Read more yang di pakai pada template ini silahkan baca di sini !, menu navigasi yang terdapat di header, untuk mengetahui informasi tentang navigasi ini, silahkan klik di sini ! penambahan anchor link pada bagian footer agar mempermudah pengunjung untuk kembali ke halaman utama. Serta tulisan yang bisa berjalan pada bar menu bawah, tugas sobat hanya mengganti kata-katanya saja.



Satu informasi yang perlu sobat ketahui adalah pada saat download template tersebut sobat harus klik kanan (right click) pada link download yang di berikan, kemudian klik Save target as.... jangan klik kiri, karena proses download tidak akan berlangsung, yang keluar nanti malah kode-kodenya. Untuk instalasipun jangan copy paste kode template, akan tetapi harus melalui tombol Browse... yang telah di sediakan. Agar tidak keliru dalam proses instalasi, silahkan sobat baca di sini !



Agar tidak terlalu lama menunggu, untuk mendownload template minima 3 kolom ini, silahkan sobat klik di sini !



Selamat ber download ria !

Read more »

Photo Profile Berbingkai

Sobat Edelweis rupanya berkeinginan agar photo yang terpampang di profilemenjadi ada figura nya supaya tampak lebih sedap di pandang mata, Sebuah keinginanyang wajar kalau menurut saya. Yups..untuk itu akan saya bahas sedikit trik
agar photo tersebut menjadi ada figuranya.



Agar photo frofile menjadi berbingkai atau berfigura, langkahnya sangat sederhana
sekali,yaitu sobat hanya merubah nilai border pada stylee sheet css pada bagian untuk
photo frofile, contoh kode photo frofile untuk template lama seperti ini :



.profile-img img {

float:left;

padding:4px;

border:1px solid #ddd;

margin:0 8px 3px 0;

}



untuk template baru seperti ini :



.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;
}




Tugas sobat hanya merubah nilai bordernya saja dengan nilai yang lebih besar tentunya, biar lebih jelas, sedikit saya ulas tentang kode-kode diatas :



float:left; --> artinya photo akan di simpan di sebelah kiri pada tulisan frofile.


padding:4px; --> padding disini maksudnya adalah jarak antara photo dengan figura (border) sebesar 4 pixel, jika sobat tidak menginginkan ada jarak antara photo dengan bingkai, maka tinggal ganti nilainya dengan 0px (nol).



border:1px solid #ddd; --> nah ini yang menjadi bingkai photonya, nilai figura adalah sebesar 1 pixel, jika ingin figuranya tampak lebih lebar, ya tinggal ganti nilai 1px dengan nilai yang lebih besar, contoh 6px, 8px atau yang lainnya. kode #ddd --> adalah kode warna untuk abu-abu, silahkan ganti dengan kode warna lainnya jika tidak cocok.




Masih bingung cara merubahnya? silahkan ikuti langkah-langkah berikut!



Untuk template klasik :

1. Sig in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting





5. Cari kode yang mirip dengan kode di bawah ini :





.profile-img img {

float:left;

padding:4px;

border:1px solid #ddd;

margin:0 8px 3px 0;

}





6. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :





.profile-img img {

float:left;

padding:4px;

border:8px solid #ddd;

margin:0 8px 3px 0;

}






7. Klik tombol Pratinjau untuk melihat hasil perubahan





8. Jika sudah OK, klik tombol Simpan Perubahan Template





9. Selesai.

Untuk template baru :

1. Sign in





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data






5. Klik kotak kecil di samping tulisan Expand Template Widget





6. Tunggu beberapa saat sampai proses selesai





7. Cari kode yang mirip dengan kode di bawah ini :






.profile-img {

float: left;

margin: 0 5px 5px 0;

padding: 4px;

border: 1px solid $bordercolor;

}





8. Ganti nilai border dengan nilai yang lebih besar, contoh 8px, sehingga kodenya akan seperti ini :





.profile-img img {

float:left;

padding:4px;

border:8px solid $bordercolor;

margin:0 8px 3px 0;

}





9. Klik tombol Pratinjau untuk melihat perubahan





10. Bila sudah OK, klik tombol SIMPAN TEMPLATE





11. Selesai.

Sebagai catatan, untuk melihat efek figura berfungsi, tentunya sobat harus terlebih dahulu memasang photo profile ( ya iya rek, kalo ga ada photonya, opo yang mau di buatin bingkai tho).



Jika penasasaran ingin melihat photo ganteng dengan figura yang antik, silahkan klik di sini !




Selamat mencoba deh !

Read more »

Download Minima 3 kolom

Setelah beberapa hari menghilang dari peredaran, maklum kemarin abis dari bandung nengokin sikembar yang mau masuk TK (lho ko jadi curhat men), akhirnya saya kembali menemui sobat semua.



OK, mungkin kali ini saya tidak membicarakan tentang blog tutorial yang seperti biasanya saya posting. Kemarin saya iseng-iseng otak-otak template miliknya blogger yaitu minima yang dua kolom itu lho, niatnya pengen jadi tiga kolom, dan apa yang terjadi....the...weeew...weeeeewww...akhirnya jadi juga deh tuh template jadi tiga kolom.



Yups, buat sobat yang pecinta minima dengan background putih saya kasih deh tuh template buat di download secara gratis, tapi ni ye...ada tapinya..kali ini yang saya buat cuma yang template klasik, kalo yang template baru alias pake XML belum saya buat, nanti deh ya saya buatin.



Biar tidak penasaran, saya berikan screen shootnya. silahkan klik di sini ! fitur-fitur yang saya masukan pada template ini antara lain yaitu sudah tersedianya system Read more ! seperti yang ada pada blog ini, syaratnya pada saat posting sobat harus menyisipkan kode <div class="fullpost"> .... </div>, untuk lebih jelasnya tentang Read more ini silahkan baca di sini ! fitur lainnya yaitu sudah terpasang menu dtree, silahkan edit kembali menu tersebut sesuai dengan keinginan sobat, untuk lebih jauh tentang menu dtree ini, silahkan klik di sini ! serta Recent comment pada sidebar, dan yang lebih menarik lagi adalah sudah di pasang navigasi yang terletak pada header blog, lebih jauh tentang menu navigasi ini, silahkan baca di sini ! silahkan edit kembali sesuai keinginan sobat.



Sekali lagi jika ada pertanyaan, apakah template ini bisa di download secara gratis? jawabannya iye bisa di download gratis. Cuma, ada cuma..nya nih. Sebagai apresiasi terhadap karya seseorang dalam hal ini ya saya dong, saya cuma minta sobat jangan menghapus kredit berupa banner dari blog ini, jika mau di pindahkan silahkan saja asal jangan di hapus ya.



Mengulas sedikit tentang template ini biar sobat bisa lebih leluasa dalam melakukan editting, menu css yang saya tambahkan agar menjadi tiga kolom adalah sebagai berikut :





#sidebarkiri {

width: 210px;

float: left;

padding-right:10px;

}





#sidebarkiri { --> hanya nama saja biar mudah di ingat

width: 210px; --> lebar kolom yang ada disebelah kiri sebesar 210px, silahkan di rubah apabila ingin menggunakan ukuran lain

float: left; --> terletak di sebelah kiri

padding-right:10px; --> jarak padding dengan kolom sebelah kanannya sebesar 10px





Eh lupa deh, kan judulnya soal download nih, jadi ga akan terlalu berlama-lama tentang tutorialnya, silahkan tanyakan seputar template ini jika sobat menemui masalah. Sebagai info aja nih, template ini hasilnya OK baik dengan intrnet Explorer ataupun si rubah mozilla firefox. Template ini datanya tidak besar, hanya sebesar 5 kb dalam bentuk .zip. silahkan ekstrak dulu dengan winzip. Jika belum punya program winzip, silahkan klik di sini untuk mendownloadnya. (weeeeeyyy...kelamaan, mana link download templatenya?) Untuk mendownload template ini silahkan klik di sini !



Selamat mendownload ya !

Read more »

Anchor Link / Link Satu Halaman

Lagi-lagi saya tertarik untuk membahas tentang cara membuat link. Yo'i, karena
tercatat tiga artikel yang sudah di posting tentang bagaimana cara membuat
tautan atau link, dan yang sekarang merupakan artikel yang keempat. Akan tetapi jangan
dulu mengira bahwa posting kali ini akan sama dengan postingan terdahulu, sebab
kali ini yang akan di bahas adalah cara untuk membuat link dalam bentuk Anchor.



Apa itu Anchor Link ?



Anchor link biasa di sebut juga dengan link dalam satu halaman, berbeda dengan hyperlink
pada umumnya yang biasa di gunakan untuk menghubungkan suatu tulisan dengan tulisan lain yang berada
pada halaman yang berbeda atau blog yang berbeda, anchor link ini lebih banyak di gunakan untuk
halaman yang sama. Masih bingung? memang saya juga sama bingungnya kalau membaca sekilas tentang pengertian tadi,
agar tidak sama-sama bingung akan saya beri contoh yang nyata. Pada bagian paling bawah blog ini, ada
tulisan berupa link yang tertera :



->> Kembali lagi ke atas <<-



Nah apabila sobat meng klik link tulisan tersebut maka secara otomatis yang akan tampil pada layar monitor sobat adalah halaman yang paling
atas dari blog ini, tidak percaya? silahkan buktikan ! Kelebihan anchor link dengan link biasa adalah link ini tidak memerlukan loading
ulang untuk memanggil obyek yang telah di tandai sebagai anchor.Contohnya seperti link yang berada paling bawah blog
ini, jika sobat mengkliknya maka tidak memerlukan waktu lebih dari satu detik halaman atas dari blog ini akan di tampilkan.



Bagaimana cara membuat anchor link?



Prinsip dasarnya adalah kita menandai terlebih dahulu suatu objek, lalu pada bagian yang lain kita buat link untuk memanggilnya.
Kode dasarnya seperti ini :




<a name="NamaAnchor"> .... </a>       <-- objek anchor



<a href="#NamaAnchor"> .... </a>       <-- link pemanggil anchor



Perhatikan tanda pagar (#) di atas, untuk nama anchor tidak memakai tanda pagar, akan tetapi untuk
link pemanggil anchor harus memakai tanda pagar.




Objek dari suatu anchor bisa di tampilkan bisa juga tidak, terlihat dari kode di atas ada tanda berupa titik-titik.
Titik-titik tersebut bisa di isi tulisan bisa juga di biarkan kosong, contoh :



<a name="AtasBlog"></a>       <-- objek anchor yang tidak ingin menampilkan tulisan.



<a name="AtasBlog">Blog bagian atas</a>       <-- objek anchor yang ingin menampilkan tulisan.



Berbeda dengan objek dari anchor, link pemanggil anchor haruslah di beri tulisan untuk bisa di klik oleh pengunjung, contoh :



<a href="#AtasBlog">Kembali ke atas</a> <-- link pemanggil anchor harus di beri tulisan.




Tertarik ingin membuatnya, silahkan ikuti langkah-langkah berikut :




Untuk template klasik :

1. Sign in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template sobat, lalu paste pada notepad, silahkan save dulu untuk backup data





5. Copy kode berikut lalu paste persis di bawah kode <body>





<a name="atas"></a>





6. Copy paste kode berikut di atas kode </body>





<center><a href="#atas"> Kembali lagi ke atas</a> </center>





7. Klik tombol Pratinjau untuk melihat perubahan





8. Jika sudah OK, klik tombol Simpan Perubahan Template





9. Selesai.

Penambahan kode <center> </center> di maksudkan agar tulisan link berada pada posisi tengah.




Untuk template baru :

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data






5. Klik kotak kecil di samping tulisan Expand Template Widget





6. Tunggu beberapa saat sampai proses selesai





7. Copy kode berikut lalu paste persis di bawah kode <body>





<a name="atas"></a>





8. Copy paste kode berikut di atas kode </body>





<center><a href="#atas"> Kembali lagi ke atas</a> </center>





9. Klik tombol Pratinjau untuk melihat perubahan





10. Jika sudah OK, klik tombol SIMPAN TEMPLATE





11. Selesai.

Satu lagi yang menarik dari fungsi kode ini, yaitu buat para sobat yang suka menulis posting
yang sangat panjang, atau merupakan tulisan-tulisan yang berupa karya ilmiah, Kode ini bisa
membantu kita untuk membuatkan sebuah navigasi untuk mempermudah pembaca. Misalkan pada setiap
pharagrap kita sisipkan sebuah anchor link yang mana anchor link ini bisa berupa tulisan yang terlihat
ataupun hanya sebuah objek yang tidak bisa terlihat oleh pembaca. Dan tentunya pada tempat-tempat tertentu
kita membuat tulisan berupa link untuk memanggil anchor link. Sebagai contoh saya telah membuat beberapa
anchor link pada setiap pharagrap, kode anchor link yang saya sisipkan seperti ini :



<a name="satu"></a>    --> pharagrap pertama



<a name="dua"></a>    --> pharagrap kedua



<a name="tiga"></a>    --> pharagrap ketiga



Mau membuktikan? Ok, coba deh klik masing-masing link berikut :



Kembali ke pharagrap Pertama !



Kembali ke pharagrap Kedua !



Kembali ke pharagrap Ketiga !




mau lihat contoh blog yang memakai kode ini juga, silahkan klik Di sini !



Menarik bukan? Selamat mencoba deh !

Read more »

Tips Mengganti Background Blog

Beberapa hari yang lalu, sobat Uel menanyakan perihal bagaimana caranya untuk
mengganti background blog, dan tentunya saya akan coba membahasnya. Menurut
saya, ada dua kemungkinan mengganti background yaitu yang pertama adalah mengganti
hanya warna background (latar belakang) saja, yang kedua adalah mengganti background
blog dengan menggunakan gambar atau image.




Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latar belakang)
yaitu gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan
kita menjadi susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, maka pilihlah warna
atau image yang terang, akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya
warna atau image background berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya
akan membuat pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan tentunya
percuma saja kita memposting artikel jika tidak ada yang mau untuk membacanya.OK, biar tidak menyita
halaman langsung saja pada topik utama. Karena kode template sangat bervariasi, yang akan saya jadikan
contoh adalah template asli blogger yaitu template minima.

Mengganti Warna Background

Untuk template minima klasik :

1. Sign in




2. Klik menu Template




3. Klik menu Edit HTML




4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data




5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :





body {

background:#fff;

margin:0;

padding:40px 20px;

font:x-small Georgia,Serif;

text-align:center;

color:#333;

font-size/* */:/**/small;

font-size: /**/small;

}



Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :



body {

background:#E7E3E3;

margin:0;

padding:40px 20px;

font:x-small Georgia,Serif;

text-align:center;

color:#333;

font-size/* */:/**/small;

font-size: /**/small;

}





6. Klik tombol Pratinjau untuk melihat perubahan




7. Jika sudah OK, klik tombol Simpan Perubahan Template




8. Selesai.

Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan
program photoshop, kapan-kapan akan saya posting khusus tentang bagaimana
cara mengetahui kode warna.





Untuk template minima baru :

1. sign in




2. Klik menu Layout




3. Klik menu Fon dan Warna




4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah
   di pilih lagi)




5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah




6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN




7. Selesai.

Mudah bukan?

Mengganti Background Dengan Image

Hal yang pertama tentu saja sobat harus mempunyai file image. Image
ini bisa berbentuk imaage biasa, photo, bahkan animasi pun bisa.
hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar, saya
anggap sobat sudah bisa melakukannya karena sudah saya bahas pada postingan
terdahulu, atau masih bingung? kalau iya, coba baca kembali di sini !



Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar,
karena walaupun ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan
dalam jumlah yang sangat banyak hingga memenuhi layar monitor, contoh saya sudah
menguload sebuah gambar dengan ukuran yang kecil saja, gambarnya seperti ini
(ukuran gambar dalam ukuran aslinya) :



alamat gambarnya adalah



http://amen24.googlepages.com/pattern_096.gif



gambarnya seperti ini :







gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan
dalam jumlah yang sangat banyak.



Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !



Untuk template minima klasik :

1. Sign in




2. Klik menu Template




3. Klik menu Edit HTML




4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data




5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :





body {

background:#fff url('http://amen24.googlepages.com/pattern_096.gif');

margin:0;

padding:40px 20px;

font:x-small Georgia,Serif;

text-align:center;

color:#333;

font-size/* */:/**/small;

font-size: /**/small;

}





6. Klik tombol Pratinjau untuk melihat perubahan




7. Jika sudah OK, klik tombol Simpan Perubahan Template




8. Selesai.

Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar
apabila background image yang kita pakai gagal di loading oleh komputer pengunjung
blog, maka yang bekerja duluan warna background.




Untuk template minima baru :

1. Sign in





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data






5. Klik kotak kecil di samping tulisan Expand Template Widget





6. Tunggu beberapa saat sampai proses selesai





7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :





body {

background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}





8. Klik tombol Pratinjau untuk melihat perubahan





9. Bila sudah OK, klik tombol SIMPAN TEMPLATE





10. Selesai.

Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di tambahkan, Untuk melihat
contoh blog yang sudah saya pasang background dengan gambar yang saya contohkan di atas, silahkan sobat
klik di sini !



Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload berbagai gambar pattren di sini.




Selamat mencoba !

Read more »

Mengatur Perataan Posting Artikel

Sudah dua kali pertanyaan ini muncul pada shoutbox, salah satunya
seperti ini :



"mas,gimana cara bikin rata kanan agar postingnya jadi rapi .... thx"



Sebenarnya tentang cara posting artikel sudah saya bahas pada postingan terdahulu, jika mau iseng coba baca di sini, akan tetapi biar lebih faham, sengaja saya posting lagi agar lebih jelas.



Untuk membuat perataan (align), baik rata kiri, kanan, kiri-kanan, atau mau tengah-tengah semuanya, bisa dengan dua cara tergantung dari kebiasaan sobat saat posting artikel, apakah biasa pakai menu Compose atau Edit HTML. Oleh karena itu akan saya bahas untuk keduanya.




Untuk menu Compose



Pada menu compose sebenarnya ini lebih mudah, sebab untuk membuat perataan sudah di sediakan tool (peralatan) yang sama dengan yang ada di Microsoft Word atau Exel, icon tool nya seperti ini :



--> Untuk merubah jenis hurup yang di gunakan



--> Untuk merubah ukuran hurup (heading)



--> Untuk Menebalkan hurup



--> Untuk memiringkan hurup



--> Untuk merubah warna hurup



--> Untuk membuat link



--> Untuk membuat artikel menjadi rata kiri



--> Untuk membuat tulisan menjadi di tengah



--> Untuk membuat artikel menjadi rata kanan



--> Untuk membuat artikel menjadi rata kiri dan rata kanan



--> Untuk membuat sub bahasan oleh angka



--> Untuk membuat sub bahasan oleh bullet



--> Untuk mengecek spelling



--> Untuk memasukan gambar(upload gambar)



--> Untuk membuat artikel dalam kode HTML



--> Untuk membuat artikel dalam mode Compose (biasa)




--> Untuk me review (melihat) artikel



Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang sobat mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?



Akan tetapi bagi sobat yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem
read more yang saya ajarkan di blog ini adalah dengan memakai kode <div class="fullpost"> yang relatif lebih aman.




Untuk menu Edit HTML



Bagi sobat yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kiri-kanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan akhir artikel, kodenya seperti ini :



Rata kiri :



<div align="left">



isi artikelnya di sini



</div>



Rata kanan :



<div align="right">



isi artikelnya di sini



</div>



Rata kiri-kanan :



<div align="justify">



isi artikelnya di sini



</div>



Supaya tengah semua :



<div align="center">



isi artikelnya di sini



</div>




Agar hasilnya kelihatan, saya berikan contoh dengan mengutif isi artikel di blog ini.



Contoh cara membuatnya seperti ini :



Untuk yang rata kiri :



<div align="left">

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.

</div>



Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.

Untuk yang rata kanan :



<div align="right">

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.

</div>



Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan.
Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan
dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal
membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk
hal-hal yang baik,Terima kasih.

Untuk yang rata kiri-kanan :



<div align="justify">

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan.
Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan
dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal
membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk
hal-hal yang baik,Terima kasih.

</div>



Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan.
Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan
dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal
membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk
hal-hal yang baik,Terima kasih.

Untuk yang tengah semua :



<div align="center">

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan.
Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan
dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal
membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk
hal-hal yang baik,Terima kasih.

</div>



Maka hasilnya akan seperti ini :

Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan.
Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan
dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal
membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk
hal-hal yang baik,Terima kasih.

Untuk yang bullet & numbering, ini bisa juga dilakukan :



contohnya seperti ini :



Bullet saja :




<li>Sig in di blogger dengan id sobat </li>

<br/>

<li>Klik menu layout </li>

<br/>

<li>Klik menu Edit HTML </li>



Hasilnya seperti ini :

Sig in di blogger dengan id sobat

Klik menu layout

Klik menu Edit HTML

Bullet yang menjorok ke tengah :



<ul>

<li>Sig in di blogger dengan id sobat </li>

<br/>

<li>Klik menu layout </li>

<br/>

<li>Klik menu Edit HTML </li>

</ul>




Hasilnya seperti ini :

• Sig in di blogger dengan id sobat




• Klik menu layout




• Klik menu Edit HTML

Yang memakai nomor :



<ol>

<li>Sig in di blogger dengan id sobat </li>

<br/>

<li>Klik menu layout </li>

<br/>

<li>Klik menu Edit HTML </li>

</ol>




Hasilnya seperti ini :

1. Sig in di blogger dengan id sobat




2. Klik menu layout




3. Klik menu Edit HTML

Untuk warna :



<span style="color:kode warna">

tulisan yang mau di warnai

</span>



contoh untuk warna merah :



<span style="color:red">

ini contoh merah

</span>



hasilnya seperti ini :





ini contoh merah




atau bisa juga seperti ini :



<span style="color:#FD0303">

ini contoh merah

</span>



Hasilnya tetap sama :




ini contoh merah




untuk mengetahui kode warna sangat gampang, sobat bisa menggunakan bantuan program photosop,
sobat tinggal sorot warna yg di kehendaki, nanti kode warnanya akan di tampilkan.



Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga
pada edit HTML untuk kode template.



Saya kira cukup sekian dulu, kalau kepanjangan bosen bacanya kan ?



Selamat ngeblog buat semuanya !

Read more »

Navigasi Dengan Css (2)

Lagi-lagi menanggapi keinginan mba Ati dalam hal membuat menu navigasi yang berbentuk
horizontal seperti yang terdapat pada header blog ini, kali ini saya akan mencoba menjawabnya dan mudah-mudahan postingan kali ini dapat memenuhi rasa ketidakpuasan terhadap jawaban saya pada postingan yang lalu. Menu navigasi yang akan saya buat adalah dengan menggunakan css agar hasil yang di dapat bersifat flexible dan tidak kaku.



Untuk membuat menu navigasi dengan css, tentunya akan berbeda hasilnya tatkala menggunakan template yang berbeda, akan tetapi agar saya bisa memberi sedikit gambaran maka template yang saya jadikan contoh adalah template minima yang di desain oleh Douglas Bowman (template asli blogger), klik tombol dibawah untuk melihat demo :









Bagaimana menarik bukan? jika tertarik silahkan sobat lanjut bacanya. Sekarang silahkan sobat baca dulu seluruh artikel ini sampai tuntas, karena ada kode-kode tertentu yang harus di sesuaikan, dan nanti pada akhir artikel saya akan menerangkan tentang kode-kode yang harus di rubah.



Untuk membuat menu tersebut silahkan sobat ikuti langkah-langkah berikut ini.




Untuk template minima klasik :

1. Sig in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting





5. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode </style>






/* Navigasi buat si juleha

----------------------------------------------- */

#juleha{

height:25px;

text-align: center;

}



#juleha a{

margin:0;

font-size:1.2em;

font-weight:bold;

letter-spacing:-1px;

background-color: #cccccc;

color: #000000;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}



#juleha a:hover{

text-decoration:none;

padding:34px 5px 41px 5px;

background-color: #0326FC;

background-repeat: repeat-x;

color:#A7FC03;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}





6. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode aslidan warna merah adalah kode yang harus di tambahkan :





<div id="header">


<h1 id="blog-title">

<ItemPage><a href="<$BlogURL$>"></ItemPage>

<$BlogTitle$>

<ItemPage></a></ItemPage>

</h1>



<id="description"><$BlogDescription$>


<div id="juleha">

<a href="#" target="_blank">Link 1</a>

<a href="#" target="_blank">Link 2</a>

<a href="#" target="_blank">Link 3</a>

<a href="#" target="_blank">Link 4</a>

<a href="#" target="_blank">Link 5</a>

</div>





</div>






7. Klik tombol Pratinjau untuk melihat hasil perubahan





8. Jika sudah OK, klik tombol Simpan Perubahan Template





9. Selesai.

Untuk template minima baru :

1. Sign in





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data






5. Klik kotak kecil di samping tulisan Expand Template Widget





6. Tunggu beberapa saat sampai proses selesai





7. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode ]]></b:skin>






/* Navigasi buat si juleha

----------------------------------------------- */

#juleha{

height:25px;

text-align: center;

}



#juleha a{

margin:0;

font-size:1.2em;

font-weight:bold;

letter-spacing:-1px;

background-color: #cccccc;

color: #000000;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}



#juleha a:hover{

text-decoration:none;

padding:34px 5px 41px 5px;

background-color: #0326FC;

background-repeat: repeat-x;

color:#A7FC03;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}









8. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode asli dan warna merah adalah kode yang harus di tambahkan :





<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>



<div id="juleha">

<a href="#" target="_blank">Link 1</a>

<a href="#" target="_blank">Link 2</a>

<a href="#" target="_blank">Link 3</a>

<a href="#" target="_blank">Link 4</a>

<a href="#" target="_blank">Link 5</a>

</div>



</div>

</div>

</b:if>






9. Klik tombol Pratinjau untuk melihat perubahan





10. Bila sudah OK, klik tombol SIMPAN TEMPLATE





11. Selesai.

Agar sobat lebih faham, saya akan sedikit memberi keterangan tentang kode-kode
yang saya berikan, silahkan simak :



juleha{

height:25px;

text-align: center;

}

#juleha hanyalah penamaan saja, bisa di ganti dengan apa saja yang penting nyambung dengan kode yang di bawahnya, mau ibro, samson, mau tukul juga boleh kalo sobat penggemarnya.

height:25px; kode ini adalah sebagai pengatur tingginya tombol navigasi, yang saya pakai adalah sebesar 25 pixel, boleh di ganti nilainya dan sesuaikan dengan keinginan sobat.

text-align: center; kode untuk memposisikan tombol-tombol berada di tengah-tengah, jika ingin mepet di sebelah kiri ganti kata Center dengan kata left, jika ingin mepet kanan, ganti dengan right.

#juleha a{

margin:0;

font-size:1.2em;

font-weight:bold;

letter-spacing:-1px;

background-color: #cccccc;

color: #000000;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}

#juleha a penamaan agar nyambung dengan kode diatasnya, dan kode-kode di yang di tulis bawahnya adalah yang akan muncul sebelum di sorot oleh mouse pengunjung blog.

font-size:1.2em; ukuran huruf yang di pake sebesar 1.2 . jika ingin lebih besar atau lebih kecil, silahkan ganti saja nilainya.

font-weight:bold; agar link yang di tulis hurufnya di cetak tebal, jika tidak mau ganti saja tulisan bold dengan tulisan normal.

background-color: #cccccc; kode untuk membuat warna latar belakang tombol. kode warna #cccccc adalah kode untuk abu-abu, silahkan sobat ganti dengan warna yang sobat sukai.

color: #000000; kode untuk warna huruf link, #000000 adalah kode warna hitam, silahkan ganti dengan warna yang sobat sukai.

#juleha a:hover{

text-decoration:none;

background-color: #0326FC;

background-repeat: repeat-x;

color:#A7FC03;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

#juleha a:hover adalah kode yang di harapkan ketika mouse menyorot pada
kode tombol yang di definisakan oleh kode-kode yang ada di kode #juleha a.

background-color: #0326FC; kode untuk membuat warna latar belakang tombol ketika mouse menyorot. kode warna #0326FC adalah kode untuk biru, silahkan sobat ganti dengan warna yang sobat sukai.

color:#A7FC03; kode untuk warna huruf link ketika mouse menyorot, #A7FC03 adalah kode warna hijau terang, silahkan ganti dengan warna yang sobat sukai.

<div id="juleha">

<a href="#" target="_blank">Link 1</a>

<a href="#" target="_blank">Link 2</a>

<a href="#" target="_blank">Link 3</a>

<a href="#" target="_blank">Link 4</a>

<a href="#" target="_blank">Link 5</a>

</div>

<div id="juleha"> kode pembuka juleha. Apa-apa yang di simpan di bawah kode ini, mengacu kepada apa yang di definisikan oleh kode juleha.

<a href="#" target="_blank">Link 1</a> kode untuk membuat link.

href="#" ganti tanda pagar (#) dengan URL atau link yang ingin sobat tuliskan. contoh : jika saya ingin membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan http://kolom-tutorial.blogspot.com

target"_blank" adalah kode untuk memunculkan jendela baru ketika link di klik oleh pengunjung, bila tidak ingin ada jendela baru, maka hilangkan kode ini.

Link 1 ganti tulisan ini dengan tulisan link yang sobat inginkan. contoh : untuk menuliskan blog ini saya ganti dengan kata Kolom Tutorial

jadi kira-kira link yang tadi akan menjadi seperi ini :



<a href="http://kolom-tutorial.blogspot.com" target="_blank">Kolom Tutorial</a>

</div> adalah kode penutup buat kode si juleha.

Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat kurangi atau bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada.



Bagaimana sobat, bingung tidak? mudah-mudahan dapat di mengerti.

Read more »