-
►
2011
(123)
- ► 3 Juli - 10 Juli (2)
- ► 26 Juni - 3 Juli (3)
- ► 12 Juni - 19 Juni (2)
- ► 3 April - 10 April (6)
- ► 20 Maret - 27 Maret (3)
- ► 23 Januari - 30 Januari (10)
- ► 16 Januari - 23 Januari (23)
- ► 9 Januari - 16 Januari (18)
- ► 2 Januari - 9 Januari (24)
-
▼
2010
(450)
- ► 26 Desember - 2 Januari (26)
-
▼
7 November - 14 November
(13)
- Tutorial HTML : Pengertian Tentang HTML
- Struktur dasar HTML
- Tutorial HTML: Pengaturan Teks
- Tutorial HTML : Membaca Simbol dan Karakter HMTL
- Tutorial HTML: Membaca Tag atau kode HTML
- Membuat Buku Tamu Tersembunyi Di Samping Kiri Kanan
- RECENT POST MODEL SCROLL DI BLOG
- Membuat Daftar Isi Blog Cantik Dan Keren
- Inilah Jawaban Anda #4
- Inikah Yang Anda Cari #3
- Masih Tak mengerti...??? #2
- Inikah Pertanyaan Anda...??? #1
- Permasalahan Scroll Pada Kode Verifikasi Komentar
- ► 24 Oktober - 31 Oktober (16)
- ► 17 Oktober - 24 Oktober (31)
- ► 10 Oktober - 17 Oktober (69)
- ► 3 Oktober - 10 Oktober (38)
- ► 18 April - 25 April (6)
Sebelum kita melangkah lebih jauh ada baiknya Anda tahu apa itu HTML. HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser kita (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Nah, HTML inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web yang menarik.
Sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek.
Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad.
Selanjutnya...
HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda “/”).
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
<HTML> Sebagai tanda awal dokumen HTML.
<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).
Contoh :
<TITLE>Tips HTML -- www.klik-kanan.com</TITLE>
<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
Contoh :
<BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF" link="#FF0000" vlink="FFFF00" alink="#0000FF">
Sebuah contoh sederhana dokumen HTML :<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" background="images/gambar1.gif" text="#FF0000">
Letakkan text, images, dan link Anda di sini </BODY> </HTML>
semoga bermanfaat
Selanjutnya...
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks :
Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. “n” mempunyai nilai antara 1 – 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.
Contoh :
<H2>Tutorial Html</H2>
Hasilnya akan terlihat seperti :
Tutorial Html
Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi.Line Break: <BR> Digunakan untuk pindah ke baris baru.
No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.
SIZE: Ukuran font yang digunakan, berkisar antara 1 – 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit “aneh” Anda bisa menggunakan graphic.
COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh :
<FONT SIZE=4 FACE=”Verdana, Arial, Helvetica” COLOR=”#FF0000″>Contoh teks yang berwarna merah</FONT>
Hasilnya akan terlihat seperti :
Contoh teks yang berwarna merah
Contoh lainnya :
<FONT SIZE=2 FACE=”Times_New_Roman” COLOR=”#0066CC”>
Base Font: <BASEFONT> Digunakan untuk mendefinisikan “default text”. Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
<BASEFONT SIZE=2 FACE=”Arial,Helvetica” COLOR=”#FF0000″>
Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
Perhatian : Semua tag di bawah ini membutuhkan tap penutup.
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout – draws a line through the text
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>
Italic
<CITE> Digunakan untuk quoting text
<CODE>
Monospaced font
(digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q>
Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics.
Selanjutnya...
| “ |
| & |
| < |
| > |
| Œ |
| œ |
| Š |
| š |
| Ÿ |
| ˆ |
| ˜ |
| |
| |
| |
| |
| |
| |
| |
| – |
| — |
| ‘ |
| ’ |
| ‚ |
| “ |
| ” |
| „ |
| † |
| ‡ |
| ‰ |
| ‹ |
| › |
| € |
Selanjutnya...
<!– –> | Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser |
<a href> | Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut |
<a name> | Membuat nama bagian yang didefinisikan pada link pada halaman yang sama |
<applet> | Sebagai awal dari Java applets |
<area> | Mendefinisikan daerah yang dapat diklik (link) pada image map |
<b> | Membuat teks tebal |
<basefont> | Membuat atribut teks default seperti jenis, ukuran dan warna font |
<bgsound> | Memberi (suara latar) background sound pada halaman web |
<big> | Memperbesar ukuran teks sebesar satu point dari defaultnya |
<blink> | Membuat teks berkedip |
<body> | Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link |
<br> | Pindah baris |
<caption> | Membuat caption pada tabel |
<center> | Untuk perataan tengah terhadap teks atau gambar |
<comment> | Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser |
<dd> | Indents teks |
<div> | Represents different sections of text. |
<embed> | Menambahkan sound or file avi ke halaman web |
<fn> | Seperti tag <a name> |
<font> | Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks |
<form> | Mendefinisikan input form |
<frame> | Mendefinisikan frame |
<frameset> | Mendefinisikan attribut halaman yang akan menggunakan frame |
<h1> … <h6> | Ukuran font |
<head> | Mendefinisikan head document. |
<hr> | Membuat garis horizontal |
<html> | Bararti dokumen html |
<i> | Membuat teks miring |
<img> | Image, imagemap atau an animation |
<input> | Mendefinisikan input field pada form |
<li> | Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> ) |
<map> | Mendefinisikan client-side map |
<marquee> | Membuat scrolling teks (teks berjalan) – hanya pada MS IE |
<nobr> | Mencegah ganti baris pada teks atau images |
<noframes> | Jika browser user tidak mendukung frame |
<ol> | Mendefinisikan awal dan akhir list |
<p> | Ganti paragraf |
<pre> | Membuat teks dengan ukuran huruf yg sama |
<script> | Mendefinisikan awal script |
<table> | Membuat tabel |
<td> | Kolom pada tabel |
<title> | Mendefinisikan title |
<tr> | Baris pada tabel |
<u> | Membuat teks bergaris bawah |
Selanjutnya...
Lagi bete enggak ada kerjaan lebih baik membuat postingan lagi, berhubung sekarang lagi sedang ngetrend-nya membuat buku tamu tersembunyi di samping kiri atau kanan monitor, saatnya saya tulis lagi untuk sekedar menambah koleksi artikel saya.
Script ini hampir sama seperti yang pernah saya pernah buat silahkan di baca dulu javascript melayang di blog jika anda ingin memasang buku tamu tersembunyi anda harus bedakan kode-nya dengan script melayang tersebut (jika di blog anda memasang script melayang atau iklan melayang)
Silahkan Anda ikuti langkah-langkah berikut ini.
>> Login Blogger
>> Klik Rancangan/Design
>> Tambah Gadget / Add a Gadget
>> Anda pilih HTML/javascript
Kemudian Copy paste kode di bawah ini di dalam Html/javascript tadi.
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD68eJhmeygZyx-T3pP5Aiil4G9LV0QHhUI6b3-yf7fuQvBZR4VuNU7bt4PBZ1qLZuGdF0wayLeSz1rd-FIXJ4JMDKHM7Un77zG-AbV5TjGiaxnvn-zgWDheB3OTDHNpEy9t3DsreBU1g7/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
Letakkan disini kode Shoutbox, Iklan, Menu Dll
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
Yang saya cetak merah dapat anda ganti posisi-nya tapi anda harus mengatur juga dari style-nya. Dan yang berwarna biru bisa anda letakkan kode buku tamu, iklan dan terserah.
Seharusnya tadi pagi postingan ini udah jadi, berhubung ke habisan sinyal buat posting (enggak konek), ya udah deh terpaksa di tunda.
Selamat Mencoba dan Semoga Bermanfaat.
Selanjutnya...
Untuk sistem Scroll Recent Post disini adalah dengan menggunakan sistem marquee dari Judul Post.
Caranya cukup sederhana tinggal copy paste kode dibawah ini ke kotak Add Widget HTML/Scrip di blog, dan lakukan beberapa perubahan untuk penyesuaiannya.
<style type="text/css">
ul { list-style-image: url(http://img375.imageshack.us/img375/2936/flower.png) }
ul a{text-decoration:none;}
ul a:hover {background:#66FF00; text-decoration:none; color: red;"}
</style>
<marquee behavior="scroll" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<script>
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script>
<script>
var numposts = 15;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://www.Shufi11.co.cc/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script></marquee>
Nach selanjutnya untuk mengetahui apa saja sich yang harus dilakukan perubahan terhadap perubahan diatas, patut diingat perubahan ini tidak mengikat.. he..he..,
Pada umumnya ada empat kode yang harus dirubah, yaitu :
<style type="text/css">
ul { list-style-image: url(http://img375.imageshack.us/img375/2936/flower.png) }
ul a{text-decoration:none;}
ul a:hover {background:#66FF00; text-decoration:none; color: red;"}
</style>
kode ini diperlukan hanya untuk menambahkan background sebagai pengganti nomor atau icon list, dan kode css bisa diganti dengan alamat gambar yang diinginkan, bahkan bisa diedit untuk mempercantik tampilan scroll recent post atau dihilangkan saja, gimana hasilnya? coba saja.
2. Kemudian untuk kode scrollamount="2" merupakan kode yang mengatur kecepatan scroll, jadi bisa diganti berapa saja sesuai selera.
3. Kode selanjutnya adalah var numposts = 15;
yang berarti berapa posting yang akan ditampilkan, jadi ganti saja atau biarkan juga ga dilarang koq
4. Dan terakhir dan yang terpenting adalah kode http://www.Shufi11.co.cc/feeds/posts/default, kode tersebut harus diganti sesuai dengan alamat url feed masing-masing.
selamat mencoba yah...
sumber :http://www.karsono.co.cc/2010/06/scroll-recent-post-di-blog.html
Selanjutnya...
tidak berat saat loading. Daftar isi ini berbentuk table dan dapat difilter
berdasarkan Judul Post, Tanggal Post, Categorie.
Langkah 1. Login ke blogger, masuk menu Edit HTML, lalu cari kode: ]]></b:skin>
Copy kode di bawah ini dan paste di atas kode ]]></b:skin>
#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;} .toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;} .toc-header-col2 { width:75px;} .toc-header-col3 { width:125px;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size:50%; text-decoration:none;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;} |
Langkah 2. Tambahkan elemen baru dengan cara add gadget pilih java script lalu masukkan kode ini:
<div id="toc"></div> |
Langkah 3. Tambahkan elemen baru dengan cara add gadget
<div id="toclink"><a href="javascript:showToc();"><img src="http://i873.photobucket.com/albums/ab299/handi_05/foldercilik.gif"/> Lihat Daftar Isi !</a><br/><br/></div> <script style="text/javascript" src=" http://h1.ripway.com/barno/mytabcontn.js"> </script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script> |
- Jangan Lupa sebelum mengedit html harus backup dulu.
- Setelah selesai melaksanakan setiap langkah jangan lupa
di save. - Kata YOURBLOG diganti dengan URL blog anda
Selanjutnya...
http://www.blogger.com/
, atau http://myblog.blogspot.com/
. URL yang Anda pilih akan digunakan oleh pengunjung, atau Anda sendiri, untuk mengakses blog Anda.ftp.example.com
- Nomor port deafult akan digunakan (:21 untuk FTP dan :22 untuk SFTP). Menetapkan port alternatif tidak akan bekerja.
- Dan jangan menyertakan
http://
atauftp://
di dalam alamat server.
directory/directory/
(pastikan menyertakan garis miring di belakang)
- JANGAN gunakan
http://
,ftp://
atau alamat server pada lintasan. - Direktori yang Anda tentukan harus sudah ada di dalam Server FTP Anda.
- Direktori tidak boleh berupa lintasan absolut - direktori harus relatif terhadap lokasi akar ftp di server.
Selanjutnya...
- control + b = Cetak Tebal
- control + i = Cetak Miring
- control + l = Blockquote (hanya pada mode HTML)
- control + z = Undoh
- control + y = Redoh
- control + shift + a = Link
- control + shift + p = Pratinjau
- control + d = Simpan sebagai Draft
- control + s = Publikasikan Kiriman
- control + g = Transliterasi bahasa Hindi
- Tulis: Mode WYSIWYG di mana Anda dapat memanipulasi teks dengan tombol format.
- Edit HTML: mode mentah di mana Anda mengedit html secara manual.
- Pratinjau: mengubah tampilan kiriman lengkap, termasuk Judul, link dan gambar-nya.
- Font
- Ukuran huruf
- Tebal
- Miring
- Warna huruf
- Link
- Rata kiri
- Tengah
- Rata kanan
- Rata penuh
- Daftar (nomor) urut
- Daftar (butir) tidak urut
- Blockquote
- Pemeriksa ejaan
- Upload gambar
- Menghapus format dari bidang pilihan
Selanjutnya...
blogspot.com
di dalam alamat blog Anda, Anda bisa memperoleh domain Anda sendiri. Kami akan tetap menjadi host untuk semua konten seperti sebelumnya, tapi konten tersebut akan ditampilkan pada alamat baru Anda. Ada tiga komponen untuk menyiapkannya:Domain Anda
mysite.com
dan mendaftarkannya. Anda dapat mendaftarkan nama domain dari pencatat pendaftaran apa pun . Pengaturan DNS
ghs.google.com
. Prosedur yang benar untuk melakukan hal ini berbeda-beda, tergantung pada pencatat pendaftaran domain Anda, jadi silakan langsung hubungi pencatat pendaftaran Anda dan mereka akan membantu Anda. Berhati-hatilah bahwa data DNS yang baru tidak dapat langsung diberlakukan. Pengaturan Blogger
Catatan:
- Apabila domain baru Anda tidak mengarah ke blog Anda, tunggu satu atau dua hari, untuk memastikan semua server DNS telah diperbarui. Apabila domain belum mengarah dengan benar, hubungi pencatat pendaftaran untuk memastikan bahwa Anda telah memasukkan pengaturan DNS dengan benar.
- Alamat Blog*Spot asli Anda akan meneruskan secara otomatis ke domain baru Anda. Dengan cara itu, link atau bookmark yang sudah ada di dalam situs Anda akan tetap bekerja.
- Anda dapat menggunakan fitur ini dengan domain (misal,
mysite.com
) atau subdomain (misal,name.mysite.com
). Namun, Anda tidak bisa menentukan subdirektori (misal,mysite.com/blog/
) atau wildcard (misal,*.mysite.com
).
Spam Potensial
Tingkat Posting Tinggi
Selanjutnya...
http://
atau ftp://
di dalam alamat server atau pengaturan lintasan.Selanjutnya...