memposting kode HTML

Bagi anda yang masih belum bisa untuk memposting kode HTML saya akan coba membantu, mungkin postingan saya bisa berguna bagi teman-teman semua. Sebagai cotoh kalo kita ingin memposting yang ada unsur kode HTML sperti ini </style> kita harus tidak bisa menuliskan secara langsung karena oleh web akan dibaca sebagai suatu perintah, bagaimana caranya ? ganti tanda kurung "<" dengan "&lt;" dan tanda kurung">" diganti dengan "
&gt;" dan masih banyak lagi, berikut saya berikan beberapa karakter HTML dengan notasi konversinya :

Karakter	Notasi	Keterangan
<	&lt;	Kurung runcing terbuka
>	&gt;	Kurung runcing tutup
&	&	Tanda Dan
"	&quot;	Tanda petik ganda
±	&plusmn;	Tanda plus minus
Spasi	&nbsp;	Tanda Spasi
©	&copy;	Tanda hak cipta (copyright)
®	&reg;	Tanda terdaftar (Registered)

Nah agar lebih paham akan saya beri contoh, misalkan dalam postingan anda berisi kata-kata seperti ini :

<meta http-equiv="refresh" content="10">

</meta>
Anda harus menulis eh... mengetiknya seperti ini:

&ltbr/><br/> <code>
&lt;meta http-equiv="refresh" content="10"&gt;
<br/>
&lt;/meta&gt;
</code>
memang agak ribet ya.. heheheh, kalo anda ndak mau ribet dan cape2 ngetik, ada tuh di blog temen saya yang sediain program auto konversi (encode) , jadi kita ndak usah pusing2 ketik tinggal copy paste lagsung keluar konversinya . klik di sini ...

Klik disini untuk melanjutkan »»

Marquee dengan Javascript

Membuat teks/gambar bergerak pada blog kita membutuhkan pemahaman tentang kode CSS yang sedikit rumit, tapi saya coba untuk membantu anda yang ingin membuat marquee, prinsip dasarnya adlaha kode CSS dengan javascript sebagai adaptornya agar semua browser dapat membacanya. berikut langkah yang harus di lakukan ... juz do it (baca: duit2mu sendiri ..)
pertama-tama saya bedakan antara TEMPLATE KLASIK dengan TEMPLATE BARU

Untuk TEMPLATE KLASIK :

1. Sign in dulu ke Blog anda
2. Klik Layout (tata letak) ===> Edit HTML (agar aman save dulu kode HTML template anda ke notepad , jgn lupa centang expand template wigate ya sebelum mengcopy)
3. Copy kode berikut di atas kode </style>
   
   
   #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 />}

4. Copy kode berikut, lalu paste di atas kode </head>
   
   
   <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 />

5. Jika anda ingin menampilkan teks "selamat datang........"(saya ambil contoh) letakkan kode berikut sidebar atau di manapun anda inginkan (page element)
   
   
   <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 /><div align="center"><br />Selamat datang di kosidh's blog <br/><br/><br />Mari belajar blog bersama-sama , berbagi info adalah suatu hal yang sangat indah <br /><br/><br/>Terima kasih </div><br /></div><br /></div><br /></td></tr></table></td></tr></table><br />

6. Klik Simpan Template
7. Finish dan lihat hasilnya
   
   Untuk TEMPLATE BARU
   
   
   1. Sign in di blogger
   2. Klik Layout
   3. KLik HTML
   4. Centang kotak kecil pada expand advanced wigate ( copy paste ke notepad untuk jaga2 kalo editing anda gagal)
   5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode ]]></b:skin> , atau letakkan saja persis di atas kode ]]></b:skin>
      
      
      #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>
      
      
      
      

      <script type="text/javascript"><br />//<![CDATA[ /*********************************************** * Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for this script and 100s more. ***********************************************/ var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds) var marqueespeed=1 //angka 2 adalah nilai kecepatan marquee, ubah jika ingin mengubahnya var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)? ////TIDAK ADA YANG PERLU DI UBAH PADA BAGIAN INI//////////// var copyspeed=marqueespeed var pausespeed=(pauseit==0)? copyspeed: 0 var actualheight='' function scrollmarquee(){ 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 Simpan Template
   8. klik Page Elemen
   9. klik Tambah widget ==> Add HTML/Javascript
   10. Ketikan dengan kode berikut :
       
       
       <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 /><div align="center"><br />Selamat datang di kosidh's blog <br/><br/><br />Mari belajar blog bersama-sama , berbagi info adalah suatu hal yang sangat indah <br /><br/><br/>Terima kasih </div><br /></div><br /></div><br /></td></tr></table></td></tr></table><br />

       
       
   11. klik Simpan pengaturan
   12. selesai dan lihat hasilnya , semoga berhasil bro!!
       
       

Klik disini untuk melanjutkan »»

membuat favicon

apakah anda ingin mengganti logo blogger dengan gambar milik anda sendiri? agar tampilan iconnya lebih menarik? Caranya gampang, saya akan menjelaskan sedikit tentang, bagaimana membuat favicon ( faourite icon ). Bagi anda yang masih bingung apa sih Favicon itu? Favicon (favourite icon) adalah icon kecil yang berada di samping alamat blog atau website anda. Apabila anda membuat blog di Blogger.com alias blogspot, maka favicon yang berada di samping alamat URL anda adalah berupa favicon blogger. Berikut screenshot nya :



Kita akan mengganti logo blogger dengan gambar kita sehingga seperti ini
Untuk membuat seperti di atas , langkah pertamanya sbb:
1. Pilih gambar yang akan di jadi kan icon, misal gambar ini

2. Ubahlah gambar tersebut ke dalam bentuk gambar icon, dengan menggunakan tool Favicon Generator, untuk itu silahkan ke situs http://www.favicongenerator.com


3. Klik tombol Browse, masukan gambar yang tadi dibuat untuk di ubah menjadi format icon dari komputer anda
   


4. Klik tombol Generate Favicon.


5. Setelah proses selesai, klik pada Click Here to Download your favicon.


6. Save ke komputer anda.


7. upload Favicon yang tadi ke tempat hosting gambar, contoh Yahoo! Geocities. Kalo belum punya silahkan register ke sini
   


8. Setelah anda meng-upload gambar ke hosting anda, berarti gambar anda memiliki alamat URL (contoh) seperti ini :
   
http://www.geocities.com/boyz_boyz21/favicon.ico

9. ubah alamat URL favicon anda menjadi seperti ini :
   
   <link rel="shotcut icon" href="http://www.geocities.com/boyz_boyz21/favicon.ico"/>
   

Langkah berikutnya:

1. selanjutnya adalah silahkan login ke blogger dengan ID anda.


2. Klik pada Tata Letak ==> Edit HTML.


3. Silahkan cari kode


4. Simpan kode favicon yang tadi bawah kode . Contoh :
   
   <link rel="shotcut icon" href="http://www.geocities.com/boyz_boyz21/favicon.ico"/>
   
   
   
5. Klik tombol Simpan Template.


6. Selesai dan lihat hasilnya
   

Note : Untuk pengguna browser Internet Explorer 6, bookmark dulu alamatnya agar bisa terlihat.

Klik disini untuk melanjutkan »»

Membuat Read More

Bagaiman sih membuat fasilitas Read more.. pada template baru (XML), agar tampilan postingan kita bisa lebih singkat sehingga posting2 yang lain bisa rapi tersusun ke bawah. Sebelum kita lakukan editing pada template sebaiknya anda menggunakan FireFox atau Opera, jangan menggunakan IE terutama IE 6 karena akan sering muncul kode error saat editing ini. Bagi anda yang ingin membuat fungsi read more..., coba ikuti langkah berikut ini :

A. Pengaturan 1 (sebelum melakukan edit HTML)
1. sig in ke Blog anda
2. klik pengaturan
3. pilih Format
4. cari bagian Template Posting isi dengan kode di bawah

<span class="fullpost"> </span>

5. Klik Simpan Pengaturan

B. Pengaturan 2
1. klik Dashboard
2. Tata Letak (lay out)
3. klik Edit HTML, sebelum anda melakukan editing anda harus membackup template anda terlebih dahulu, centang advance widget , copy semua code HTML pada notepad.
4. cari kode berikut

s

5. Hapus kode tersebut dan ganti dengan kode berikut:

<b:if cond="'data:blog.pageType"> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/> <a href="'data:post.url'"><strong>Selengkapnya...</strong></a></p> </b:if>

6. Klik Simpan Template

C. CaraPosting Artikel:
1. Klik menu Posting
2. Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :

<span class="fullpost"> </span>

Letakkan artikel yang ingin di tampilkan di blog di atas code


<span class="fullpost">

letakkan artikel lanjutannya di bawah code tersebut


<span class="fullpost"> artikel lanjutan.... </span>

Selamat mencoba semoga berhasil!

Klik disini untuk melanjutkan »»

Terimakasih telah berkunjung ke blog kami

Klik disini untuk melanjutkan »»