Horizontal Green menu

Jika kemarin-kemarin saya selalu menawarkan menu navigasi yang berupa
navigasi yang berbentuk horizontal yaitu menu navigasi yang cocok
di pasang di sekitar header, nah kali ini saya coba tawarkan yang lain
yakni menu navigasi yang berbentuk vertikal. Navigasi ini adalah untuk di
simpan pada bagian sidebar blog agar link-link yang tercipta dan di tempatkan
pada navigasi tersebut tampak lebih cantik dan menarik untuk di lihat.

Untuk melihat contoh dari menu yang saya buat, silahkan klik pada tombol
di bawah ini :








Jika sobat tertarik, silahkan ikuti tutorial pemasangannya di sini!



Selamat mempunyai sidebar yang lebih cantik!

Horizontal Flip menu

Untuk menambah kecantikan blog sobat, ada satu lagi yang saya tawarkan secara gratis
yaitu menu navigasi dengan menggunakan CSS. Navigasi ini saya beri nama Horizontal Flip menu.
Pada menu-menu lain kebanyakan apabila di sorot akan berubah warna, yang ini berbeda. Di sinilah
uniknya, menu navigasi ini apabila di sorot oleh mouse, tulisan yang ada di dalamnya seakan bergerak
alias gelayutan (apaan tuh ).
Penasan seperti apa bentuk dari menu navigasi ini, silahkan klik pada gambar di bawah ini :

Bagaimana, cukup lucu bukan? bagi yang berminat memasang menu navigasi ini, silahkan baca
instruksi pemasanganya di sini !



Selamat bergelayut ria !

Horizontal Blue Menu Navigation

Ada suka memasang menu navigasi di header? yang satu ini boleh untuk
di jadikan pilihan.Blue menu navigatioan, biru is my color. Penasaran
ingin melihat seperti apa tampilan menu navigasi ini, silahkan klik
pada tombol di bawah ini :

Bagaimana menurut sobat akan tampilan menu navigasi ini? tertarik? silahkan
ikuti cara instalasinya di sini !



Selamat mencoba !

Sisipkan Icon di View Profile

Jika pada postingan yang lalu telah di bahas bagaimana cara
menyisipkan mini icon pada label(kategory), maka pada kesempatan
kali ini akan coba di bahas tentang cara menyisipkan mini icon di
View My Complete Profile atau Lihat Profile Lengkap Saya.
Memang sebenarnya tidak terlalu penting, akan tetapi lumayan untuk
pemanis blog kita agar tampil sedikit lebih cantik dari sebelumnya.

Seperti biasa, sobat terlebih dahulu harus sudah mengupload mini icon
yang akan di pasang pada hosting tempat menyimpan gambar, kemudian
catat alamat gambar tersebut, misal saya telah mengupload sebuah mini
icon dan telah mempunyai lamat gambar alamat sebagai berikut :




http://24rohman.googlepages.com/icon_user.gif





Agar gambar tersebut bisa tampil, maka harus di tambah kode untuk memangilnya,
kodenya jadi seperti ini :




<img src='http://24rohman.googlepages.com/icon_user.gif'/>





Icon ini mempunyai gambar seperti ini :







Sebagai catatan saja bahwa tutor kali ini khusus bagi sobat yang memakai template baru.
Untuk menyisipkan mini icon pada View My Complete Profile, sebelumnya sobat
harus sudah menampilkan profile di blognya. Silahkan ikuti langkah-
langkah berikut ini:

1. Sign in di blogger.





2. Klik menu Layout.





3. Klik menu Edit HTML.





4. Klik tulisan Download Template Seluruhnya, silahkan save dulu untuk backup data.





5. Klik kotak kecil di samping tulisan Expand Widget Template.





6. Tunggu beberapa saat sampai proses selesai.





7. Cari kode seperti ini :






<b:if cond='data:aboutme != ""'>




<dd class='profile-textblock'><data:aboutme/>




</dd>




</b:if>

</dl>

<a class='profile-link' expr:href='data:userUrl'>




<data:viewProfileMsg/></a>

</b:if>





8. Sisipkan kode icon seperti kode di bawah ini :




<b:if cond='data:aboutme != ""'>




<dd class='profile-textblock'><data:aboutme/>




</dd>




</b:if>

</dl>

<a class='profile-link' expr:href='data:userUrl'>




<img src='http://24rohman.googlepages.com/icon_user.gif'/>&#160;




<data:viewProfileMsg/></a>

</b:if>








9. Klik tombol SIMPAN TEMPLATE.





10. Selesai.

Untuk melihat contoh silahkan sobat klik di sini !



Selamat mencoba !

Sisipkan Mini icon pada Label

Sebagaimana janji saya terdahulu bahwa akan memposting tentang bagaimana memasang mini icon pada blog, dan kali ini saya khususkan untuk menyisipkan mini icon pada Label atau kategori blog. Satu yang perlu di ketahui yaitu
postingan ini di khususkan bagi sobat yang memakai template baru saja, untuk yang klasik tentu saja tidak perlu bersusah payah karena untuk label sama seperti membuat link biasa.

Karena pada postingan yang lalu telah saya informasikan situs penyedia layanan mini icon, maka sekarang saya asumsikan sobat telah mempunyai mini icon yang telah di upload di hosting. Sebagai contoh saya telah mengupload sebuah mini icon dan mempunyai alamat gambar sebagai berikut :



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



dan agar gambar tersebut tampil, maka kita perlu memanggilnya, kodenya seperti ini :




<img src="http://amen24.googlepages.com/folder.gif"/>




gambarnya seperti ini :







Agar icon dengan tulisan tidak terlihat berdempetan, maka sobat bisa menambahkan efek spasi dengan menyelipkan kode :



&#160;



kode di atas adalah khusus di pakai pada saat edit template XML, karena apabila pada format HTML memakai kode :



&nbsp;



Bagaimana bingungkan? sama kalau begitu, saya juga sedikit bingung. Ini saya sampaikan dengan tujuan agar nantinya lebih mudah di mengerti. Dan sebagai catatan, sebelum sobat mempraktekan langkah di bawah sobat harus sudah mempunyai postingan yang di beri label / kategori. Langsung saja, untuk menyelipkan mini icon pada label /kategori silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik link Download template, save dulu untuk di jadikan backup agar aman





5. Beri tanda centang pada kotak kecil di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya





6. Cari kode seperti berikut :





<a expr:href='data:label.url'>

<data:label.name/>

&#160; (<data:label.count/>)</a>





7. Sisipkan kode mini icon nya sehingga kodenya jadi seperti ini :





<a expr:href='data:label.url'>

<img src="http://amen24.googlepages.com/folder.gif"/> &#160;

<data:label.name/>

&#160; (<data:label.count/>)</a>





8. Klik tombol Simpan Template





9. Selesai.

Jika sobat telah menyisipkan kode tersebut, maka setiap label akan tedapat mini icon nya. Mau melihat contoh nyata? silahkan kunjungi http://template-unik.blogspot.com.



Selamat mencoba !

Download Mini Icon

Apakah sobat suka menghias diri ketika berkaca? jawabannya sudah pasti sepakat "iya suka". Berhias diri bertujuan agar penampilan kita menjadi lebih baik di mata orang yang melihat kita. Tak ubahnya seperti badan kita, sebuah blog pun apabila ingin tampil menarik di mata pengunjungnya haruslah di hias dengan berbagai hiasan atau sebut saja aksesori. Akan tetapi tentu saja jangan terlalu berlebihan, karena sesuatu yang berlebihan akan berakibat tidak baik, begitupun dengan yang namanya blog. Sebuah blog yang di hias dengan berbagai aksesori yang terlalu berlebihan akan berakibat buruk, salah satunya yaitu blog kita akan susah di loading oleh pengunjung karena data yang harus di loading terlalu banyak.

Salah satu aksesori yang bentuknya mungil akan tetapi sangat menarik adalah mini icon. Yupssss... sebuah mini icon boleh juga di lirik menjadi sebuah aksesori. Dipandang dari bentuknya yang mungil akan terlihat sangat lucu dan yang paling utama adalah kapasitas data yang tidak terlalu besar. Coba lihat dan bandingkan link
di bawah ini :



Blog Roll



uniQue Template


Free Css style




Blog Roll



• uniQue Template


• Free Css style




Blog Roll



 uniQue Template


 Free Css style




Blog Roll




 uniQue Template


 Free Css style






Contoh di atas adalah contoh pembuatan link exchange atau Blog Roll dengan memakai dua gaya. Contoh pertama dan kedua adalah blog roll tanpa penambahan aksesori mini icon, sedangkan contoh ketiga dan ke empat adalah dengan menyisipkan mini icon. Manakah menurut sobat yang lebih menarik? Jika saya pribadi cenderung memilih yang memakai mini icon. Sepakatkah sobat dengan saya? apabila jawabnya "ya" ayo lanjutkan membacanya.




Mungkin ada di antara sobat sangat tertarik dengan mini icon ini, akan tetapi masih merasa bingung karena keterbatasan kemampuan dalam hal pembuatannya. Memang untuk membuat sebuah mini icon membutuhkan ketelitian dan kesabaran di samping yang paling
utama yaitu penguasaan terhadap suatu program design grafis. Sebuah kabar gembira bagi sobat yang seperti saya katakan tadi di awal. Di internet banyak sekali situs-situs yang menyediakan layanan ini, satu di antara sekian banyak situs penyedia layanan ini adalah http://www.famfamfam.com. Silahkan tuju situs ini, sobat bisa mendownload ratusan bentuk icon yang mungil serta lucu, bahkan icon bendera pun tersedia di sana.



Bagaimana sudah dikunjungi dan di download? jika sudah di download, langkah selanjutnya adalah meng upload icon tersebut di hosting tempat menyimpan gambar, jangan semuanya di upload tapi yang di anggap perlu saja. Untuk meyisipkannya di blog sobat misal ingin di samping profile, di tanda waktu atau di mana saja akan saya ajarkan pada kesempatan berikutnya..... tunggu saja ya...

Membuat Cursor Animasi

Hallo sobat.. jumpa lagi nih. Setelah beberapa hari absen karena datangnya bulan suci ramadhan dan tadinya saya berniat untuk undur diri selama satu bulan, eh akhirnya tidak tahan juga nih... Nge-log lagiiiii....
(sudah kecanduan kalee ye ). Yupsss... kali ini saya mau membahas salah satu pertanyaan dari sobat alfath yang di ajukan melalui shoutbox. Kutipan pertanyaannya seperti ini :



"ASS.Gmana cara pasang kursor animasi,kan bagus klo kursornya antik... "



Sebuah keinginan yang datang akibat ingin membuat blognya tampak lebih menarik di mata pengunjung.... wajar kalau menurut saya..

Untuk membuat sebuah kursor animasi tidaklah sulit, karena tidak banyak kode yang harus dipakai, akan tetapi tentu saja sesuatu yang gampang akan menjadi sulit tatkala kita tidak tahu caranya, makanya disinilah indahnya berbagi, banyak berbagi akan banyak di bagi, banyak memberi akan banyak di beri. iya ngga?
dan moto saya yang baru yaitu "banyak berbagi banyak sahabat".



Untuk membuat sebuah kursor animasi, langkah pertama yang harus di lakukan adalah membuat sebuah gambar animasi yang berukuran kecil, untuk yang ini terserah kepada keahlian sobat, banyak software pembuat animasi semisal macromedia flash dan kawan-kawannya. Sebuah pertanyaan baru mungkin muncul yaitu bagaimana apabila kita tidak
menguasai program animasi, kan jadi ribet persolaannya. Jika sobat tidak bisa membuat sebuah gambar animasi untuk di pakai, jangan dulu putus harapan. Sobat bisa mencarinya di internet, ratusan atau bahkan ribuan situs menyediakan layanan ini. Caranya sangat mudah, sobat bisa mencarinya lewat search engine yang ada di sebelah kanan atas blog ini. Tuliskan keyword yang berhubungan, misal : Free cursor animated, cursor animation, Free cursor animated atau keyword lainnya yang di rasa berhubungan dengan yang namanya kursor animasi.
Silahkan kunjungi situs yang muncul, barangkali sobat akan menemukan situs yang tepat.



Langkah kedua yaitu menyimpan file animasi yang sudah sobat dapatkan ke hosting tempat menyimpan gambar, contoh : http://www.photobucket.com atau di blogger sendiri juga bisa.
Untuk cara-cara mengupload gambar sudah saya terangkan, silahkan baca kembali di sini apabila sobat masih belum bingung mengenai cara upload gambar. Apabila gambar animasi sudah si upload, catat alamat gambar tersebut. Sebagai contoh, saya mempunyai gambar cursor berbentuk naga terbang dengan alamat sebagai berikut :



http://24rohman.googlepages.com/dragon3.ani





Langkah selanjutnya adalah menyisipkan kode untuk kursor. Kode untuk membentuk kursor adalah sebagai berikut :



cursor: url("alamat gambar kursor");



Sebagai contoh, jika saya menggunakan alamat kursor yang saya miliki, kode nya jadi seperti ini :



cursor: url("http://24rohman.googlepages.com/dragon3.ani");



Langkah selanjutnya yang harus di lakukan adalah memasukan kode di atas ke dalam kode template sobat, agar lebih mudah untuk di pahami, saya tuliskan langkah-langkahnya :

Untuk template klasik

1. Sign in di blogger.




2. Klik menu Template




3. Klik menu Edit HTML




4. Copy seluruh kode template yang ada, lalu save untuk backup data




5. Cari kode yang mirip dengan kode di bawah ini, biasanya di tulis dengan body :




body {

background:#fff;

margin:0;

padding:40px 20px;

font:x-small Georgia,Serif;

text-align:center;

color:#333;

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

font-size: /**/small;

}





6. Sisipkan kode kursor di dalam kode tadi, sehingga seperti ini :




body{

background:#fff;

margin:0;

padding:40px 20px;

font:x-small Georgia,Serif;

text-align:center;

color:#333;

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

font-size: /**/small;

cursor: url("http://24rohman.googlepages.com/dragon3.ani");

}





7. Klik tombol Simpan Perubahan Template




8. Selesai. Silahkan lihat hasilnya.

Untuk template baru

1. Sign in di blogger




2. Klik menu Layout




3. Klik menu Edit HTML




4. Klik link Download template seluruhnya, save dulu untuk backup biar aman




5. Cari kode yang mirip dengan kode dibawah, biasanya di tulis dengan body :





body {

background:$bgcolor;

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

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

font-size: /**/small;

text-align: justify;

}



6. Sisipkan kode kursor di dalam kode tadi, sehingga seperti ini :




body {

background:$bgcolor;

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

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

font-size: /**/small;

text-align: justify;

cursor: url("http://24rohman.googlepages.com/dragon3.ani");

}




7. Klik tombol Simpan Template




8. Selesai. Silahkan lihat hasilnya.

Atau ada juga cara lain, yaitu di tempatkan di dalam kode <body>,
sobat tinggal menyisipkannya sehingga kodenya jadi seperti ini :

<body style='CURSOR: url("http://24rohman.googlepages.com/dragon3.ani")'>

Saya rasa cukup deh, selamat menikmati animasinya. Untuk contoh nyata tentang yang saya terangkan diatas, sobat bisa kunjungi blog saya yang lain, silahkan klik di sini !



Eh sobat, di template unik sudah banyak template yang baru lho, kunjungi sebentar blogku yang satu ini ya, silahkan klik http://template-unik.blogspot.com

Setting Widget Mybloglog

Dulu saya pernah membahas bagaimana cara daftar serta mendapatkan widgetnya di sini, akan tetapi rupanya ada beberapa sobat yang masih bingung dan penasaran bagaimana cara setting widget agar yang tampak adalah hanya berupa photo saja seperti yang ada pada blog ini karena pada umumnya widget mybloglog adalah berbentuk horizontal dan terdapat nama-nama pemilik di masing-masing photonya. Yups.... saya akan mencoba membahasnya kembali.



Sekarang saya anggap sobat sudah menjadi anggota mybloglog dan hanya tinggal melakukan setting saja. Ikuti langkah-langkah berikut ini :

1. Silahkan sign in dulu di mybloglog





2. Jika sobat mempunyai beberapa blog yang di daftarkan dalam satu account, klik tombol Get Widgets yang berada di bawah gambar blog yang ingin di pasang widget





3. Klik kotak kecil yang berada di samping tulisan c_color_heading_bg, pilih warna yang persis dengan background blog sobat pada gambar warna-warna sebelah atas.





4. Klik kotak kecil di samping tulisan c_color_heading, yang ini merupakan warna tulisan Recent readers, silahkan pilih yang sobat inginkan





5. Klik kotak kecil di samping tulisan c_color_link_bg, pilih warna yang persis dengan background blog sobat





6. Klik kotak kecil di samping tulisan c_color_link, pilih warna yang di nginkan





7. Klik kotak kecil di samping tulisan c_color_bottom_bg, pilih warna yang sesuai dengan background sobat





8. Ubah nilai angka 180 yang berada pada kotak di samping tulisan Width dengan nilai lebar yang di inginkan (dalam pixel)





9. Pilih radio button No, di samping tulisan Show Screen Names. Sekali lagi pilih No jangan Yes karena inilah yang membuat muncul tulisan nama pengunjung





10. Pilih radio button Half-Size, di samping tulisan Image Size





11. Pilih angka yang di inginkan pada menu dropdown di samping tulisan Rows, sebaiknya 5 saja agar tidak terlalu berat witgetnya.





12. Ganti tulisan Recent Readers di samping tulisan Title dengan kata yang sobat inginkan, misal : pembaca terbaru, yang mampir, yang lewat, atau apa saja





13. KLik tombol Preview and Get Code





14. Copy kode yang ada lalu paste pada notepad untuk nanti di masukan ke dalam blog sobat





15. Selesai.

Contoh hasil dari apa-apa yang saya terangkan coba lihat ke bagian samping kanan blog ini :



Jika sobat menginginkan gambar yang terbentuk adalah berupa gambar yang memanjang dengan foto-foto dalam ukuran yang besar, sobat hanya harus melakukan settingan yang berbeda pada langkah yang ke 8, 10 serta yang ke 11. Untuk langkah yang 8 sobat harus setting dengan ukuran yang lebar, contoh 700 pixel (biasanya widget ini akan di simpan di bagian footer blog). Untuk langkah yang ke 10 sobat harus memilih yang Full-Size agar gambar yang terbentuk adalah dalam ukuran besar. untuk langkah yang ke 11 sobat sebaiknya memilih angka 2 saja agar gambar yang di tampilkan dua baris saja. Untuk melihat contoh, bisa di lihat di sini !



Untuk memasukan kode mybloglog kedalam blog sobat, silahkan sobat baca kembali artikel yang terdahulu di sini ! dan satu catatan ringan saja akan tetapi sering di tanyakan adalah apabila sobat baru memasang widget mybloglog maka tidak akan terdapat photo-photo, photo-photo ini akan terbentuk apabila ada pengunjung blog sobat yang notabene sama-sama anggota dari mybloglog.



semoga artikel ini dapat mewakili dari kepenasaranan sobat.



Selamat mencoba !

Marquee with Javascript

Walowwwww...... semuanya. Nongol lagi nih, setelah beberapa hari absen dari nge-blog. Yups... karena kemarin kantorku abis ngadain Tour ke kampung halamanku Bandung. Acyiiiik... banget, makan-makan di kampung daun trus lihat kawah tangkuban perahu, and then berendem air panas di sari ater, pokonya ga inget deh ama yang namanya blog apalagi sama yang ngajuin pertanyaan lewat Shoutbox kaciaaaaaan deh lho ga ada yang nanggepin

( saya lagi jahat nih )



OK sobat, setelah enak tertawa, kita kembali ke...... blog tutorial.... tentunya bukan laptop emangnya saya tukul arwana apa? Yoi... pada kesempatan
kali ini saya mau membicarakan tentang pembuatan fungsi teks berjalan yang sering menggunakan perintah marquee, akan tetapi tentu saja bukan memakai
fungsi marquee biasa seperti yang saya terangkan di sini, karena sama-sama kita ketahui bahwa fungsi marquee tidak bekerja dengan baik pada browser Mozilla atau firefox. Artikel ini saya tulis di sebabkan ada beberapa sobat yang komplain akibat perintah marquee tidak berjalan dengan baik pada Mozilla

Untuk membuat sebuah fungsi marquee agar terlihat bekerja dengan baik pada banyak browser, kali ini saya menggunakan javascript sebagai adaptor nya. Prinsip dasar dari yang akan saya terangkan adalah seperti ini :

Kode CSS untuk patokan kode marquee yang ingin di tampilkan

Javascript sebagai adaptor agar fungsi marquee dapat bekerja dengan baik pada berbagai browser

isi yang ingin di tampilkan

Nah kira-kira seperti itu deh kalau menurut saya sih. Bentuk variasi dari marquee ini tentunya bisa berbagai macam bentuk serta ragam yang dapat di ciptakan, akan tetapi kali ini akan saya terangkan satu contoh saja sebagai acuan dasar.

Untuk Template klasik

1. Sign in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode HTML yang ada, kemudian paste notepad lalu save sebagai backup





5. Copy paste kode berikut di atas kode </style>










<br />#isi-marquee{<br />position: relative;<br />width: 200px; /*lebar marquee */<br />height: 200px; /*tinggi marquee */<br />background-color: white; /*warna background */<br />overflow: hidden;<br />padding: 2px;<br />padding-left: 4px;<br />}<br /><br />








6. Copy kode berikut, lalu paste di atas kode </head>











<br /><script type="text/javascript"><br /><br />/***********************************************<br />* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)<br />* This notice MUST stay intact for legal use<br />* Visit http://www.dynamicdrive.com/ for this script and 100s more.<br />***********************************************/<br /><br />var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)<br />var marqueespeed=1 //angka 2 adalah nilai kecepatan marquee, ubah jika ingin mengubahnya<br />var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?<br /><br />////TIDAK ADA YANG PERLU DI UBAH PADA BAGIAN INI////////////<br /><br />var copyspeed=marqueespeed<br />var pausespeed=(pauseit==0)? copyspeed: 0<br />var actualheight=''<br /><br />function scrollmarquee(){<br />if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))<br />cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"<br />else<br />cross_marquee.style.top=parseInt(marqueeheight)+8+"px"<br />}<br /><br />function initializemarquee(){<br />cross_marquee=document.getElementById("vmarquee")<br />cross_marquee.style.top=0<br />marqueeheight=document.getElementById("isi-marquee").offsetHeight<br />actualheight=cross_marquee.offsetHeight<br />if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit<br />cross_marquee.style.height=marqueeheight+"px"<br />cross_marquee.style.overflow="scroll"<br />return<br />}<br />setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)<br />}<br /><br />if (window.addEventListener)<br />window.addEventListener("load", initializemarquee, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", initializemarquee)<br />else if (document.getElementById)<br />window.onload=initializemarquee<br /></script><br />







7. Copy kode berikut lalu paste pada tempat yang sobat inginkan (biasanya di simpan di sidebar)











<br /><table border="3"><tr><td><table border="1"><tr><td><br /><div id="isi-marquee" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"><br /><div id="vmarquee" style="position: absolute; width: 98%;"><br /><br /><div align="center"><br />Apabila sobat mempunyai pertanyaan atau kritik tentang blog ini, tulis aja tulis pada shoutbox, atau jika ingin langgeng tulis di kotak komentar. Atau jika ingin puas langsung kirim via email <br/><br/><br />Jika ada sobat yang sudah pasang link blog ini dan belum saya linkback, tolong di kasih tahu pada shoutbox atau email saja langsung ke saya. <br /><br/><br/>Terima kasih </div><br /><br /></div><br /></div><br /></td></tr></table></td></tr></table><br />







8. Klik tombol Simpan Perubahan template





9. Selesai.

Untuk Template baru

1. Sign in di blogger





2. Klik menu Layout





3. KLik menu Edit HTML





4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting





5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
   ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
   ]]></b:skin>
   
   
   
   
   
   
   
   

   
   <br />#isi-marquee{<br />position: relative;<br />width: 200px; /*lebar marquee */<br />height: 200px; /*tinggi marquee */<br />background-color: white; /*warna background */<br />overflow: hidden;<br />padding: 2px;<br />padding-left: 4px;<br />}<br />

   
   
   
   
   
   
6. Copy kode berikut lalu paste di atas kode </head>











<br /><script type="text/javascript"><br />//<![CDATA[ <br />/***********************************************<br />* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)<br />* This notice MUST stay intact for legal use<br />* Visit http://www.dynamicdrive.com/ for this script and 100s more.<br />***********************************************/<br /><br />var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)<br />var marqueespeed=1 //angka 2 adalah nilai kecepatan marquee, ubah jika ingin mengubahnya<br />var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?<br /><br />////TIDAK ADA YANG PERLU DI UBAH PADA BAGIAN INI////////////<br /><br />var copyspeed=marqueespeed<br />var pausespeed=(pauseit==0)? copyspeed: 0<br />var actualheight=''<br /><br />function scrollmarquee(){<br />if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))<br />cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"<br />else<br />cross_marquee.style.top=parseInt(marqueeheight)+8+"px"<br />}<br /><br />function initializemarquee(){<br />cross_marquee=document.getElementById("vmarquee")<br />cross_marquee.style.top=0<br />marqueeheight=document.getElementById("isi-marquee").offsetHeight<br />actualheight=cross_marquee.offsetHeight<br />if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit<br />cross_marquee.style.height=marqueeheight+"px"<br />cross_marquee.style.overflow="scroll"<br />return<br />}<br />setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)<br />}<br /><br />if (window.addEventListener)<br />window.addEventListener("load", initializemarquee, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", initializemarquee)<br />else if (document.getElementById)<br />window.onload=initializemarquee<br />//]]><br /></script><br />







7. Klik tombol SIMPAN TEMPLATE





8. Klik menu Elemen Halaman





9. Klik tulisan Tambah sebuah Elemen Halaman





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





11. Copy paste kode berikut pada elemen yang muncul











<br /><table border="3"><tr><td><table border="1"><tr><td><br /><div id="isi-marquee" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"><br /><div id="vmarquee" style="position: absolute; width: 98%;"><br /><br /><div align="center"><br />Apabila sobat mempunyai pertanyaan atau kritik tentang blog ini, tulis aja tulis pada shoutbox, <br />atau jika ingin langgeng tulis di kotak komentar. Atau jika ingin puas langsung kirim via email <br/><br/><br />Jika ada sobat yang sudah pasang link blog ini dan belum saya linkback, tolong di kasih tahu pada shoutbox atau email saja langsung ke saya. <br /><br/><br/>Terima kasih </div><br /><br /></div><br /></div><br /></td></tr></table></td></tr></table><br />







12. Klik tombol SIMPAN PERUBAHAN





13. Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)





14. Klik tombol SIMPAN





15. Selesai.

Pada kode marquee yang di terangkan di atas adalah memuat contoh kata-kata yang saya buat, silahkan sobat ganti sendiri sesuai dengan keinginan sobat. Karena fungsi ini adalah mirip dengan kode marquee biasa, maka untuk menciptakan variasi lainnya maka silahkan sobat bandingkan dengan artikel saya lainnya yang memuat pembuatan kode marquee.



Untuk melihat contoh hasil dari yang saya terangkan di atas, silahkan sobat klik di sini !



Selamat mencoba !

Text marquee in The Image

Dulu.... pernah muncul pertanyaan bagaimana cara membuat gambar bisa bergerak/berjalan seperti sama halnya dengan text yang bergerak dengan menggunakan perintah Marquee, dan untuk pertanyaan ini sudah saya jawab di sini. Ada lagi pertanyaan yang muncul, pertanyaannya kira-kira seperti ini :



Mas, bagaimana cara membuat gambar yang berbingkai yang di dalamnya terdapat tulisan yang bergerak?



Wedewww.... pertanyaan yang cukup menantang sekaligus membingungkan. Pertanyaan ini muncul ketika saya sedang berchatting ria dengansalah seorang sobat, ketika itu saya tidak bisa menjawab langsung pertanyaan ini, dan saya meminta waktu
untuk berpikir. Setelah waktu lumayan senggang barulah saya memikirkan jawabannya, dan akhirnya ketemu juga nih jawabannya. But i think, lebih baik jawaban ini saya tuliskan saja di postingan agar sobat yang lain yang sama-sama berminat dapat mengetahuinya.

Teknik dasar yang saya gunakan adalah saya membuat sebuah wadah, nah wadah tersebut saya isi dengan gambar serta tulisan yang berjalan sehingga antara gambar dengan tulisan dapat bersatu dalam satu wadah (frame), kemudian wadah tersebut saya
beri bingkai. Maka hasil akhir dari teknik yang saya buat ini adalah sebuah gambar yang berbingkai yang di dalamnya terdapat tulisan yang berjalan. Masih bingung? ya udah baca lagi deh kelanjutannya biar lebih mengerti.



Untuk menampilkan sebuah gambar, tentu saja sobat harus mempunyai gambar yang telah di upload ke hosting tempat menyimpan gambar. Untuk contoh saja, alamat yang saya gunakan untuk contoh adalah sebagai berikut :



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



photo anak saya nih... lagi acik-aciknya bermain..



Untu membuat frame gambar silahkan ikuti langkah-langkah berikut :



•  untuk template klasik

1. Sigin di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode HTML yang ada, kemudian paste pada notepad lalu save untuk backup buat jaga-jaga apabila terjadi kesalahan editting





5. Copy paste kode berikut diatas kode <style>










<br />#gambar {<br />background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */<br />height:300px; /* untuk mengatur tinggi gambar */<br />width:500px; /* untuk mengatur lebar gambar */<br />}<br /> <br />#tulisan {<br /> font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */<br /> font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */<br /> color:#ffffff; /* ini kode warna untuk hurup */<br /> }<br /><br />







6. Copy paste kode berikut pada tempat yang sobat inginkan










<br /><br /><table border="10" cellpadding="3" height="135" width="500"/><br /><tr><br /><td><br /><div id="gambar"><br /><br /><br /><div id="tulisan"><br /><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> <br /><br />Ini adalah photo putriku tersayang sedang menghirup udara pagi yang segar sambil bermain-main di lapangan tegal lega bandung.<br /><br /></marquee> <br /><br /></div><br /></div><br /><br /></td><br /></tr><br /></table><br />









7. Klik tombol Simpan Perubahan Template





8. Selesai.

•  Untuk Template Baru

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting





5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
   ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
   ]]></b:skin>
   
   
   
   
   
   
   

   
   <br />#gambar {<br />background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */<br />height:300px; /* untuk mengatur tinggi gambar */<br />width:500px; /* untuk mengatur lebar gambar */<br />}<br /> <br />#tulisan {<br /> font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */<br /> font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */<br /> color:#ffffff; /* ini kode warna untuk hurup */<br /> }<br /><br />

   
   
   
   
   
6. Klik tombol SIMPAN TEMPLATE





7. Klik menu Elemen Halaman





8. Klik tulisan Tambah sebuah Elemen Halaman





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





10. Copy paste kode berikut pada elemen yang muncul













<br /><table border="10" cellpadding="3" height="135" width="500"/><br /><tr><br /><td><br /><div id="gambar"><br /><br /><br /><div id="tulisan"><br /><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> <br /><br />Ini adalah photo putriku tersayang sedang menghirup udara pagi yang segar sambil bermain-main di lapangan tegal lega bandung.<br /><br /></marquee> <br /><br /></div><br /></div><br /><br /></td><br /></tr><br /></table><br />






11. Klik tombol SIMPAN PERUBAHAN





12. Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)





13. Klik tombol SIMPAN





14. Selesai.

Pada kode-kode diatas sudah saya sertakan keterangan tentang kode-kode css yang saya pasang untuk memudahkan sobat dalam hal mengedit sesuai keinginan sobat.



Agar lebih yakin dengan hasil dari kode-kode yang saya buat di atas, coba lihat saja contohnya, silahkan klik di sini !



Selamat berkreasi !

Horizontal Dropdown Menu

Beberapa hari tidak ada tulisan baru, bukan karena kehabisan bahan untuk menulis, tapi terlalu sibuk dengan kode-kode template. Yups, akhirnya ada juga template yang sudah jadi walaupun sekilas masih mirip dengan pendahulunya. Jika ada yang mau lihat templatenya seperti apa, bisa sobat Klik di sini !. Tapi maaf nih, bagi sobat yang suka akan template ini belum bisa di download sekarang karena datanya masih belum saya upload, jadi sabar deh mungkin besok atau lusa sudah bisa di download.



Yo'i sobat tadi adalah hanya sekilas info saja, yang akan saya bahas sekarang adalah
menyoal tentang pernak-pernik blog, ada satu lagi nih yang bisa sobat pasang. kali ini tentang cara pembuatan menu dropdown dengan javascript dalam bentuk
horizontal alias mendatar. Sekilas tentang menu dropdown ini yaitu menu navigasi yang apabila di sorot oleh mouse akan secara otomatis mengeluarakan sub menu yang terkandung di dalamnya. Contoh gampang yaitu silahkan sobat sorot menu-menu yang ada pada bagian atas blog ini, tentunya nanti akan keluar berupa sub-sub menu. Ingin tahu cara membuatnya? silahkan baca tutorialnya sampai selesai !

Untuk membuat menu dropdown seperti di atas, bisa menggunakan bantuan image ataupun cukup hanya warna background biasa. Untuk saat ini saya mau menerangkan menu dropdown tanpa bantuan image, dan untuk yang menggunakan latar belakang image, akan di bahas pada pembahasan selanjutnya.




Script yang saya pakai kali ini adalah di ambil dari http://www.dynamicdrive.com akan tetapi saya modifikasi pada bagian css agar tampil lebih menarik. Ada beberapa tahapan yang harus di persiapkan yaitu yang pertama adalah menentukan menu utama apakah yang akan di tampilkan. Contoh pada blog saya adalah Home, Free Blog Tamplate, Rubrik Elektronik, Obral lus, How to make a Website, serta Contuct Us. Yang kedua adalah mempersiapkan sub menu dari menu utama yang di tampilkan. Contoh blog saya yaitu Link-link postingan yang ada pada blog tersebut, untuk template unik dan rubrik elektronik yaitu menampilkan judul-judul dari postingan semisal About Battery Electronic shopping, Minima 3 column, dan lain sebagainya. Nah sudah barang tentu dari judul-judul yang saya sebutkan tadi itu mempunyai alamat URL masing-masing, langkah selanjutnya adalah mencatat alamat URL setiap judul yang di pasang.



Setiap template tentunya akan berbeda kodenya, untuk memberi gambaran saja maka yang saya terangkan adalah template minima dengan pemasangan menu dropdown di bagian header



•  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>








#dropmenudiv{

position:absolute;

border:1px solid black;

border-bottom-width: 0;

font:normal 12px verdana;

line-height:18px;

z-index:100;

}


#dropmenudiv a{

width: 100%;

display: block;

text-indent: 3px;

border-bottom: 1px solid black;

padding: 1px 0;

text-decoration: none;

font-weight: bold;

color:#ffffff;


}


#dropmenudiv a:hover{ /*hover background color*/

background-color: #e7f4fd;

color:#000000;

}




/* menu dropdown

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


#menu{

text-align: center;

background:#c4e1ff;

height:20px;

}


#menu a{

margin:0;

font-size:1em;

font-weight:normal;

padding-left:20px;

padding-right:20px;

letter-spacing:-1px;

color: #000000;

font-family:georgia,verdana,arial;

text-decoration:none;


}


#menu a:hover{

color: #ffffff;

background: #140E7E;

}








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








<script type='text/javascript'>

//<![CDATA[

/***********************************************

* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/


//isi dari menu 1, silahkan ubah dengan link milik sobat

var menu1=new Array()

menu1[0]='<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima 3 column (classic)</a>'

menu1[1]='<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html">Minima 3 column (beta)</a>'

menu1[2]='<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe 3 column (classic)</a>'

menu1[3]='<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html">Scribe 3 column (new)</a>'

menu1[4]='<a href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1St Template Unik (new)</a>'

menu1[5]='<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Denim 3 column (new)</a>'

menu1[6]='<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Blue Lover (new)</a>'


//isi dari menu 2, silahkan ubah dengan link milik sobat

var menu2=new Array()

menu2[0]='<a href="http://rubrik-elektronik.blogspot.com/2007/05/tips-maintenance-of-crt-television.html ">About Television</a>'

menu2[1]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/baterai.html">About Battery</a>'

menu2[2]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/progressive.html">About Progressive</a>'

menu2[3]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html">Electronic Shopping</a>'

menu2[4]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/cute-bean.html"> About Mp3 Player</a>'

menu2[5]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/tips-maintenance-of-camera.html">About Handy Cam</a>'


 


//isi dari menu 3, silahkan ubah dengan link milik sobat

var menu3=new Array()

menu3[0]='<a href="http://www.obralplus.com/?id=rohman" title="menjual berbagai software dengan harga sangat murah">Obral Plus</a>'


//isi dari for menu 4, and so on

var menu4=new Array()

menu4[0]='<a href="http://www.resepbisnis.com/?id=rohman" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Resep Bisnis.com</a>'



var menuwidth='200px' //default menu width

var menubgcolor='#4B4D52' //menu bgcolor

var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)

var hidemenu_onclick="yes" //hide menu when user clicks within menu?


/////No further editting needed


var ie4=document.all

var ns6=document.getElementById&&!document.all


if (ie4||ns6)

document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')


function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}




function showhide(obj, e, visible, hidden, menuwidth){

if (ie4||ns6)

dropmenuobj.style.left=dropmenuobj.style.top="-500px"

if (menuwidth!=""){

dropmenuobj.widthobj=dropmenuobj.style

dropmenuobj.widthobj.width=menuwidth

}

if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")

obj.visibility=visible

else if (e.type=="click")

obj.visibility=hidden

}


function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}


function clearbrowseredge(obj, whichedge){

var edgeoffset=0

if (whichedge=="rightedge"){

var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth

}

else{

var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset

var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?

edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight

if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?

edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge

}

}

return edgeoffset

}


function populatemenu(what){

if (ie4||ns6)

dropmenuobj.innerHTML=what.join("")

}




function dropdownmenu(obj, e, menucontents, menuwidth){

if (window.event) event.cancelBubble=true

else if (e.stopPropagation) e.stopPropagation()

clearhidemenu()

dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

populatemenu(menucontents)


if (ie4||ns6){

showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)


dropmenuobj.x=getposOffset(obj, "left")

dropmenuobj.y=getposOffset(obj, "top")

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

}


return clickreturnvalue()

}


function clickreturnvalue(){

if (ie4||ns6) return false

else return true

}


function contains_ns6(a, b) {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}


function dynamichide(e){

if (ie4&&!dropmenuobj.contains(e.toElement))

delayhidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

delayhidemenu()

}


function hidemenu(e){

if (typeof dropmenuobj!="undefined"){

if (ie4||ns6)

dropmenuobj.style.visibility="hidden"

}

}


function delayhidemenu(){

if (ie4||ns6)

delayhide=setTimeout("hidemenu()",disappeardelay)

}


function clearhidemenu(){

if (typeof delayhide!="undefined")

clearTimeout(delayhide)

}


if (hidemenu_onclick=="yes")

document.onclick=hidemenu

//]]>

</script>








7. Copy paste kode berikut persis di bawah kode :
   
   
   

   </h1>
   
   <p id="description"><$BlogDescription$></p>




 







<div id="menu">




<a href="http://kolom-tutorial.blogspot.com" title="back to home">Home</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '200px')" onMouseout="delayhidemenu()" title="free download blogger template">Free Template</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Rubrik Elektronik</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()" title="menjual berbagai software dengan harga sangat murah">Obral Plus</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '200px')" onMouseout="delayhidemenu()" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Belajar website</a>




</div>








8. Klik tombol Simpan Perubahan Template





9. Selesai.

Yang di atas tadi merupakan pemasangan untuk template minima klasik, untuk template minima baru, silahkan ikuti langkah berikut !



•  Untuk template minima baru

1. Sigin di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting





5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
   ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
   ]]></b:skin>








#dropmenudiv{

position:absolute;

border:1px solid black;

border-bottom-width: 0;

font:normal 12px verdana;

line-height:18px;

z-index:100;

}


#dropmenudiv a{

width: 100%;

display: block;

text-indent: 3px;

border-bottom: 1px solid black;

padding: 1px 0;

text-decoration: none;

font-weight: bold;

color:#ffffff;


}


#dropmenudiv a:hover{ /*hover background color*/

background-color: #e7f4fd;

color:#000000;

}




/* menu dropdown

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


#menu{

text-align: center;

background:#c4e1ff;

height:20px;

}


#menu a{

margin:0;

font-size:1em;

font-weight:normal;

padding-left:20px;

padding-right:20px;

letter-spacing:-1px;

color: #000000;

font-family:georgia,verdana,arial;

text-decoration:none;


}


#menu a:hover{

color: #ffffff;

background: #140E7E;

}








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








<script type='text/javascript'>

//<![CDATA[

/***********************************************

* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/


//isi dari menu 1, silahkan ubah dengan link milik sobat

var menu1=new Array()

menu1[0]='<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima 3 column (classic)</a>'

menu1[1]='<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html">Minima 3 column (beta)</a>'

menu1[2]='<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe 3 column (classic)</a>'

menu1[3]='<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html">Scribe 3 column (new)</a>'

menu1[4]='<a href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1St Template Unik (new)</a>'

menu1[5]='<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Denim 3 column (new)</a>'

menu1[6]='<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Blue Lover (new)</a>'


//isi dari menu 2, silahkan ubah dengan link milik sobat

var menu2=new Array()

menu2[0]='<a href="http://rubrik-elektronik.blogspot.com/2007/05/tips-maintenance-of-crt-television.html ">About Television</a>'

menu2[1]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/baterai.html">About Battery</a>'

menu2[2]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/progressive.html">About Progressive</a>'

menu2[3]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html">Electronic Shopping</a>'

menu2[4]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/cute-bean.html"> About Mp3 Player</a>'

menu2[5]='<a href="http://rubrik-elektronik.blogspot.com/2007/04/tips-maintenance-of-camera.html">About Handy Cam</a>'


 


//isi dari menu 3, silahkan ubah dengan link milik sobat

var menu3=new Array()

menu3[0]='<a href="http://www.obralplus.com/?id=rohman" title="menjual berbagai software dengan harga sangat murah">Obral Plus</a>'


//isi dari for menu 4, and so on

var menu4=new Array()

menu4[0]='<a href="http://www.resepbisnis.com/?id=rohman" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Resep Bisnis.com</a>'



var menuwidth='200px' //default menu width

var menubgcolor='#4B4D52' //menu bgcolor

var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)

var hidemenu_onclick="yes" //hide menu when user clicks within menu?


/////No further editting needed


var ie4=document.all

var ns6=document.getElementById&&!document.all


if (ie4||ns6)

document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')


function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}




function showhide(obj, e, visible, hidden, menuwidth){

if (ie4||ns6)

dropmenuobj.style.left=dropmenuobj.style.top="-500px"

if (menuwidth!=""){

dropmenuobj.widthobj=dropmenuobj.style

dropmenuobj.widthobj.width=menuwidth

}

if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")

obj.visibility=visible

else if (e.type=="click")

obj.visibility=hidden

}


function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}


function clearbrowseredge(obj, whichedge){

var edgeoffset=0

if (whichedge=="rightedge"){

var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth

}

else{

var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset

var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?

edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight

if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?

edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge

}

}

return edgeoffset

}


function populatemenu(what){

if (ie4||ns6)

dropmenuobj.innerHTML=what.join("")

}




function dropdownmenu(obj, e, menucontents, menuwidth){

if (window.event) event.cancelBubble=true

else if (e.stopPropagation) e.stopPropagation()

clearhidemenu()

dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

populatemenu(menucontents)


if (ie4||ns6){

showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)


dropmenuobj.x=getposOffset(obj, "left")

dropmenuobj.y=getposOffset(obj, "top")

dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

}


return clickreturnvalue()

}


function clickreturnvalue(){

if (ie4||ns6) return false

else return true

}


function contains_ns6(a, b) {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}


function dynamichide(e){

if (ie4&&!dropmenuobj.contains(e.toElement))

delayhidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

delayhidemenu()

}


function hidemenu(e){

if (typeof dropmenuobj!="undefined"){

if (ie4||ns6)

dropmenuobj.style.visibility="hidden"

}

}


function delayhidemenu(){

if (ie4||ns6)

delayhide=setTimeout("hidemenu()",disappeardelay)

}


function clearhidemenu(){

if (typeof delayhide!="undefined")

clearTimeout(delayhide)

}


if (hidemenu_onclick=="yes")

document.onclick=hidemenu

//]]>

</script>








7. Copy paste kode berikut persis di bawah kode :
   
   
   

   <div class='descriptionwrapper'>
   
   <p class='description'><span><data:description/></span></p>
   
   </div>
   
   </div>
   
   </b:if>
   
   </b:includable>
   
   </b:widget>
   
   </b:section>

   
   



 






<div id="menu">




<a href="http://kolom-tutorial.blogspot.com" title="back to home">Home</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '200px')" onMouseout="delayhidemenu()" title="free download blogger template">Free Template</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Rubrik Elektronik</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()" title="menjual berbagai software dengan harga sangat murah">Obral Plus</a>


<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '200px')" onMouseout="delayhidemenu()" title="cocok bagi anda yang ingin belajar lebih jauh tentang pembuatan website">Belajar website</a>




</div>










8. Klik tombol Simpan Template





9. Selesai.

Untuk melihat seperti apa hasilnya kode-kode yang barusan di terangkan, coba sobat klik di sini !, silahkan sorot pada menu navigasi yang ada pada header.



Panjang banget yah, pasti cape deh baca nya, ya udah sekarang ketik P spasi D jadi Cappe Dehhhh.....




Selamat mencoba !

Make a Magazine Style Drop Caps

Sebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa indonesia, semoga dengan datangnya hari bahagia ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).



Saya rasa cukup deh ngomong seriusnya ya, soalnya kalau terus-terusan serius otak ku menjadi beku, jari-jari ku menjadi kaku, lidah ku menjadi kelu, mulutku menjadi bisu, asa ku menjadi layu (keterusan deh). Oke.... sobat, kita kembali ke.... blog tutorial tentunya. Sebelum mulai, saya mau ngadain kuiz dulu, tolong jawab yang jujur ya, Apakah sobat pernah membaca koran atau surat kabar? jawabannya pasti sudah pernah. benarkan? yeeeehh jawabannya ketebak deh , lalu apa hubungannya dengan tutorial blog? ceritanya seperti ini, di dalam tulisan sebuah koran, hampir menjadi suatu kewajiban bahwa hurup awal dari sebuah artikel di cetak lebih besar di banding dengan tulisan lainnya. Nah bagi sobat yang mempunyai keinginan untuk membuat tulisan yang bergaya seperti tulisan dalam koran, maka teruslah membaca sampai akhir postingan.

Untuk membuat huruf awal di cetak lebih besar, maka sobat perlu membubuhkan kode css ke dalam style sheet nya. Karena template blogger masih terbagi dua yaitu klasik dan baru, maka untuk cara penempatan kode pun ada sedikit berbeda. Untuk itu silahkan ikuti langkah-langkah
berikut ini !

Untuk Template Klasik

1. Sigin di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template, lalu paste pada notepad kemudian save. Ini untuk berjaga-jaga apabila terjadi kesalahan melakukan editting





5. Copy paste kode berikut di antara kode <style type='text/css'> dan kode </style>
   dan kalau sobat merasa bingung, maka tempatkan saja di atas kode </style>





 






/* kode untuk hurup awal

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

.awal {

float:left;

color: #000000;

background:#ffffff;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}







6. Klik tombol Simpan Perubahan Template





7. Selesai

Untuk Template Baru

1. Sign in di blogger





2. Klik menu Layout





3. Klik menu Edit HTML





4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template





5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
   ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
   ]]></b:skin>






 






/* kode untuk hurup awal

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

.awal {

float:left;

color: #000000;

background:#ffffff;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}









6. Klik Tombol Simpan Template





7. Selesai.

Langkah-langkah di atas merupakan langkah pertama, langkah selanjutnya yang harus sobat lakukan adalah ketika melakukan posting harus pada posisi Edit HTML bukan pada Compose, nah simpanlah huruf awal artikel pada kode berikut <span class="awal">hurup awal </span>.
Setelah itu terserah sobat, mau tetap pada posisi Edit HTML atau berpindah ke mode Compose tidak
ada masalah. Contoh penulisan artikelnya seperti ini :



<span class="awal">S</span>ebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa
tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa
indonesia, semoga dengan datangnya hari ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).



Maka hasilnya nanti akan seperti ini :



Sebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa indonesia, semoga dengan datangnya hari ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).





Bagaimana sobat, menarik bukan? bukan. ah ko gitu sih
Agar sobat menjadi lebih faham tentang kode-kode diatas tadi, maka akan saya bahas.

/* kode untuk hurup awal

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

.awal {

float:left;

color: #000000;

background:#ffffff;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}

.awal    --> ini adalah penamaan saja, mau di ubah jadi begin, start, atau apa saja boleh, cuma jangan lupa untuk membubuhkan tanda titik (dot) di awal tulisan.



float:left;    --> ini adalah kode agar tulisan awal di letakan pada posisi kiri alias mepet ke kiri, jangan di ubah kalau yang ini.



color: #000000;    --> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, jika sobat ingin warna yang lain maka silahkan saja di ganti.



background:#ffffff;    --> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih, jika sobat ingin warna yang lain silahkan di ganti sesuai keinginan.



line-height:80px;    --> ini adalah kode untuk jarak baris, sebaiknya jangan di ganti.



padding-top:1px;    --> ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya, sebaiknya jangan di ganti.



padding-right:5px;    --> ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 5 pixel, jika sobat berniat
mengganti jaraknya, silahkan ganti nilainya saja.



font-family:times;    --> ini adalah kode jenis hurup, yang di pakai adalah jenis times, jika tidak suka dengan times bisa di ganti dengan yang lain, mau Georgia, Verdana, sans-serif atau yang lainnya silahkan saja.



font-size:100px;    --> ini adalah kode untuk besarnya hurup, jika mau di ganti silahkan ganti nilainya saja.



Sudah jelaskah? nah jika sobat ingin berkreasi dengan yang namanya warna tapi tidak mengetahui kodenya, jangan khawatir, kawan saya bang iwan sangat kreatif, yakni menuliskan kode warna sekalian bentuk warnanya pada bagian footer blog beliau, jika sobat minat silahkan kunjungi blog beliau di http://free-7.blogspot.com



satu lagi yang terakhir yaitu apabila sobat ingin melihat blog yang memakai sistem ini dengan warna lain, silahkan sobat klik di sini !



Selamat berkreasi !

Membuat Navbar

Setelah beberapa hari tidak ada tulisan baru di blog ini, akhirnya saya tulis juga tutorial baru. Kali ini saya akan memenuhi hasrat sobat muhhib yang pantang menyerah, jika di hitung mungkin sudah tiga kali lebih beliau menanyakan tentang hal ini yaitu cara membuat navbar yang berada di bagian footer seperti yang ada pada blognya mas anang.



Ada kemungkinan bahwa navbar yang saya buat ini agak berbeda dengan miliknya mas anang, maklum lah lain orang lain ilmu, walaupun sebenarnya ilmu ini saya pelajari dari templatenya mas anang sendiri. Apa itu navbar? agar tidak bingung, coba alihkan pandangan sobat ke bagian paling atas blog ini ! di sana terlihat satu frame miliknya blogger untuk memudahkan kita sigin di blogger, nah seperti itulah navbar yang saya maksud.

Untuk membuat gambar seperti itu, ada beberapa langkah yang harus sobat lakukan, di antaranya :

1. Jika sobat menginginkan dalam navbar tersebut terpampang foto atau logo ataupun tanda tangan seperti miliknya mas anang, maka buatlah terlebih dahulu foto/logo atau gambar berbentuk tanda tangan, tapi tentunya dalam ukuran yang kecil. Contoh seperti gambar berikut ini :








atau gambar tanda tangan seperti ini (tanda tangan saya agak mirip dengan yang punya mas anang) :








2. jika foto/logo atau gambar tanda tangan sudah selesai di buat, maka langkah selanjut adalah meng upload foto tersebut ke hosting untuk menyimpan gambar, bisa ke blogger ataupun hosting lain. setelah di upload, catatlah alamat gambar tersebut untuk keperluan nanti di simpan di dalam navbar. Contoh alamat foto dan tanda tangan di atas seperti ini :




http://favatar.myfavatar.com/amen24.png



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




3. Langkah selanjutnya adalah memasukan kode CSS untuk navbar yang di buat, contoh kodenya seperti ini :





/* kode untuk navbar

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



#navbar-bawah img {

/* margin: 0px 0px -8px 0px; */

vertical-align: middle;

}




#navbar-bawah p.info {

float: right;

padding-right:40px;

line-height: 1.5;

height: 100%;

vertical-align: bottom;

}




#navbar-bawah p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

line-height: 1.2;

vertical-align: bottom;

}




#navbar-bawah a {

color:#00CCFF;

text-decoration:none;

}

#navbar-bawah a:hover{

color: #00FFFF;

}

#navbar-bawah {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 5px solid #003366;

background-color: #114477;

width: 100%;

left: 0px;

text-align: left;

color: #ffffff;

font-family: verdana;

font-size: 12px;

z-index:10000;

bottom:0;


}








4. Langkah berikutnya adalah memasukan kode navbar pada body template, contoh kodenya seperti ini :







<br/><br/>

<div id="navbar-bawah">

<p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;

<a href="http://template-unik.blogspot.com"><b>Template Unik</b>

</a>&#160;&#160;&#169;&#160;2007&#160;|

Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

&#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

</div>



Tadinya saya mau menerangkan tentang kode CSS yang saya pasang di atas, akan tetapi rasanya saya agak kurang enak badan jadi pinginnya singkat saja. sebagai catatan, kode yang saya cetak merah berarti harus di ganti dengan link atau tulisan yang sobat miliki.



Untuk cara pemasangan kode di atas, silahkan ikuti langkah berikut ini :



Untuk Template Klasik

1. Sign in di blogger





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy seluruh kode template sobat, paste di notepad kemudian save di komputer sobat sebagai backup data





5. Copy paste kode berikut ! simpan antara kode <style type="text/css"> dan kode </style>.
   atau jika bingung, simpan saja persis di atas kode </style>





/* kode untuk navbar

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



#navbar-bawah img {

/* margin: 0px 0px -8px 0px; */

vertical-align: middle;

}




#navbar-bawah p.info {

float: right;

padding-right:40px;

line-height: 1.5;

height: 100%;

vertical-align: bottom;

}




#navbar-bawah p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

line-height: 1.2;

vertical-align: bottom;

}




#navbar-bawah a {

color:#00CCFF;

text-decoration:none;

}

#navbar-bawah a:hover{

color: #00FFFF;

}

#navbar-bawah {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 5px solid #003366;

background-color: #114477;

width: 100%;

left: 0px;

text-align: left;

color: #ffffff;

font-family: verdana;

font-size: 12px;

z-index:10000;

bottom:0;


}











6. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :







<br/><br/>

<div id="navbar-bawah">

<p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;

<a href="http://template-unik.blogspot.com"><b>Template Unik</b>

</a>&#160;&#160;&#169;&#160;2007&#160;|

Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

&#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

</div>








7. Klik tombol Simpan Perubahan Template





8. Selesai.

Untuk Template baru (new blogger template)

1. Sign in di blogger





2. Klik menu layout





3. Klik menu Edit HTML





4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template





5. Copy paste kode berikut ! simpan di atas kode ]]></b:skin>





/* kode untuk navbar

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



#navbar-bawah img {

/* margin: 0px 0px -8px 0px; */

vertical-align: middle;

}




#navbar-bawah p.info {

float: right;

padding-right:40px;

line-height: 1.5;

height: 100%;

vertical-align: bottom;

}




#navbar-bawah p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

line-height: 1.2;

vertical-align: bottom;

}




#navbar-bawah a {

color:#00CCFF;

text-decoration:none;

}

#navbar-bawah a:hover{

color: #00FFFF;

}

#navbar-bawah {

align: center;

position: fixed;

border-top: 1px solid #ddd;

border-bottom: 5px solid #003366;

background-color: #114477;

width: 100%;

left: 0px;

text-align: left;

color: #ffffff;

font-family: verdana;

font-size: 12px;

z-index:10000;

bottom:0;










6. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :







<br/><br/>

<div id="navbar-bawah">

<p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>&#160;&#160;&#160;

<a href="http://template-unik.blogspot.com"><b>Template Unik</b>

</a>&#160;&#160;&#169;&#160;2007&#160;|

Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

&#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>

<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

</div>








7. Klik tombol Simpan Template





8. Selesai.

Itu tadi langkah-langkah yang di lakukan untuk membuat navbar, untuk melihat contoh dari hasil pemasangan kode di atas, sobat bisa mengunjungi blog saya yang satunya yaitu di http://template unik.blogspot.com. Arahkan scroll bar ke bagian paling bawah blog, maka nanti sobat bisa melihat navbar yang mirip punya blogger. Agar lebih cepat melihat contoh hasilnya silahkan sobat klik di sini !



Selamat mencoba !