Selasa, 27 Januari 2009

Membuat Blogroll

05.50  dudal blog  No comments


Membuat Blogroll atau Kategori blog yang ingin anda masukkan,baik itu dalam suatu posting maupun halaman html khusus untuk sidebar maupun footer,kadang akan memakan banyak tempat jika kategori terlalu panjang/banyak.

Di sini saya akan coba membuat contoh blogroll yang dapat menghemat tempat/halaman blog kita.

Untuk membuat/menghemat halaman web/blog,kita bisa menggunakan Fungsi scrollbar,dropdown,marquee,dll.


Seperti postingan saya sebelumnya,bagaimana membuat text berjalan,fungsi scrollbar,dropdown maupun marquee.


Tapi nggak ada salahnya jika saya mengulang memberikan kode-kode tersebut di sini (biar lebih ringkas,he..)


  • Untuk kode Dropdown :

<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>

<option># Dropdown # </option>
<option value="http://jurus2ngeblog.blogspot.com">Contoh 1</option>
<option value="http://jurus2ngeblog.blogspot.com">Contoh 2</option>
<option value="http://jurus2ngeblog.blogspot.com">Contoh 3</option>
<option value="http://jurus2ngeblog.blogspot.com">Contoh 4</option>
<option value="http://jurus2ngeblog.blogspot.com">Contoh 5</option>
</select>
</form>

Hasilnya seperti di bawah ini :


  • Untuk kode Marquee :

<marquee onmouseover="this.stop()"
onmouseout="this.start()" scrollamount="2"
direction="up" width="100%" height="200"
>
<a href="http://jurus2ngeblog.blogspot.com"
target="_blank">Contoh 1</a><br/><br/>
<a href="http://jurus2ngeblog.blogspot.com"
target="_blank">Contoh 2</a><br/><br/>
<a href="http://jurus2ngeblog.blogspot.com"
target="_blank">Contoh 3</a><br/><br/>
<a href="http://jurus2ngeblog.blogspot.com"
target="_blank">Contoh 4</a><br/><br/>
<a href="http://jurus2ngeblog.blogspot.com"
target="_blank">Contoh 5</a><br/><br/>
</marquee>

Hasilnya akan seperti di bawah ini :


  • Untuk kode Marquee dalam tabel/kotak :

<table border="2"
width="155" height="130" cellpadding="2">
<tr>
<td align="left">
<marquee onmouseover="this.stop()" onmouseout="this.start()"
scrollamount="2" direction="up" width="100%"
height="200">
<a href="http://jurus2ngeblog.blogspot.com"
target="_blank">Contoh 1</a>
<br/><br/>
<a href="http://jurus2ngeblog.blogspot.com"
target="_blank">Contoh 2</a>
<br/><br/>
<a href="http://jurus2ngeblog.blogspot.com"
target="_blank">Contoh 3</a>
<br/><br/>
<a href="http://jurus2ngeblog.blogspot.com"
target="_blank">Contoh 4</a>
<br/><br/>
<a href="http://jurus2ngeblog.blogspot.com"
target="_blank">Contoh 5</a>
<br/><br/>
</marquee>
</td>
</tr>
</table>

Hasilnya seperti di bawah ini :

Anda coba dulu baru tahu hasilnya :) duk ! PR..
Gimana? pilih yang mana? selamat mencoba ya!

Read More

Membuat Menu Drop Down

05.34  dudal blog  No comments


Untuk membuat menu dropdown,selain membuat situs lebih rapi,juga sambil belajar yuk!

Untuk kodenya copy paste kode di bawah ini :

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu><option value=0 selected>KATA YANG PERTAMA MUNCUL</option>
<option value="ISI ALAMAT YANG DI TUJU">ISI TEXT YANG INGIN DI TAMPILKAN</option>
</select></form>
Contoh penggunaan kode :
<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option>Link</option>
<option value="http://www.youtube.com">Youtube</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option>
</select></form>
Yang hasilnya nanti akan seperti di bawah ini :



Sangat Mudah khan?
Selamat mencoba ya..!!

Baca Juga Yang Ini..

Read More

Membuat tempat kode script / html

04.51  dudal blog  No comments


Seperti yang pernah saya posting beberapa waktu yang lalu,hanya kali ini menggunakan kode yang sangat sederhana.seperti saat ingin memposting suatu blog,dan ingin menyampaikan kode kepada pengunjung,biasanya kita mengalami kesulitan.

Misalnya kesalahan yang terjadi karena hasil kode seperti penulisan tanda <head> atau <tabel> akan berbeda hasilnya saat posting telah di publikasikan,bahkan tidak akan muncul pada artikel yang telah di publikasikan.

Untuk itu,penulisan tanda-tanda/karakter seperti <,>,",&,dll harus dituliskan dengan notasi yang berbeda.Untuk menandai/membuat bidang atau tempat untuk kode(hanya bersifat hiasan saja),copy paste kode di bawah ini :

<table border="0"width="361"><tr><td bgcolor="#E0E0E0"
width="353"> Kode anda Disini</td></tr></table>
Bagian "Kode anda Disini" yang berwarna hijau diatas,untuk area,artikel yang ingin anda posting.

Sedangkan,jika anda ingin menyampaikan/memposting suatu kode html/javascript,tetap di area yang berwarna hijau diatas(jika ingin kode berada dalam sebuah tabel),
dengan catatan:karakter dari kode yang ingin anda sampaikan,di ubah dalam sebuah notasi.Untuk lebih jelasnya lihat Ilustrasi di bawah ini :

Jika saya ingin menuliskan <head> pada artikel saya,maka pada saat memposting saya akan menuliskan sebuah kode :
&lt;head&gt;
Notasi yang tercetak tebal di atas (&lt; dan &gt; ),saat posting terpublikasikan,akan tampil menjadi karakter < dan >.

Untuk lebih jelasnya soal notasinya anda bisa baca di sini.

Sudah jelas khan ?
Untuk simbol atau karakter yang lain seperti; $,#,*,dll bisa anda tuliskan seperti biasanya.

Baca Juga Yang Ini..


Read More

Mengatur Warna dan Huruf pada Blog

04.32  dudal blog  No comments


Untuk para blogger baru, sobat akan menikmati fasilitas baru dari www.blogger.com, yaitu sobat bisa mengatur jenis font (hurup) serta warna font dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan).

Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan :
(ini khusus untuk template "minima")

  • Page Background color -->

    pengaturan warna background blog. Silahkan klik warna yang ada di sebelah
    kanan yang di sukai

  • Text Color

    --> pengaturan warna huruf dari posting-an

  • Link Color

    --> pengaturan warna huruf yang di link

  • Blog Title Color

    --> pengaturan
    warna huruf judul Blog

  • Blog Description Color

    --> pengaturan warna huruf deskripsi blog

  • Post Title

    Color
    --> pengaturan warna huruf judul posting-an

  • Border Color

    --> pengaturan warna kotak yang mengelilingi judul blog, serta garis
    pemisah

  • Sidebar Title

    Color --> pengaturan warna
    huruf judul yang anda di sidebar (kolom samping)

  • Sidebar Title

    Color --> pengaturan warna
    hurup yang ada di sidebar(kolom samping)

  • Visited link

    Color -->
    pengaturan warna huruf link ketika pengunjung mengarahkannya ke tulisan yang
    mengandung link

  • Text Font

    --> pengaturan jenis huruf,berlaku untuk hurup hasil dari posting-an
    ataupun hurup yang ada di sidebar

  • Sidebar Title Font

    --> pengaturan jenis huruf
    untuk judul yang ada di sidebar serta tanggal postingan

  • Blog Title Font

    --> pengaturan jenis huruf Judul blog

  • Blog Description Font

    --> Pengaturan jenis hurup dekripsi blog

  • Post Footer

    Font -->
    pengaturan jenis huruf footer (contoh : posted by )

  • Klik " SAVE CHANGES" untuk

    mengakhiri pengaturan. Selesai

Untuk template-template selain template "minima", pada dasarnya sama aja, hanya saja ada sedikit perbedaan, tapi itu tidak sulit.


Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.



Postingan ini 100% saya ambil dari artikel oleh kolom-tutorial.blogspot.com

"Mengatur Hurup dan Warna" Kamis, April 19, 2007.

All Right Reserved by kolom-tutorial.blogspot.com


Read More

Senin, 19 Januari 2009

About Author

01.52  dudal blog  No comments


pelajaran blogBukan Syekh Puji tapi Pujiantoro,kakek ini lahir di Jakarta hampir setengah abad yang lalu,saat orang-orang belum begitu kenal dengan istilah “Friendster” maupun ’Facebook’ di dunia maya .Ia merupakan anak pertama dari dua bersaudara.

Hidupnya tergolong makmur meski hanya makan 4 (empat) kali dalam seminggu,,meskipun kisah hidup begitu sangat mengenaskan,dia bersi keras ingin merubah nasib hidup yang tak juga kunjung berubah itu.

Pantang menyerah !! Hidup Adsense ! Hidup Bisnis

yo wis,sak karepmu !!

© Copyright By Pujiantoro

Read More

Minggu, 18 Januari 2009

Membuat Object Always on Top

18.28  dudal blog  No comments



Membuat gambar pada halaman situs yang akan selalu nongol,ternyata tidaklah susah.Mungkin sering kita jumpain pada situs-situs penawar produk atau bisnis.



Di geliat-bisnis.blogspot.com,anda bisa melihat di kanan bawah yang bergambar banner blog,yang selalu ikut meskipun scroll kita naik turunkan.

Untuk membuatnya ikuti langkah-langkah di bawah ini :



Pertama,pergi ke Tata letak (untuk blogspot) Edit Html ,cari kode :

]]></b:skin>

Klo dah ketemu,letakkan kode di bawah ini tepat di atas kode tersebut.

**Untuk merubah posisi,anda bisa mengubah dari bottom menjadi top dan left menjadi right.Untuk ukuran anda tentukan sendiri.



Masih di Edit Html,selanjutnya,cari kode :

</head>
Klo dah ketemu,copy paste kode dibawah ini,dan letakkan tepat diatas kode tersebut :

Ada 2 pilihan tampilan :

1.Copy paste kode dibawah ini untuk menampilkan image beserta linknya :

2.Copy paste kode dibawah ini untuk menampilkan image,link,kata dan status YM:

Selesai!!



Penting :Untuk nama ID YM,gambar photo,link anda tentukan nama sendiri.

Memang sebaiknya,sebelum kode di letakkan,edit telebih dahulu ke dalam notepad.



Sumber :http://master-blog-ayiek.blogspot.com/


Read More

Membuat Favicons / Cara Membuat Favicon

18.23  dudal blog  No comments


Untuk Identitas sekaligus ciri khas suatu situs,biasanya seperti blog katalog,kumpul blogger dan yang lain biasanya mereka memakai ikon kecil pada address bar disamping alamat url nya.

Nah!,itulah yang di sebut Favicon.
Untuk membuatnya sangat mudah,cukup copy kode di bawah ini :

<link rel="Shortcut Icon" href="[url_icon]" type="image/[format_icon]">

Contoh pemakaian kode:

<link href='http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-jurus2ngeblog.gif' rel='shotcut icon'/>


Anda cukup menempatkan kode diatas kode </head> pada halaman HTML anda.Untuk url yang berwarna hijau,anda rubah sendiri sesuai alamat url gambar yang ingin anda jadikan Favicon.
Untuk format file Favicon *.gif,*.jpg,*.png biasanya tidak muncul pada jendela browser Internet Explorer.

Lebih baik memakai object gambar berformat *.ico.

Anda bisa upload ico file pada situs-situs penyedia ico uploader atau pada postingan anda sendiri

Read More

Menjadikan web sebagi Home Page

18.11  dudal blog  No comments


Ya,form untuk menjadikan suatu situs menjadi home page,maksudnya seperti halnya anda mengatur option pada internet option dan mengatur situs tertentu sebagai home page.

Namun form ini akan membantu anda dalam mengatur suatu situs menjadi home page hanya dengan satu klik.
Sehingga akan menampilkan situs tersebut setiap membuka browser baru.

Seperti yang lain,anda cukup menambahkan halaman baru html/javascript.

Lalu copy kode di bawah ini dan paste ke halaman baru anda:

<form><input type="button" value="Jadikan web ini sebagai Home Page" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://geliat-bisnis.blogspot.com');"></form>
Hasilnya akan seperti di bawah ini:


Sangat mudah khan ! Selamat mencoba ya !

** Kode ini hanya akan bekerja baik pada IE Windows 98/2000/xp

Baca Juga Yang Ini..

Read More

Menghilangkan Garis bawah pada Link

18.07  dudal blog  No comments


Kadang kita jembek ya ! alias buenci alias suebel klo bikin suatu alamat web,underline secara otomatis(emang dah diformat gitu..:o)

Untuk anda yang ingin membuat Link tanpa garis bawah,gampang kok..sebenarnya cuman nambahin kode sedikit.

Pinginnya kaya di bawah ini khan?

http://jurus2ngeblog.blogspot.com

Jika anda biasanya menuliskan seperti ini untuk link:

<a href="http://www.situs_tujuan.com">Link Biasa</a>
Anda selipkan kode yang berwarna merah di bawah ini,sehingga menjadi :
<a href="http://www.situs_tujuan.com" style="text-decoration: none">Link tanpa Underline</a>
Have nice day !! dan selamat mencoba !!

Baca Juga Yang Ini..

Read More

Cara Membuat Marquee / Text Berjalan / Rolling text

18.02  dudal blog  No comments


Text berjalan,..

Pergi keTambah halaman,Add widget pilih Html / Javascript lalu copy paste kode di bawah ini:
<marquee onmouseover="this.stop()" onmouseout="this.start()"
scrollamount="1" scrolldelay="60" direction="up" width="450" height="150">
<a href="http://www.google.com">contoh 1</a><br/>
<a href="http://www.yahoo.com">contoh 2</a><br/>
<a href="http://geliat-bisnis.blogspot.com">contoh 3</a>
</marquee>
Untuk situs tujuan anda bisa menentukan sendiri,disini sebagai contoh yang saya pakai diatas :
www.yahoo.com,www.google.com dan geliat-bisnis.blogspot.com sebagai situs tujuannya.

Adapun macam-macamnya:

kode:

<marquee>Cara Membuat Marquee / Text Berjalan / Rolling text</marquee>

hasilnya:

Cara Membuat Marquee / Text Berjalan / Rolling text


kode:

<marquee onmouseover="this.stop()" onmouseout="this.start()">Cara Membuat Marquee / Text Berjalan / Rolling text</marquee>

hasilnya (berhenti saat mouse diatasnya):

Cara Membuat Marquee / Text Berjalan / Rolling text


kode:

<marquee direction="right">Cara Membuat Marquee / Text Berjalan / Rolling text</marquee>

hasilnya (dari kanan ke kiri):

Cara Membuat Marquee / Text Berjalan / Rolling text


kode:

<marquee behavior="alternate">Cara Membuat Marquee / Text Berjalan / Rolling text</marquee>

hasilnya (bolak-balik):

Cara Membuat Marquee / Text Berjalan / Rolling text






Mudah banget ya. :)

Baca Juga Yang Ini..

Read More

Membuat Indikator Yahoo Messenger

17.56  dudal blog  No comments


Sering kita melihat pada blog maupun situs-situs terkenal,menggunakan fItur ini.
Adalah Indikator Yahoo Messenger,kita bisa menmpilkannya pada halaman situs kita.
Ini sangat berguna sekali karna customer atau pengunjung akan tahu kita dalam keadaan online atau not online.

Ada 3 pilihan tampilan,untuk tampilan kecil,sedang dan besar.

Pergi keTambah halaman,Add widget pilih Html / Javascript.
Untuk tampilan kecil anda bisa copy paste kode di bawah ini:

<a href="ymsgr:sendim?ID_YM_anda><img border="0" src="http://opi.yahoo.com/online?u=id_yahoo.com/online?u=id_yahoo_anda &m=g&t=1" /></a>

Untuk tampilan sedang copy paste kode di bawah ini:

<a href="ymsgr:sendim?ID_YM_anda><img src="http://opi.yahoo.com/online?u=ID_YM_anda&m=g&t=1" border=0></a>

Untuk tampilan besar copy paste kode di bawah ini:

<a href="ymsgr:sendim?ID_YM_anda><img src="http://opi.yahoo.com/online?u=ID_YM_anda&m=g&t=2" border=0></a>

Nggak begitu sulit khan !? selamat mencoba ! dan semoga berhasil :D

Baca Juga Yang Ini..

Read More

Kode Menampilkan situs lain ke dalam Blog

17.50  dudal blog  No comments

Seperti yang telah saya posting beberapa minggu yang lalu tentang menampilkan situs lain ke dalam situs kita.

Bukan merugikan tapi justru menguntungkan dari pihak suatu situs yang akan kita tampilkan,karena segala event yang terjadi pada situs tersebut oleh pengunjung situs kita adalah event langsung ke situs yang bersangkutan.

So,nggak masalah dan nggak menyalahi aturan khan?

Untuk menampilkan suatu situs kedalam situs kita, Tambahkan halaman baru html/javascript,lalu copy paste kode di bawah ini :
<iframe name="Menampilkan situs dalam suatu situs" src="http://www.yahoo.com" marginwidth="0" marginheight="0" readonly ="true" vspace="0" hspace="0" allowtransparency="true" scrolling="yes" width="300" frameborder="0" height="250"></iframe>
Untuk alamat situs yang ingin dimasukkan saya ambil contoh :
www.yahoo.com

Hasilnya akan seperti di bawah ini:
Tinggal rubah sendiri ya..

width="300" menentukan lebar,isi terserah anda
height="250" menentukan tinggi,isi terserah anda

Semoga bermanfaat ya !

Baca Juga Yang Ini..

Read More

Membuat Tag Clouds

17.35  dudal blog  No comments


Tag Clouds ...


Untuk membuat tag clouds,anda harus sudah membuat label pada situs anda.
Pilih bagian Dashboard ke Pengaturan lalu pada Page Element tambah halaman baru add widget, pilih Label.

Setelah itu Edit HTML kemudian beri tanda centang pada Expand Widget Templates.

Cari kode :

]]></b:skin>

Klo dah ketemu,lalu copy paste kode di bawah ini diatasnya :
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


Setelah itu,tepat di bawah kode :
]]></b:skin>

copy paste kode di bawah ini :

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>


Lalu simpan template.

Langkah terakhir,masih pada Edit HTML cari kode di bawah ini :

<b:widget id='Label1' locked='false' title='cloud' type='Label'>
&lt b:includable id='main'>
<b:if cond='data:title'>
<h2></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Kalau dah ketemu,ganti kode diatas dengan kode di bawah ini :

Alangkah baiknya backup terlebih dahulu template ke komputer anda,Tapi klo dah percaya,ya langsung ganti aja.

Akurat koq :)

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Simpan Template! Selesai !

Baca Juga Yang Ini..

Read More

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More