Menambah widget pengatur Ukuran dan Warna teks pada Blog

Hallo....... Ketemu lagi dengan tutorial blog Html Noer. Beberapa waktu yang lalu saya berkunjung di Blogger Tip and Trick, disana saya tertarik pada tutorial tentang bagaimana menambah widget pengatur ukuran dan warna teks pada blog. Widget ini sesuai fungsinya menurut saya sangat unik dan berguna bagi pengunjung atau pembaca artikel di blog kita, yaitu pengunjung bisa mengatur atau merubah ukuran dan warna tulisan sesuai dengan selera atau kenyamanan mata pengunjung saat membaca. Dalam widget ini terdapat 4 macam warna dan 4 macam ukuran yang bisa dipilih. Anda bisa lihat contoh gambar bentuk widget diatas.
OK...., bila anda juga bermninat memasang widget seperti ini pada blog anda, silahkan anda ikuti langkah-langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

8. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Widget pada halaman depan blog anda. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget



3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







4. Copy dan paste kode dibawah ini pada gadget tersebut :

<!-- Code Begins -->
<!-- http://TheUnnecessaryWorld.co.cc -->
<style type="text/css">
/** TUW Font Color and Size Change widget begins **/
#tuw-font-change-widget {width: auto;}
#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma !important;font-weight: normal !important;border: 0 !important;}
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}
#fcw-black { background: #000000 !important; } #fcw-white { background: #088A08 !important; } #fcw-blue { background: #0066CC !important; } #fcw-gray { background: #666666 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
/** TUW Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color -- begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});

$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#088A08" });
return false;
});

$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});

$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
// Change Font Color -- ends

// Change Font Size -- begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});

$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});

$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});

$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});
// Change Font Size -- ends
});
</script>
<!-- TUW Blogger Change Font color and size widget begins -->
<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2> Ganti warna tulisan </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-white" href="#">green</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
</ul>
</div>

<div class="tuw-fcw">
<h2> Ganti ukuran tulisan </h2>
<ul id="fcw-size">
<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>
<li> <a id="fcw-14" href="#">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
</ul>
</div>
</div>
<!-- TUW Blogger Change Font color and size widget ends -->
<!-- Code ends -->

 
5. Simpan.

Dan sekarang anda lihat hasil Widget yang baru anda buat....

Selamat mencoba dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.

 

Cara Menambahkan Efek Teks pada Cursor Mouse

Yang dimaksud Efek Teks pada Cursor adalah ketika Cursor atau mouse kita gerakkan, maka akan muncul sebuah efek yaitu Cursor yang bergerak diikuti oleh deretan teks. Dan teks tersebut terserah kita, mau di beri tulisan apa saja. Cara buatnya mudah, silahkan anda ikuti langkah berikut bila anda berminat :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan dan pilih Elemen Laman

3. Tambah Gadget



4. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







5. Copy dan paste kode script dibawah ini pada gadget tersebut :

<script language="javascript">


// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='Ganti dengan Teks yang anda suka';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

Catatan :

Silahkan ganti tulisan berwarna merah dengan tulisan atau teks yang anda suka.

6. Simpan.

Selamat mencoba dan lihat hasilnya, semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.

Membuat variasi Font pada Teks

Sebuah Web ataupun Blog diharapkan memberi tampilan yang indah dan menarik. Salah satunya mengan memberikan variasi pada teks sesuai dengan selera kita,seperti memberi warna pada teks, memberi ukuran besar kecil dll. Dan kali ini saya akan memberi contoh bagaimana cara penulisan dalam HTML, agar tulisan lebih bervariasi.

Nama-nama Font bisa anda lihat dibagian paling bawah halaman ini. Daftar font yang saya contohkan saya ambil dari nama-nama font yang di pakai di Notepad, versi script western.
Untuk memberi warna pada teks anda, silahkan lihat dan pilih warna dan kodenya yang ada  pada Tabel kode warna di : http://www.buatblog-mudah.co.cc/p/kode-warna-color-code.html  Atau KLIK DISINI

OK...!!!, sekarang silahkan anda perhatikan perbedaan contoh-contoh berikut :

1. Teks standart :

<font>Teks dengan fon standart</font>

berikut hasilnya :

Teks dengan font standart

2. Teks dengan nilai besar-kecil :

<font size="6">Teks dengan ukuran font</font>

 berikut hasilnya :

Tek dengan ukuran font

3. Teks dengan nilai ukuran dan berwarna :

<span style="color: #FF0000; font-size: 45px;">Teks dengan nilai ukuran dan berwarna merah</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna merah

<span style="color: #ffff20; font-size: 50px">Teks dengan nilai ukuran dan berwarna kuning</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna kuning

<span style="color: #009600; font-size: 30px;">Teks dengan nilai ukuran dan berwarna hijau</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna hijau

<span style="color: #1418ff; font-size: 20px;">Teks dengan nilai ukuran dan berwarna biru</span>

berikut hasilnya :
Teks dengan nilai ukuran dan berwarna biru

4. Teks berwarna dengan besar 30px,font Goudy Stout :

<span style="color: #1418ff; font-size: 30px"><span style="font-family: Goudy Stout,sans-serif;">Teks berwarna dengan besar 30px,font Goudy Stout</span></span>

berikut hasilnya :
Teks berwarna dengan besar 30px,font Goudy Stout

Gimana mudah kan....?
Berikut ini daftar macam-macam font untuk anda coba terapkan pada artikel anda :

Nama-nama Font

Agency FB Algerian Arial Arial Rounded MT Baskerville Old Face Bauhaus 93 Bell MT Berlin Sans FB ArialBernard MT Blackadder ITC Bodoni MT Bodoni MT Poster Book Antiqua Bookman Old Style Bradley Hand ITC Britannic Broadway Brush Script MT Calibri Century Gothic Century Schoolbook Chiller Colonna MT Comic Sans MS Cooper Copperplate Gothic Courier Curlz MT Edwardian Script ITC Elephant Engravers MT Eras ITC Felix Titling Fixedsys Footlight MT Forte Franklin Gothic Freestyle Script French Script MT Futura Md BT Gabriola Georgia Gigi Gill Sans Gloucester MT Goudy Old Style Goudy Stout Haettenschweiler Harlow Solid Harrington High Tower Text Impact Informal Roman okermanJ Juice ITC Kristen ITC Kunstler Script Latin Lucida Calligraphy Lucida Console Lucida Handwriting Lucida Sans Magneto Maiandra GD Matura MT Script Capitals Microsoft Sans Serif Mistral Modern Modern No. 20 Monotype Corsiva MS Sans Serif MS Serif Niagara Engraved Niagara Solid OCR-A BT Old English Text MT Onyx Palace Script MT Palatino Linotype Papyrus Playbill Poor Richard Pristina Rage Ravie Rockwell Roman ArialScript Script MT Segoe Print Segoe Script Segoe UI ArialShowcard Gothic Small Fonts Snap ITC Stencil System Tahoma Tempus Sans ITC Terminal Times New Roman Trebuchet MS Tw Cen MT Verdana Viner Hand ITC Vivaldi Vladimir Script

selamat mencoba dan semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.

Cara Buat Kotak atau Teks Area

Saat yang lalu saya menjelaskan cara membuat tabel. Dan pada tutorial blog kali ini hampir mirip dengan tabel, sama-sama berbentuk kotak. Tapi kotak yang ini berfungsi sebagai teks area dan bentuknya lebih sederhana, tapi tetap indah dan rajin. Cara buat kotak ini mudah, hanya dengan menggunakan atribut html : <fieldset>

Berikut kodenya silahkan anda copy, bila anda berminat :

Kotak 1

<fieldset>
Teks anda disini
</fieldset>

Berikut hasil kode diatas :

Teks anda disini

Kotak 2

<fieldset><br>
<legend><b>Judul Teks disini</b></legend>Isi Teks anda disini
</fieldset>

Berikut hasil kode diatas :

Judul Teks disini Isi Teks anda disini

Kotak 3

<fieldset><br>
<legend><b><fieldset>Judul Teks disini</fieldset></b></legend>Isi Teks anda disini
</fieldset>

Berikut hasil kode diatas :

Judul Teks disini Isi Teks anda disini

Nah.....,mudah kan...?
Silahkan anda bisa otak - atik sendiri sesuai selera anda. Semoga bermanfaat.
Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.

Cara membuat Link Terbuka di halaman Baru

Sering kali kita mendapati banyak link yang terdapat pada halaman sebuah web atau blog, baik terletak pada teks, gambar, baner atau yang lain. Dan ketika link-link tersebut kita klik, biasanya akan terbuka halaman baru tapi halaman sebelumnya masih tetap terbuka. Hal ini dimaksudkan agar pengunjung bisa melihat dokumen yang tersimpan pada link tersebut, tanpa harus meninggalkan halaman yang masih dilihat atau dibaca.

Cara membuat Link tersebut sangat mudah, kita tinggal menambahkan atribut " target=”_blank”> " pada link yang kita buat. Perhatikan perbedaan contoh link dibawah ini :

Link yang tidak membuka halaman baru :

<a href=" http://htmlnoer.blogspot.com">Klik disini</a>

Link yang membuka halaman baru :

<a href=" http://htmlnoer.blogspot.com" target=”_blank”>Klik disini</a>

Mudah kan.....?

Silahkan mencoba, semoga bermanfaat ya...

Mohon luangkan aktu anda tinggalin komentarnya ya..... Terima kasih.

Cara buat tabel kode warna

Warna sangat berperan dalam pembuatan website atau blog. Dan pemberian warna dalam mebuat web atau blog, yang dibutuhkan adalah "code color" atau "kode warna". Hampir setiap saat kita edit dan posting artikel pada web atau blog, "kode warna" selalu kita butuhkan.

Repotnya... ketika kita butuh kode warna, sering kali kita harus mencari sebuah web atau blog yang menyediakan kode warna tersebut.... iya kan....?.
Nah.... Tutorial blog kali ini akan berbagi pada anda, bagaimana cara mebuat tabel kode warna sendiri seperti tabel kode warna dibawah ini, yang di pasang pada web atau blog kita.

Berikut Tabel kode warna yang saya maksud :

Kode HTML Warna :

 Ok..... silahkan anda ikuti langkah-langkah berikut ini :

1. Kamu harus Login dulu di Blogger.com dengan ID kamu
2. Klik Layout / Rancangan lalu pilih Edit HTML
3. Jangan lupa Centang Expand Widget
4. Copy dan paste kode berikut diatas kode </head> :

<br /> <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><br /> <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]><br /> <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><br /> <![endif]-->

5. Selanjutnya Save Template
 

Langkah selanjutnya :

Kopi dan paste kode dibawah ini pada Entri baru, bila anda menghendaki tabel kode warna dipasang pada postingan anda. Dan kopi paste kode dibawah ini pada Gadget bila anda menghendaki tabel kode warna dipasang pada bilah samping, dengan cara tambah gadget pada Elemen Laman.

Berikut kodenya :

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

Jadi deh.....
Silahkan anda mencoba,

Semoga bermanfaat ya......
Jangan lupa tinggalin komentarmu ya....., Terima kasih.

Membuat Teks Berjalan ( Marquee )

Untuk menghiasi blog atau web, banyak cara yang bisa kita lakukan, termasuk memberi effek animasi teks berjalan. Dan untuk membuat teks berjalan caranya juga sangat mudah, baik dengan html, css, ataupun java scrip. Dan kali ini saya akan coba memberikan  panduan cara membuat teks animasi berjalan dengan html. Animasi teks berjalan dengan html, tag dasar yang digunakan adalah "marquee". Marquee sendiri memiliki beberapa atribut dasar seperti "behavior, direction, scroll, delay, dan event mouse. Langsung saja ya..., Berikut ini adalah contoh penggunaan "marquee" pada HTML, dan sengaja saya sajikan beberapa contoh marquee, agar lebih mudah membedakan effek yang dihasilkan : 1. behvior=scroll. Teks dengan atribut ini akan berjalan terus hingga habis teks yang ditampilkan dan mengulanginya lagi dari awal. Teks Berjalan Terus <marquee behavior=scroll>Tutorial Blog</marquee> Tutorial Blog Teks Berjalan sesuai arah yang ditentukan <marquee behavior=scroll direction=left>Tutorial Blog</marquee> Tutorial Blog Teks Berjalan sesuai arah yang ditentukan dengan effek delay  <marquee behavior=scroll direction=left scrolldelay=700 onmouseover=stop() onmouseout=start() >Tutorial Blog</marquee> Tutorial Blog 2. behavior=alternate. Atribut ini akan menampilkan animasi teks berjalan dari kanan ke kiri dan kemudian kembali lagi kekanan. Teks Berjalan Bolak - balik <marquee behavior=alternate>Tutorial Blog</marquee> Tutorial Blog Teks Berjalan Bolak - balik sesuai arah yang ditentukan <marquee behavior=alternate direction=left>Tutorial Blog</marquee> Tutorial Blog  Teks Berjalan Bolak - balik sesuai arah yg ditentukan, dgn effek delay <marquee behavior=alternate direction=left  scrolldelay=700 onmouseover=stop() onmouseout=start()>Tutorial Blog</marquee><br /> Tutorial Blog 3. behavior=slide Atribut ini akan menampilkan animasi teks berjalan hingga habis area lalu berhenti. Teks Berjalan lalu berhenti <marquee behavior=slide>Tutorial Blog</marquee> Tutorial Blog Teks Berjalan lalu berhenti sesuai arah yang ditentukan <marquee behavior=slide direction=left>Tutorial Blog</marquee> Tutorial Blog Teks Berjalan lalu berhenti sesuai arah yg ditentukan, dgn effek delay <marquee behavior=slide direction=left  scrolldelay=700 onmouseover=stop() onmouseout=start() >Tutorial Blog</marquee> Tutorial Blog Catatan : "direction" berfungsi menentukan arah animasi teks akan berjalan yaitu right (kanan), left (kiri), up (keatas), dan down (kebawah). "scroldelay" berfungsi menentukan kecepatan animasi berjalan, semakin besar nilainya maka akan semakin cepat jalannya animasi. "onmouseover=stop()" Berfungsi menghentikan teks atau animasi yang sedang berjalan, ketika cursor mouse kita arahkan diatas teks atau animasi berjalan tersebut. "onmouseout=start()" Berfungsi akan kembali menjalankan teks atau animasi, jika cursor mouse tidak berada di atas teks atau animasi berjalan tersebut. Anda bisa memberi variasi teks sesuai selera, silahkan anda kreasi sendiri. Semoga bermanfaat ya...... Jangan lupa tinggalin komentarmu lho.....Terima kasih. Mohon bantuannya untuk memperbaiki blog ini. Jika Anda menemukan hal yang kurang berkenan atau tutorial yang belum bisa anda aplikasikan, Silahkan hubungi saya dengan menggunakan fasilitas Layanan umum. Dan saya akan selalu berusaha membalas keluhan anda serta memperbaiki kesalahan seceparnya. Dan apabila anda merasa artikel /atau tutorial ini bermanfaat, silahkan bagikan ke teman Anda lewat tombol-tombol di disebelah kanan atas pada halaman ini...Terima kasih.