Tabel Warna HTML Di Blog Atau Web

Dalam mendesain blog ataupun website, pastinya kita tidak akan terlepas dari gradiasi warna. Untuk itu kita perlu mengetahui macam-macam warna tersebut dalam HTML atau sering disebut "Kode Warna HTML". Oleh karena kebutuhan tersebut, saya mencoba menyediakan untuk kawan kawan :)

Anda Tertarik ?? silahkan kawan ikuti langkah-langkah berikut ini :
1. Login ke akun Blogger Anda
2. Klik Tata Letak / Layout
3. Klik Edit HTML
4. Cari kode </head> Untuk memudahkan tekan ctrl+F.
5. Kemudian copy paste-kan kode dibawah ini persis diatas 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>

6. Kemudian klik Save Template

Setelah itu script kode warna HTML untuk memasang ke posting atau ke widget blog atau situs anda :

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

Hasilnya akan seperti dibawah ini :

Kode warna yang terpilih :

SELAMAT MENCOBA.... :)

Read More

Widget Penampil IP Address dan Host di Blog

Pada posting kali ini, saya akan memposting mengenai bagaimana sih caranya memasang widget untuk menampilkan IP address dan host address dari pengunjung blog kita.

Untuk mengetahui IP Address yang sekarang kita gunakan, anda bisa mencoba memasang widget IP Address di blog anda bro. Bagi anda yang suka mengoleksi Aksesoris Blog, belum lengkap rasanya jika anda belum mencoba Widget yang satu ini.
Banyak situs-situs intenet yang menyediakan tool untuk penampil IP seperti ini, tapi kebanyakan berupa file img atau gambar. Nah, bedanya disini penampil IP kita berupa text bro.... jadi tidaklah terlalu membebani loading blog kita.

Cukup copy-paste kode di bawah ini :


<center>
<script language="JavaScript">
VIH_BackColor = "transparent";
VIH_ForeColor = "#6f0";
VIH_FontPix = "11";
VIH_DisplayFormat = "IP Address Anda : %%IP%%<br>Host Anda : %%HOST%%";
VIH_DisplayOnPage = "yes";
</script>
<script language="JavaScript" src="http://www.hashemian.com/js/visitorIP.js.php"></script></center>


Keterangan :
VIH_BackColor = "transparent";       = ► Background warna widget tersebut
VIH_ForeColor = "#6f0";                    =► Warna text
VIH_FontPix = "11";                           =► Ukuran text

Nah silahkan di coba dan semoga bermanfaat :-) 

Read More

Meningkatkan Pengunjung Blog dengan Chicklet Chooser Feedburner.

Meningkatkan jumlah pengunjung blog merupakan impian semua blogger, apalagi cara meningkatkan pengunjungnya gratis alias nggak bayar. Di internet sendiri telah banyak situs yang menyediakan jasa untuk membantu mendongkrang jumlah visitor/pengunjung blog kita, namun dibalik itu semua terserah kita ingin milih yang mana.

Tapi dalam postingan kali ini sesuai dengan judul postingan di atas, yaitu "Cara Meningkatkan Jumlah Pengunjung Blog dengan Chicklet Chooser Feedburner", maka dari itu kita akan mencoba menggunakan layanan yang telah disediakan oleh feedburner yang bernama Chicklet Chooser. Mungkin sebagian sobat blogger ada yang bertanya apa itu "Chicklet Chooser"? Chicklet Chooser adalah kumpulan Chicklet yang bisa kita gunakan untuk membantu pengunjung blog kita ketika mereka ingin menyimpan blog kita dalam daftar bacaan milik mereka, dengan begitu para pengunjung akan merasa lebih mudah dan tak perlu repot-repot meng-copy paste link, akan tetapi cukup dengan klik, klik, dan klik.


Cara-cara memasang Chicklet Chooser di blog blogspot adalah sebagai berikut:

1. Silahkan login ke akun Google anda (akun blogger juga bisa)
2. Surfinglah ke situs feedburner.google.com
3. Silahkan untuk mengklik "FEED TITLE" anda, contoh

4. Pilih menu "Publicize", dan lihatlah ke arah menu kiri pada halaman tersebut dan pilihlah sub menu "Chicklet Chooser"

5. Maka nanti akan bermunculan banyak chicklet yang dapat kita gunakan

6. Selanjutnya centanglah salah satu layanan yang sobat inginkan, maka kode yang harus sobat pasang di blog sobat akan muncul di bagian bawah halaman tersebut

7. Sebagai hasil, maka akan tampil sebuah tombol seperti berikut (sebagai contoh saya menggunakan tombol "add to Google/i-Google")


8. Sobat bisa menampilkan lebih dari satu tombol layanan dengan cara mengklik Chicklet yang lain lalu copy kodenya, selanjutnya klik lagi Chicklet yang lain dan copy lagi kodenya, dst...
9. Silahkan simpan hasil kerjaan anda
Semoga bermanfaat

Read More

Widget Google Translate di Blog

Widget ini berfungsi untuk menerjemahkan bahasa yang satu ke bahasa yang lain. Dengan memasang widget ini, maka pengunjung yang berasal dari negara lain juga bisa menikmati konten diblog anda.
Selain itu, anda juga bisa memanfaatkan widget ini untuk belajar bahasa asing lho ;)

Translator ini juga menarik untuk di lihat bro, jadi tidak bakalan bosen dan tidak menyesal kalau menggunakan widget ini.


Bagi anda yang tertarik untuk memasangnya di blog anda , silahkan copy kode dibawah ini :

<style>
.translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
padding-left:0px;
}
.translate:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
border:0;
}
</style>

<div style="text-align: center;">
<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUEUU0Sd1fgAcABa9jWZ9RIHS8soeUpecrI8GWwdBj-I9RJrcezyEA0UmFNC6Qvxac1m_8VbTHeCbX16h_Ouns37d2lm66sQFFJKBx_nHzeOhC6ozWljpg2oFktIxZEVYu5WZZybLkJJ8u/s144/uk-flag.png" style="cursor: pointer; margin-right: 8px;" title="English" width="24" /></a>

<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="French"><img align="absbottom" alt="French" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-jFaAQDACMHGzcAmWvIjrumpCpK9a1UnZzIq-t-tOf6H2UVT6L9BSTIU3h6JjYv-6vKb8c8cNlBJKvZImWhX-LjxvlqcgZ9oamJj6DkFGcjHWcUomyEfx44ns6xIdnrrYuFBvTXWMJlC/s144/france-flag.png" style="cursor: pointer; margin-right: 8px;" title="French" width="24" /></a>

<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0k8vaQD3IZkPzNPkj4Dre_Xp6JEb8JkB3oCCtZlqRjZ3JdQdgRBFM2ACZK3UmglAWlV9DOAuEvhnA2XrVG0xbpW60AJwOyMvr5qLDBk1_jkY2CyLSRTvVe11RcjA_b6o4bZlpPiA2Px3n/s144/german-flag.png" style="cursor: pointer; margin-right: 8px;" title="German" width="24" /></a>

<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhWpOdH-A6rGR0SEkIbUZ9pHLC7i7BFL3PBGOIjHktN4D9WQJzPLP1w7coyijfXS4rPd-5BgShgxhlzhBWTyoXQzNc7CnpZBB4IocqrwjGAOcVWvV_DwRgy0dEzXAtSgeRToF747kd99Cb/s144/spain-flag.png" style="cursor: pointer; margin-right: 8px;" title="Spain" width="24" /></a>

<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cit&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="Italian"><img align="absbottom" alt="Italian" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1fGpKbg1N9X4W7nOp5F8ryi1uBPHYHAJMN7qfqheKRYBKUXnR4bD6OZ8YlugEJCP8BEUur_GQlfCykw3coKg3C6U2fOucK938mAyhoT1Skf8-_pdEW7xP8-CVh6fYEB0ptjBCdvOMfG0Y/s144/italy-flag.png" style="cursor: pointer; margin-right: 8px;" title="Italian" width="24" /></a>

<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cnl&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="Dutch"><img align="absbottom" alt="Dutch" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPfZdC4O6-obCQ9ceGN6BwjlVCXHstIRGkarPNN28OsE2tqhKMQua9Yt3q6x9s-AG6at938MY_NbjUHntsllprsCQOEeXsAI7-8dI6-YpTn9wsV5y14ZP_PFQfDTVVSy83LnKvPigDBxsS/s144/dutch-flag.png" style="cursor: pointer; margin-right: 8px;" title="Dutch" width="24" /></a>



<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtaJ8FVLtEPjdmRssgU3nWrVBWJDNIx7zd5OjFdPax10j10YYawITqty511pupgGRhSflA6U9dBbqW-7artpUrf_YhqjiEdNDYVbhNuzZhQL2fUsH_mSmErBERedZEbBm0XKloiGDIQabK/s144/russian-flag.png" style="cursor: pointer; margin-right: 8px;" title="Russian" width="24" /></a>

<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cpt&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="Brazil"><img align="absbottom" alt="Brazil" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0s0pIc27_h8F0sDr_htiuLFfLiHkHj4tB0Pk6sFvx757jYk9mwroEqvAdu3LS0145r88h3KaQubNqTqHjY-gSDFbVl_xrY6U1Cj5y98g88iW02zj-4eVrtu6iZ6lJBkTdqil4oPS1X6AV/s144/brazil-flag.png" style="cursor: pointer; margin-right: 8px;" title="Brazilian" width="24" /></a>

<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbxFR6NYzfd7rgOoZhfEcAXA12FAYvtJkT059QxM_4NqLF33DshH28dgLEQBrdfB4TU7p6C6L3uqF2kLVDiROPGW-UrXqbM1TBe32sJql3pxM5iGUMoIGHKQ0zXR8Pt31Aiof4IR-W6PAf/s144/japan-flag.png" style="cursor: pointer; margin-right: 8px;" title="Japanese" width="24" /></a>

<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cko&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="Korean"><img align="absbottom" alt="Korean" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPVHkUkBJcEaq16AtP6U9saNmobvgDX4i4uTuRxlIUrdjTdlr7rOI8d-XsxuJbg00ta-AVVrLK1QhedcIiUYByFNAC_HRhMIk7pWJtBuEI6cPF-IkAHvxxE4O4HLhDkZJEo1P2MDlIgbXs/s144/korean-flag.png" style="cursor: pointer; margin-right: 8px;" title="Korean" width="24" /></a>

<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqpVIUdZaWyM3aRPWv4WSCYfEWn3zUTxOycF4hMJ9TuAxYyL3zbq6FgfEa05zAtUY-L4iVeAsUkzStY9zNkQM0K6IPsdVCVL_szo9fdjRZVty2hebjtKKjSUKGnEvztsvoVNEmhZzYgme/s144/arab-flag.png" style="cursor: pointer; margin-right: 8px;" title="Arabic" width="24" /></a>

<a class="translate" href="http://www.blogger.com/post-create.g?blogID=5276745933104901955#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEypOn8-ngpjTcHDnBq_bkFDMhT4fP5lo3AbhxFUx_ZO7SggBVKHHjcuPCmLtkIuGBaNDMBT8uGncYsRw3ac7QDzFXpacIt2mAV9mrCZEEr5WDhzssE8z4h5DpzjKmuZKEVJm7n34hc1i/s144/china-flag.png" style="cursor: pointer; margin-right: 8px;" title="Chinese Simplified" width="24" /></a>

<div style="font-size: 9px; padding: 8px 0px 0px;">
<a href="http://ibllezboy.blogspot.com/2011/01/cara-menambah-widget-google-translate.html" target="_blank">Translate Widget</a> by Google</div>
</div>

Jika anda merasa letaknya kurang pas dengan kolom sidebar anda. Anda bisa menyesuaikan jaraknya dengan mengganti nilai 0 pada padding-left. Semakin tinggi nilainya semakin lebar jaraknya. Dan jika anda ingin mengganti icon benderanya dengan icon lain.
Selamat mencoba teman :) Semoga berhasil ,, Happy Blogging,,

Read More

Membuat Auto Hide pada Navbar Blogger

Cara Membuat Auto Hide pada Navbar Blogger adalah cara agar Navbar blogger kita hilang tapi akan muncul kembali saat mouse kita lewatkan di bagian Navbar tersebut, ya intinya kita hanya menyembunyikan Navbar tanpa menghapusnya. karna Jika navbar blogger kita hapus itu bisa melanggar TOS Blogger, Gak maukan Blog temen- temen terjadi apa - apa? hehe, tapi dari pengalaman saya, blog yang saya gunakan dengan menghapus Navbar Blogger tersebut tidak terjadi apa - apa? (Jika temen - temen tahu efek jika Navbar di hapus kasih info ke saya :P ).

Berikut Cara membuatnya :

1. Klik tab Tata Letak
2. Edit HTML
3. Cari kode body {
4. Copy Paste code dibawah ini diatas kode body {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Semogga Cara Membuat Auto Hide pada Navbar Blogger ini dapat membuat blog temen - temen lebih dinamis tanpa melanggat TOS

Read More

Menampilkan Halaman Web Lain di Dalam Blog

hari ini saya ingin membeberkan/membahas cara menampilkan halaman blog/wap/web lain kedalam postingan blog kita ...

Hmmmm . . . . kelihatannya seru.
Bagaimana caranya? yuk kita pelajari bersama . . .

kali ini saya tidak mau panjang lebar, langsung saja ke pokok acara.
agar halaman web lain bisa muncul di halaman posting blog kita, yang dibutuhkan hanyalah kode-kode berikut :

<iframe align="center" frame border="yes" height="178px" name="frame1" scrolling="auto" src="ALAMAT WEB/BLOG/WAP LAIN" style="border:1px solid;"width="100%"></iframe>

ganti ALAMAT WEB/BLOG/WAP LAIN dengan alamat yang kamu suka dan Jangan lupa atur dulu besar Width dan height nya.

Read More

Penjelasan Fungsi Settings Blogspot

Jika sudah berhasil mendaftar dan membuat blog di Blogspot, kita akan diminta untuk mengatur setting blog yang telah dibuat. Apa saja setting ini ? dan apa kegunaan dari setiap setting ini ? mari kita mambahasnya dalam tutorial blogspot kali ini.
Setting blog berguna untuk mengatur segala sesuatu yang berhubungan dengan blog. Setting yang tepat sangat membantu bagi blog yang kita buat. Kita tidak perlu khawatir walaupun tidak memiliki pengetahuan tentang hal-hal yang teknis, karena Blogspot sudah memberikan berbagai kemudahan untuk mengatur setting ini.

Read More

Cara Setting Custom Domain di Blogspot

Pembahasan Cara Setting Custom Domain di blogspot ini akan memulai lagi serial tutorial blogspot sudah sekian lama ga nongol di blog belajar ngeblog ini. Sekian lama blog ini membahas tentang tutorial atau tips dan trik wordpress. Pada tutorial blogspot kali ini saya akan membahas tahap demi tahap tentang  bagaimana cara setting custom domain di blogspot.

 

Custom domain adalah nama domain dengan TLD yang kita pilih untuk mempersingkat url pada blogspot kita.  kita bisa memilih salah satu dari sekian banyak TLD berbayar  (Top Level Domain) semisal .com, .net, info, .org dan lain2. selain itu ada pula beberapa yang menyediakan domain ini secara gratis, misalnya .co.cc dan co.nr.  yuk kita mulai ….

Read More

Cara Mengetahui Statistik Blog Dengan Google Analytics

Kita pasti ingin tahu sudah sampai dimana perkembangan statistik blog yang kita buat, sudah berapakah yang mengunjungi ? dan dari manakah pengunjung yang paling banyak datang. Adakah tools-tools yang bisa digunakan untuk mengetahui hal ini, tentu saja banyak. Baik yang gratisan ataupun yang berbayar.  Salah satunya yang paling terkenal adalah Google Analytics.

Read More

Cara Mengetahui Statistik Blog Dengan Google Analytics

Kita pasti ingin tahu sudah sampai dimana perkembangan statistik blog yang kita buat, sudah berapakah yang mengunjungi ? dan dari manakah pengunjung yang paling banyak datang. Adakah tools-tools yang bisa digunakan untuk mengetahui hal ini, tentu saja banyak. Baik yang gratisan ataupun yang berbayar.  Salah satunya yang paling terkenal adalah Google Analytics.

Read More