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 !

Gray Lover Template (XML)

Like I promised yesterday, that is template that could download. This tamplate was given the name Gray Lover. For you that
liked would the grey colour, you could download him afterwards upload him back to blogger.



Please Click at the image below to see screenshoot from this template!

Some that were important to be paid attention to was before you in place of template, you must back up all the available datas in old template like the shoutbox code, accessories, link et cetera. For that still was confused about the method of backing up the data in your old template, please followed the step along with this:

1. Sigin





2. Click the Layout menu





3. Click the Page Element menu





4. Click the Edit in each available element. Copy all the available code,
   afterwards paste in notepad to later in input again if has replaced template





5. finished.

I feeling was enough, to download the Gray Lover template, please Click here !



Akhirnya kelar juga deh, cape kalo nulis beginian terus. ni gara-gara adsense ga pernah mau mampir di blog ini, terpaksa deh mulai sekarang di selang dikit-dikit ama bahasa orang bule

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 !

Isu Sweeping OS di Balikpapan

Setelah mendengar maraknya Razia software yang terjadi di Jawa, rupanya hal ini juga sudah mulai melangkah ke Tanah ku Balikpapan. Di balikpapan Sweeping sudah di lakukan ke Toko-toko komputer dan Warnet-warnet juga perusahaan, dan bea denda nya pun nggak main-main. Seperti kutipan email yang aku terima dari Milis IT-KALTIM berikut ini :

Sy gak tau apakah di balikpapan dan sekitar udh mulai marak razia software.
Walopun sy pernah denger ada beberapa tempat usaha di balikpapan yg
bayar ke aparat spy gak kena razia. Terakhir ada perusahaan yg kena
razia, bayar sekitar 2M (klo liat perusahaannya itu kecil, tp malunya
itu loh, krn ini yg kena perusahaan gede..cuman ditutupi, sy blon sempet
crosscheck).

Klo kita baca di berita (online + offline), yg byk kena razia tuh
warnet.. Ini tdk lain krn mrk gak kuat sogok aparat yg merazianya..
Ada Production House, yg jg kena krn pake 3DMax, Maya en
Photoshop...nego damai 1M.
Bank swasta, nego 3M.

Aparat kadang2 menyamar sbg user yg membeli komputer/laptop kemudian
minta di instalkan software bajakan -> ini utk ke toko2 komputer.

Klo ke warnet -> lsg cek ke PC.. bila lisensi mrk minta dibuktikan..
kadang bila ada mp3-nya juga kena razia(mp3 dilindungi oleh hak cipta)
sebaiknya hapus file2 mp3 atopun movie.. Jd walopun udh pake Linux tp
ada file mp3, dianggap membajak..

Utk ke perusahaan biasa mrk bw surat pemberitahuan...

Yg jd masalah, komputer di angkut sbg brg bukti, en nebusnya pake uang..

Ini hanya utk berjaga2 aja...bila di kaltim udh mulai rame razia...
Ato siapin duit yg byk utk nyogok aparatnya...

Rgds,
Budi

Hmm, ngeri bukan ? mungkin sudah saat nya Balikpapan Go To Hell eh mksd saya Go To Open Source. He...3x

Modem Ponsel di UBUNTU

Setelah XL 3G come in balikpapan +/- sebulan yang lalu ,keinginanku untuk coba mencicip kecepatan akses internetnya semakin besar walau tarifnya mungkin terbilang sangat mahal karena tidak menggunakan XL CORPORATE, namun tak apalah hitung-hitung menjajal kecepatan akses internetnya setelah tercoverage 3G. Tetapi kali ini aku sedikit kesulitan dari biasanya, sebab kebetulan OS yang terinstall di PC ku adalah LINUX distro UBUNTU. Nggak seperti biasanya kalau di WinXP ada system Plug and Play walau masih meminta Driver lagi tetapi tidak di Linux, waktu itu aku coba menancapkan ke USB namun LINUX tidak mendeteksi keberadaan Hardware tersebut walaupun memasukkan CD Driver sekalipun. Lalu sempat kontak dg imam via chat dan kemudian diberikan cara-cara step by step yang awalnya masih gagal juga setelah di ketahui penyebab gagalnya adalah dari saya juga ..he..3x. Tetapi setelah aku coba-coba lagi akhirnya berhasil juga, Begini caranya :

• Tancap kabel dari Hape ke USB, dan set ponsel ke Phone Mode dan masuk ke root mode dengan menggunakan perintah sudo bash -s -H
• Lalu jalan kan perintah wvdial
  
  
• Kemudian buka dan edit file wvdial.conf yang berlokasi di /etc/wvdial.conf

• Edit menjadi seperti di bawah ini :
  
  [Dialer Defaults]
Modem = /dev/ttyACM0
Phone = *99***1#
Username = xlgprs
Password = proxl
New PPPD = yes
  
  Untuk baris /dev/ttyACM0, menunjukkan lokasi link HP. Upama terjadi Error coba ubah dengan ttyACM1
• Kemudian simpan file tersebut lalu jalan kan perintah wvdial pada root
  

Nah Selesai sudah,

Setelah mengunjungi rumah Paman Google, eh di beritahu lagi cara lain yang menurut saya ini bisa akan mempermudah lagi. Yaitu dengan menggunakan Gnome PPP, Begini caranya :

• Masuk console, gunakan mode root:sudo bash -s -H
• Install aplikasi gnome-ppp menggunakan apt-get:
  
  apt-get install gnome-ppp
• Sekarang dari menu bar yg ada di atas, klik Applications -> Internet -> GNOME PPP.
• Masukkan username, password dan nomer telepon:
  
  
  
• Klik tombol Setup. Untuk mendeteksi handphone secara otomatis, klik tombol Detect.
  
  
  
• Khusus pengguna XL Corporate, tekan tombol Init Strings… Masukkan string tambahan berikut ini, pada salah satu baris Init:
  
  AT+CGDCONT=1,"IP","www.xlgprs.net"
  
  
  
• Tekan tab Options, samakan dengan yang di bawah ini:
  
  
  
• Kembali ke tampilan pertama kali, kemudian tekan tombol Connect.

Kesimpulan : Setelah mencoba browsing dengan menggunakan XL 3G ternyata memang oke, bisa di bilang lebih cepat dari pada Speedy. Namun karena saya tidak berlangganan Paket data XL maka segera saya akhiri koneksi Internet saya dan kembali menggunakan Speedy.

Referensi : Imam JSK, Google, Cyber Media

Join ke Server dg WINXP Home Edition

Seperti yang kita ketahui, WIN XP Home Edition tidak memiliki fasilitas untuk Joint ke Server. Sebab WinXP HomeEdition memang bukan untuk implementasi ke Network. Namun ada beberapa cara agar WinXP HomeEdition dapat Join ke Server untuk kemudian mengakses file sharing dan aplikasi yang ada. Langkah pertama seperti biasa buat lah Identifikasi PC tersebut seperti gambar berikut :

Setelah itu coba uji koneksi dengan melakukan PING ke server, jika sudah terkoneksi dengan baik kemudian kita buat buka NotePad dan ketik kan kode seperti yang tertulis di bawah ini :

net use f: \\192.168.0.1\trade 12345 /user:administrator
net use g: \\192.168.0.1\datauserall 12345 /user:administrator
net use lpt1: \\receiving1\receivingprint 12345 /user:administrator

Kode di atas adalah untaian perintah untuk mengakses server, Nomor 12345 yang tertulis di atas adalah Password ADMINISTRATOR, sedangkan trade, datauserall adalah folder server yang telah di share sebelumnya.

Nah, kemudian simpan file tersebut di c:\documents and settings > nama user yg logon > start menu > programs > startup dengan Extension BAT dan lalu simpan ke dalam folder Start Up agar langsung bisa di akses saat Login ke WinXP Home Edition.

Selamat mencoba dan semoga berhasil :)

Windows VS Linux

Apakah anda tahu perbedaan Windows dan Linux? Ada yang bilang, Linux itu gratis, dan Windows tidak gratis. Jawaban itu tidak sepenuhnya salah, tapi tidak bisa dianggap bener juga. Itu jawaban ngawur yang nggak tahu apa-apa bedanya Windows dan Linux.
Windows dan Linux termasuk nama-nama merek dalam Sistem Operasi. Selain kedua nama tersebut, kita mengenal merek lain dari Sistem Operasi, yaitu Unix, MacOS, DOS, OS/2 Warp, Novell, Palm dan masih banyak lagi. Dinamakan sistem operasi karena memang fungsinya sebagai sistem dasar yang akan mengoperasikan sebuah komputer. Ilustrasinya seperti mesin mobil dalam sistem kerja mobil. Mesin mobil inilah yang menjadi sistem operasinya.

Kembali ke urusan gratis atau tidak. Perbedaan Windows dan Linux bukan terletak gratis atau tidaknya sistem operasi itu. Bukan! Bukan terletak pada nilai kapitalnya. Kalau anda ingin mendapatkan Windows atau Linux, anda harus beli di toko Komputer, dan itu harus bayar. Kecuali anda mau digebukin satpam karena ngotot tidak mau bayar beli CD Linux dengan alasan, “Katanya linux gratis pak!”. Hehehe

Kalaupun anda mau sedikit membajak dan melanggar UU Hak Cipta, dengan pergi ke warnet trus copy CD, itupun anda harus keluar uang. Minimal beli CDnya bayar pake uang, burn CD-nya juga bayar. Tidak seperti Windows yang cukup 1 CD, untuk menginstall Linux, anda perlu berkeping-keping CD. Jadi tidak ada yang benar-benar gratis.

Yang dimaksud dengan gratis adalah lisensi untuk menggunakan Sistem Operasi itu. Ya benar, untuk menggunakan sebuah software, anda perlu ijin dulu sama programmernya. Nah ijin yang dimaksud adalah cukup dengan membayar lisensi penggunaan Softwarenya. Misale kalau mau install Windows XP-Home di rumah, anda harus beli CD Orisinilnya dengan membayar 70 dollar amerika, atau sekitar 650rb. Sedangkan XP-Profesional kira-kira 1,4 juta rupiah. Dengan membeli CD Orisinil, anda sudah mendapatkan lisensi (ijin menggunakannya).

Lha, kalau cuma copy CD atau beli di toko seharga 25.000 rupiah, itu cuma beli CD-nya doang. Belum ada lisensinya. Artinya itu ilegal dan bajakan. Ketahuan menggunakan CD bajakan, anda bisa dijerat dengan UU Hak Cipta, dengan penjara 6 bulan dan denda 750 juta rupiah.

Uang 25.000 yang anda bayar hanya untuk membayar kepakan CD dan harga produksi fisiknya saja. Untuk nilai intelektual yang harus dibayar dalam bentuk uang belum anda lakukan. Nilai intelektual itulah yang mahal, yang besarnya bisa mencapai 700.000 untuk Windows XP-Home.

Baik Windows maupun Linux dalam menggunakannya harus pake lisensinya. Bedanya, Windows harus bayar mahal, Linux tidak terlalu mahal. Tapi bukan berarti gratis. Memang ada beberapa Linux yang tidak perlu bayar lisensi sudah boleh dipake, tapi distribusinya nggak bisa seenaknya aja main copy CD. Anda harus menjaga nama pemilik lisensinya. Nggak bisa ngaku-ngaku. Dan yang tidak perlu bayar itu, adalah Linux-linux versi kuno. Yang versi canggihnya, rata-rata sudah harus bayar.

Perbedaan kedua Windows dan Linux adalah soal open-source atau tidaknya. Windows bukan open source, sedangkan Linux sangat open-source. Maksudnya source adalah kode sumber yang njelimet banget itu tuh. Nah kalau Linux, kode sumbernya dibagi-bagi, bisa di pelajari, bisa dikembangkan, bisa diganti bahasa sendiri –misal bahasa sunda– dan bisa bikin Linux versi sendiri. Misal Linux versi Yusuf Caesar. Hehehehe

Nah karena kode sumbernya sangat open, jadi kita tidak bisa seenaknya ganti lisensinya, kecuali memang sudah ada yang kita modifikasi. Diganti sendiri sih bisa… Tapi dosa! dan bisa dijerat juga dengan UU Hak Cipta. Udah dikasih gratis lisensi, masih ngaku-ngaku yang buat.

Sedangkan Windows, waduh.. pak Bill Gates bosnya Micoroft nggak pernah membuka kode sumbernya. Makanya, harga Windows masih mahal, karena kita nggak bisa mengembangkan sama-sekali. Kita sangat tergantung dengan microsoftnya.

So, sekarang sudah paham kan bedanya Windows dan Linux. Perbedaanya bukan di soal uang, tapi lisensi dan source. Jadi, tidak perlu lagi kita bicara soal gratis atau tidak. Nah sekarang mari kita tengok masing-masing sistem operasi di komputer kita. Bajakan atau bukan? Ingat, software bajakan adalah perbuatan kriminal dan termasuk kejahatan. Meskipun untuk alasan pendidikan dan kuliah.

Selamat berfikir kembali.

Referensi : Google & CyberMedia