cara memperbesar kolom blog

Mungkin selama ini kita merasa jemu atau kurang puas dengan ukuran kolom pada blog kita. Memang pada awal kita membuat blog, kita hanya disuguhkan beberapa Template pilihan yang sudah dirancang pihak Blogger. Memang blogger hanya memberikan ukuran lebar blog sebesar 660px yang kemudian dibagi antara sidebar (220px) dan main (410px).

Bisakah kita memperbesar kolom-kolom pada blog kita?? jawabannya tentu bisa dong.
Makanya baca dulu artikel ini sambil mempraktekkannya. Oke coy, go !! Yang semangat yahh..

Sebelum melebarkan kolom-kolom pada blog kita, langkah pertama yang harus kita lakukan adalah melebarkan dulu "ruang buka blog kita". Ini wajib dilakukan, karena bila tidak sidebarnya bisa melorot kebawah.

Okeh broo..
Sudah sign in belum?? kalau belum ya harus sign in dulu. Kalau udah, ikuti langkah-langkah dibawah ini :

Klik Tata Letak
Klik Edit Html

Silakan temen cari kode-kode dibawah ini :

#header-wrapper {
width:660px;

Angka 660px diatas silakan temen ganti dengan angka yang lebih besar. Misalnya 880px

Trus cari lagi kode dibawah ini :
#outer-wrapper {
width:660px

silakan temen ganti lagi angka 660px menjadi 880px. Harus diingat, besar angkanya harus sama dengan besar angka yang temen ganti pada bagian #header-wrapper diatas. Misalnya pada #header-wrapper temen menggantinya menjadi 880px, maka pada #outer wrapper ini besar angkanya juga harus 880px. Karena jika berbeda tampilan blog kamu akan mirip seperti muka grandong.

oke lanjut...!!

cari lagi kode di bawah ini :

#footer {
width:660px;

Silakan ganti lagi angka 660px diatas dengan angka yang sama dengan #header-wrapper dan #outer-wrapper, yakni 880px;

Oke boz...step memperbesar "ruang buka" blog sudah selesai !!

sekarang kita lanjut kepada membesarkan kolom-kolom pada blog kita.

Bagian-bagian kolom pada blog :

Di step ini kita coba membesarkan kolom sidebar atau main. Silakan cari kode-kode dibawah ini :

#main-wrapper {
width: 410px;

#sidebar-wrapper {
width: 220px;

silakan ganti angka 410px menjadi 610px, dan angka 220px menjadi 240px.

selanjutnya Simpan

angka diatas merupakan contoh dari saya yang tidak harus menjadi ketetapan seperti itu. Teman-teman juga bisa merubahnya dengan angka lain sesuai dengan selera masing-masing. Tapi harus diingat, jumlah dari width sidebar + width main tidak boleh melebihi width outer-wrapper. Karena bila melebihi, sidebarnya akan melorot.

Cara menghapus tulisan "Langgan:Entri (Atom)"

Kadang blog kita ingin terlihat rapi, tentu saja begitu bukan? Ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting adan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya gar lebih rapi.

Blog yang rapi, dengan tampilan yang sederhana, tidak terlau banyak tulisan atau lebar, mungkin sampai ke bawah banget Kita akan belajar bagaimana cara menghilangkan tulisan "Langgan: Entri (Atom)". Sehingga blog kita diharapkan bisa lebih rapi lagi, dan menarik pengunjung untuk berlama-lama di blog kita...


Cara Menghilangkan Tulisan "Langgan: Entri (Atom)"
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini

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

6. Hapus (delete) kode tersebut.
7. Simpan template jika sudah selesai

selamat Mencoba

Cara membuat Daftar Link dengan scrool

Ingin membuat link list blogger dengan scrool. Tak hanya itu kita juga akan memberikan efek pembukaan jendela baru. Apa sobat semua tertarik untuk membuatnya???. Untuk membuatnya kita tinggal memodif...hehehe,kayak motor aja yach...memodif kode HTML link list asli milik blogger. Oke sekarang kita mulai untuk membuatnya.

1. pastikan sudah memasang Widget "Link List" milik blogger.

2. Buat lima atau lebih link.

3. masuk menu Layout kemudian masuk menu Edit HTML dan centang "expand widget templates"

4. Lalu Cari Code HTML seperti dibawah ini:

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>

5. Ganti code diatas dengan Code dibawah ini:

<div style='width:100%; height:100px; overflow:auto;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='new'><data:link.name/></a></li>
</b:loop>
</ul>
</div>

Perhatikan code height:100px; itu adalah tinggi dari link list bisa kamu ubah-ubah sesuai selera kamu.. jadi jika linknya melebihi batas tinggi maka akan ada efek scrollnya Width:100% juga dapat kamu ubah...
6.. Simpan. selesai............, buka blog anda lihat perubahan link list..

Kode Warna

Kode warna yang terpilih :

Get it

Cara Pasang TV online diBlog/website

Apabila ingin meletakkan TV Online ini di blog teman - teman silakan, gunakan kode HTML di bawah ini (Sebaiknya taruh di Postingan):

<embed allowfullscreen="false" allowscriptaccess="always" bgcolor="transparent" flashvars="&amp;file=tvone&amp;type=video&amp;streamer=rtmp://202.129.216.34/live/&amp;stretching=exactfit&amp;logo= &amp;autostart=true" height="350" src="http://www.tvone.co.id/embed/player.swf" width="425"></embed>
<div style="text-align: right;">
<span style="font-size: xx-small;">Widget By: <a href="http://diansitus-unik.co.cc/">DianSites</a></span></div>

Mengenai ukuran tampilan silahkan di edit sesuai blog Anda, dengan mengganti width=425 atau height=350 sesuai keinginan Anda.

Membuat Tulisan Berkedip

Mempercantik blog adalah merupakan suatu usaha para blogger untuk membuat pengunjung betah berada dalam blog miliknya. Banyak sekali cara untuk memperindah tampilan blog salah satunya adalah membuat sebuah tulisan berkedip.
Cara pembuatan tulisan berkedip ini tidaklah sulit dan bahkan amat sangat mudah dan tidak memerlukan kode-kode terlalu banyak yang memusingkan kepala kita. Tertarik untuk membuatnya? Sebelum sobat membuat tulisan berkedip ini ada baiknya sobat melihat contohnya dulu dan menurut yang saya tahu mungkin seperti ini:

Tulisan Anda Disini

Enggak begitu bagus sich tapi lumayan buat penghias tulisan, link maupun blog, masih berminat membuat tulisan berkedip ini sobat? Jika masih berminat tinggal buat kode seperti ini saja simple banget:

<blink> Tulisan Anda Disini </blink>

Tuh kan mudah banget, buruan tuh sobat bikin biar blognya sedikit ada pemanisnya, emang di kasih gula kok manis ntar malah di keroyok semut hehehe.
Kode di atas bisa sobat tempatkan di mana saja mau sidebar, postingan dll terserah sobat aja wong blog sobat sendiri.

selamat Mencoba !

New Feature Template Designer on blogspot

Hello readers, did you know? now blogspot has release new feature called template designer, this new feature allow you to customize layout, template, background with just click and drag because this feature template designer make easiest way to customize your blog online without any having trouble with code HTML and CSS :d, most scariest for newbie. How to use feature template designer? first you must login with your blogspot account go to (http://draft.blogger.com). Then choose your blog which you want to customize, i suggest do not doing it on main blog, try on dummy blog first!. Then if you have login into dashboard select Layout and you will see a new tab on the last, called template designer here is screen shoot  :

Then you click template designer menu and you will be direct in to page template designer look like this image below:

Now you can experimental with this feature, you can feel free to customize your layout, background, template and explore the option of advanced. Life so easy right? you don't to worry about fuzzy dizzy HTML code :D. Give it try feature template designer and exploring this new feature. Ok guys , happy blogging

Atasi Error Setelah Instal Template

Atasi Error Setelah Instal Template, mengunduh template dari luar tidak selalu menyenangkan. Kemungkinan ada sobat blogger yang kena template bermasalah yang memunculkan error dengan kode BX. Error seperti ini bisa membuat sebagaian pengguna menyerah apa lagi yang awam dengan dunia blogger. mereka akan memilih bikin akun baru daripada pusing mencari cara untuk memperbaikinya. Nah anda jangan
terburu-buru bikin akun baru dulu. disini saya bisa membantu anda keluar dari masalah di atas. anda bisa mencoba dulu trik yang saya berikan ini.

Berikut langkah-langkah atasi Error setelah Install Template anda:


    * Buka tamplate yang telah anda unduh dengan Notepad atau Wordpad. klik kanan file tersebut, pilih "Open With> Wordpad"

    * Cari kode widget id pada template tersebut. tekan "Ctrl + F ", kemudian tulis di kotak pencarian widget id

    * Lakukan pencarian satu per satu karena akan ada beberapa kode yang bertuliskan widget id

    * setiap kali menemukan struktur yang ada widget id, ganti nomor id widget tersebut menjadi 2 digit, Misalnya anda menemukan struktur <b:widget id="example2', maka sebaiknya ganti misalnya dengan <b:widget id="example21'

    * Lakukan untuk widget yang lainnya sampai semua nomor id widget lebih dari 1 angka

    * Setelah itu simpan tamplate yang anda edit tersebut

    * Silahkan instal kembali template tersebut pada blogger.

Selamat mencoba.......

Cara Menambah Menu Bar di Blog

Cara Menambah Menu Bar di Blog
Cara Membuat Menu bar di Blog, Dimana kita lihat tidak semua tamplate yang menyediakan Menu bar ini. Contohnya saja Tamplate bawaan blogger sendiri. Menu bar ini sebenarnya sama saja seperti Menu Label bawaan blogger tetapi bawaan blogger letak nya di belahan sidebar.juga bisa kita lihat menu label bawaan blogger membutuh tempat, kelihatan nya kurang menarik
. Nah untuk teman yang ingin menambah Asesories menu bar ini tentu saja bisa. dengan bantuan kode script ke dalam tamplate anda. Menu bar ini terletak di bawah Header. Mau tau Bagaimana cara Membuat Menu bar nya??? Ikuti cara-cara di bawah ini.

Berikut langkah-langkah cara Membuat menu bar di blog anda:


    * Login terlebih dahulu ke blogger

    * Klik Tata Letak

    * Edit HTML

    * Cari kode ]]></b:skin>

    * Kemudian Copy Paste kode di bawah ini persis diatas kode ]]></b:skin>

#NavbarMenu
{
background:#ccc url(http://i49.tinypic.com/296ncc2.jpg) repeat-x top left;
width:968px;
height:32px;
color:#FFF;
font:bold 8px Arial, Tahoma, Verdana;
clear:both;
margin:0 auto;
padding:0}
#NavbarMenuleft
{

width:955px;
float:left;
margin:0;
padding:0
}

#nav li
{
list-style:none;
float:left;
margin:0;
padding:0
}

#nav li a,#nav li a:link,#nav li a:visited
{
color:#fff;
display:block;
text-transform:capitalize;
font:normal 12px Georgia, Times New Roman;
margin:0;
padding:12px 11px 8px
}

#nav li a:hover,#nav li a:active
{
background:#ccc;
color:#FFF;
text-decoration:none;
border-right:1px solid #296204;
border-bottom:1px solid #296204;
border-left:1px solid #296204;
margin:0;
padding:12px 9px 8px
}

#nav li li a,#nav li li a:link,#nav li li a:visited
{
background:#ccc;
width:200px;
color:#fff;
text-transform:capitalize;
float:none;
border-bottom:1px solid #0d2601;
border-left:1px solid #0d2601;
border-right:1px solid #0d2601;
font:normal 14px Georgia, Times New Roman;
margin:0;
padding:7px 10px
}

#nav li li a:hover,#nav li li a:active
{
background:#184303;
color:#fff;
padding:7px 10px
}

#nav li a.enclose,#nav li a.enclose:visited
{
border-top:1px solid #000
}

#nav li ul
{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0;
padding:0
}

#nav li ul a
{
width:140px
}

#nav li ul ul
{
margin:-75px 0 0 171px
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul
{
left:-999em
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul
{
left:auto
}

#nav li:hover,#nav li.sfhover
{
position:static
}

#subnavbar
{
background:#004313;
width:968px;
height:24px;
color:#FFF;
margin:0;
padding:0
}

#subnav li a,#subnav li a:link,#subnav li a:visited
{
color:#f9fc01;
display:block;
font-size:11px;
text-transform:capitalize;
margin:0 5px 0 0;
padding:3px 13px
}

#subnav li a:hover,#subnav li a:active
{
color:#DCD900;
display:block;
text-decoration:none;
margin:0 5px 0 0;
padding:3px 13px
}

#nav ul,#subnav ul,#subnav li
{
float:left;
list-style:none;
margin:0;
padding:0
}

*,#nav,#subnav
{
margin:0;
padding:0
}

* Kemudian cari kode

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:section class='headerright' id='headerright' preferred='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

 Cari Berdasarkan <div id='header-wrapper'>

* Kemudian Copy paste kode di bawah ini di bawah kode tersebut

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Beranda</a></li>
<li><a href='http://jayaputrasbloq.blogspot.com/2009/12/informasi-pemasangan-iklan.html'><b>Pasang Iklan</b></a></li>
<li><a href='http://jayaputrasbloq.blogspot.com/2009/12/cara-menghasilkan-uang-dari-blog-anda.html' title='This Bisnis Online'>Bisnis Online</a></li>
<li><a href='http://jayaputrasbloq.blogspot.com/search/label/Template%20Design' title='This tamplate design'>Template Design</a></li>
<li><a href='http://jayaputrasbloq.blogspot.com/search/label/Twitter' title='This twitter'>Tutorial Twitter</a></li>
</ul></div>
</div>

Ganti Alamat link diatas yang berwarna merah dengan link yang ingin anda taruh di Menu Barnya , sedangkan yang berwarna Hijau Ganti dengan judul link anda yang merah tadi

Kemudian Simpan tamplate anda dan lihat hasilnya

Selamat mencoba......

Cara Mengganti Favicon Blog

Apakah kamu ingin merubah favicon Blog kamu menjadi favicon yg lucu sesuai dengan yg kamu inginkan ??
Emang favicon apaan seeh ?? pingin tau ? favicon adalah icon kecil di bagian atas yang ada gambarnya itu lho !! yang yang tempat dimana kita menulis alamat situs itu tuh,, dah tau kan!!! yo uwis tak langsung ke cara pembuatane....


Langkah-Langkahnya sebagai berikut :

1. Log In dulu di blog kamu
2. Masuk ke menu tata letak/edit HTML
3. Cari kode </head>
4. Lalu copy script dibawah ini dan paste tepat di bawah kode </head>

<link href="http://Paste link kamu disini.gif" rel="shortcut icon"/>

5. Ganti tulisan yg berwarna biru dengan link gambar kamu
6. Klik Simpan...

Membuat Alert Perkenalan bagi Pengunjung

Anda mungkin pernah mengikuti salah satu tips yang saya berikan mengenai cara membuat alert pesan selamat datang bagi pengunjung. Nah kali ini agak sedikit berbeda, kita akan mencoba membuat alert tersebut dengan sedikit tambahan alias perkenalan sepintas. Ketika seseorang mendatangi blog anda maka orang tersebut akan diminta namanya...Setelah memasukan nama maka pengunjung akan disapa sesuai namanya. Oke bagi yang berminat langsung aja saya tunjukan langkahnya.....

1. Login dulu ke blogger
2. Klik Tata Letak
3. Klik Tambah Gadjet
4. Klik HTML JavaScript
5. Masukan Script dibawah ini

<script type='text/javascript'>
var name = prompt("Selamat Datang!! Boleh Tau Nama Anda?", "Nama Anda ");
alert("Salam Kenal "+name)
alert("Selamat Berjelajah di Blog Saya, Semoga Bermanfaat!!")
</script>

Kode berwarna merah adalah pesan bagi pengunjung....Anda dapat menganti sesuai dengan selara anda.

6. Simpan hasilnya dan lihat pada blog anda!

Nah pasti keren dong.....Selamat mencoba!!!
sumber:dian-04.blogspot.com

Membuat Slide Posting

Rasanya belum lengkap apabila anda belum mencoba membuat Posting dengan Tampilan Slide. Jika demikian maka coba saja trik berikut ini. Posting dengan tampilan slide disini adalah hasil dari posting yang kita tulis akan ditampilkan dalam bentuk slide. Bagian dari tampilan yaitu judul posting dan isinya. Jika udah gak sabar kita langsung aja mencobanya....Ikuti langkah berikut ini.

1. Login ke blogger
2. Pilih Tata Letak dan tambahkan gadjet
3. Klik HTML JavaScript
4. Masukan kode dibawah ini:



================================================================================


<div id="TickerBC3905386" style="width:220px;height:150px
;overflow: auto;overflow-x: hidden;overflow-y: hidden;border-style: solid;border-width: 0;border-color: #CC6699;background-color: #FFCCFF;" class="bc_ticker">

<table width="100%">
<tr>
<td width="10" style="color: #0000CC; font-size: 10pt; font-family: Arial,Helvetica;"><a id="TickerPrevBC3905386" style="text-decoration: none; color: #0000CC;" href="javascript: ;" class="bc_tickerarrow" onclick="PrevTickerBC3905386();">«</a></td>
<td id="TickerContentBC3905386" style="vertical-align: top;background-" class="bc_tickercontent">
<a id="TickerLinkBC3905386" style="text-decoration: none;" href="javascript: ;" class="bc_tickerlink" target="_top"><b><span id="TickerTitleBC3905386" style=" " class="bc_tickertitle"></span></b></a> <span id="TickerSummaryBC3905386" style=" " class="bc_tickersummary"></span>
</td>
<td width="10" style="color: #0000CC; font-size: 10pt; font-family: Arial,Helvetica;"><a id="TickerNextBC3905386" style="text-decoration: none; color: #0000CC;" href="javascript: ;" class="bc_tickerarrow" onclick="NextTickerBC3905386();">»</a></td>
</tr>
</table>

<!-- DO NOT CHANGE OR REMOVE THE FOLLOWING NOSCRIPT SECTION OR THE BLASTCASTA NEWS TICKER WILL NOT FUNCTION PROPERLY. -->
<noscript><a href="http://www.blastcasta.com/" title="Add News and Content to Websites, Customize: Combine and Filter Feeds"><img border="0" src="http://www.blastcasta.com/images/tp.gif"/></a></noscript>
</div>

<script id="scr3905386" type="text/javascript"></script>
<script type="text/javascript">
setTimeout('document.getElementById(\'scr3905386\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.blastcasta.com/ticker-js.aspx?feedurl=http%3A//www.dian-04.blogspot.com/feeds/posts/default&changedelay=4&maxitems=-1&showsummary=1&objectid=3905386\'', 500);
</script>
</div>;

================================================================================


5. Gantikan tulisan berwarna merah dengan URL blog anda. Sesuaikan ukuran kotak Slide Posting dengan ukuran ruang pada blog anda.

6. Simpan hasilnya

selamat mencoba 


sumber:blogtrikdantips

Membuat Floating Header

Sebelumnya saya telah membuat sebuah artikel yaitu cara membuat strip ad footer atau statis footer. Kali ini kita akan melakukan trik sedikit berbeda yaitu membuat strip header atau statis header. Strip ad ini akan terlihat seperti layaknya navigation bar. Apabila anda mengscroll halaman ke bawah maka strip ad tersebut akan ikut ke bawah seperti floating image. Pada strip ad ini anda dapat memasang pesan, iklan dan lain sebagainya.

Tertarik gimana cara membuatnya...Apabila anda uda gak sabaran dan ingin segera membuatnya sehingga blog anda terlihat lebih menarik maka ikuti trik yang satu ini:

1. Login ke blogger
2. Klik Tata Letak dan klik lagi pada edit HTML
3. Lalu kopi dan paste kode berikut sebelum kode ]]></b:skin>


======================================================================

/*-- (mta bar) --*/
#mta_bar{background:#58ACFA; border-bottom:2px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:7px; padding-bottom:4px;
z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);}

* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}

#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FF0080; width:65%}

#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FF0080; width:20%}

#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}

#mta_bar .right a{font-size:10px; color:#FF0080; text-decoration:underline}

#mta_bar .right a:hover{font-size:10px; color:#FF0080; text-decoration:none}

#left_bar a{background:url('http://www.rexrainey.com/wp-content/themes/rexrainey_v3/images/r_icon.gif') no-repeat; text-decoration:none; color:#FF0080; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar a:hover{text-decoration:underline; color:#FF0080}

#left_bar2 a{background: url(http://tbn1.google.com/images?q=tbn:SIPxi6jgt3SnnM:http://www.freelancerlisting.net/images/icon_exit.gif) no-repeat 2px; text-decoration:none; color:#FF0080; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar2 a:hover{text-decoration:underline; color:#FF0080}

#to_top{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsw8m6YV9xbI6tOABedwuqPowXZ_IkhCFVygNSQT_5aVartPDRmvFxp5kHUx9ZzdvjkMdYhEFj4QBmexlEDSBA77iUBRKLlzL3sw7fncSji5EV9EhWrBNiNEMrKJc3H9BMIAThn29jsxDP/s400/delete.png) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to Larry ofhttp://blog.lroot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px}

#to_top a{padding:8px}

======================================================================

Keterangan:
- Kode berwarna biru adalah kode warna
- Kode warna merah berfungsi untuk membuat warna kelihatan transparant
- warna ungu adalah alamt url gambar

 4. Masukan kode ini diatas kode </head>

======================================================================

<script src='http://bahauddin.fileave.com/kumpulanJavaScript/Flot%20atas-Stript-ad.js' type='text/javascript'/>

======================================================================

5. Letak kode ini dibawah kode <body>

======================================================================

<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.blogger.com/logout.g' target='_blank'>Log Out</a></span></div>
<div id='left_bar'>
<span class='center'>
Masukan tulisan anda disini
</span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='o-om.com.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsw8m6YV9xbI6tOABedwuqPowXZ_IkhCFVygNSQT_5aVartPDRmvFxp5kHUx9ZzdvjkMdYhEFj4QBmexlEDSBA77iUBRKLlzL3sw7fncSji5EV9EhWrBNiNEMrKJc3H9BMIAThn29jsxDP/s400/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>

=====================================================================


7. Masukan tulisan anda pada kode warna merah
6. Simpan hasilnya

maaf ya tulisannya agak berantakan , karena saya Masih Newbie / Pemula ..

sumber:blogtrikdantips

Membuat Back To Top dengan Efek JQuery

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik....dalam hal ini scroll menjadi lebih smooth atau halus...Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

1. Login ke blogger.
2. Pilih Tata Letak dan Klik Edit HTML
3. Masukan script jquery berikut ini diatas

================================================================

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>


================================================================
 4. Masukan kode javascript ini setelah script jquery tadi:

================================================================

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
<!-- end scro

================================================================

5. Cari kode <body> dan ubah menjadi <body id='top'>


6. Masukkan kode html berikut sebelum <body>

================================================================

<div id='goingtop'>
<a href='#top' title='Top'><img src='http://i627.photobucket.com/albums/tt351/testemplates/goto_top.gif' style='right:20px; bottom:20px; position: fixed;'/></a></div>

===============================================================

7. Simpan template anda dan lihat hasilnya.


sumber:blogtrikdantips

Membuat Efek List Menjorok di Blog

Apakah anda sudah pernah melihat sebuah list yang menjorok. List ini akan menjorok ke dalam apabila cursor mouse berada disekitar posisi list tersebut. Oke mungkin kalian penasaran apa itu list yang menjorok. Blog Trik dan Tips akan memberikan trik bagaimana membuat list yang menjorok.

Berikut ini adalah langkah untuk membuatnya:
1. Login ke blogger
2. Klik Tata Letak dan Klik Edit HTML
3. Cari kode ini: </b:skin>
4. Paste kode dibawah ini setelah kode pada langkah 3

<script type='text/javascript'>

function lm_toRight(obj) {

obj.marginValBackUp = parseInt(obj.style.marginLeft);

obj.style.marginLeft = (obj.marginBackUp + 5).toString() + "px";

}

function lm_restore(obj) {

obj.style.marginLeft = obj.marginBackUp.toString() + "px";

}

</script>

Keterangan: Anda dapat mengatur seberapa jauh list tersebut menjorok ke dalam dengan mengubah angka kode berwarna kuning

5. Untuk membuat list dalam postingan maka jangan lupa untuk memasang atribut ini:

<li onmouseover='lm_toRight(this)' onmouseout='lm_restore(this)'> 

6. Jika anda ingin membuat semua list menjorok maka sisipkan kode berwarna biru pada kode di langkah 4 

<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + <span style="color: rgb(255, 0, 0);">5</span>).toString() + "px";
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + "px";
}
</script>

function lm_loadBehavior() {
var lis = document.getElementsByTagName("li");
for(var i=0; i < lis.length; i++) {
var li = lis[i];
li.onmouseover = function(){lm_toRight(this);}
li.onmouseout = function(){lm_restore(this);}
}
}
var lm_window_onload = window.onload;
window.onload = function() {
if(lm_window_onload) {lm_window_onload();}
lm_loadBehavior();
} 

Selamat mencoba !

sumber:blogtrikdantips

Cara Membuat Spoiler Di Blog

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler

Anda sudah sering lihat Spoiler di kaskus atau forum-forum untuk nyembunyikan gambar, link dan konten lainnya. Spoiler ada dua yaitu untuk forum misalnya kaskus dan satunya lagi untuk dipergunakan di blog/web. Keduanya memiliki kode yang berbeda.

• Spoiler Forum misalnya KASKUS:
[spoiler=judul spoiler]isi spoiler[/spoiler]

Ganti tulisan yang berwarna hijau sesuai judul dan isi spoiler yang anda kehendaki.

• Spoiler untuk blog/web:
Menyembunyikan konten tertentu dari sebuah halaman blog/website diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Begitupun dalam software forum semacam vBulletin, Spoiler pasti banyak digunakan.

Berikut kode yang bisa digunakan dalam membuat spoiler di blog :

===================================================================

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

isi spoiler...

</div></div></div></div>

===================================================================

Kode HTML diatas akan memberikan hasil seperti dibawah ini:

Tentang bla..bla.bla..

isi spoiler...

sumber:4antum.blogspot.com

Cara membuat Shoutmix Tersembunyi

Bagaimana yah caranya membuat buku tamu tersembunyi atau shoutmix tersembunyi, ini dia langkah-langkah dan caranya :
1. Masuk ke account Blogger kamu, pilih Layout; kemudian Page Elements;
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

==================================================================

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAR9KRRaEo01GAFlKxpA-San6x9cRkb5zIMUtLy8W12S7d_Lxtf53xZd_QVnIuWjMoJLoWIOLjJilQjeZmLhje8JBYEWnpa31CAcz0JHaNe8y0eErOwJVWdgohsz5BjeL0leen2XQoHYuz/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
Mau seperti ini?<br/>
Click aja disini--->
<a href="http://http://dian-04.blogspot.com/2010/04/cara-membuat-shoutmix-tersembunyi.html">
Tutorial blog


</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

=================================================================

# Pada kode di atas, cari kode dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya,
# Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu.

(Sumber : http://membuat-tutorial.blogspot.com)

Cara Posting Kode HTML

Nah ini dia caranya posting kode html. Untuk memposting sebuah kode HTML kita membutuhkan suatu tools untuk meng-encode kode HTML. Okey...untuk yang beloem tahu caranya, ini pasti yang anda cari. Dulu saya juga binggung gimana sih caranya memposting kode HTML, Kok kalau memposting kode HTML yang keluar hasil dari kode tersebut bukan kodenya. Kalau anda juga bingung caranya, jadi saya sama bingungnya dengan saya dulu....Hehehe. gak papa, ayo sekarang kita mulai cara melakukannya:

1. Copy kode HTML yang ingin di posting.

2. Buka website penyedia jasa tools Encoding disini.

3. Paste-kan di dalam kotak box yang disediakan oleh website penyedia jasa encoding.

4. Klik tombol Encode.

5. Please Wait...n' akan segera muncul kode html yang baru yang telah di encode.

6. Copy n' paste-kan kode tersebut ke dalam postingan anda.

7. smoga berhasil ya..

Cara memasang kode warna di blog

Kode warna sangat penting terutama untuk anda yang sering mengotak-atik kode HTML template. Oleh karena itu saya akan membahas cara memasang kode warna blogspot. Ini adalah contoh mesin kode warna yang akan kita buat

Kode warna yang terpilih :

Get it

Cara membuatnya sebagai berikut :

#Langkah 1 :
1. Login ke blogger.

2. kalau sudah masuk ke Dasbor, klik Tata Letak.

3. masuk ke Elemen Halaman

4. Klik Tambah Widget

5. Pilih HTML/Java Sript

6. Masukkan kode JS di bawah ini :
===========================================================
<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>

<script type='text/javascript'>

var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;

function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}

// Picker ---------------------------------------------------------

function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };

picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

hueUpdate();

dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}

executeonload(init);

function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}


function hueUpdate(newVal) {

var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }

var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);

document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

pickerSwatchUpdate();
}

function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);

h = h / 180;

var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);

var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);

var a = YAHOO.util.Color.hsv2rgb( h, s, v );

document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}

</script><!--[if gte IE 5.5000]>
<script type="text/javascript">

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}

YAHOO.util.Event.addListener(window, "load", correctPNG);

</script>
<![endif]-->

==========================================================

7. Simpan

#Langkah 2 :
1. Buat satu postingan baru.

2. Masukkan kode HTML di bawah ini :

==========================================================

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="10"><td>
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" width="24" height="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form><p><a href="http://dian-04.blogspot.com/" target="new">Get it</a></p></center>

=========================================================

3. Klik Terbitkan Entri.

Nah Sekarang kita sudah mempunyai mesin kode warna sendiri di blog kita.

PERINGATAN : kalau cara itu tidak berhasil , copy semua kode HTML/JavaScript yang diatas tadi kesini , setelah itu klik Decode , nah baru masukan ke HTML/JS kalian , dan Postingan Kalian !

selamat mencoba !