Posting Artikel dengan menu HTML (Rata Kiri, Kanan, Semua)

Kode html Rata Kiri

<div align="left">
isi artikelnya di sini
</div>

Maka Hasilnya :

Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang sobat mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?

Akan tetapi bagi sobat yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem read more yang saya ajarkan di blog ini adalah dengan memakai kode <div class="fullpost"> yang relatif lebih aman.

Kode html Rata Kanan:

<div align="right">
isi artikelnya di sini
</div>

Maka Hasilnya:

Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang sobat mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?

Akan tetapi bagi sobat yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem read more yang saya ajarkan di blog ini adalah dengan memakai kode <div class="fullpost"> yang relatif lebih aman.

Kode html tulisan ditengah semua

<div align="center">
isi artikelnya di sini
</div>

Maka Hasilnya :

Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang sobat mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?

Akan tetapi bagi sobat yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem read more yang saya ajarkan di blog ini adalah dengan memakai kode <div class="fullpost"> yang relatif lebih aman.

Kode html Rata Kiri-Kanan

<div align="justify">
isi artikelnya di sini
</div>

Maka Hasilnya :

Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang sobat mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?

Akan tetapi bagi sobat yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem read more yang saya ajarkan di blog ini adalah dengan memakai kode <div class="fullpost"> yang relatif lebih aman.

Semoga Bermanfaat

Read more »

Penulisan HTML (Warna)

<span style="color:kode warna">
tulisan yang mau di warnai
</span>

Contoh Penggunaannya :

<span style="color:red">
ini contoh merah
</span>

Hasilnya:

ini contoh merah

Atau bisa juga ditulis :

<span style="color:#FD0303">
ini contoh merah
</span>

Hasil kode diatas akan tetap sama. untuk mengetahui kode warna klik disini
Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga pada edit HTML untuk kode template.

Read more »

Conventer html Versi JavaScript Mentah

<style type="text/css"><br /> #codes {<br /> border:1px solid #666;<br /> width:98%;<br /> height:200px;<br /> margin:5px auto 10px;<br /> display:block;<br /> }<br /> <br /> .button-group {<br /> margin:0px auto 0px;<br /> text-align:center;<br /> }<br /> </style><br /> <textarea id="codes"placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea><br /> <div class="button-group"><br /> <button onclick="cdConvert();">Konversi</button><br /> <button onclick="cdClear();">Bersihkan</button><br /> </div><br /> <script type="text/javascript"><br /> function cdClear() {<br /> var wtarea = document.getElementById('codes');<br /> wtarea.value = '';<br /> }<br /> <br /> function cdConvert() {<br /> var ctarea = document.getElementById('codes'),<br /> cv = ctarea.value;<br /> cv = cv.replace(/&/g, "&amp;");<br /> cv = cv.replace(/'/g, "&#039;");<br /> cv = cv.replace(/"/g, "&quot;");<br /> cv = cv.replace(/</g, "&lt;");<br /> cv = cv.replace(/>/g, "&gt;");<br /> ctarea.value = cv;<br /> ctarea.focus();<br /> ctarea.select();<br /> };<br /> </script><br />

Maka Hasilnya :

Read more »

Conventer html Versi JQuery

Terserah apakah kode ini akan Anda letakkan di dalam halaman statis atau widget, cukup pastikan bahwa template Anda sudah dilengkapi dengan JQuery, maka konverter HTML ini akan bekerja:

<style type="text/css"><br /> #codes {<br /> border:1px solid #666;<br /> width:50%;<br /> height:200px;<br /> margin:5px auto 10px;<br /> display:block;<br /> }<br /> <br /> .button-group {<br /> margin:0px auto 0px;<br /> text-align:center;<br /> }<br /> </style><br /> <textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea><br /> <div class="button-group"><br /> <button id="convert">Konversi</button><br /> <button id="clear">Bersihkan</button><br /> </div><br /> <script type="text/javascript"><br /> $(function() {<br /> $('button#convert').click(function() {<br /> $('textarea#codes').val(<br /> $('textarea#codes').val()<br /> .replace(/&/g, "&amp;")<br /> .replace(/</g, "&lt;")<br /> .replace(/>/g, "&gt;")<br /> .replace(/"/g, "&quot;")<br /> .replace(/'/g, "&#39;")<br /> ).focus().select();<br /> return false;<br /> });<br /> $('button#clear').click(function() {<br /> $('textarea#codes').val('').focus().select();<br /> return false;<br /> });<br /> });<br /> </script><br />

Hasilnya :

Read more »

Membuat floating widget

Sebelumnya saya pernah menulis tentang cara membuat ini (membuat menu floating) tapi dengan tips hanya menggunkan modifikasi CSS saja, nah berikut ini sedikit modifikasi dengan menggunakan kode javascript dan tampilan pun akan lebih dinamis, di dalamnya sobat dapat tempatkan apapun juga mis : Iklan adsense, Gambar, ataupun chat box. untuk preview coba sobat klik widget bertuliskan sponsor sebelah kanan.
Buka Layout Page Element dan Klik add gadget, kemudian pilih HTML/javaScript

<style type="text/css">
.gb_fixed{
position:fixed;
top:80px;
right:0px;
z-index:+10;
}

* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid gray;
background:#111;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div> <a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKxMqjhl1P7GLgsrgId4TCLpqi5Ul6pw_-jUItx4sTZexo5K6cH6rpDl160VNBS6WNdDF6LfVvqlYRrJymXPGyxMXfGdeDiyxPpFpNYajett4DR9lV08nVzZutry1pOZ4-Uq4u_ep9DbpJ/s320/CloseButtonHot.bmp" /></a> </div>

tempatkan apa saja disini

<p>
<span style="font-size: 80%;">
<a href="http://jendelainfo23.blogspot.com/p/daftar-isi.html">Jendela Informasi</a></span></p>
</td></tr></table>
</div>

<script src="http://andreblog.googlecode.com/files/ordinaryhack-floatingku.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnV3CqrJq8c0l4Q07ETBBsrvDbaTuZPnSxM0DZRXC843TxxfKK2By19vAKYwODHu3tTmaEPEFPbz-1jil5Q12cNqPNYJa7Wv6-5gfAG-E9jZhpEkXTtKnaT2ZhMEOMW0OG2rlmPMPg-RwP/s320/sponsored.png" style="filter: alpha(opacity=60);
opacity: 0.6;"
/>
</a>
</div>

Silahkan di Coba

Read more »

Modifikasi list | angka dan huruf

cara memodifiasi tampilan type huruf besar

Letters list:
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya
Letters list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

cara memodifiasi tampilan type huruf kecil

Lowercase letters list:
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya :
Lowercase letters list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

cara memodifiasi tampilan type huruf romawi besar

Roman numbers list:
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya
Roman numbers list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

cara memodifiasi tampilan type huruf romawi kecil

Roman numbers list:
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya :
Roman numbers list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

Read more »

Modifikasi list | disc,circle, dan square.

Pada tips sebelunya kita saya sudah membicarakan tentang cara membuat tulisan Membuat susunan tulisan berurutan (list), nah sekarang sedikit tips untuk memodifikasi tampilannya.

cara memodifiasi tampilan type disc

Disc bullets list:
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

Maka Hasilnya :

Disc bullets list:

• Apples
• Bananas
• Lemons
• Oranges

cara memodifiasi tampilan type circle

Circle bullets list:
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

Maka Hasilnya :

Circle bullets list:

• Apples
• Bananas
• Lemons
• Oranges

cara memodifiasi tampilan type square

Square bullets list:
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

Maka Hasilnya :

Square bullets list:

• Apples
• Bananas
• Lemons
• Oranges

Read more »

Membuat susunan tulisan berurutan (list)

Cara ini bisa saja secara otomatis dapat di buat ketika sobat membuat tulisan di bagian postingan, tapi ketika sobat ingin membuatnya di sidebar, anda harus menuliskannya secara manual.

Nah..berikut tips sederhana untuk sobat:

<ul>
<li>List baris pertama</li>
<li>Untuk yang kedua</li>
</ul>

Hasilnya :

• List baris pertama
• Untuk yang kedua

Untuk memodifikasi tampilan bulletnya bisa sobat coba disini

<ol>
<li>List baris pertama</li>
<li>Untuk yang kedua</li>
</ol>

Hasilnya :

1. List baris pertama
2. Untuk yang kedua

Untuk memodifikasi tampilan menjadi huruf bisa sobat coba disini

<dl>
<dt>Daftar</dt>
<dd>- daftar dalam daftar 1</dd>
<dt>Daftar 2</dt>
<dd>- daftar dalam daftar 2</dd>
</dl>

Hasilnya :

Daftar

- daftar dalam daftar 1

Daftar 2

- daftar dalam daftar 2

Read more »

Mengenal HTML 1

Bagi kawan-kawan yang sudah pernah berkunjung ke blog ini, mungkin tahu bahwa hari ini blog ku ada banyak perubahan, yo'i.. yang tadinya sangat anti gambar sekarang tiba-tiba jadi lautan gambar, coba saja lirik kebawah, tadinya banner yang terpasang hanya beberapa buah saja tapi sekarang jadi ngebaris kaya tentara mau berangkat perang.

Yups..tadinya cuma iseng-iseng masukin banner dari teman-teman blog lain, eh keterusan.. ya udah sekarang semua gambar dari feedburner.com aku masukin semua..sekalian biar rame..

Dan mulai hari ini topik bahsan pun akan ada sedikit perubahan, yakni ga cuma ngebahas blog tutorial doank tapi ngebahas juga soal HTML, ini saya lakukan karena ada diantara sahabat saya yang hoby obrak-abrik template blognya tapi masih menemui kesulitan karena masih bingung soal perintah-perintah HTML, ya ngga jauhlah dari saya yang setiap edit HTMl musti inga inga dulu perintah HTML nya ma'lum baru belajar jadi belum pada hapal.

Baiklah sobat, kita kembali ke (laptop) bahasan utama artikel ini yaitu mengenai HTML.

Apa itu HTML ?

HTML (Hypertext Markup Language)adalah merupakan suatu standar bahasa program yang di gunakan untuk menampilkan dokumen-dokumen web. (itu menurut saya bro, kalo salah ya mohon di maafkan).

• Mengenal Tag HTML

Perintah-perintah dalam HTML biasa di sebut dengan TAG. TAG ini kebanyakan mempunyai pasangan, yakni TAG pembuka dan penutup. Misal <b>...</b>, <i>...</i> dan lain sebagainya, dan TAG yang mempunyai pasangan ini juga bersifat Override yakni dapat menimpa fungsi TAG sebelumnya. Contoh : sebuah teks yang sudah di buat miring oleh tag <i> ... </i>, dapat di timpa oleh tag <b> ... </b> sehingga akan melahirkan dua hasil perintah yang berbeda sekaligus yakni kombinasi hurup miring dan hurup tebal, contoh :

ini hanya <b><i>contoh </i></b> saja sobat

yang akan tampil di browser adalah :

ini hanya contoh saja sobat

di samping TAG yang mempunyai pasangan, ada juga tag yang tidak memerlukan pasangan, misal TAG <hr> , <br> , ataupun <input>

Sebuah Tag tidaklah sensitif terhadap Case (hurup besar atau kecil), jadi mau di tulis hurup besar ataupun huruf kecil akan menghasilkan fungsi yang sama. Sebagai contoh : fungsi Tag <b>....</b> akan sama dengan Tag <B> ....</B>.

• Struktur dokumen HTML

Sebuah dokumen HTML terbagi kedalam tiga bagian utama, yakni HTML, HEAD, serta BODY.

HTML 
Sebuah dokumen HTML haruslah diawali dengan tag <HTML> dan di tutup dengan </HTML>, Tag ini adalah sarana untuk memberikan informasi kepada browser bahwa apa-apa yang di tulis di dalamnya merupakan sebuah dokumen HTML.

HEAD

Bagian header dari sebuah dokumen HTML diawali oleh tag <HEAD> dan di tutup oleh tag </HEAD>, dan di dalam header di isi pula dengan tag title yakni judul dari dokumen, tag title ini di tulis dengan tag pembuka <TITLE> dan di tutup oleh tag </TITLE>, contoh : title dari blog ini adalah Blog Tutorial jadi untuk tittle nya di tulis seperti ini <TITLE> Blog Tutorial </TITLE>, akan tetapi di blogger.com untuk penulisan title tidak harus di tulis langsung pada tag title karena sudah di otomatisasi, alamatnya yaitu <$BlogPageTitle$>. Dalam pengisian title ini seyogya nya jangan asal-asalan, karena title merupakan hal pertama yang di lihat oleh search engine.

Di dalam Header pun di isi pula dengan tag META, tag META ditulis dengan tag <META>, tag META ini biasanya memuat informasi mengenai dokumen HTML. dengan tag META kita bisa menentukan keyword, content,refresh, dan lainnya sebagainya. Khusus tentang tag META keyword akan di bahas lebih lanjut pada postingan selanjutnya.

BODY

Semua dokumen HTML yang di simpan di dalam BODY semisal teks, image, link, dan lain sebagainya akan di tampilakan dan bisa di lihat di dalam browser.

Ok sahabat, mungkin pengenalan pertama mengenai HTML di cukupkan sekian dulu dan akan di teruskan pada postingan-postingan selanjutnya

Read more »

Mengenal HTML 2

Melanjutkan posting yang terdahulu setelah terselang oleh beberapa artikel tentang blog tutorial maka kali ini saya akan membahas tentang tutorial HTML kembali.Sebelum menginjak kepada topik bahasan ada baiknya para sobat mengikuti bahasan kali ini dengan langsung memfraktekannya agar lebih cepat mengerti. Caranya siapkan terlebih dahulu program notepadnya lalu tuliskan kode HTML seperti dibawah, kemudian apabila telah selesai mempraktekan simpan file tersebut dengan extensi .htm (dot htm).

Contoh file : latihan.htm kemudian jalankan dengan internet explorer.

Silahkan tulis kode-kode berikut :

<html>

<head>

<title>latihan</title>

<body>

Tulis apa-apa yang saya terangkan di sini !

</body>

</html>

Kita langsung ke topik bahasan aja ya biar ga bosan.

Elemen dasar HTML

Ada beberapa elemen dasar HTML yaitu :

• Elemen Blok Level
Elemen blok level yaitu tingkatan besarnya hurup yang akan di tampilkan pada browser. Elemen blok level yang paling sering di gunakan adalah Heading (h1 sampai h6).Tag heading ini ini berupa <h1>...</h1> sampai dengan <h6>...</h6>. Contoh : <h1>Ini heading 1</h1> <h2>Ini heading 2</h2> <h3>Ini heading 3</h3> <h4>Ini heading 4</h4> <h5>Ini heading 5</h5> <h6>Ini heading 6</h6> Hasilnya akan seperti ini :

Ini heading 1

Ini heading 2

Ini heading 3

Ini heading 4

Ini heading 5

Ini heading 6

Sebenarnya ada cara lain untuk menampilkan berbagai ukuran hurup, yakni memakai tag <font size="...">.....</font>.

Contoh :

<font size="1">Ini font size 1</font>

<font size="2">Ini font size 2</font>

<font size="3">Ini font size 3</font>

<font size="4">Ini font size 4</font>

<font size="5">Ini font size 5</font>

<font size="6">Ini font size 6</font>

<font size="7">Ini font size 7</font>

Hasil yang akan tampil seperti ini : 

Ini font size 1

Ini font size 2

Ini font size 3

Ini font size 4

Ini font size 5

Ini font size 6

Ini font size 7

Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.

Selamat Mencoba dan Berkreativitas, Mudah-mudahan Posting ini dapat berguna!

Read more »

Pasang Widget Kode Warna di Blog

Kode warna, pasti sobat yang masih suka utak-atik template blogger bakal sering dihadapkan dengan ini. Saya sudah buat posting khusus untuk memilih kode warna untuk kebutuhan desain template. Nah, barangkali ada sobat yang tertarik untuk memasang widget kode warna pada blognya. Namun, sedikit banyak script CSS kode warna ini akan mempengaruhi kecepatan loading blog. Agar loading blog cepat, silahkan baca CSS Compressor. Jika tertarik ingin memasang kode warna pada blog, silahkan ikuti langkah berikut ini.

Cara pasang widget kode warna pada blogger

Langkah Pertama

1. Login ke blogger dengan id anda
2. Klik menu Tata Letak
3. Pada tab menu klik Edit HTML
4. Silahkan Backup dulu template anda dengan klik Download Template Lengkap
5. Sekarang cari kode </head>. Jika sudah ketemu, copy lalu paste kode berikut di atas kode </head>
<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]-->
Selesai
Langkah Kedua : Berikutnya, memasang tabel kode warna pada blog. Ada dua pilihan, pertama dipasang sebagai posting blog dan yang kedua dipasang pada halaman utama (homepage) blog. Nah, kode untuk tabel kode warna yang akan dipasang adalah berikut ini :
Kode Warna :
</div><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="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 : <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>
Cara pasang kode warna sebagai posting blog :
• Yang pasti, anda buat posting baru terlebih dahulu
• Copy lalu paste Kode Warna tersebut pada posting anda
• Berikan judul posting yang sesuai
• Jangan lupa untuk memberi label posting
• Kemudian terbitkan postingan
• Selesai
Cara pasang kode warna di halaman utama (homepage) blog :
• Masuk ke menu Elemen Halaman
• Klik Tambah Gadget
• Pilih tambahkan HTML/JavaScript
• Copy lalu paste Kode Warna tersebut di dalamnya.
• Berikan judul atau nama gadget
• Klik tombol Simpan
• Silahkan tempatkan gadget kode warna dengan men-drag ke tempat yang sesuai
• Klik tombol Simpan
• Selesai
Sekarang widget kode warna sudah hadir di blog anda. Selamat mencoba dan mudah-mudahan bermanfaat.

Read more »