Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Kamis, 12 Mei 2011

Cara Buat Buku Tamu Berada Disamping Blog

1. Login ke Blogger sobat.
2. Klik Rancangan/tata letak/layout.
3. Klik tambah gadget/add gadget.
4. Pilih HTML/javascript.
5. Copy paste kode di bawah ini.
<style type="text/css">#gb{
position:fixed;
top:25px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;

background:url('http://farm3.static.flickr.com/2771/4442306534_c1431ea4ce_o.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #1300F2;
background:#FFFFFF;
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">
MASUKAN KODE BUKU TAMU DISINI
<a href="javascript:showHideGB()">
</a></div>
<div style="text-align:right; font-size:xx-small;">Cara Buat Buku Tamu <a href="http://klinik-it.blogspot.com/2010/03/cara-buat-buku-tamu-berada-disamping.html" target="blank">disini</a><br/><br/> widget by <a href="http://www.klinik-it.blogspot.com" target="blank"> Klinik-it</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
6. Hapus tulisan masukkan kode buku tamu disini yang di stabillo dan ganti dengan kode buku tamu atau shoutmix blog kamu.
7. Klik Simpan dan lihat hasilnya.


Selamat Mencoba.............. Semoga Berhasil......................

Minggu, 08 Mei 2011

Cara Agar Blog Terindeks Google Dengan Seo Woothy

           Seo woothy adalah tool yang menyediakan layanan ping terhadap google agar cepat mengindeks postingan yang ada di blog. Berikut adalah langkah-langkah melakukan ping di seo woothy.


1. Kunjungi website seo woothy. Klik link  www.woothy.com



2. Copy-paste url yang akan di beri link atau ingin di indekskan ke google.



3. Tentukan berapa urlnya, tapi kalau menurut saya untuk blog yang baru jangan terlalu banyak 5 atau 10 sudah cukup.
4. Klik submit kemudian firefox akan mengebloknya santai saja ketika firefox mengeblognya kita tinggal allow saja di menu perferences di menu atas.
5. Jika berhasil akan terbuka jendela baru sebanyak maksimum pop ups yang anda tentukan tadi, tidak usah bingung dengan pop ups ini, karena akan otomatis tertutup sendiri jika sudah selesai.






Sabtu, 07 Mei 2011

Cara Memasang Profil Facebook di Blog

         
      Oke sobat saya akan jelaskan caranya memasang profil FB di blog kita. Berikut Ini adalah langkah-langkahnya.
1. Masuk ke FB sobat kemudian klik profil.
2. Setelah masuk di profil klik Tambah sebuah Lencana pada Situs Anda.
3. Salin kode html.
4. Setelah kode html dicopy, masuk ke blog sobat.
5. Pilih Rancangan dan tambahkan gadget.
6. Pilih HTML/JavaScript dan paste kode html tadi kemudian simpan.


Selamat Mencoba...................... Semoga Sukses.........................

Selasa, 19 April 2011

Cara Membuat Favicon Muncul di Semua Browser

       Favicon adalah icon atau gambar yang terletak pada address bar pada suatu web browser. Setiap situs atau blog pasti memiliki favicon. Maka dari itu saya akan jelaskan ke sobat bagaimana cara membuat favicon agar muncul di semua browser. Tanpa basa-basi langsung saja ke tkp.


1. Login ke Blogger sobat.
2. Pilih Rancangan >> Edit HTML.
3. Kemudian cari kode dengan mengunakan ctrl + f untuk mempercepat pencarian.
4. Setelah ketemu copy code di bawah ini tepat diatas kode . 
  
<link href='https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2010/Dec/07/joomla-avatar-2620675917-9_avatar.jpg' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

  Ket: Ganti kode yang berwarna biru dengan link gambar yang akan sobat gunakan.

Inilah Hasilnya pada Mozilla Firefox.


 Hasil Pada Google Chrome.


Selamat Mencoba........................................ Sukses Selalu.................................

Senin, 18 April 2011

Cara Menghilangkan Link Home, Posting Baru dan Posting lama

      Oke sobat saya akan menjelaskan caranya menghilangkan link home,posting baru dan posting lama. Disini saya memakai template saya,adapun langkah-langkahnya adalah...........
1. Login ke Blogger sobat.
2. Pilih Rancangan/Tata Letak >> Edit HTML.
3. Centang Expand Widget.
    A. Menghilangkan Link home.
        1. Cari kode dibawah ini.
             #blog-pager{text-align:center}
      2. Ganti kode tersebut dengan kode berikut ini.
             #blog-pager {display:none;}
    B. Menghilangkan Posting Baru.
        1. Cari kode dibawah ini.
            #blog-pager-newer-link{float:$startSide}
        2. Ganti kode tersebut dengan kode berikut ini.
            #blog-pager-newer-link{display:none;}
      C. Menghilangkan Posting Lama
        1. Cari kode dibawah ini.
            #blog-pager-older-link{float:$endSide}

    2. Ganti kode tersebut dengan kode berikut ini.
        #blog-pager-older-link{display:none;}


Mudahkan sobat langkah-langkahnya selamat mencoba ya sobat.

Cara Membuat Tombol Hidden Widget di Blog


      Mungkin anda bertanya tanya Apa sich fungsinya diberikannya hidden widget pada blog? Disini saya akan menjawabnya hidden widget digunakan agar loading blog lebih ringan atu memperingan loading blog. Di postingan kali ini saya akan membahas tata cara membuat tombol hidden widget. Adapun langkah-langkahnya sebagai berikut:
1. Login ke Blogger sobat.
2. Pilih Rancangan/Tata letak >> Elemen Laman.
3. Pilih widget yang akan di beri tombol hidden widget dan masukkan kode dibawah ini.

<div align="center"><div style="margin: 5px;"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 0px; width: auto; font-size: 12px;" value="Tampilkan" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: 0px; text-align: center;">


Taruh kode Widgetmu disini

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


NB: Ganti Tulisan yang di cetak tebal dengan kata sesuai keinginan anda, misal Tampilkan di ganti Link Teman.

4. Letakkan kode widget anda di kata yang sudah di stabilo.
5. Simpan dan lihat hasilnya.

Semoga Berhasil..................................... Selamat Mencoba.............................

Cara Menghilangkan Tanggal Postingan



                          
      Dalam setiap posting yang dibuat selalu disertai dengan tanggal publishnya. Bagi Sebagian orang tanggal publish ini sangat penting karena pembaca dapat mengetahui waktu postingan tersebut di publish. Tetapi ada juga yang tidak menginginkannya. Berikut akan saya bahas cara menghilangkan tanggal postingan, adapun langkah-langkahnya sebagai berikut:
1. Login ke akun Blogger anda.
2. Pilih Rancangan atau Tata letak >> Edit HTML.
3. Centang Expand Widget.
4. Cari kode di bawah ini.

. h2.date-header { margin:1.5em 0 .5em; }
5. Ganti Kode tersebut dengan kodi css dibwah ini.
h2.date-header { margin:1.5em 0 .5em; display:none;} 

NB: Jika suatu saat anda ingin memunculkannya kembali hapus saja display:none; dan tanggal postingan pun muncul kembali.
6. Simpan template dan lihat hasilnya.


Selamat Mencoba .................................. Semoga Sukses..........................


Cara Membuat Area Posting Kotak Terpisah


     Area posting digunakan untuk memberi kotak atau border pada postingan. Nah kali saya akan menjelaskan bagaimana cara membuat area posting kotak terpisah berikut adalah langkah-langkahnya:
1. Masuk ke akun blogger anda.
2. Pilih rancangan atau tata letak >> edit HTML.
3. Centang expland widget dan download template atau backup template sebagai jaga-jaga kalau nanti terjadi kesalahan.
4. Cari kode dibawah ini dengan cara ctrl + f agar mempercepat pencarian.

.post{border-bottom:1px solid #DDD;padding-bottom:15px;}

5. Hapus dan ganti dengan kode dibawah ini.


.post {
background:#fffff
border:1px solid #DF0101;
margin:0 0 0.5em;
padding:0.5em;
}


NB: Ganti #DF0101 dengan kode warna HTML sesuai keinginan anda . Klik disini untuk mendapat kode warna HTML.

6. Simpan template dan lihat hasilnya.

Cara Memberi Efek Warna Stabilo di Postingan

            Efek stabilo ini dapat di fungsikan sebagi penanda atau memberi blok pada kata-kata yang penting. Misal disini saya akan meberi efek pada kata yang ada di bawah ini:

"Belajar Membuat Efek Warna Stabilo"

Maka hal yang diperlukan adalah kode css dibawah ini agar kata diatas dapat di beri efek warna stabilo.

<span style="background-color:#380B61">kata yang akan di tulis</span>

keterangan: Ganti kata yang berwarna biru dengan kata yang akan di beri efek warna stabilo. #380b61 adalah warna dari stabilo. Untuk kode warna HTML yang lain klik disini.

Nah, jika sudah maka hasilnya akan seperti dibawah ini:

"Belajar Membuat Efek Warna Stabilo"

Selamat melakukan percobaan, Semoga Berhasil.............................

Cara Membuat Tab View Menu Tanpa Edit HTML


       Tab view menu adalah gadget yang dapat difungsikan sebagai pengirit tempat sidebar. Biasanya tab view menu digunakan sebagai daftar isi atau tempat gadget yang lain. Tapi pada umumnya sering digunakan sebagai daftar isi.  Berikut adalah langkah-langkah membuat tab view menu.

1. Login ke blogger anda.
2. Masuk ke rancangan atau layout >> elemen laman.
3. Tambah gadget.
4. Pilih HTML/java script.
5. Setelah itu copy kode css di bawah ini.

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan: Ganti huruf yang sudah di stabillo sesuai dengan leinginan anda. Misal Judul 1 diganti dengan Artikel dan Isi menu tab view 1 diganti dengan <ul><li><a href="http://shaolinagus.blogspot.com/2011/03/cara-reset-manual-tanpa-software-mp145.html">Cara Reset Manual Tanpa Software MP145 ( Error 27 )</a><br/></li>
7. Save dan lihat hasilnya.


Semoga Berhasil............................. Selamat Mencoba.....................................


Sabtu, 09 April 2011

Cara Membuat Link Berkedip Warna Warni

          Pasti sobat ingin memiliki blog yang sempurna. Agar terlihat lebih sempurna sobat harus mencoba tips trick yang saya jelaskan berikut ini, yaitu tips cara membuat link berkedip warna warni.


1.Login ke Blogger.

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Kemudian Cari kode  . Setelah ketemu copy dan paste kode dibawah ini tepat di bawah kode tadi .



<script src='http://denisahlan.netau.net/klinikit.js'/>

5.Klik Simpan Template.

6.Untuk melihat hasilnya langsung aja sobat arahkan kursor ke link yang ada pada blog sobat.

7.Selamat mencoba... Semoga Berhasil


Rabu, 23 Maret 2011

Cara Memosting Kode HTML

          Cara memosting kode HTML atau Javascript berbeda dengan memosting tulisan biasa. Karena, jika kita memosting kode HTML langsung ke halaman pemostingan, maka yang muncul adalah wujud asli dari  kode HTML tersebut bukan kode HTMLnya. Untuk itu saya akan jelaskan langkah-langkah memosting kode HTML, antara lain:
1. Kunjungi website www.centricle.com.
2. Kemudian sobat akan menghadapi tampilan seperti gambar di bawah ini.

3. Masukkan kode HTML yang ingin di posting. Kemudian klik Encode.
    Fungsi dari: a. Encode adalah untuk mengubah kode HTML ke wujud kode postingan.
                      b. Decode adalah untuk mengembalikan kode postingan ke kode HTML.
4. Copy kode hasil encode ke halaman postingan anda.
5. Kemudian coba hasil copyan tadi dengan cara pratinjau blog anda.







Minggu, 20 Maret 2011

Cara Posting kode warna tanpa edit HTML


Assalamu'alaikum sob.

Disini sob saya akan jelaskan tentang bagaimana caranya posting kode warna yang bagus dan hemat tempat tanpa melakukan editing pada HTML. Berikut adalah langkah - langkahnya:

1. Login ke blogger.
2.Pilih Rancangan/Tata letak/layout
3. Masuk ke elemen laman.
4. Klik tambah gadget.
5. Pilih HTML/JavaScript.
6. Kemudian copy paste kode css dibawah 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 hasil konfigurasi HTML/JavaScript dengan syarat jangan di beri judul.
8. Buatlah postingan dengan cara pilih posting >> Entri Baru.
9. Beri Judul Posting kamu.
10. Copy paste code css dibawah ini di Edit HTML.

<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" height="24" width="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></center>
Demikian trik saya memosting kode warna tanpa HTML pada blog.................

Sabtu, 19 Maret 2011

Kode Warna HTML

     Untuk mengedit warna template tentu saja sobat akan berhubungan dengan yang namanya kode warna HTML. Tidak seperti kode warna biasa, kode warna HTML ini menggunakan angka bukan huruf. Contoh untuk kode warna putih adalah #FFFFFF, untuk warna hitam#000000, dan masih banyak lagi kode untuk warna yang lain, jika saya sebutkan satu persatu akan memakan tempat dan waktu yang lama. Untuk itu saya buatkan dalam satu kotak besar beserta gambar warna yang jika di klik akan muncul kode warnanya.












Silahkan sobat kreasikan blog sobat dengan warna - warna di bawah ini :









































































































































































































Kode warna yang terpilih :

Name :
Web URL :
Message :
:) :( :D :p :(( :)) :x
text/javascrip