Minggu, 29 November 2009

Cara Membuat Menu Tab View

Apa itu menu tab view? Menu tab view adalah menu yang terdapat banyak tab, dan jika kita mengklik masing-masing tab yang terdapat dalam menu tab view tersebut, maka yang akan muncul adalah gadget yang berbeda alias tidak sama (walaupun aslinya semua menu yang tersedia terletak di dalam gadget yang sama). Jadi kegunaannya juga hitung-hitung buat menghemat tempat gadget blog, dari pada letaknya berhamburan maka dengan gadget menu tab view ini teman-teman bisa mengelompokkan menu sesuka teman-teman.

agar tidak sekedar kata-kata, teman-teman bisa melihat contoh tampilan berikut:


Jika anda mengklik menu Banner Blog, maka yang muncul:
























Ketika anda mengklik menu Tutorial Blogger, maka yang muncul:























Dan ketika mengklik Buku Tamu, maka yang muncul:


























Bagaimana teman-teman, tertarik untuk membuat menu di atas? Jika tertarik maka langkah-langkahnya adalah sebagai berikut:

1. Login ke blogger >> Tata Letak >> Edit HTML

2. Letakkan kode berikut sebelum kode ]]></b:skin>




div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}








Keterangan:

Warna= Lebar Menu Utama Atas
Warna= Tinggi Menu Utama Atas
Warna= Warna Border Menu Atas
Warna= Jenis Font Menu Utama Atas
Warna= Gd Font
Warna= Warna Font Menu Utama Atas
Warna= Warna BackGround Menu Utama Atas
Warna= Warna Border Kotak Utama
Warna= Warna BackGround Kotak Utama


Tips: Silahkan cari warna di Kumpulan Kode Warna.






3. Selanjutnya letakkan kode berikut sebelum kode </head>



<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_buat_tabview.js' type='text/javascript'/>







4. Klik tombol simpan template. Sekarang untuk langkah mengotak atik kode template sudah selesai.


5. Selanjutnya adalah tahap terakhir, yaitu menambah kode menu tab view ke dalam gadget HTML.

Pergi ke Tata Letak >> Tambah Gadget >> HTML, dan isikan kode berikut:






<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>








Keterangan:

Warna= Silahkan untuk menyesuaikan ukurannya dengan blog anda.
Warna= Itu adalah nama menu utama, lihat gambar di atas. Di sana terdapat Banner Blog, Tutorial Blogger, dan Buku Tamu.
Warna= Adalah tempat di mana anda bisa mengisi kata-kata, gambar (kode gambar), serta script lainnya. Contoh (lihat gambar di atas): Ada banner blog ini, Kumpulan tutorial, serta tampilan shout box alias buku tamu.^







6. Simpan hasil kerjaan anda.








Bagaimana teman-teman, baguskan? Selamat mencoba...

Oh iya, kunci keberhasilan adalah berani mencoba!siip






Semoga Bermanfaat []

Tags: cara memasang menu tab view, menu tab view untuk blogger, kode html untuk blog blogger, kode script untuk blogger, cara mudah membuat menu tab view

Sabtu, 28 November 2009

Memasang Tombol Back to Top

Tujuan membuat tombol back to top dalam blog adalah agar para pengunjung blog merasa lebih mudah untuk kembali ke bagian atas blog kita. Walau mereka bisa kembali ke bagian atas blog dengan cara menggulung scrool namun dengan adanya tombol back to top ini akan lebih mempermudah, yaitu cukup dengan satu klik saja, maka mereka langsung di bawa ke bagian atas blog kita.

Untuk membuat tombol yang kita maksud, kita hanya membutuhkan kode berikut:




<script type="text/JavaScript">
var topMargin = 300
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)

function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}

function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}

}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}


}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" width="15" src="http://lh4.ggpht.com/_RVpTV2JOOxA/TBfOGtzKPKI/AAAAAAAADFY/gas3AV0xDus/back_to_top01_t4belajarblogger.png" height="25"/></a></div>






Cara memasangnya seperti biasa, login ke blogger >> Tata letak dan Tambah Gadget HTML. bagi teman-teman yang ingin mengganti gambar back to top, maka bisa diganti link yang berwarna seperti ini. tampilan dari link gambar di atas adalah seperti berikut ini:
tampilan01




Di atas adalah kode dan langkah-langkah untuk memasang tombol back to top yang letakknya mengikuti gerakan scroll browser, selanjutnya bagi teman-teman yang ingin memasang tombol back to top melayang/berada di kanan slalu (bisa diatur letaknya, NB ==> kode yg tlah saya sediakan di bawah ini sudah diatur untk tampil di bagian kanan bawah), maka tman2 bisa memperaktekkannya melaui langkah-langkah berikut:

Login ke blogger >> Tata Letak >> Edit HTML

Kemudian letakkan kode berikut tepat di bawah kode </Body>




<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='http://lh4.ggpht.com/_RVpTV2JOOxA/TBfOGtzKPKI/AAAAAAAADFY/gas3AV0xDus/back_to_top01_t4belajarblogger.png'/></a>




Tampilan:
tampilan02




Simpan hasil kerjaan anda!




Nb:

Teman-teman juga bisa memilih beberapa gambar back to top berikut ini



back to top02
http://lh6.ggpht.com/_RVpTV2JOOxA/TBfOG8xv1OI/AAAAAAAADFc/txSeorezV5E/back_to_top02_t4belajarblogger.gif


back to top03
http://lh4.ggpht.com/_RVpTV2JOOxA/TBfOG70ZLRI/AAAAAAAADFg/a_QGnyThMsY/back_to_top03_t4belajarblogger.gif






Semoga Bermanfaat []

Tags: cara memasang tombol back to top, memasang tombol kembali ke atas, tombol back to top untuk blogger, kode html back to top, script back to top

Jumat, 27 November 2009

Memasang Form Login Blogger

Apa to maksudnya? maksudnya di postingan kali ini akan membahas bagaimana cara membuat form untuk masuk ke akun blogger. Itu lho kalau teman-teman pas ingin mengakses akun bloggernya teman-teman. pasti sebelum masuk ke akun blogger.com akan melalui halaman yang ada kotak seperti di bawah ini (kecuali kalau teman-teman loginnya melalui form login akun Google):




hanya saja yang ingin kita buat nggak mirip2 amat seperti di atas, ya bisa dibilang agak mirip lah. tapi kegunaannya sama, seperti berikut ini nih contoh tampilannya

























Nah buat bikin form di atas monggo dikopi kode berikut ini, lalu di pasang di halaman blog anda








<p></p><form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post">
<input value="http://www.blogger.com/loginz?d=%2Fhome&amp;p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden">
<input value="blogger" name="service" type="hidden">
<input value="8" name="nui" type="hidden">
<input value="8" name="naui" type="hidden">
<input value="2" name="fpui" type="hidden">
<input value="3" name="uilel" type="hidden">
<input value="true" name="skipvpage" type="hidden">
<input value="false" name="rm" type="hidden">
<input value="true" name="alwf" type="hidden">
<input value="http://www.blogger.com/login.g" name="roeu" type="hidden">
<input value="0" name="alinsu" type="hidden">
<input value="WbQ8QiJfUvA" name="GA3T" type="hidden">
<div><label for="Email"> <span style="font-weight: bold;">Imel-e Jnengan:</span>

<input id="Email" tabindex="1" value="" name="Email" size="20" type="text">
</label></div>
<div><label for="Passwd"> Paswod-e:(<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>)

</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"></div>

<input id="signin-btn-ns" tabindex="0" value="Mlebu" class="ubtn ubtn-block" name="submit" type="submit">
</form><span class="fullpost"><span style="font-weight: bold;"></span></span><span class="fullpost"><span style="font-weight: bold;"></span></span><span class="fullpost"><span style="font-weight: bold;"></span></span><span class="fullpost"><span style="font-weight: bold;"></span></span><span class="fullpost"><span style="font-weight: bold;"></span></span><span class="fullpost"><span style="font-weight: bold;"></span></span><span class="fullpost"><span style="font-weight: bold;"></span></span><span class="fullpost"><span style="font-weight: bold;"></span></span><span class="fullpost"><span style="font-weight: bold;"></span></span>
















O ya, teman-teman juga bisa mengganti tulisan yang terttera dalam form login blogger tersebut. (Perhatikan tulisan tebal berwarna merah)






Semoga Bermanfaat []

Tags: Cara memasang form login blogger, form login untuk blogger, script form login blogger, kode html untuk memasang form login, login blogspot script

Memasang Label Flash di Blog

Teman-teman pasti sudah pada tahu apa kegunaan label/kategori. Dan yang ingin kita bahas pada postingan kali ini adalah bagaimana cara membuat label Flash. tentu ini akan terlihat lebih menarik daripada label biasa. Bagi teman-teman yang belum pernah melihat bagaimana bentuk label flash ini, bisa di lihat di sini. Nah, berhubung yang barusan teman lihat hanyalah sebuah contoh, maka teman-teman bisa mengatur letak kategori serta ukurannya ketika dipasang di blognya teman-teman nantinya.

Untuk memulai memasang label flash, dapat dilakukan melalui langkah-langkah berikut:

Login ke akun blogger, klik Tata Letak, klik Edit HTML.

Lalu letakkan kode berikut setelah kode: <b:section class='sidebar' id='sidebar' preferred='yes'>




<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;

&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;

&lt;param name="bgcolor" value="#ffffff" /&gt;

&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

<b:loop values='data:labels' var='label'>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>

</b:loop>

&lt;/tags&gt;" /&gt;

&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;

&lt;/object&gt;

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>








SIMPAN HASIL KERJAAN ANDA !










Keterangan:

Merah=Silahkan disesuaikan. itu adalah tinggi dan lebar tampilan label di blog anda nanti.
Hijau=Warna background. Di sana tertera #ffffff, itu artinya background anda putih. Silahkan cari-cari warnanya di sini.
Biru=adalah warna tulisan/font label anda. Di sana tertera 000000, itu artinya warna font anda itam. Silahkan pilih warna yang anda inginkan di sini.
Orange=Ukuran tulisan yang ada pada label. Angka 12 bisa diganti sesuai dengan besar ukuran font yang anda inginkan.






Semoga Bermanfaat []

Sumber Trik: Asli Bikinan Roy Tanck untuk blog wordpress, dan dikonver menjadi widget Blogger oleh Amanda Fazani



Tags: Cara memasang label flash, label flash untuk blogger, script membuat label flash, kode html untuk memasang label flash blogger, label flash blogspot

Link to This Blog

Dukung blog ini dengan memasang Link atau Banner blog t4belajarblogger.blogspot.com ke blog/web anda



Silahkan pilih:





1. Text Link



SAME TAB











Tempat Belajar Blogger

<a href="http://t4belajarblogger.blogspot.com/">Tempat Belajar Blogger

</a>






NEW TAB











Tempat Belajar Blogger
<a href="http://t4belajarblogger.blogspot.com/" target="_blank">Tempat Belajar Blogger</a>










2. Banner Link













t4belajarblogger.blogspot.com
<div style="text-align: center;"><a target="_blank" href="http://t4belajarblogger.blogspot.com/"><img border="0" alt="t4belajarblogger.blogspot.com" src="http://software2iqbal.files.wordpress.com/2009/11/banner_t4belajarblogger.jpg"/></a></div>










Terima kasih atas dukungan anda []







Ingin membuat tombol auto install code seperti di atas? Baca tutorialnya di sini.

Rabu, 25 November 2009

How to Install the Search Box on the Blog

What the function of Search Box? With search box the blog visitors can find the posts easily, without looking for all of our post one by one and this will make them feel more easily to find our other posts just with typing a keyword and press enter button on their keyboard.

To make the box, We just need the code below:

<form action="http://ur blog/web address.com/search"method="get"><input class="textinput" name="q" size="50" type="text"/><input value="Search" class="buttonsubmit"name="submit" type="submit"/></form>



Preview:




>>You can to customize it too by changing:

Blue: Your blog/web URL Address.
Red: Size of search Box
Black: The name of button, ex: Search, find, etc.


How easy?



gOoD LUcK []

Tags: install the search box, search box into blogger blog, search box HTML for Blogger

Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect

Suatu ketika lagi ngenet tiba-tiba menemukan suatu web yang unik tampilan halamannya. Uniknya tuh kalau kita mengarahkan kursor mouse kita di bagian pojok kanan atas halaman web tersebut, maka halaman tersebut akan kelipat atau kebuka, namun hanya sebagian kecil saja dan di dalamnya terdapat gambar (disesuaikan) yang biasanya kalau diklik akan diarahkan ke suatu halaman lain seperti halaman RSS blog ataupun bisa berupa halaman lainnya.


Teman-teman juga bisa menemukannya di blog ini. Yang seperti ini lho...



UPDATE....




Untuk membuat halaman blog teman-teman seperti di atas caranya gampang. Ikuti langkah2 berikut:


1. Login ke blogger >> Tata Letak >> Edit HTML >> Expand widget template

2. Cari kode
<b:skin><![CDATA[
dan letakkan kode berikut di atasnya:



<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>





3. Lalu cari lagi kode
]]></b:skin>
Dan letakkan kode berikut tepat di atasnya:



#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}






4. Cari kode
<body>
Dan lettakkan kode berikut di bawahnya:


<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>





*Ganti yang berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS atau
link berlangganan.



5. Simpan hasil kerjaan anda.



Sekarang silahkan lihat blog anda, bagaimana....baguskan?

Untuk mengganti gambar dinding, teman-teman bisa mengganti URL berikut:



#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}









Semoga Bermanfaat []


Sumber Trik:[sohtanaka.com]

Tags: cara membuat page peel effect, cara membuat halaman kelipat, membuat halaman yang melipat, cara membuat page peel effect dengan jQuery, tutorial page peel effect

How to Add Three Columns in The Footer

We know that Too many gadget in the header n sidebar blog, wll effect the speed of load our blog. Therefore many blogger put their blog gadget in the footer but there is a problem, some blog templates only provide a few footer culomns. and how to overcome this problem?

Of Course! to overcome this problem we just need to add some columns in the footer. How to do it?

1. Login to your blogger account.

2. Click the layout option >> Edit HTML

3. Find code

]]></b:skin>
(you can use Ctrl+F to find it)

4. And then put the codes below above the

]]></b:skin>
code:



#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}





5. N Then find code below:


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>





6. So put the codes below under the codes in number 5 (above)


<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p> <hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>

<div style='clear:both;'/>
</div>





7. Save your Template.



To see the result of your work, click layout option. You ll see:



BEFORE:















AFTER:























gOOD LucK

Tags: Add three columns in the footer, how to add three columns in the footer, trick to adding three columns, editing template to be three columns in footer

The Color Codes

The Color Codes:




#FFFFFF

#FFFFCC

#FFFF99

#FFFF66

#FFFF33

#FFFF00

#FFCCFF

#FFCCCC

#FFCC99

#FFCC66

#FFCC33

#FFCC00

#FF99FF

#FF99CC

#FF9999

#FF9966

#FF9933

#FF9900

#FF66FF

#FF66CC

#FF6699

#FF6666

#FF6633

#FF6600

#FF33FF

#FF33CC

#FF3399

#FF3366

#FF3333

#FF3300

#FF00FF

#FF00CC

#FF0099

#FF0066

#FF0033

#FF0000


2

#CCFFFF

#CCFFCC

#CCFF99

#CCFF66

#CCFF33

#CCFF00

#CCCCFF

#CCCCCC

#CCCC99

#CCCC66

#CCCC33

#CCCC00

#CC99FF

#CC99CC

#CC9999

#CC9966

#CC9933

#CC9900

#CC66FF

#CC66CC

#CC6699

#CC6666

#CC6633

#CC6600

#CC33FF

#CC33CC

#CC3399

#CC3366

#CC3333

#CC3300

#CC00FF

#CC00CC

#CC0099

#CC0066

#CC0033

#CC0000


3

#99FFFF

#99FFCC

#99FF99

#99FF66

#99FF33

#99FF00

#99CCFF

#99CCCC

#99CC99

#99CC66

#99CC33

#99CC00

#9999FF

#9999CC

#999999

#999966

#999933

#999900

#9966FF

#9966CC

#996699

#996666

#996633

#996600

#9933FF

#9933CC

#993399

#993366

#993333

#993300

#9900FF

#9900CC

#990099

#990066

#990033

#990000


4

#66FFFF

#66FFCC

#66FF99

#66FF66

#66FF33

#66FF00

#66CCFF

#66CCCC

#66CC99

#66CC66

#66CC33

#66CC00

#6699FF

#6699CC

#669999

#669966

#669933

#669900

#6666FF

#6666CC

#666699

#666666

#666633

#666600

#6633FF

#6633CC

#663399

#663366

#663333

#663300

#6600FF

#6600CC

#660099

#660066

#660033

#660000


5

#33FFFF

#33FFCC

#33FF99

#33FF66

#33FF33

#33FF00

#33CCFF

#33CCCC

#33CC99

#33CC66

#33CC33

#33CC00

#3399FF

#3399CC

#339999

#339966

#339933

#339900

#3366FF

#3366CC

#336699

#336666

#336633

#336600

#3333FF

#3333CC

#333399

#333366

#333333

#333300

#3300FF

#3300CC

#330099

#330066

#330033

#330000


6

#00FFFF

#00FFCC

#00FF99

#00FF66

#00FF33

#00FF00

#00CCFF

#00CCCC

#00CC99

#00CC66

#00CC33

#00CC00

#0099FF

#0099CC

#009999

#009966

#009933

#009900

#0066FF

#0066CC

#006699

#006666

#006633

#006600

#0033FF

#0033CC

#003399

#003366

#003333

#003300

#0000FF

#0000CC

#000099

#000066

#000033

#000000


7

#465584

#EEF2F7

#3A4F6C

#00D

#434951

#555

#777

#DFE6EF

#345487

#F5F9FD

#3860BB

#BCD0ED

#C2CFDF

#F0F5FA

#D1DCEB

#003

#900

#CCE9FD

#E4EAF2

#4C77B6

#DFE6EF

#EEF2F7





Tags: Kumpulan kode warna, kode warna HTML, script kode warna