Minggu, 11 Desember 2011

Belajar BlogCara Menampilkan kode pada artikel


Hallo! semuanya!
Lagi musim naikin Page Rank maupun Traffic,kita harus rajin mosting..betul ga?
Meskipun postingan banyak yang Tong kosong nyaring bunyinya yang penting bermanfaat.

Meletakkan kode di dalam postingan,sebenarnya hanya masalah penyesuaian saja,maksudnya,agar sang blog
tidak dibikin bingung,makanya kode yang ingin kita tampilkan pada postingan harus di parse dulu.

Apa jadinya kalau tidak di Parse?

Jika kode yang ingin kita tampilkan tidak di parse terlebih dahulu,maka saat kita akan mempublikasikan,akan ada peringatan kesalahan format dan bahkan kode tidak tampil,sekalipun berhasil di publikasikan,betul ga?Pelajaran Blog
Untuk mengantisipasinya ya hanya memparse kodenya.

Parse ! Parse ! apaan sich ?

Parse menurut saya pribadi,ya hanya mengganti karakter kode menjadi notasi lain,misal :
Untuk tanda-tanda di bawah ini :

  • < notasinya : &lt;
  • > notasinya : &gt;
  • & notasinya : &amp;
  • " notasinya : &quot;
  • ± notasinya : &plusmn;
  • Spasi notasinya : &nbsp;

Contoh:
Saya ingin menampilkan kode <body> pada posting,maka saya saat memosting harus menuliskan &lt;body&gt;.Jelas khan ?Pelajaran Blog

Contoh lain,saya ingin pembaca mengcopy kode berikut :

<html>
<head>
</head>
<body>
<a href="http://pelajaran-blog.blogspot.com/">Klik Disini</a>
</body>
</html>

Maka,saya dalam memposting harus menuliskan sebagai berikut :

&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href=&quot;http://pelajaran-blog.blogspot.com/&quot;&gt;Klik Disini&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;

sekian teman.. ahahaha!

Sabtu, 10 Desember 2011

Belajar BlogCara 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 ?

Belajar BlogCara 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!

Belajar BlogCara Background berwarna / Image Background


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.

Belajar BlogCara 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.

Belajar BlogCara Membuat Disable Right Click / Anti Klik Kanan


Membuat fungsi klik kanan nonactive/disable right click,sangat cocok memang untuk menjaga document atau memproteksi gambar yang ada di blog kita,agar tidak disalah gunakan oleh pihak lain.
Meski ada shortcut tertentu yang mewakili perintah-perintah right click,nggak ada salahnya anda mencoba kode di bawah ini :

<script>
<!--
//for legal,don't delete this warn.This code is created by pelajaran-blog.blogspot.com
var message="Maaf!Lagi nggak boleh Klik Kanan ya!";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>


Cukup menempatkan kode di atas diantara

<body> dan </body>

Untuk tes melihat hasilnya,Pilih Folder Option pada komputer anda,pilih View,kosongkan check box pada Hide Extensions For Known Filetypes pilih Ok.

Copy kode diatas kedalam Notepad,Save beri nama "coba"yang hasil filenya menjadi "coba.txt".
Ganti nama file tersebut menjadi "coba.htm",selanjutnya klik kanan.

Siip khan ?

Kode ini berfungsi baik,jika di akses di IE dengan Javascript posisi Enable.

Belajar BlogCara 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

Belajar BlogCara 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




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

Belajar BlogCara Membuat Daftar Isi pada Blog



 judul artikel pelajaran kali ini,kita akan membuat Daftar Isi Pada Blog,contohnya anda sudah bisa melihat Daftar Isi pada Blog ini.

Sebelumnya,dari mana saya dapat artikel ini? ya..dari senior kita semua tentunya,
Kang Rohman
di Blog Tutorialnyanya.
Siapa sich yang belum pernah berkunjung ke Blog nya?Isi dari Daftar Blog

Meskipun demikian,Pelajaran Blog,tanpa mengurangi etika sopan santun Blogging,akan menjabarkan lagi,bagaimana sich membuat Daftar Isi pada Blog.

Langkah pertama,Pergi Dashboard lalu pilih Tata Letak,selanjutnya pillih Edit HTML.
Selanjutnya,beri contreng Partai pilihan kamu,..

Hus ! bukan maksudnya,contreng tulisan Expand Widget Template,seperti di bawah ini :

Daftar Isi Dibuat

Selanjutnnya,cari kode di bawah ini:

<b:include data='post' name='post'/>

Untuk mempermudah pencarian,tekan Ctrl+F pada Keyboard anda,pakai keyboard khan?
Setelah ketemu kode diatas,Hapus kode tersebut,lalu ganti dengan kode di bawah ini :

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px
5px;border-right:1px solid
#ccc;border-bottom:1px solid
#ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


Lalu Simpan Template.

Apakah dah selesai?

Ya belum dong! Kalau dah selesai,gimana caranya bisa ngliat daftar isi blog?

Nah! Untuk melihat Daftar Isi Blog,kita harus membuat Link terlebih dahulu,yang mana saat link di klik akan menuntun kita ke halaman khusus Daftar Isi tersebut.

Anda bisa menggunakan seperti contoh di bawah ini:

Untuk link berupa text:


Daftar Isi Blog

Anda bisa gunakan kode berikut :

<a href="http://NAMABLOGANDA.blogspot.com/search?max-results=100">Daftar Isi Blog</a>

Untuk Link berupa form:




Anda bisa gnakan kode berikut :

<form action="http://NAMABLOGANDA.blogspot.com/search?max-results=100" target="_blank"><input value="Daftar Isi Blog" type="submit"></form>

Jangan lupa! kode yang berwarna merah,tuliskan alamat Blog anda sendiri.

Sebenarnya,masih banyak pilihan yang bisa anda buat link untuk Daftar Isi Blog,caranya hanya dengan menambahkan Element Baru/Add New Widget dan pilih HTML/Javascript lalu tuliskan kode link pilihan anda (anda bisa memakai contoh di atas).

Lalu apa arti tulisan "100" yang berwarna hijau di atas ?
Angka "100" pada kode diatas,menentukan berapa jumlah judul yang akan di tampilkan untuk Daftar Isi tiap halaman,klo saya menuliskan "50",ya nantinya akan ada "50" judul yang akan di tampilkan pada setiap halamannya.

Udah jelas khan?Pelajaran Blog

Belajar BlogCara Disable Copy dan Paste pada IE

Sebelumnya,saya juga pernah memposting tentang Disable Right Click,nah kali ini kita akan membahas Disable Copy dan Paste,suatu halaman Blog,meskipun ini hanya bekerja baik pada Browser Internet Explorer (IE)

Jika kita sedang membutuhkan suatu artikel dari sebuah Blog,dan ingin mengcopy artikel tersebut,tapi !!234@!
Kok nggak bisa ya..??Pelajaran Blog
Nah sebenarnya teknik semacam itu hanya menyelipkan beberapa kode pada :

<body>

Maksudnya?
Coba anda pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Edit HTML.
Cari kode berikut:

<body>

Jika sudah ketemu,hapus kode tersebut dan ganti menjadi seperti di bawah ini:

<body ondragstart="return false;" onselectstart="return false;" oncontextmenu="return false;">

Lalu Simpan.

Untuk melihat hasilnya,silahkan buka halaman blog anda pada browser IE,dan coba blok artikel anda,apa yang terjadi?







Pelajaran Bloghttp://pelajaran-blog.blogspot.com/2009/03/disable-copy-dan-paste-pada-ie.html

Belajar BlogCara Menampilkan kode pada artikel


http://pelajaran-blog.blogspot.com/2009/03/menampilkan-kode-pada-artikel.html
Hallo! Update lagi nih! Pelajaran Blog
Lagi musim naikin Page Rank maupun Traffic,kita harus rajin mosting..betul ga?
Meskipun postingan banyak yang Tong kosong nyaring bunyinya yang penting bermanfaat.

Meletakkan kode di dalam postingan,sebenarnya hanya masalah penyesuaian saja,maksudnya,agar sang blog
tidak dibikin bingung,makanya kode yang ingin kita tampilkan pada postingan harus di parse dulu.

Apa jadinya kalau tidak di Parse?

Jika kode yang ingin kita tampilkan tidak di parse terlebih dahulu,maka saat kita akan mempublikasikan,akan ada peringatan kesalahan format dan bahkan kode tidak tampil,sekalipun berhasil di publikasikan,betul ga?Pelajaran Blog
Untuk mengantisipasinya ya hanya memparse kodenya.

Parse ! Parse ! apaan sich ?

Parse menurut saya pribadi,ya hanya mengganti karakter kode menjadi notasi lain,misal :
Untuk tanda-tanda di bawah ini :

  • < notasinya : &lt;
  • > notasinya : &gt;
  • & notasinya : &amp;
  • " notasinya : &quot;
  • ± notasinya : &plusmn;
  • Spasi notasinya : &nbsp;

Contoh:
Saya ingin menampilkan kode <body> pada posting,maka saya saat memosting harus menuliskan &lt;body&gt;.Jelas khan ?Pelajaran Blog

Contoh lain,saya ingin pembaca mengcopy kode berikut :

<html>
<head>
</head>
<body>
<a href="http://pelajaran-blog.blogspot.com/">Klik Disini</a>
</body>
</html>


Maka,saya dalam memposting harus menuliskan sebagai berikut :

&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href=&quot;http://pelajaran-blog.blogspot.com/&quot;&gt;Klik Disini&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;


Parse kode,..bener ga sich artinya kaya' gitu ? Gubrak !Pelajaran Blog

Belajar BlogCara Membuat Area Text Serasa 3 Dimensi


http://pelajaran-blog.blogspot.com/2009/04/membuat-area-text-serasa-3-dimensi.html
Membuat area text,bukan membuat text area,text area anda bisa baca disini.
Tapi yanhg akan kita bicarakan pada topik kali ini adalah membuat bidang/tempat area text seolah 3 Dimensi.



Saya lagi belajar Membuat Area Text Serasa 3 Dimensi

Caranya sangat mudah sekali,ya..kita memerlukan bantuan CSS.Maksudnya?
Pertama,anda pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Edit HTML.
Setelah itu cari kode:



<head>


jika sudah ketemu,letakkan kode berikut persis di bawah kode tersebut :


<style type='text/css'>
#tigadimensi{
background: #E8E8E8;
margin: 15px;
font-family:arial;
font-size:13px;
text-align:justify;
padding: 10px 15px 10px 15px;
border-top: 1px solid #DDDDDD;
border-right: 1px solid #666666;
border-left: 1px solid #DDDDDD;
border-bottom: 1px solid #666666;
}
#post
tigadimensi{
margin:.75em 0;
}
</style>


Setelah itu Simpan Template.
Selanjutnya,pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya tambah element baru,atau bisa juga langsung posting ke posting area,tuliskan kata yang ingin anda tampilkan nanti,gunakan kode berikut :

<div id='
tigadimensi'>Text Anda Disini
</div>

Simpan,dan lihat Hasilnya !

Belajar BlogCara Menghias Text Area pada Blog

http://pelajaran-blog.blogspot.com/2009/04/menghias-text-area-pda-blog.html


Setelah posting tentang membuat meta y_key dan meletakkan sebuah object gambar sebelum Judul post pada blog beberapa hari lalu,pelajaran kali ini kita akan membahas tentang bagaimana belajar tentang menghias text area pada blog.

Bagi yang belum tahu bagaimana cara membuat text area,anda bisa baca di membuat text area(3 macam) pada artikel blog ini.

Maksudnya menghias text area?


Ya,utuk meletakkan sebuah kode pada artikel,biasanya kita memakai sebuah text area yang berbentuk form,meskipun Pelajaran Blog jarang menggunakan area jenis ini (ribet,he..).

Contoh text area biasa seperti ini :



dengan kode seperti ini :

<form name="contohtextarea"><textarea name="txt" rows="3" cols="30" readonly>Text Anda Disini</textarea></form>

**rows dan cols menentukan ukuran text area,disitu anda edit sesuai keinginan anda.

Tapi jika anda menginginkan sebuah form area kode yang berbeda,anda bisa coba contoh-contoh text area di bawah ini:

Menghias Text Area Contoh #1



Text area di atas:
Background berwarna kuning
Border berwarna biru (dot)
Warna Text Merah
Text bergaris bawah
    Untuk kodenya copy kode di bawah ini :

    <form><textarea rows="3" cols="30" background-color="green"
    style="color: red; background-color: yellow; text-decoration: underline; border-style: dotted; border-color: blue">Text Anda Disini</textarea>
    </form>

    Menghias Text Area Contoh #2



    Text area di atas:
    Background berwarna Hijau
    Border berwarna Kuning (solid)
    Text Huruf Besar (Uppercase)
    Warna Text Putih
      Untuk kodenya copy kode di bawah ini :

      <form><textarea rows="3" cols="30" style="color: white; background-color: green; text-transform: uppercase; border-style: solid; border-color: yellow">Text Anda Disini</textarea></form>

      Menghias Text Area Contoh #3



      Text area di atas: 
      Background berwarna Biru
      Border berwarna Merah (solid)
      Text Tanpa bergaris bawah
      Warna Text Kuning
        Untuk kodenya copy kode di bawah ini :

        <form><textarea rows="3" cols="30" style="color: yellow; background-color: blue; border-style: solid; border-color: red" >Text Anda Disini</textarea></form>

        Menghias Text Area Contoh #4



        Text area di atas:
        Background berwarna Hijau
        Border berwarna gray/abu-abu(solid)
        Warna text Putih dan berhuruf tebal
        Kode terinstall/terblok otomatis
          Untuk kodenya copy kode di bawah ini :

          <form name="contohtextarea"><textarea name="txt" rows="3" cols="30" onmouseover="this.form.txt.select()" readonly ; style="color: white; background-color: green; font-weight: bold; border-color:gray">Text Anda Disini</textarea></form>

          Untuk jenis-jenis yang lain anda bisa modif sendiri,selamat mencoba ya:)

          Belajar BlogCara Memanfaatkan Fungsi Scroll untuk Daftar Artikel



          http://pelajaran-blog.blogspot.com/2009/04/memanfaatkan-fungsi-scroll-untuk-daftar.html
          Beberapa hari nggak online/update blog,saat lihat komentar ada temen kita menanyakan sambil belajar bagaimana membuat fungsi scroll seperti pada sidebar seperti disamping blog ini.
          Kira-kira komentar itu seperti ini :

          mas, salam kenal. aku penasaran gimana cara buat kotak yang kayak the most popular post, membuat blog di blogger yang ada di kanan postingan itu lho. mohon bimbingannya.

          Untuk itu mumpung lagi ada waktu,sekarang kita kita bahas menghias blog dengan memanfaatkan fungsi scrollbar ya..:)
          Untuk lebih relevan,sebaiknya diletakkan pada sidebar.Untuk hasil contohnya seperti ini:


          Lalu Simpan. Selesai.

          **Jika anda ingin membuat satu kolom saja,tinggal hapus kode yang berwarna hijau di atas.
          CSS,memang sangat membantu ya.. :)

          Belajar BlogCara Membuat Tabel Untuk Kolom Navigasi


          Tabel Kolom Navigasi

          http://pelajaran-blog.blogspot.com/2009/07/membuat-tabel-untuk-kolom-navigasi.html

          Membuat Tabel Untuk Kolom Navigasi.Meskipun sebelumnya saya pernah memposting tentang bagaimana membuat menu navigasi dengan css tidak ada kapoknya saya masih memposting tentang hal dan tutorial yang sama,hanya saja kali ini berbeda sedikit.

          Ya,memanfaatkan tabel untuk navigasi berkolom pada blog,oleh sebab itu dari pada saya bingung ngasih judulnya,saya tulis aja ’Membuat Tabel untuk Kolom Navigasi’,nyambung khan?

          Nah untuk contohnya,anda bisa lihat menu navigasi pada www.indowebster.com.
          untuk lebih jelasnya bagi pengguna blogger/blogspot,simak langkah-langkah di bawah ini:

          Pertama,pergilah ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Edit HTML.
          Jangan lupa contreng tulisan Expand Widget Templates,lalu cari kode berikut:

          </head>

          Setelah ketemu,letakkan kode di bawah ini tepat di atas kode tersebut.

          <script type="text/javascript" src=""></script>
          <style type="text/css">
          #ddblueblockmenu{
          border: 1px solid black;
          border-bottom-width: 0;
          width: 240px;
          }
          #ddblueblockmenu ul{
          margin: 0;
          padding: 0;
          list-style-type: none;
          font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
          font-size: 12px;
          }
          #ddblueblockmenu li a{
          display: block;
          padding: 3px 0;
          padding-left: 9px;
          width: 224px; /*185px minus all left/right paddings and margins*/
          color: white;
          font: bold 70% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
          font-size: 11px;
          background-color: #2175bc;
          border-bottom: 1px solid #90bade;
          border-left: 7px solid #1958b7;
          }
          * html #ddblueblockmenu li a{ /*IE only */
          width: 230px; /*IE 5*/
          width: 224px; /*185px minus all left/right paddings and margins*/
          }
          #ddblueblockmenu li a:hover {
          background-color: #2586d7;
          border-left-color: #1c64d1;
          }
          #ddblueblockmenu li a:visited {
          background-color: #2586d7;
          border-left-color: #1c64d1;
          }
          #ddblueblockmenu div.menutitle{
          color: white;
          border-bottom: 1px solid black;
          padding: 1px 0;
          padding-left: 5px;
          background-color: black;
          font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
          font-size: 13px;
          }
          </style>
          <style>
          .thumb {
          padding: 2px;
          height: 85px;
          width: 100px;
          margin-top: 0px;
          margin-right: 8px;
          margin-bottom: 0px;
          margin-left: 0px;

          }
          a {
          color: #0033CC;
          text-decoration: none;
          }
          a:hover {
          color: #011e42;
          text-decoration: none;
          }
          </style>


          Setelah itu Simpan Template.
          Langkah selanjutnya,Pergi ke Dashboard,lalu pilih Tata Letak,kemudian Tambahkan Gidget Baru/Add New Widget,pilih HTML/Javascript,lalu letakkan kode berikut:

          <script type="text/javascript"></script><table bordercolor="#000000" width="100" bordercolorlight="#00FF00" bordercolordark="#006600" bgcolor="#006600"><tr><td valign="top" width="230" bordercolorlight="#008000" bordercolordark="#00FF00" height="313"><div id="ddblueblockmenu" style="width: 100; height: 20"><font face="Verdana" color="#FFFFFF" font size="2"><marquee width="211" height="22" align="middle">Disini Tulisan Yang Nanti Akan Berjalan</marquee></font><div style="width: 223; height: 20" class="menutitle"><li>JUDUL KOLOM KE 1</li></div><ul><li><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 1</font></a><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 1</font></a><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 1</font></a></li></ul><div style="width: 223; height: 18" class="menutitle"><li>JUDUL KOLOM KE 2</li></div><ul><li><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 2</font></a><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 2</font></a><a href="#" target="_self" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 2</font></a></li></ul><div style="width: 223; height: 19" class="menutitle"><li>JUDUL KOLOM KE 3</li></div><ul><li><a href="#" target="_blank" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 3</font></a><ul><li><a href="#" target="_blank" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 3</font></a><a href="#" target="_blank" title="Tooltip Yang Nanti Akan Muncul"><font color="#000000">Edit Me Kolom 3</font></a></li></ul></li></ul></div><center><a href="http://Alamat_Blog_Anda.blogspot.com/" title="Home"><font face="Verdana" color="#FFFFFF" font size="2">HOME</font></a></center></td></tr></table>

          Setelah itu Simpan dan Selesai.
          Agar blog lebih rapi tempatkan widget tersebut pada sidebar blog anda.


          ’Sengaja kode diatas saya jadikan satu(jadi kesannya berantakan ya :D),agar hasil dari copynya sesuai dengan harapan.’

          Ket:

          Untuk lebih jelasnya,hasil dari kode diatas akan menjadi seperti dibawah ini:



          Belajar BlogCara membuat Popup


          Membuat Popup? nggak ah!

          http://pelajaran-blog.blogspot.com/2009/04/membuat-popup-dengan-ukuran-tertentu.html

          Tunggu dulu,pelajaran ini tidak ada kaitannya dengan Membuat Popup Iklan yang sering membuat orang jengkel dan bahkan tak jarang visitor enggan untuk berkunjung kembali.

          Tapi,kali ini kita mencoba iseng belajar menghias blog dengan tampilan jendela baru dengan ukuran sesuai yang kita inginkan.

          Jika Iklan popup kebanyakan memaksa visitor untuk melihat suatu pesan dari author,tapi disini kita hanya menawarkan visitor untuk melihatnya.

          **Ukh! beberapa hari terakhir,aku lagi nggak semangat memposting artikel tentang blog (lg ga enak badan dan ga ada bahan,he..)so,..#%#$!

          OK! Langsung ke topik,popup dengan ukuran yang kita tentukan sendiri,meskipun sekali lagi,ini berfungsi di Mozilla Firefox dan Opera :D.

          Saya ambil contoh dari blog yang lain, seperti di bawah ini (jika ada,bukalah di Mozilla):





          Siapkan mental untuk melihat photo orang ini..







          Gimana,tertarik untuk membuatnya? (sekedar untuk fun aja..)tapi,efisien juga jika popup di atas untuk menampilkan preview suatu situs bahkan iklan.

          So,yang minat untuk membuat jendela munculan dengan ukuran yang kita inginkan,coba ikuti langkah berikut:

          Pertama,tentukan alamat URL yang ingin di tampilkan,selanjutnya anda bisa meletakkan kode ini pada halaman HTML anda maupun saat anda hendak mempublikasikan pada suatu artikel.

          Saya ambil contoh dengan menambahkan Element Baru pada blog,seperti biasa,Dashboard,lalu pilih Tata Letak, selanjutnya Tambah Element Baru/Add New Widget.

          Pilih HTML/Javascript,dan letakkan kode berikut:

          <center><form onsubmit="window.open('http://URLYANGDITAMPILKAN/','popupwindow','scrollbars=no, width=250,height=250');return true"><input type="submit" value="TEXT YANG TAMPIL PADA BUTTON"></form></center>

          Tulisan kapital dan angka yang berwarna merah,pada kode diatas,ganti sesuai perintah yang dituliskan dan rubah sesuai ukuran pilihan anda.
          Setelah kode di letakkan Simpan,dan Selesai.

          Belajar BlogCara Form Praktis untuk Pengunjung Blog

          http://pelajaran-blog.blogspot.com/2009/05/form-widget-untuk-pengunjung.html
            Form Widget untuk PengunjungSering kita alami,ketika ingin mengirimkan pesan kepada pemilik suatu blog/web lewat email.


            Kendalanya biasanya,kita harus repot-repot untuk masuk ke account mail kita,baik itu Yahoo mail maupun Gmail.
            Akibatnya,respon pengunjung menjadi kurang.


            Yang akan kita bahas kali ini,yaitu tentang membuat form untuk pengunjung/visitor blog,yang berfungsi untuk memudahkan pengunjung mengirimkan pesan langsung ke email kita,tanpa pengunjung harus login dulu ke account mail mereka,gimana? praktis khan?

            Untuk contohnya anada bisa lihat form ini,di blog temen saya,Mbak Ati di ’cepat-terindex-google.blogspot.com,atau anda bisa lihat contoh form yang telah berhasil Pelajaran Blog buat di bawah ini :





            Name:
            Email Address:
            Pesan:



            Sekiranya sudah maksud khan? :D

            Nah! sekarang saatnya kita menuju langkah pertama membuat form ini.
            Adalah www.freedback.com,suatu situs yang menyediakan jasa ini.Ok! langsung aja..


            1. Pertama,kunjungi situs ’www.freedback.com
            2. Klik Tulisan ’Create a Form’
            3. Selanjutnya,isi form sesuai status anda
            4. Klik ’Sign Up’
            5. Pergilah ke email dan cek inbox,aktivasi mail dari ’www.freedback.com’
            6. Lalu anda akan dihadapkan halaman ’Edit Form’ dari ’www.freedback.com’
            7. Klik tulisan Add question,jika anda menginginkan form tambahan,anda bisa tulis "Pesan:","Message",maupun sebuah pertanyaan.
            8. Ikuti dan dapatkan ’Kode HTML’ nya
            9. Copy kode tersebut,dan letakkan pada halaman HTML Anda.
            10. Test! dengan email anda sendiri dan Selesai !

            Semoga bermanfaat ya.. :D

            Jumat, 09 Desember 2011

            Belajar BlogCara Memasang/Menampilkan Object Gambar Animasi Flash (*swf) pada Blog

            Menghias Blog Dengan Gambar Flash

            http://pelajaran-blog.blogspot.com/2009/12/cara-memasangmenampilkan-object-gambar.html

            Jika anda pernah mengunjungi beberapa situ berita seperti detik,okezone,dll pasti sering menjumpai iklan yang berextention swf.
            Untuk memasang file swf flash pada blog lain dengan meletakkan atau memasang gambar berformat jpg.
            Oleh karena itu kali ini,pelajaran menghias blog kali ini saya dengan senang hati ingin berbagi bagaimana cara memasang gambar flash di blog.


            Langkah Mudah cara memasang gambar animasi pada blog



            Gambar animasi flash (*swf) mempunyai banyak kelebihan diantaranya,file justru mempunyai ukuran yang lebih kecil dan gambar cenderung lebih menarik juga merangsang pengunjung mengekliknya.

            Memasang gambar animasi terlalu banyak juga kurang bagus,alangkah baiknya sesuai dengan kebutuhan dan seadanya saja.

            Membuat file animasi berformat swf (shock wave file),saya kira sudah banyak yang memberikan tutorial bagaimana cara membuat file usil ini.
            Namun disini saya hanya ingin berbagi bagaimana cara memasang atau menampilkan obyek gambar animasi (*swf).

            Untuk langkah menampilkan gambar animasi flash swf pada blog bisa ikuti trik di bawah ini:




            • Tentukan file yang ingin anda pasang,jika anda membuat sendiri hendaklah upload file tersebut kedalam hosting yang support swf,seperti geocities.com,maupun hosting anda pribadi.
              Disini saya ambil contoh banner yang diciptakan pihak www.detik.com,jika file ini masih available dia beralamat di:

              http://openx.detik.com/images/bni-280x175-r1.swf

              Untuk halamanya bisa anda lihat di sini
            • Jika anda sudah menentukan url file swf tersebut,giliran sekarang tentukan alamat url tujuan anda,disini saya ambil contoh:

              http://pelajaran-blog.blogspot.com/


            Setelah semua anda persiapkan,kemudian ikuti instruktur(aaalah-red)cara menambahkan gambar animasi ke blog dibawah ini:

            • Pergilah ke dashboard anda,lalu pilihlah tata letak kemudian pilih tambah gadget/add new widget,kemudian pilih html/javascript.
            • Lalu letakkan kode berikut:

              <embed quality="high" allowscriptaccess="always" flashvars="alink1=http://pelajaran-blog.blogspot.com/" type="application/x-shockwave-flash" height="100%" src="http://openx.detik.com/images/bni-280x175-r1.swf" width="100%" wmode="transparent"></embed>

            Untuk:
            http://pelajaran-blog.blogspot.com/ gantilah link tujuan anda.
            http://openx.detik.com/images/bni-280x175-r1.swf gantilah url file flash (*swf) anda.
              Hasilnya akan seperti dibawah ini (gambar akan terlihat jika detik.com masih menyediakannya):










              Gimana,keren khan? selamat mencoba dan semoga bermanfaat :D

              Belajar BlogCara Membuat Halaman 123 / Page Number Navigation Berurut di Blogspot (karya ariawijaya.com)

              123 Page Number Navigation for Blogger



              Baru beberapa hari lalu saya menemukan artikel yang benar-benar saya cari.
              Adalah bagaimana cara membuat halaman berurut 123 /page 123 navigation untuk blog di blogger/blogspot.

              Kode membuat halaman 123 di blogspot ini,saya dapat dari hasil karya besar Bp.Wijaya di ariawijaya.com
              Anda bisa mengunjungi website dan tutorial 123 page navigation ini di situsnya langsung dalam tutorialnya 'Membuat Navigasi Page Number Blogspot',atau anda bisa langsung klik disini.

              Untuk hasilnya akan seperti gambar dibawah ini:




              membuat navigasi page angka/number 123 berurut blogger.


              Sedangkan contoh hasil kode navigasi berurut ini,anda bisa lihat di sini.
              Bagaimana? Ingin membuatnya?

              Biar pelajaran blog menjabarkan kembali cara membuat halaman 123 berurut ini.

              Langkah Cara Membuat Page Navigasi Angka / Number 123dst pada Blog.



              Pertama,pergilah ke dashboard blogger anda,selanjutnya,pilih tata letak,dan pilih edit html.
              Seperti biasa,contreng option expand widget templates,selanjutnya cari kode berikut:

              ]]></b:skin>

              Setelah ketemu,letakkan persis diatasnya kode css dibawah ini:

              .showpageArea a {
              text-decoration:underline;
              }
              .showpageNum a {
              text-decoration:none;
              border: 1px solid #cccccc;
              margin:0 3px;
              padding:3px;
              }
              .showpageNum a:hover {
              border: 1px solid #cccccc;
              background-color:#cccccc;
              }
              .showpagePoint {
              color:#333;
              text-decoration:none;
              border: 1px solid #cccccc;
              background: #cccccc;
              margin:0 3px;
              padding:3px;
              }
              .showpageOf {
              text-decoration:none;
              padding:3px;
              margin: 0 3px 0 0;
              }
              .showpage a {
              text-decoration:none;
              border: 1px solid #cccccc;
              padding:3px;
              }
              .showpage a:hover {
              text-decoration:none;
              }
              .showpageNum a:link,.showpage a:link {
              text-decoration:none;
              color:#333333;
              }


              Lalu,cari lagi kode seperti ini:

              </body>

              Jika sudah ketemu,tepat diatasnya letakkan script dibawah ini:

              <b:if cond='data:blog.pageType != &quot;item&quot;'>
              <script type='text/javascript'>
              var pageCount=5;
              var displayPageNum=5;
              var upPageWord =&#39;Previous&#39;;
              var downPageWord =&#39;Next&#39;;
              </script>
              <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
              </b:if>


              Langkah terakhir,carilah kode berikut:

              'data:label.url'

              Jika sudah ketemu,hapus kode tersebut dan gantilah kode berikut:

              'data:label.url + &quot;?&amp;max-results=5&quot;'

              Sekarang,simpan templates anda,dan anda bisa lihat hasilnya sekarang :D


              http://pelajaran-blog.blogspot.com/2010/02/membuat-halaman-123-page-number.html

              ~riviera-anime~