- Login ke akun blogger Anda.
- Klik Rancangan
- Klik Edit HTML
- Cari kode <body>. Untuk memudahkan mencarinya, tekan CTRL + F.
- Letakkan kode berikut tepat di bawahnya.
- <script> /*Random background color- by javascriptkit.com Visit JavaScript Kit (http://javascriptkit.com) for script Credit must stay intact for use*/ //Enter list of bgcolors: var bgcolorlist=new Array(“#DFDFFF”, “#FFFFBF”, “#80FF80″, “#EAEAFF”, “#C9FFA8″, “#F7F7F7″, “#FFFFFF”, “#DDDD00″) document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)] </script>
- Setelah itu klik Save Template dan lihat hasilnya.
Senin, 19 Desember 2011
Mengubah Warna Background Body Blog Setiap Halaman
Minggu, 18 Desember 2011
Cara Buat Iklan Melayang Di Blog
yah Tutorial Blog kali ini adalah Cara Membuat Iklan Melayang Di Blog or Cara Pasang Iklan Melayang di Blog Cara Membuat Iklan Melayang (Flying Ads) - Sobat pernah berkunjung ke sebuah blog yang waktu dibuka tiba-tiba muncul sebuah kotak yang berisi "Silahkan Klik" atau perintah untuk mengklik iklan dan tampilannya menutupi layar?? Nah, itulah yang dinamakan Iklan Melayang atau bahasa kerennya Flying Ads.blogspot
Nah, langsung ke tutorial Cara Membuat Iklan Melayang Di Blog or Cara Pasang Iklan Melayang di Blog =
- Masuk ke blogger
- Buka design/Rancangan
- Pada Page Element, pilih tempat, lalu klik "Add A Gadget" dan pilih HTML Javascript
- Masukkan kode berikut,
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:0px solid #A5BD51;
background:#ffffff;
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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:center">
<a href="javascript:showHideGB()">
<img src="http://www.fileden.com/files/2009/10/12/2599919/close.gif" />
</a>
</div>
<center>
Masukan Kode iklan Text ataupun banner
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
Note : Kode warna merah bisa diganti. Right menandakan posisi iklan melayang. #ffffff adalah kode warna, untuk mengganti warna tinggal ganti dengan nama warna dalam bahasa inggris, misal "yellow". Masukan Kode iklan Text ataupun banner ganti dengan kode iklan Sobat, atau bisa juga dimasukkan kode banner dan lain-lainnya.
http://www.fileden.com/files/2009/10/12/2599919/close.gif ganti dengan alamat gambar sobat..
source = http://prasutan.blogspot.com
semoga artikel tutorial Blog Cara Membuat Iklan Melayang Di Blog or Cara Pasang Iklan Melayang di Blog bermanfaat.
Tutorial Pasang Widget Alexa Di Blog
- Klik di sini untuk menuju situs alexa.com
- Masukan alamat blog anda pada kolom yang terdia. Contoh : kolom-tutorial.blogspot.com (tanpa http://), lalu klik tombol “Build Widget”.
- Ada 3 ukuran widget yang bisa anda pilih, copy kode yang ada di sampingnya lalu paste pada notpad atautext editor lainnya. Simpan kode tersebut di komputer anda untuk nanti di masukan ke blog.
- Silahkan login ke blogger dengan ID anda.
- Klik Tata Letak.
- Klik tab Elemen Halaman.
- Klik Tambah Gadget.
- Klik tanda Plus (+) di samping tulisan HTML/JavaScript.
- Paste kode yang tadi ada di notepad kedalam kolom yang muncul.
- Klik tombol Simpan.
- Pindahkan elemen yang baru anda buat tadi ke tempat yang anda inginkan, jika mau tentunya.
- Jangan lupa klik tombol Simpan yang ada di sebelah atas.
- Selesai.
Membuat Text Area
Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.
Untuk membuat text area, silahkan anda Copy kode di bawah ini : <p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area</textarea></p>
Sebagai contoh :
Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.
Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.
Text Area dengan memakai HighLight
Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :
<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form> Sebagai contoh :
Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.
Elemen tombol highlight All :
- <div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
- <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.
- Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.
- <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
- <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
- HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.
Sumber
Belajar HTML yang merupakan dasar dari pembuatan website
tag yang terdapat pada dokumen HTML. Kita akan segera membicarakan mengenai tag.Kode HTML pertama
Hello World
<b> maksudnya untuk memulai huruf tebal (bold) dan tag </b> merupakan tag penutup untuk menghentikan huruf tebal.<head> dan <body>, tapi kita akan membicarakan masalah ini belakangan. Yang penting sekarang pahami dulu mengenai tag HTML. Sekarang akan kita pelajari lebih jauh mengenai tag HTML.Containers
Hello <i>World!!</i><br>
Standalone Tag
<img> yang merupakan tag untuk memasang sebuah gambar didalam halaman web. Tag lain yang tidak memiliki penutup adalah<br> yang berguna untuk memberi jarak antar teks dan tag <hr> untuk memberi garis. Tag HTML cukup banyak jumlahnya, anda dapat mencarinya dibuku-buku atau mencarinya melalui google untuk mengetahui apa saja jenis tag HTML. Tapi saya akan beritahu yangpenting-penting saja.Atribut
Hello <font face="verdana" size="2" color="red">World!!</font>
<font> nah tag <font> memiliki atribut face, size dan color yang dapat anda ubah nilainya. Cobalah untuk mengubah ukuran (size) menjadi 3 atau jenis fontnya ubahlah dari verdana menjadi arial. Kira-kira seperti itu kegunaan atribut. Bagaimana? lanjut?HTML Entity
jadi untuk membuat seperti contoh diatas anda perlu menulisnya seperti ini:Saya belajar web
Struktur Dokumen HTML
<head> dan <body>. <head>mendefiniskan bagian header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut. Tag <head> tidak memiliki atribut tetapi memiliki container khusus didalam header seperti<base>, <meta>, dan <title>. Tag <body> mendefinisikan awal dari isi website dan ditutup dengan </body>. Tag <body> berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode berikut ini:<html> <head> <title>Your title</title> </head> <body bgcolor="#cccccc"> Hello <b>World!!</b> </body> </html>
<title> muncul dibagian atas browser. Apapun yang anda tulis diantara tag <body> akan muncul sebagai isi dari website anda. Jika anda lihat terdapat tag <body bgcolor="#cccccc"> bgcolor merupakan atribut dari <body> yang berguna untuk memberi warna pada background halaman website. Pelajari dan pahami kode tersebut maka anda akan mudah untuk mempelajari kode selanjutnya.Susun file Anda
index.html
<body>Teks dan Paragraf
<h1> dan ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1 sampai h6.<h1>My First HTML</h1> <h2>My First HTML</h2> <h3>My First HTML</h3> <h4>My First HTML</h4> <h5>My First HTML</h5> <h6>My First HTML</h6>
<p> digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <b> untuk menebalkan,<i> untuk memiringkandan <u> untuk garis bawah<p>Halo, nama saya <b>Budi</b> dan saya ingin belajar HTML.</p> <p>Ini merupakan <i>kode HTML pertama saya</i> dan saya belajar untuk <u>memformat</u> teks dalam HTML </p>
<p> dan <h1> - <h6>. ALIGN berguna untuk membuat teks rata kiri, tengah atau kanan. Cobalah kode berikut:<h1 align="center">Nama saya Jono</h1> <p>Halo nama saya Jono dan saya lagi belajar HTML</p> <p align="right">James, 2006</p>
<font>, tag <font> memiliki atribut seperti face, size dan color. Contoh:<p><font face="Arial" size="2" color="#FF0000">Nama saya</font> <b>Bambang</b><font face="Arial" size="2"> dan </font><font face="Tahoma">saya cinta rupiah</font></p>
<br> sedangkan untuk spasi seperti yang sudah saya jelaskan tadi, kita perlu menggunakan HTML entity / character entity, untuk spasi character entitynya adalah . Langsung saja coba kode berikut ini:<p>Baris 1<br>Baris 2<br>Baris 3<br>Baris <b>4</b></p>
Baris 2
Baris 3
Baris 4
<hr>. Tag <hr> memiliki beberapa atribut. Tag<hr> tidak memerlukan tag penutup jadi tag <hr> merupakan standalone tag. Coba contoh berikut ini:<p>Halo nama saya Telo</p> <hr width="25%" align="justify"> <p>Saya lagi belajar membuat garis horisontal.</p> <hr size="4" align="justify"> <p>Matur nuwun</p> <hr size="3" noshade color="#000000" width="25%" align="justify">
<hr>terdapat atribut yang tidak memiliki nilai yaitu noshade. Memang dalam beberapa tag HTML terdapat atribut-atribut yang tidak memiliki nilai. Salah satunya adalah noshade yang berarti menghilangkan bayangan pada garis. Anda dapat melihat perbedaan tag <hr> yang menggunakannoshade dengan yang tidak pada kode diatas.Links
<a> merupakan tag HTML untuk membuat link agar kita dapat berpindah ke halaman lain. Tag <a> memiliki atribut yang sangat penting yaitu href. Langsung saja coba kode berikut ini:My <a href="http://www.dhimasronggobramantyo.com">Homepage</a>
href. Sekarang jika anda memiliki banyak file HTML dalam satu folder, apakah saya perlu menggunakan http:// untuk melinknya? tentu tidak anda cukup menulis nama filenya saja, asalkan file tersebut berada satu folder dengan file yang berisi link. Contoh:My <a href="contact.html">homepage</a>
My <a href="folder/contact.html">homepage</a>
target="_blank" seperti ini:My <a href="http://www.dhimasronggobramantyo.com" target="_blank">homepage</a>
Images
<img>. Tag <img> tidak memerlukan penutup dan memiliki atribut src untuk mengambil gambar dari suatu alamat. Coba contoh berikut ini:<img src="images/artikel/introhtml_02.gif" width="313" height="43" alt="Contoh Gambar">
src disini sama dengan atribut href pada tag <a> yang berisi alamat posisi gambar. Pada contoh kode diatas anda memiliki gambar introhtml_02.gif yang berada pada folder images. Jika anda tidak memiliki file tersebut maka gambar tidak ditampilkan. Atribut width dan heightmerupakan opsional, tapi saya sarankan untuk mencantumkannya agar browser mengetahui ukuran gambar apabila gambar gagal ditampilkan. Atribut alt berguna untuk menampilkan teks pada gambar jika gambar gagal ditampilkan atau belum selesai ditampilkan. Anda dapat memberikan garis tepi pada gambar dengan menambahkan atribut border<a href="http://www.dhimasronggobramantyo.com"> <img border="1" src="images/introhtml_02.gif" width="313" height="43"></a>
Komentar
<!--Kode untuk menampilkan nama saya--> <p>Nama saya <b>Dhimas</b></p>
List
<ul>:<ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul>
- List 1
- List 2
- List 3
<ul> merupakan tag pembuka. Diantara tag <ul> Anda dapat menambahkan tag <li>untuk setiap list yang akan ditampilkan. Tag list lainnya adalah Ordered List <ol> Anda dapat menggunakannya sama seperti tag <ul> Contoh:<ol> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ol>
- List 1
- List 2
- List 3
start. Contoh:<ol start="3"> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ol>
- List 1
- List 2
- List 3
- <TABLE></TABLE>--Tag ini merupakan containers untuk membuat tabel.
- <TR></TR>--Didalam tabel tag ini berfungsi untuk membuat baris.
- <TD></TD>--Tag untuk membuat kolom. didalam tag <tr> harus terdapat tag <td>, anda bisa menambahkan banyak tag <td> didalam <tr> untuk membuat kolom.
- <TH></TH>--Sama dengan <td> hanya saja berfungsi sebagai header, biasanya digunakan pada baris pertama didalam tabel.
<table border="1" width="60%"> <tr> <td>Contoh Table</td> </tr> </table>
Contoh Tabel |
<table> dan biasanya memiliki atribut border. Jika border="0"maka garis pada tabel tidak ditampilkan. Biasanya jika kita tidak menampilkan atribut border maka otomatis tabel tersebut juga tidak memiliki garis. <table> memiliki atribut cellpadding untuk memberi jarak didalam kolom dan cellspacing untuk memberi jarak antara kolom. Coba kode berikut ini:<table border="1" width="200" cellpadding="4" cellspacing="5"> <tr> <td width="100">Cell 1</td> <td width="100">Cell 2</td> </tr> </table>
Cell 1 | Cell 2 |
cellpadding dan cellspacing untuk melihat perbedaannya, cobalah untuk mengutak-atik kode diatas dengan mengubah nilai-nilai atributnya.<tr>. Didalam baris perlu sebuah kolom atau lebih, kolom dibuat dengan menggunakan tag <td>. Untuk lebih jelasnya cobalah kode berikut ini:<table border="1" width="200" cellpadding="2"> <tr> <td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> <td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> / </tr> <tr> <td width="100">cell 1</td> <td width="100">cell 2</td> </tr> <tr> <td width="100">cell 3</td> <td width="100">cell 4</td> / </tr> </table>
Header | Header |
cell 1 | cell 2 |
cell 3 | cell 4 |
bgcolor yang berguna untuk memberi warna pada background. Didalam kolom<td> anda dapat menuliskan kode HTML apa saja, bahkan anda dapat memasang tag <table>didalamnya, yang berarti anda memasang tabel didalam tabel. Contoh lainnya:<table border="1" width="200" cellpadding="2"> <tr> <td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> <td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> </tr> <tr> <td width="100" rowspan="2" valign="top">cell 1</td> <td width="100">cell 2</td> </tr> <tr> <td width="100">cell 4</td> </tr> </table>
Header | Header |
cell 1 | cell 2 |
cell 4 |
rowspan="2" ini berguna untuk menggabungkan 2 baris menjadi satu, jika anda ingin menggabungkan lebih dari 2 baris, ubah saja nilainya. Bagaiman susah? coba anda pelajari terus. Jika sudah coba anda pahami kode berikut ini:<table border="0" width="200" cellpadding="2" cellspacing="1" bgcolor="#000000"> <tr> <td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> <td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> </tr> <tr> <td width="100" valign="top" bgcolor="#CCCCCC" align="left">Left</td> <td width="100" bgcolor="#CCCCCC" align="right">Right</td> </tr> <tr> <td width="200" valign="top" colspan="2" bgcolor="#FFFFFF" align="center"> Table is cool</td> </tr> <tr> <td width="200" valign="top" colspan="2" bgcolor="#FFFFFF" align="center"> But it's not easy</td> </tr> </table>
Header | Header |
Left | Right |
Table is cool | |
But it's not easy | |
frames dan form. Saya akan mengajarkan frames diartikel lainnya, tetapi frames harus dihindari dalam membuat website, alasan utama apa yang ada didalam frames tidak terbaca oleh Search Engine. Tag form hanya dibutuhkan apabila anda membuat website dinamis menggunakan bahasa pemrograman web seperti PHP, ASP, Perl atau JSP.<META>. Tag <META> digunakan agar search engine mengenal dan dapat mengkategorisasikan website anda, gampangnya agar search engine mengetahui website anda isinya tentang apa. Tetapi tidak semua search engine membaca tag<META> tetapi sebagian besar membaca tag ini, jadi kita perlu menyertakannya pada website kita. Tag <META> berada diantara tag <head> bukan <body> yang berarti isi tag tersebut tidak ditampilkan dibrowser.<META> maka search engine akan mengenali website anda. Sebenarnya prosesnya jauh lebih rumit, search engine memiliki perhitungannya sendiri seperti ranking, backlink, recipocal link, tetapi kita ambil gampangnya saja.<META>Tag <META> memiliki atribut yang paling penting Keywords dan DESCRIPTION dimana kita memasukkan deskripsi dan kata kunci yang berhubungan dengan website kita.<html> <head> <META content="kecoak.com" name=AUTHOR> <META content="Cara memelihara dan beternak kecoak." name=description> <META content="kecoak, beternak, memelihara, coro, ternak, pelihara" name=keywords> <META content="INDEX, FOLLOW" name=ROBOTS> <META http-equiv="Content-Language" content="en-us"> <META http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Ternak Kecoak</title> </head>
Artikel Terpopuler
-
Apa jadinya kalau ngeblog tidak ditunjang oleh program komputer? Tentunya Anda akan mengalami beberapa kesulitan. Misalnya, Anda akan sulit ...
-
1 Penulisan Java Script Kode Java Script dituliskan pada file HTML.Terdapat dua cara untuk menuliskan kode-kode Java Script agar dapat ditam...
-
Artikel ini merupakan artikel pendahuluan sehubungan dengan tutorial HTML dasar bagi para pengguna internet yang ingin membuat homepage pr...
-
Melanjutkan artikel sebelumnya yang membahas tentang alexa rank , maka posting kali ini akan di bahas secara khusus tentang cara pemasang...
-
Apa itu text area ?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di baw...
-
Oke brader kita ketahui bahwa sekarang window ngeluarin produk baru y itu window 8 walaupun belum di keluarin secara resmi tapi window 8 uda...
-
Melanjutkan dari postingan saya sebelumnya yang berjudul “Cara-cara Promosi Yang Efektif Untuk Melipatgandakan Profit“, postingan kali ini a...
-
Pernah membaca “24 prinsip milyarder yang mencerahkan” buah tangan dan pemikiran dari pelatih No.1 Indonesia? Ya, Tung Desem Waringin. Sedik...
-
Trik Menjaga Keamanan Akun Gmail – Dunia internet memang sudah semakin luas, penggunanya pun terus bertambah seiring jalannya waktu. Tentu s...
-
Losses that occur in most company are due to the inefficiency in time management. As a result employees are forced to work for long time whi...