Senin, 16 Februari 2009

Apa Itu HTML?


Apa itu HTML?

HTML singkatan dari Hyper Text Markup Language,dalam arti umum,sebuah web adalah sebuah dokumen HTML,yang mana sebuah HTML itu sendiri merupakan bahasa yang menggunakaan tanda-tanda tertentu(Tag)untuk menyatakan kode-kode yang harus diterjemahkan oleh Browser,agar halaman dapat di tampilkan secara benar.Kursus html

HTML sendiri,sebenarnya hanya dokument biasa,hanya dokumen ini dapat dilakukan untuk pemformatan text,peletakan object,maupun Hypertext yakni text yang berfungsi ganda sebagai penghubung (Link)antara halaman satu dengan yang lain.
Nah!link inilah yang menjadi ciri sekaligus membentuk suatu www (Jaringan global antar text / halaman)

Bagaimana contoh sederhana bentuk sebuah halaman HTML?

Sebagaimana Pengertian Blog pada posting pelajaran-blog.blogspot.com beberapa waktu lalu,bahwa sebuah halaman web yang baik,secara fisik akan terdiri dari sebuah Header,Body,Sidebar dan Footer.

Untuk membentuk sebuah halaman HTML secara sederhana,kita memanfaatkan Notepad pada komputer anda.

Tapi sebelum itu,pergi ke My Document,pilih Folder Option,lalu pilih View,kosongkan check box pada Hide Extentions for Known Filetypes,inihanya untuk memperlihatkan File type dari setiap file di komputer anda.

Setelah itu,buka Notepad dan tuliskan kode di bawah ini : tentang html mania

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<p>Hallo! aku sedang belajar blog di Pelajaran Blog !</p>

</body>

</html>

Setelah itu simpan dengan nama "belajar",yang nantinya di komputer anda akan menjadi "belajar.txt",setelah itu,klik kanan file tersebut pilih Rename rubah menjadi "belajar.htm".

Setelah itu,Open file tersebut,dan anda sudah bisa melihat suatu tampilan halaman HTML yang di maksud.belajar html

Apa keterangan dari kode-kode di atas?

Kode HTML,dalam setiap kodenya di awali dengan tanda <> dan di akhiri dengan </>

contoh:

<html>merupakan penandaan bahwa halaman HTML di mulai.

</html>merupakan tanda bahwa halaman html ditutup.

<Head>artinya merupakan awal kepala

</Head>artinya merupakan akhir bagian kepala.

<Title>menujukkan judul yang akan keluar pada Bar atas yang ditutup dengan </title>

<body>isi dari halaman tesebut,seperti contoh HTML diatas,isinya berupa kata "Hallo! aku sedang belajar blog di Pelajaran Blog !"
yang ditutup dengan akhir isi halaman,yaitu </body>

Sedangkan tanda <p> yaitu pembentukan alinea baru,seperti halnya anda menekan Enter pada Ms Word untuk membentuk kursor baru pada Alinea baru,yang mana diakhiri pula dengan tanda </p>.

Untuk membentuk alinea baru bisa juga menggunakan kode <br> dan diakhiri dengan </br>

Gimana? masih kurang jelas?untuk kode-kode pengoptimalan,seperti mempertebal huruf,miring,garis bawah,membuat tabel dan lain-lain silahkan kunjungi di sini.html tutorialHtml itu apa ya?

Baca Juga Yang Ini..

Diposting oleh di Tidak ada komentar:
Label: ,

Kode-kode HTML


Kode-kode dasar HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini

Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :

Belajar

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :

Belajar

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :

Belajar

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :

<b><i><u>Belajar</u></i></b> hasilnya seperti :

Belajar

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :

Belajar

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :

Belajar

Namanya juga hidden..ya..ga keliatan..

Membuat Huruf Besar semua (uppercase) gunakan kode :

<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :

Belajar

Membuat Huruf Small caps gunakan kode:

<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:

Belajar

Membuat Huruf Subscribe / kecil di bawah gunakan kode:

<p>4<sub>2</sub></p>hasilnya seperti ini:

42

Membuat Huruf Superscribe / pangkat gunakan kode:

<p>4<sup>2</sup></p> hasilnya seperti ini:

42

Membuat Huruf bergaris atas gunakan kode:

<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:

Belajar mengganti huruf

Membuat Huruf bergaris tengah gunakan kode:

<strike>Belajar</strike> hasilnya seperti ini:

Belajar

Menentukan jenis huruf gunakan kode:

<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:

Belajar

Menentukan ukuran huruf gunakan kode:

<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:

Belajar

Menentukan warna huruf gunakan kode:

<p style="color: green; >Belajar</p> hasilnya seperti ini:

Belajar

Membuat bullet dot bolong gunakan kode:

<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

  • DOT 1

  • DOT 2

  • DOT 3

Membuat bullet dot kotak gunakan kode:

<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

  • DOT 1
  • DOT 2
  • DOT 3

Membuat bullet dot bulat gunakan kode:

<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

  • DOT 1
  • DOT 2
  • DOT 3

Mengatur posisi bullet gunakan kode:

<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>

hasilnya seperti ini:


  • DOT 1
  • DOT 2
  • DOT 3

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:

<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>

hasilnya seperti ini:

Belajar

Membuat tabel border solid gunakan kode:

<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>

hasilnya seperti :

Text

Membuat tabel border dot gunakan kode:

<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>

hasilnya seperti ini:


Text

Membuat tabel border dashed gunakan kode:

<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>

hasilnya seperti ini:


Text

Membuat tabel border groove gunakan kode:

<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:


Text

Membuat tabel border Ridge gunakan kode:

<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Insert gunakan kode:

<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Outset gunakan kode:

<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat Tabel Biasa gunakan kode :

<table border="1"width="200"><td>Text</td></table>

hasilnya seperti:

Text

Membuat Tabel berwarna gunakan kode :

<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

Membuat Tabel berwarna tak berbingkai gunakan kode :

<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.


**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)

Baca Juga Yang Ini..

Diposting oleh di Tidak ada komentar:
Label: ,

Jumat, 13 Februari 2009

Apa komentar kamu..


Hai! semua!! Sebelumnya kami tidak memberi kotak komentar dalam setiap posting kami.
Maksudnya biar komentarnya keliatan banyak.
Tapi sekarang kolom komentar ini saya tutup dulu ya...
Bagi yang mo komentar langsung aja pada postingan ya..
Satu lagi..,yang baik-baik ya..

Diposting oleh di Tidak ada komentar:

Kamis, 12 Februari 2009

Membuat Link berupa Gambar Animasi (*gif)


Jika anda harus bersusah payah memasukkan object flash kedalam blog karena harus menambahkan beberapa kode,lebih prakstis memakai animasi gambar (*.gif).Pelajaran Blog

Gambar ini nantinya akan menjadi sebuah link,yang mempunyai tooltips / keterangan link.
Untuk contohnya lihat seperti di bawah ini:


Sebenarnya,untuk memasang gambar pada blog dalam kasus kali ini meletakkan file/gambar berextention *gif,sama halnya dengan cara meletakkan gambar berformat *jpg.
Nah!Untuk kodenya copy di bawah ini:

<a href="http://geliat-bisnis.blogspot.com/"target="_self" title="Cari duit">
<img style="width: 152px; height: 66px;" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif"/></a>

Untukhttp://geliat-bisnis.blogspot.com/ gantilah nama URL tujuan.
Untuk http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif gantilah alamat URL Gambar animasi yang ingin anda tampilkan.Pelajaran Blog
Untuk Cari duit adalah keterangan / tooltips / keterangan yang muncul ketika mouse berada di atas area.
Untuk menambahkan/memasang file berextention *swf alias flash,akan saya posting di artikel selanjutnya,jadi keep stay ya(aalah..)
Selamat mencoba ya..:)Pelajaran Blog

Baca Juga Yang Ini..

Diposting oleh di Tidak ada komentar:
Label: , ,

Meletakkan Video kedalam Blog


Meskipun blogger sudah menyediakan upload untuk video,ga ada salahnya ya kita mencoba ngulik kode buat menempatkan sebuah video.Pelajaran Blog
Hasilnya kurang lebih seperti di bawah ini,klik untuk memutar Video :





Jika anda ingin meletakkan video dari Youtube,anda hanya mengisi alamat/URL video tersebut,pada kode.
Untuk kode,copy di bawah ini:
<object width="425" height="344"><embed src="http://www.youtube.com/v/sLLCAmr8vjs" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
Nah! Tulisan yang berwarna Hijau,gantilah dengan URL alamat video yang ingin anda tampilkan.
misal alamat pada browser video tersebut adalah:
http://www.youtube.com/watch?v=sLLCAmr8vjs
maka alamat URL dalam kode ganti menjadi:
http://www.youtube.com/v/sLLCAmr8vjs
Apabila anda malah pusing alias bingung,tinggal buka halaman Youtube,dan copy embed kode di sebelah kanan atas,dan paste kode tersebut kedalam halaman HTML anda.
Kenapa ga bilang dari Tadi!!!! Pelajaran BlogPelajaran BlogPelajaran Blog !

Untuk ukuran,anda tentukan sendiri dengan mengatur width="246" height="171".

Jika ingin memasang video pribadi,tinggal membuat Account di Youtube dan Upload Video anda disana.

Tidak susah khan?

**Cara ini bekerja baik jika komputer anda sudah mensupport Flash Player

Baca Juga Yang Ini..

Diposting oleh di Tidak ada komentar:
Label: , ,

Membuat Link Form Button Berjejer / Horizontal


Jika sebelumnya saya pernah memposting tentang membuat form button,sekarang kita akan membahas tentang membuat form button berjejer.

Untuk sebuah form,jika di sejajarkan akan mengalami sedikit kesulitan.

Disini kita akan mengakalinya dengan menambahkan tabel,untuk meletakkan form-form yang akan kita publikasikan.

Untuk contohnya seperti di bawah ini:



<p align="center"><table border="0" cellspacing="1"
width="104"><tr>

<td width="72"><form method="get"
action="http://www.google.com/"target="_blank"><p><input type="submit"
value="Google"
name="1"></form></td>

<td width="69"><form method="get"
action="http://www.yahoo.com/"target="_blank"><p><input type="submit" value="Yahoo"
name="2"></form></td>

<td width="69"><form method="get"
action="http://www.youtube.com/" target="_blank"><p><input type="submit" value="Youtube"
name="3"></form></td>

<td width="69"><form method="get"
action="http://www.Friendster.com/" target="_blank"><p><input type="submit" value="Friendster"
name="4"></form></td>

</tr></table>

Untuk tulisan warna hijau,rubah sesuai atribut blog anda,jika anda ingin memposisikan form-form diatas,ke kiri,tinggal merubah baris kode yang berwarna merah.

Untuk posisi tengah="center", kiri="left" sedangkan untuk kanan="right",namun masalah posisi,biasanya browsre IE yang berfungsi dengan baik.

Untuk hasil eksekusi diatas,jika anda menginginkan link akan terbuka,pada window yang sama,gantilah kode _blank gantilah dengan _self.

Gimana? minat mau mencoba?

Baca Juga Yang Ini..

Diposting oleh di Tidak ada komentar:
Label: , ,

Membuat Link berupa Form Button


Membuat Link berupa tombol atau form button sebenarnya,disamping menambah kecantikan namun sekaligus merangsang pengunjung untuk mengklik form tersebut.
Contoh Link yang berupa form button/tombol,seperti di bawah ini:


Dari contoh di atas,anda bisa lihat,saat anda klik form tersebut akan menimbulkan popup sesuai alamat yang anda tentukan.
Sedangkan kodenya,anda bisa copy di bawah ini:
<form method="get" action="http://pelajaran-blog.blogspot.com/"
target="_blank">
<input type="submit" value="Contoh saja!" name="q">
</form>
Untuk tulisan http://pelajaran-blog.blogspot.com/ anda rubah sesuai nama blog anda.
Untuk tulisan Contoh saja!,rubah sesuai keinginan anda.

Sedangkan untuk tulisan _blank gantilah dengan _self jika anda menginginkan halaman,akan terbuka pada halaman itu sendiri,bukan pada jendela baru.

Gimana siap mencoba?

Baca Juga Yang Ini..

Diposting oleh di Tidak ada komentar:
Label: , ,

Blog itu apa sih?


Blog,kalau menurut saya sih ibarat rumah,bahkan ibarat sebuah pulau.
Dimana,orang akan lebih senang berkunjung,jika pada rumah / pulau tersebut menyediakan apa yang mereka inginkan.

Dengan Blog pula,kita mempunyai sebuah rumah tempat tinggal dalam dunia maya.
Dimana,kita bebas mengekspresikan maupun memfermak Blog sesuka hati kita.
Semakin cantik dan uptudate suatu Blog,traffic maupun pengunjung,akan semakin meningkat.

Blog/web yang baik biasanya mempunyai kriteria-kriteria tertentu,seperti adanya Header,body,sidebar,footer.

Jadi satu halaman sebuah Blog yang baik terdiri dari kriteria-kriteria di atas.
Sebagai gambaran lihat ilustrasi di bawah ini:

Tentang Blog
Di ibaratkan ilustrasi di atas,sebuah Blog mempunyai fitur-fitur itu semua.
Skema Blog,anda bisa lihat contoh di bawah ini :

Apa pengertian Blog?
Maksudnya?
Ya,secara fisik sebuah Blog terdiri dari :
Header(kepala),Body(Isi Blog),Sidebar(lengan/sisi),Footer(bawah).

Adapun jika ada fitur-fitur lain,itu hanya sebagai element tambahan.

Bagaimana membuat sebuah Blog?

Blog,bisa kita ciptakan melalui jasa web penyedia blog,seperti;Blogger,Wordpress,Multiply dll.
Di pelajaran-blog.blogspot.com memang mempelajari khusus Blog dari Blogger/Blogspot.

Apa yang harus di kuasai untuk bisa mengedit sebuah Blog?

Di blogspot,sudah ada versi WYSWYG yang mana kita tidak perlu capek menuliskan kode untuk sebuah blog.Tapi jika anda menguasai HTML,CSS,PHP maupun Javascript akan lebih baik lagi.
Untuk HTML,CSS,PHP maupun Javascript ,kita akan bicarakan nanti.

Jika kita sudah mempunyai Blog?apa yang harus kita lakukan?

Memposting artikel pada Blog? maupun upload foto ataupun Video,ajang narsis,kumpul sesama Blogger menjalin silaturahmi,curhat,dll.Keuntungan lain yaitu,dengan kita mempunyai sebuah Blog,ibarat kita sudah mempunyai sebuah rumah,dan di rumah itu,kita bebas mau mananam apaun itu tanamanya.
Maksudnya,kita bisa meletakkan sebuah kode,baik itu kode tukar link,iklan dll.

Banyak penyedia content yang menawarkan kode iklan (AdSense,Text Link-Ads,AdBrite,dll)untuk memasang iklan pada suatu Blog,yang akan membayar kita jika ada pengunjung yang mengklik iklan yang kita tampilkan.

Apa sich keuntungan Materi dari banyaknya pengunjung pada Blog kita?

Ya,jelas..dengan bayaknya pengunjung,kemungkinan iklan kita dilihat orang juga akan semakin besar,dan akan semakin besar pula tambahan doku ke kantong kita.

Have u create a Blog?

Baca Juga Yang Ini..

Diposting oleh di Tidak ada komentar:
Label:

Minggu, 08 Februari 2009

Membuat Auto Clear pada Mesin Pencari


Meskipun pernah saya singgung sebelumnya,tapi pada halaman ini kita akan membahas search engine dengan Auto Clear.

Maksudnya,saat pengunjung,menggunakan search engine pada blog kita,hanya dengan memberi efek clik pada area text,maka text yang ada di area tersebut langsung hilang.Anda juga bisa memberikan kata pada text area,yang nantinya akan keluar setiap blog load.

Contohnya,anda bisa melihat halaman ini,di sebelah kanan atas,saat kita fokus kedalam,secara otomatis text akan hilang.
Pada dasarnya ini hanya sebuah hiasan,tapi jika anda ingin mendapatkan kodenya,copy kode di bawah ini :
<form id="searchform"
action="http://pelajaran-blog.blogspot.com/search" name="fs"
method="get"> <input id="s" onfocus="this.value='';"
value="Cari artikel tentang.."
name="q" size="25" type="text"/> <input id="searchsubmit"
value="Search" type="submit"/>
Tulisan yang berwarna hijau,rubah sesuai keinginan anda dan ingat..
http://pelajaran-blog.blogspot.com/search,
Ganti dengan alamat blog anda,jangan lupa "/search" nya ya..penting :)

Sedangkan pada Cari artikel tentang..,gantilah sesuai keinginan.

Baca Juga Yang Ini..

Diposting oleh di Tidak ada komentar:
Label: , , ,

Sabtu, 07 Februari 2009

About us

Selamat Datang di pelajaran-blog.blogspot.com
Blog ini khusus disuguhkan kepada blogger tingkat pemula.
Kami minta maaf jika ada sebagian maupun keseluruhan yang dengan sengaja maupun tidak telah mempublikasikan artikel-artikel blogger semua,tanpa izin yang sah.

Kami hanya berniat menyalurkan hobby kami sekaligus berbagi kepada orang lain.
Saran dan kritik at fujiantoro@gmail.com

Thanks to Allah swt ,Blogspot Domain dan para Blogger di Indonesia.
More about author

Diposting oleh di Tidak ada komentar:
Label:

Rabu, 04 Februari 2009

Membuat Search Engine sendiri pada Blog


Ada cara praktis untuk menemukan artikel pada blog secara singkat.Bagi yang sudah tergabung dalam Google Adsense,pasti sudah tahu ya masalah ini.

Tapi bagi anda yang belum tergabung,tapi ingin menampilkan form pencari untuk blog anda sendiri,ada kode praktis yang ga ada salahnya anda coba.
Hasilnya nanti akan seperti di bawah ini :

Sedangkan kodenya,copy paste kode di bawah ini :
<form id="searchform"
action="http://pelajaran-blog.blogspot.com/search"
name="searchform" method="get">
<input id="s" value="" name="q"
type="text"> <input id="searchsubmit"
value="Search"type="submit"> </form>
Kode yang berwarna hijau;http://pelajaran-blog.blogspot.com/search,gantilah dengan halaman blog anda sendiri,tapi jangan lupa tambahin kode /search ya..

Sedangkan Value "Search"anda bisa ganti menjadi "Go" atau "Cari" atau yang lain.
Diposting oleh di Tidak ada komentar:
Label: , , , ,

Membuat Artikel dan Komentar Terbaru


Untuk memasang Post terbaru dan Komentar yang terbaru,dari blog kita maupun blog orang lain,ada cara praktis yang sudah di sediakan oleh Blogger.
Anda tinggal menambahkan elemen baru pada blog,dengan cara Add new Widget,pilih Feed seperti gambar di bawah ini :

feed









Masukkan alamat Feed yang ingin anda masukkan ke dalam blog anda.

Untuk Judul,anda bisa rubah sendiri sesuai keinginan.Misal,saya ingin menampilkan Post dan komentar terbaru dari http://pelajaran-blog.blogspot.com
Tinggal isi alamat :

  • http://pelajaran-blog.blogspot.com/feeds/posts/default
    untuk Post terbaru


  • http://pelajaran-blog.blogspot.com/feeds/comments/default
    untuk Komentar terbaru

Untuk alamat blog yang berwarna hijau,anda tentukan sendiri,posting maupun komentar terbaru dari blog yang anda inginkan.

Diposting oleh di Tidak ada komentar:
Label: , ,

Membuat Blog di Blogspot / Blogger


Blog yang sampai saat ini lagi naik daun adalah www.blogger.com

Untuk itu,kali ini kita akan membahas membuat blog dari Blogger.

  • Setelah anda masuk halaman www.blogger.com,anda akan di hadapkan tulisan yang cukup besar,contoh dalam versi Indonesia,bertuliskan " CIPTAKAN BLOG ANDA "klik

    bagian tersebut,kemudian,isilah Alamat Email dengan alamat email anda (lebih bagus jika anda sudah mempunyai Account di Google).

  • Masukkan password yang anda inginkan,isilah Nama Tampilan dengan nama yang ingin anda tampilkan,selanjutnya,klik "LANJUTKAN",Tuliskan judul blog pada form Judul Blog,selanjutnya tulis nama situs yang anda inginkan pada form Alamat Blog (URL),pilih "LANJUTKAN".

    Selanjutnya,pilih template (tipe halaman) yang anda inginkan, kemudian pilih "LANJUTKAN"

  • Jika semua yang anda lakukan sudah benar,akan tampil tulisan "Blog Anda telah di ciptakan".Pilih "MULAI POSTING".

**Nah !
Sekarang anda sudah mempunyai sebuah blog dan anda pada tahap ini sedang berada
dalam halaman Posting.**


Ada 2 tampilan dalam satu area posting di blogspot,yaitu halaman untuk compose/tulis dan halaman untuk HTML.


**Posting bisa berupa apa saja,mulai bisnis,curhat,narsis sampai kebutuhan biologi.Untuk tata cara posting anda bisa memanfaatkan icon-icon/toolbar di atas halaman posting itu sendiri,yang tak ubahnya seperti fungsi icon-icon/toolbar di Microsoft Word yang sudah kita kenal.

Diposting oleh di Tidak ada komentar:
Label: , ,

Kode HTML Image Background / Background berwarna


Anda ingin merubah warna bakground atau mengganti background blog anda menjadi sebuah gambar?
Anda hanya merubah kode warna background pada halaman html anda.

**Cara sederhana untuk mendapatkan kode warna,anda bisa ngutak-atik fitur dari blogger.di pengaturan Huruf dan Warna,disebelah kanan,tertera kode warna dari warna yang kita ingin pilih.

Mengingat hanya untuk keperluan utak-atik,bersihkan edit,untuk menyelamatkan warna blog anda.
Maksud saya,cara praktis untuk mendapatkan kode warna.

misal,

kode warna Merah adalah #FF0000

kode warna Biru adalah #0000FF,dsb.

Lalu yang dirubah untuk mengganti backgound blog kita,baris kode yang mana?

Nah!Pergi ke Dashboard blog anda,pilih Tata Letak.lalu pilih Edit html.
Cari kode seperti di bawah 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;
}
Nah!nah neh! nah neh !melulu,gmn sich !! :(

Lihat khan,kode yang berwarna hijau?nah!kode itu yang anda rubah sesuai keinginan anda.

Ada cara paling praktis,selain kode heksa anda juga bisa menuliskan warna dalam bahasa Inggris,seperti;Black,Yellow,Red,Green,dll tapi kelemahanya kita kurang bisa memaksimalkan warna yang benar-benar sesuai dengan warna blog kita.

Lalu,jika mau merubah menjadi background gambar gimana?
Untuk merubah background menjadi sebuah background bergambar,masih sama,kode yang anda rubah hanya kode yang berwarna hijau dalam contoh kode di atas.

Perbedaanya anda hanya menambahkan alamat gambar yang anda inginkan.Untuk lebih jelasnya,lihat kode di bawah ini :
body {
background:$bgcolor url('http://www.geocities.com/mohdrazali_200/Pemandangan2.jpg');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Sekali lagi,Nah! anda hanya cukup mengganti alamat http://www.geocities.com/mohdrazali_2006/Pemandangan2.jpg di atas,menjadi alamat gambar yang ingin anda kehendaki.
Diposting oleh di Tidak ada komentar:
Label: , ,

Meletakkan / Menambahkan Iklan di bawah posting


Anda ingin meletakkan iklan Adsense,AdBrite,maupun kode iklan lain ke dalam blog persis di bawah posting?
Ada cara mudah meletakkan kode iklan seperti iklan AdSense tepat di bawah postingan,tapi inget ya,Untuk Adsense,ini berlaku untuk Adsense for Content.

Tapi,sebelumnya,anda sudah menggunakan fitur Read more../Selengkapnya..atau yang sejenis dalam body posting ya..jika belum anda buat,buatlah dulu,baca panduannya disini
Jika body posting sudah di buat Read more../Selengkapnya..tinggal masuk permasalahanya.Jika anda mempunyai kode Adsense for Content,seperti contoh :

<script
type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxx";
google_ad_slot = "0976076963";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
type="text/javascript">
</script>

Sebelum kode diletakkan,parse dulu kode tadi,misal penulisan tanda <,di ganti dengan &lt;
Lihat keterangan di bawah ini untuk membantu :

< notasinya : &lt;

> notasinya : &gt;

& notasinya :&amp;

" notasinya :&quot;

± notasinya : &plusmn;

Spasi notasinya :&nbsp;

Maka,dalam contoh disini,kode Adsense diatas,jika sudah di parse,akan menjadi seperti di bawah ini :
&lt;script
type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-xxxxxxxxxxx&quot;;
google_ad_slot = &quot;0976076963&quot;;
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
&lt;/script&gt;
&lt;script
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;
type=&quot;text/javascript&quot;&gt;
&lt;/script&gt;
Ingat ya,kode diatas ini hanya sebagai contoh saja.Yang anda harus parse adalah kode dari iklan Adsense,AdBrite atau kode iklan yang lain milik anda,yang akan di letakkan di bawah posting nantinya.

Selain memparsekan kode secara manual,sekarang banyak kok software yang sudah menyediakan fitur untuk parse
kode otomatis,seperti yang ini.

Setelah di parse,buka Notepad,dan copy paste kode yang sudah di parse tadi ke dalam Notepad.(jangan disimpan,hanya numpang kode saja),biarkan,jangan ditutup dulu Notepadnya ya..


Sekarang pergi ke Dashboard---->Tata Letak----->Edit Html---->Centang Expand Template Widget
Cari kode atau yang hampir sama dengan kode di bawah ini (kode untuk Read more..yang sudah anda buat) :

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

Jika sudah ketemu,copy paste kode iklan yang sudah anda parse tadi (yang ada di Notepad tadi),dan letakkan di bawah kode yang berwarna hijau di atas.


Maka hasilnya kurang lebih akan seperti di bawah ini :

<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<br /> <br />
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-xxxxxxxxxxx&quot;;
google_ad_slot = &quot;0976076963&quot;;
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
&lt;/script&gt;
&lt;script
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;
type=&quot;text/javascript&quot;&gt;
&lt;/script&gt;
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Kode yang berwarna biru,<br /> <br />,fungsinya hanya memberi jarak saja.

Simpan.

Selesai!
Diposting oleh di Tidak ada komentar:
Label: , ,

Senin, 02 Februari 2009

Membuat Bingkai Photo Profil pada Blog


Banyak blogger yang biasa memampang photo profil mereka,meski banyak juga
yang menyembunyikan identitas mereka.Untuk anda yang ingin memodifikasi border
dari photo profil,cari kode berikut pada halaman html anda :

.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}

Anda hanya disuruh merubah tebal bordernya (yang berwarna hijau ),setelah anda rubah,maka menjadi seperti di bawah ini :

.profile-img img {
float:left;
padding:4px;
border:8px solid #ddd;
margin:0 8px 3px 0;
}

Ukuran,sesuai keinginan anda.
Mudah khan ?
Diposting oleh di Tidak ada komentar:
Label: , ,

Menghilangkan Angka pada Label Blog


Label,yang telah di sediakan oleh Blogspot,secara otomatis akan menampilkan nomor di
belakang label tersebut,seperti :

Makan(2)


Minum(1)


Mandi(6)


Ternyata,jika anda ingin menghilangkan angka/nomor di belakang label tersebut,hanya dengan menghapus satu baris kode saja di halaman HTML anda.Maksud saya,coba anda :


Pilih Tata Letak (Blogspot berbahasa Indonesia) Tab Edit HTML

Kemudian centang Expand Template Widget.


Kemudian cari Kode seperti di bawah ini.

Gunakan Ctrl + F untuk mempermudah pencarian.

(<data:label.count/>)

Setelah ketemu,hapus kode tersebut dan Simpan Template.


Selesai dech! tinggal lihat hasilnya.


Simple khan? :)
Diposting oleh di Tidak ada komentar:
Label: , ,

Menghilangkan/Menghapus tulisan Subscribe to / Langganan Posting Atom


Anda bingung ketika ingin menghapus tulisan Subscribe to / Langganan Posting Atom,pada halaman blog anda?

Coba dech! yuk !


Pergi ke Dashboard--->Tata Letak--->Edit Html--->centang Expand Widget Template

Sekarang cari kode berikut :

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

Jika sudah ketemu,Hapus kode tadi lalu Simpan Template.
Selesai !
Diposting oleh di Tidak ada komentar:
Label: , ,

Membuat Read more../Selengkapnya../Baca selanjutnya..


Sebenarnya sebelum posting tentang Cara membuat read more../selengkapnya..ini dipublikasikan,saya sudah mosting dengan artikel yang sama,tapi..

Ada keluhan dari temen saya Cemy,di http://www.cemyanca.com/ ,bahwa Cara membuat read more../selengkapnya.. tidak berjalan dengan baik.Setelah aku lihat lagi,O iya..ternyata kode itu akan berfungsi untuk template Blogger yang lama..#$@#$ !Pelajaran Blog

Tapi,setelah muter2 ternyata nemu artikel yang sama dan di jamin manjur !Pelajaran Blog

Sebenarnya,artikel ini sudah lama di publikasikan oleh blogger senior,yang telah malang melintang di dunia bokep,..

Eits !!! maksudnya dunia Blogger

Ternyata,untuk membuat read more../selengkapnya.. sangat sederhana banget !!!

  • Pertama,anda hanya disuruh pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Tab Edit HTML.
  • Centang bagian check box tulisan Expand Template Windget.

Cari kode <data:post.body/> ,untuk mempermudah pencarian,tekan CTRL+F pada keybord dan tuliskan kode tersebut,nanti akan terdeteksi secara otomatis (terdeteksi? secara.. #$@) Pelajaran Blog

Jika anda sudah menemukan kode <data:post.body/>,hapus kode tersebut, dan ganti dengan kode berikut :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>
Jika sudah anda ganti,Simpan Template,Eit's blom selesai loh !
Langkah selanjutnya,pergi ke Dashboard,lalu pilih Pengaturan,selanjutnya pilih Format.
Lalu tuju tulisan Template Posting,lau tuliskan kode berikut :
<span class="fullpost">
</span>
Setelah itu Simpan.Apakah dah Selesai ? Ya.
Kode tersebut sebenarnya hanya untuk mempermudah penulisan saat posting,maksudnya ?
Saat anda hendak posting baru,pada kolom Edit HTML,bukan di Tulis (saat posting ada 2 pilihan halaman khan?)

Kode tersebut,akan keluar secara Otomatis.
Anda tinggal memasukkan artikel mana yang ingin di tampilkan pada haman depan,dan mana halaman yang untuk selanjutnya.
Untuk tata caranya lihat ilustrasi di bawah ini :

Saya membuat posting baru,dan saya menulisnya di kolom Edit HTML bukan di Tulis / Compose.
Saat membukanya ada tulisan :

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

Saya,akan menuiskan sebagai berikut :

Saya orang paling ganteng di Dunia ini
<span class="fullpost">
Dan saya juga orang yang terkenal.
</span>

Maka,setelah saya publikasikan akan menjadi seperti ini :

Saya orang paling ganteng di Dunia ini
Read More../Selengkapnya..

Sepertinya sudah sangat jelas sekali ya...Pelajaran Blog

Baca Juga Yang Ini..

Diposting oleh di Tidak ada komentar:
Label: , ,

Refresh dan Redirect (Otomatis)


Sebelumnya saya pernah memposting tentang Refresh secara otomatis.
Kali ini saya akan membahas tentang Redirect.

Jika anda mempunyai alamat blog yang sudah lama tidak diaktifkan,namun sudah banyak orang yang mengenal,bahkan search enginepun sudah kenal dekat,sedangkan sekarang anda sudah mempunyai situs baru,yang belum begitu di kenal.

Anda bisa meletakkan kode di bawah ini pada situs lama anda,yang nantinya,setiap pengunjung yang datang ke blog yang lama,dalam waktu kurang satu detik akan di bawa ke situs yang baru.

Kodenya seperti di bawah ini (anda tulis pada blog yang lama)

<META HTTP-EQUIV='refresh' content='10;URL=http://TULIS
URL YANG AKAN DITAMPILKAN SETELAH WAKTU DITENTUKAN'/>
Anda cukup menempatkan kode tadi di antara <head> dan </head>
Sedangkan untuk Refresh otomatis,sekali lagi saya tuliskan di bawah ini :
<META HTTP-EQUIV='refresh' content='10;URL=http://Tulis
URL Blog Anda'/>
Sekali lagi anda cukup menempatkan kode tadi di antara <head> dan </head>

Waktu/Time refresh anda rubah baris kode yang bercetak tebal.Pada contoh diatas saya memakai 10 detik untuk setiap Refresh,itu berarti setelah 10 detik,halaman akan refresh atau pindah alamat url blog yang lain secara otomatis.
Diposting oleh di Tidak ada komentar:
Label: , ,

Mengatur dan Merubah Ukuran Template Blog


Dari blogger,memang sudah di tentukan template khusus blogger,namun tak dipermasalahkan jika anda mendownload template baru untuk blogspot.

Di template blogger sendiri,juga tak di permasalahkan alias tak mengurangi etika hak cipta blogger jika kita merubah ukuran baik itu lebar tinggi bahkan memodifikasi secara keseluruhan dari template yang blogger berikan.

Untuk merubah lebar,baik itu main wrapper atau tempat posting,maupun sidebar bahkan header.


Coba pilih Dashboard pada blogspot anda,pilih Tata Letak dan pilih Edit Html.
Selanjutnya,anda akan menemukan baris kode yang serupa dengan kode di bawah ini:

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}


#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}


#sidebar-wrapper {
width: 220px;
float: right;
}


#newsidebar-wrapper {
width: 200px;
float: left;
}

Kode yang bercetak berwarna hijau,merupakan ukuran lebar dari masing-masing komponen blog,yang anda bisa merubahnya sesuai keinginan.


Hanya sebagai contoh saja,untuk yang lain misal float,padding,dll anda juga bisa merubahnya sesuai keinginan.


Untungnya,sekarang di blogger,sebelum kita menyimpan template yang ingin kita rubah,kita bisa melihat previewnya alias hasil contoh perubahannya,yang jika kita kurang cocok masih bisa kita batalkan dengan memilih "Bersihkan Edit"(untuk blog berbahasa indonesia).


Jadi ukuran lebar dari kolom template anda bisa anda utak-atik sampai anda menginginkan template seperti apa yang anda inginkan.


Diposting oleh di Tidak ada komentar:
Label: , ,

Membuat Posting / Artikel pada Blog


Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel kedalam blog, maka kali ini akan di bahas tentang tata cara posting di blogger.com.

Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.
Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung.

Toolbar yang ada ketika posting :


--> Untuk merubah jenis hurup yang di gunakan


--> Untuk merubah ukuran hurup (heading)


--> Untuk Menebalkan hurup


--> Untuk memiringkan hurup


--> Untuk merubah warna hurup


--> Untuk membuat link


--> Untuk membuat artikel menjadi rata kiri


--> Untuk membuat tulisan menjadi di tengah


--> Untuk membuat artikel menjadi rata kanan


--> Untuk membuat artikel menjadi rata kiri dan rata kanan


--> Untuk membuat sub bahasan oleh angka


--> Untuk membuat sub bahasan oleh bullet


--> Untuk mengecek spelling


--> Untuk memasukan gambar(upload gambar)


--> Untuk membuat artikel dalam kode HTML


--> Untuk membuat artikel dalam mode Compose (biasa)


--> Untuk me review (melihat) artikel

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan
yang akan di edit, kemudian tekan tombol toolbar yang di inginkan.

Langkah-langkah dalam memposting suatu artikel:

Sebaiknya klik terlebih dahulu " Edit HTML",jika langsung di mode "Compose/Tulis", sering terjadi hang pada komputer (pengalaman saya pribadi).

Copy artikel yang telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan kemauan anda.

Klik tombol "Compose / Tulis " untuk melakukan editing (jika anda masih bingung dengan kode HTML).


Klik tombol tool yang berlambang " panorama" berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi postingan anda.


Klik tombol " Preview " untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.


Klik tombol " Publish ".


Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.


Postingan ini 100% saya ambil dari artikel kolom-tutorial.blogspot.com"Cara Memposting Artikel" Jumat, April 20, 2007.

Diposting oleh di Tidak ada komentar:
Label: , ,

Membuat Screenshot / Snapshot pada Blog


Menghias blog emang ga ada matinya ya?contoh lagi nich! membuat screenshot link maupun blog.

Pernah mengunjungi situs atau link yang jika mouse berada di atasnya,akan timbul halaman kecil,yang merupakan preview dari link itu sendiri?

Nah!itu screenshot kata temenku.

Untuk membuatnya cuman ngunjungin salah satu situs yang mau nyediain jasa begituan,
kita ambil contoh http://www.snap.com.

Anda tinggal,main kesitusnya,pilih Get Started Now,ikuti langkah-langkah berikutnya dengan benar.

PR aja ya..

Semoga bermanfangat!! :)

Diposting oleh di Tidak ada komentar:
Label: ,

Membuat Fitur Download


www.SnapDrive.net adalah penyedia jasa link download,
Maksudnya,jika anda ingin meletakkan suatu link dalam blog,dan ingin pengunjung mendownload dari blog anda.

Kita mempunyai penampungan file untuk itu,coba dech Register disini
Setelah mempunyai Account dan anda telah mengupload file,baik itu berupa file zip,video,maupun gambar,anda akan mendapatkan kode Html dengan memilih Details pada saat anda baru selesai Upload.

Nah!Kode itu,lalu letakkan di mana yang anda suka,bisa di letakkan di Postingan maupun halaman baru html.

Contoh kode yang diberikan :

<a href="http://www.snapdrive.net/files/452360/Belajar%20Blog.zip">Belajar
Blog.zip</a>
Tulisan yang berwarna hijau,anda bisa rubah menjadi "Download" atau "Download Disini".

Untuk Hasilnya,lihat aja sendiri.

PR .. :)
Diposting oleh di Tidak ada komentar:
Label: , ,

Membuat Iklan Popup


Pernahkah anda saat membuka sebuah situs,dan secara tiba-tiba ada jendela baru muncul yang tidak pernah kita inginkan?
Biasanya,jendela baru itu berupa iklan,baik itu alamat situs baru maupun iklan berupa gambar maupun animasi.

Nah!iklan yang seperti itu,orang menyebutnya sebagai iklan Popup.

Kelemahan kita meletakkan Iklan Popup pada halaman blog kita,akan memperlambat
koneksi,disamping itu,tidak semua browser bisa mendukung Popup ini.

Tapi,jika anda ingin mencobanya,saya mempunyai beberapa baris kode yang bisa anda coba.
Anda juga bisa mendownload di http://www.popupgenerator.com.

Di bawah ini kode yang ingin saya sampaikan powered by http://www.popupgenerator.com loh!bukan hasil kreasi saya sendiri.

Pilih Tata Letak pada blogspot----->Edit Html.
Letakkan kode di bawah ini di bawah kode <head> pada halaman html anda :

<SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>
<!--
/****************************************************
Created With: PopupGenerator
URL: http://www.popupgenerator.com
****************************************************/
var win=null;
function NewWindow(mypage,myname,w,h,pos,infocus){
if(pos=="random"){myleft=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;mytop=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){myleft=(screen.width)?(screen.width-w)/2:100;mytop=(screen.height)?(screen.height-h)/2:100;}
else if((pos!='center' && pos!="random") || pos==null){myleft=0;mytop=20}
settings="width=" + w + ",height=" + h + ",top=" +
mytop + ",left=" + myleft + ",scrollbars=yes,location=yes,directories=yes,status=no,menubar=no,toolbar=no,resizable=yes";win=window.open(mypage,myname,settings);
win.focus();}
// -->
</SCRIPT>
Selanjutnya,hapus kode <body> pada html blog anda,dan gantilah dengan kode di bawah ini :

<body onLoad='NewWindow("http://geliat-bisnis.blogspot.com/","bisnis",

"500","400","left","front");'>

Lalu simpan template anda,dan lihat hasil eksperimen anda.

Untuk kode yang bercetak warna hijau,adalah kode yang bisa anda rubah.

PR,,lebih baik anda coba dulu,dan anda akan tahu apa fungsi masing-masing dari
kode yang bercetak warna hijau.

Selamat bereksperimen !!!

Diposting oleh di Tidak ada komentar:
Label: ,

Membuat Text Area blok Otomatis


Anda pasti pernah khan mengunjungi suatu situs yang memberikan sebuah kode html,seperti kode Adsense,dll.
Ya,kode akan terblok sendiri,hanya dengan menggerakkan mouse diatas bidang kodenya.
Untuk contohnya lihat di bawah ini :


Ya,khan? ngblok otomatis.
Untuk kodenya kopi paste di bawah ini :

<div>
<form name="PujiantoroStyle">
<p align="left" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 184; height: 120" name="txt" rows="100" cols="55" onmouseover="this.form.txt.select()" readonly ;>
TEXT ANDA DISINI</textarea></p>
</form></div>

Selamat mencoba :)
Diposting oleh di Tidak ada komentar:
Label: , , ,
Langganan: Postingan (Atom)