Archives

• Panduan Awal Membuat Blog
• Agar Judul Postingan Ada Efek Coretan dan Juga Efect Blink
• CARA MENCOPY PASTE BLOG YANG DI DISABLE
• Cara Membuat Sambutan Untuk Pengunjung Blog
• Cara Membuat Kata Penutup Di Blog
• Cara Membuat Menu dTree
• Proteksi Blog Dari Penjiplakan
• Cara Membuat Posting Terjadwal
• Alamat-alamat Template Untuk Blogger / Blogspot
• Cara Mudah Posting Code HTML
• Cara Membuat Kotak Blogroll dan Marquee
• Cara Menampilkan Status Off/Online Yahoo Messenger
• Tempat daftar blog otomatis
• Kamus Istilah-Istilah Dalam Blog
• Cara Membuat Dropdown Menu
• Hal-hal Yang Harus Diperhatikan Dalam Mengganti Template Blogger
• Cara Memback-up Template Blogger
• Effect Marquee
• Seberapa Berat Blog Anda ??
• Membuat Text Area
• Download Template Gratis
• Cara Pasang Macam-Macam Emoticon Di Editor Blogger
• Blogger Login Form Widget
• Pasang Widget Translator
• Cara Membuat Search Engine
• Cara membuat Form "Email Subscriber" / "Berlangganan Lewat Email"
• Cara Membuat Link Download
• Cara Menuliskan Script/Kode Dalam Artikel Blog
• Membuat Kotak Komentar Blogger di Bawah Postingan

Dapatkan tips dan trik terbaru langsung dari email anda,masukkan email anda pada form di bawah ini:

Delivered by FeedBurner

Cara Memasang Widget Kode Warna di Blog [Non RGB]

Banyak cara dari kita (blogger) berupaya untuk membuat blognya terlihat menarik dan membuat lengkap blognya (agar tidak susah bolak balik ke blog lain), salah satu tambahan widget untuk masalah seperti itu adalah Kode Warna. Kenapa bisa begitu?

Jujur saja, saya sendiri termasuk orang yang senang mengotak atik blog, mulai dari otak atik script, templates dan lain sebagainya, tentu saja tetap ada kaitannya dengan kode warna, karena ada beberapa warna (widget) yang perlu kita rubah di dalam blog agar bisa sesuai dengan templates blog.

Nah, pada kesempatan kali ini, saya ingin share kepada teman-teman semua tentang bagaimana Cara Memasang Widget Kode Warna di Blog (non RGB). Untuk contohnya teman-teman bisa melihat Kode Warna milik saya di sini. atau ...

Kode warna yang terpilih :

Get it

Ok, langkah-langkah memasangnya seperti di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Page Element >> Add a Gadget >> HTML/ Javascript:
3. Copy semua kode di bawah ini dan pastekan ke dalam HTML/Javascript (tanpa judul):

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

4. Selanjutnya, buat sebuah postingan baru di dalam blog (atau tambah halaman baru) dan sisipkan semua kode di bawah ini:

<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" width="24" height="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><p><a href="http://tips-trik-bikin.blogspot.com/" target="new">Make Your Own</a></p></center>

5. Jika sudah selesai semua, maka tinggal di postingkan dan lihat hasilnya.

Nah, teman-teman, kira-kira seperti itulah Cara Memasang Widget Kode Warna di Blog (non RGB), semoga bisa bermanfaat dan selamat mencoba. Salam.

Agar Judul Postingan Ada Efek Coretan dan Juga Efek Berkedip

Tepat seperti judulnya, dengan trik ini anda bisa membuat efek coretan pada judul postingan dan juga bisa membuat efek berkedip tentunya. Yaaaa....bisa dikatakan kurang kerjaan sih, tapi beberapa blogger juga akan menggunakan trik ini dengan tujuan yang serius (nggak main2 hehe...). Ya biasanya judul postingan yang diberi efek coretan bermaksud untuk menandai suatu kata yang penting atau memang perlu ditekankan.

Nih singkatnya seperti berikut:

Judul postingan yang ingin kita beri efek adalah judul postinga=> "Wao Keren - Ditemukan Anak Alien di Meksiko". Jika kita ingin memberi efek coretan pada kata yang ingin ditekankan (untuk kata yang ingin ditekankan kita pilih kata -ditemukan anak alien-), maka nanti jadinya seperti berikut_

"Wao Keren - Ditemukan Anak Alien di Meksiko"

Hehe...lumayan buat nanda-nandain tho? Jika teman-teman tertarik untuk membuat judul postingannya ada efek coretan seperti di atas, maka tulisan yang ingin diberi efek coretan harus diapit dengan kode <del> jika dibikin - maka formatnya sebagai berikut:

<del>KATA YANG INGIN DICORET</del>

Contoh Penggunaan

"Wao Keren - <del>Ditemukan Anak Alien</del> di Meksiko"

Maka hasilnya....

"Wao Keren - Ditemukan Anak Alien di Meksiko"


LALU UNTUK EFEK YANG SATU LAGI...yaitu efek berkedip atau blink!

Kita ambil contoh judul tadi aja...jika kita terapkan efek blink/berkedip pada judul postingan yang kita maksud, maka jadinya seperti berikut

"Wao Keren -

Ditemukan Anak Alien di Meksiko"

Ingin membuatnya? Maka kata2 pada judul postingan teman-teman harus diapit dengan kode <blink>, maka nanti formatnya seperti berikut:

<blink>KATA YANG INGIN DIKEDIPKAN</blink>

Contoh penggunaan_

"Wao Keren - <blink>Ditemukan Anak Alien</blink> di Meksiko"

Maka nanti hasilnya seperti berikut...

"Wao Keren - Ditemukan Anak Alien di Meksiko"

Hehehe....gampang bukan?

Oh ya, kode efek untuk membuat coretan serta kedipan di atas nggak hanya untuk judul postingan saja, tapi juga untuk sembarang tulisan yang ada di blog, tulisan dalam postingan misalnya.

Semoga bermanfaat_

CARA MENCOPY PASTE BLOG YANG DI DISABLE

CARA MENCOPY PASTE BLOG YANG DI DISABLE

Pilih Tab Tools,lalu pilih Option terus pilih Tab Content hilangkan tanda centang di Enable Javascript sama Enable Java lalu klik ok

Nah sekarang anda coba Copy paste........

Firefox---->Tools---->Option-------->Content---->Enable Javascript + Enable Java (hilangkan tanda centang )






Setelah selesai Copy paste lakukan ke Setting semula pada Tools browser Firefoxnya
mudah mudahan bermanfaat

Cara Membuat Sambutan Untuk Pengunjung Blog

Kali ini saya akan memberikan tips cara membuat sebuah kata sambutan untuk pengunjung blog sebelum pengunjung masuk ke halaman blog Anda. Sebagai admin blog mungkin Anda jika ingin memberi ucapan selamat datang atau pertanyaan kepada pengujung sebagai rasa hormat. Setelah saya mencari-cari di mbah Google ada dua macam kata sambutan yang bisa Anda gunakan berupa kata sambutan dari admin blog dan kata sambutan dari admin berupa pertanyaan dari admin mengenai pengunjung blog Anda. Untuk memasang atau membuatnya silahkan ikuti langkah-langkah di bawah ini :


Membuat Kata Sambutan :
1. Log in di blogger dengan id anda untuk masuk ke akun dan mengedit blog anda.

2. Klik Tata Letak / Layout
3. Tambahkan gadget dengan mengklik Add a Gadget
4. Pada menu yang tersedia, pilih atau klik HTML/Javascript
5. Cari kode </head> lalu copy pastekan kode dibwah ini tepat di atasnya :

<SCRIPT language='JavaScript'>alert("Selamat Datang Di Blog Teddy Wallpaper");</SCRIPT>

6. Ganti tulisan yg warna Hijau dengan kata kata anda sendiri

7. Klik Save Template

Membuat Pertanyaan Kepada Pengunjung Blog :

1. Caranya sama dengan dengan diatas, cuma ganti kodenya saja dengan yang di bawah ini. Copy pastekan di atas kode </head> :

<script type="text/javascript"> var yourName = prompt("Bolehkah saya tau nama Anda", "Nama Anda Siapa?"); </script>

2. Ganti tulisan yg berwarna Hijau dengan pertanyaan Anda sendiri.

3. Klik Save Template

Nah silahkan Anda mencobanya dan semoga bermanfaat!!

Cara Membuat Kata Penutup Di Blog

Ketika menutup atau meninggalkan Blog kata penutup di Blog merupakan salah satu trik dari pemilik blog atau admin untuk menyampaikan suatu pesan terima kasih kepada para pengunjung atau pembaca karena telah membuka/mampir untuk membaca artikel blognya. jika Anda ingin membuat sebuah kata terimakasih sebelum seorang penggunjung atau pembaca

meninggalkan blog Anda, saya akan memrokan langkah-langkah cara membuatnya sebagai berikut :

1. Login ke akun blogger Anda dengan ID Anda.
2. Klik Layout / Tata Letak
3. Klik tab Edit HTML
3. Cari kode </head> agar mudah mencarinya tekan saja ctrl F / F3
4. Copy pastekan kode script di bawah ini tepat dibawah kode </head>

<script type='text/javascript'> // goodbye alert function goodbye(){
alert('Bagaimana Pendapat Anda Tentang Blog Saya ? Silahkan Kembali dan Beri
Komentar Anda! Terimah Kasih !!'); }
parent.window.onunload=goodbye;
</script>

Atau

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('Mau Kemana Besok Mampir lagi YA...! Terima Kasih Atas Kunjungannya... Jangan Bosen-bosen ya Mampir lagi....!');
}
parent.window.onunload=goodbye;

</script>



Silahkan Anda ganti tulisan berwarna Hijau dengan kata-kata Anda sendiri.

5. Klik Save Template

Semoga bermanfaat!

Cara Membuat Menu dTree

Apa itu menu dTree? Menu dTree adalah menu yang menyerupai/mirip menu explore dan menu ini dapat kita tampilkan ke dalam web/blog kita. Teman2 pasti sudah pada tahukan bagaimana muka dan bentuknya menu explore itu? Saya kira sudah pada tahu semua yaaa...(tuh kayak gambar di samping kiri). Nah, untuk penampilan menu dTree sendiri, daripada teman2 cuma mbayangin saja mending tman2 noleh ke sidebar kanan blog ini. Bagaimana, miripkan? Oh ya...sebenarnya trik ini sudah lama sekali dibahas. dan trik ini bersumber dari Destroydrop.com, maklumlah saya juga masih belajar,, jadi harus memiliki referensi sebanyak-banyaknya. Ok, lanjuuut...

Untuk memulai memasang menu tersebut, seperti biasa silahkan teman2 login dulu ke akun blogger. Lalu klik tata Letak >> Klik Edit HTML


1. Taruh script berikut di atas kode tag </head>

<link rel="StyleSheet" href="http://sites.google.com/site/teddywallpapers/javascrip/dtree.css" type="text/css" />
<script type="text/javascript" src="http://sites.google.com/site/teddywallpapers/javascrip/createdtree.js"></script>

2. Klik Simpan template.


Selanjutnya yang harus teman2 lakukan adalah menaruh kode HTML dTree ke dalam gadget sidebar blognya teman2. Caranya klik Tata Letak >> Tambah Gadget HTML dan taruh kode HTML berikut ini

<h2>Menu Blog Ini</h2>

<div class="dtree">

<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'T4belajarblogger');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
d.add(4,0,'Folder 02',' #.html');
d.add(5,4,'Sub Folder 02',' #.html');
d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
d.add(7,0,'Folder 03',' #.html');
d.add(8,7,'Sub Folder 03',' #.html');
d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' link anda.html');
d.add(11,0,'File[non-folder]',' link anda.html');
d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');

document.write(d);

//-->
</script>

Maka Preview dari kode di atas adalah seperti berikut ini



Saran saya agar teman2 memasukkan kode HTML di atas ke dalam gadget sidebar blog-nya teman2, mengingat agar teman2 lebih mudah dalam memahami bagian mana saja dan apanya saja yang harus diotak-atik untuk menampilkan suatu folder beserta file-nya sesuai dengan keinginannya teman2.

Ok, kita mulai mengenal bagian mana saja yang harus kita atur untuk memulai membuat folder serta yang mana juga yang harus kita atur untuk membuat file saja. Untuk memulai mengenal bagian yang harus diatur dalam pembuatan folder dan file, agar teman2 hanya memperhatikan nomor2 yg telah saya tandai dengan warna2 (untuk tulisan blablabla.HTML, kita bahas setelah masalah nomor)

Nah, apakah teman2 bertanya apa maksud dari nomor2 yang acak2 itu? Sebenarnya itu bukan nomor acak2an, akan tetapi nomor unik yang tersusun rapi.

Coba teman2 perhatikan beda nomor yg berada di sisi kanan dan kiri. Yang berada di sisi kiri sesuai dengan urutan:
1
2
3
dst

Sedangkan yang berada di sisi kanan gak beraturan.

Sebenarnya angka2 tersebut dapat teman2 baca seperti berikut ini:

1,o ===>> Artinya adalah Folder Utama

2,1 ===>> Dan ini adalah Sub dari folder utama, oleh karena itu saya memberi warna angka satu dengan warna yang sama, yaitu merah. Kalau teman2 ingin menambahkan sub folder utama yang satu lagi di bawahnya, maka nanti teman2 tulis 3,1 atau d.add(3,1,'Sub Folder 02',' #.html'); (karena pada intinya folder tersebut masih mengikuti angka satu/folder utama)

3,2 ===>> Artinya adalah sub dari sub folder utama, bagian yang ini bisa jadi folder dan juga bisa jadi file. Apa maksudnya? Maksudnya adalah, pada intinya semua file yg memilki sub akan menjadi folder, sedangkan yg tidak memilki sub maka akan menjadi file selamanya (selama belum ada sub yang menumpang kepadanya), kalau teman2 bingung, teman2 bisa memperhatikan preview/gambar di atas. Coba dilihat tuh, setiap jajaran ketiga pasti file kan? Nah itu karena yg jajaran ketiga adalah bagian yg terakhir alias bagian yg sudah tidak memilki sub lagi.


Nah, untuk yg masalah pembuatan folder dan file selesai...

Selanjutnya masalah yg berada pada bagian kanan, yaitu tulisan "#.HTML" dan "Link anda.HTML"

Kenapa pada bagian yg saya tandai dengan warna merah saya beri tanda "#" bukannya menggunakan "Link anda"?

Itu semua karena terletak pada fungsi masing2. Apa maksudnya...

Maksudnya yang telah saya tandai dengan "#", artinya adalah folder utama atau folder sub utama. Dengan begitu para pengunjung langsung tahu kalau itu bukan file akan tetapi pengantar file alias folder. Ini semua merupakan pertimbangan saya pribadi, mungkin beberapa teman blogger menganggap menu ini benar2 mirip menu explore, memang mirip tapi hanya tampilannya serta sifatnya yg menyerupai menu dropdown, akan tetapi bedanya pasti teman2 tahu...Kalau di menu explore kita bisa membuka folder dengan cara mengklik tulisannya, misal: My Documents atau juga bisa dengan cara mengklik tanda plus-minus yang terletak pada samping kirinya. Akan tetapi untuk menu dropdown ini beda, kita hanya bisa mengklik tanda plus-minusnya saja untuk bisa menampilkan menu yg berada di dalamnya (kalau gak percaya, maka bisa dicoba menu dTree di sidebar kanan blog ini). Bagaimana teman2 sudah ada bayangankan...?

Lalu untuk tulisan "link anda.HTML" itu bisa diganti dengan link anda. Dan pastikan kalau yang anda sisipi dengan link tersebut sudah merupakan sebuah link yg tidak bersub lagi, maksudnya bukan folder.

Alhamdulillah, akhirnya rampung juga.

Cara Membuat Kotak Blogroll dan Marquee

Untuk trik kali ini, ada dua macam kotak blogroll yang akan kita buat, terserah kamu mo pilih yang mana. Kotak blogroll-nya yaitu:

1. Kotak Blogroll Model Textarea

Contohnya seperti kotak blog roll seperti punyaku itu, itu lho yg atasnya ada tulisanya "Friend links"
Nha begini cara membuatnya :
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>

keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar kayak punyaku, maka hilangkan kode <br />

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>

Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode <br />.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA.....

Cara Menampilkan Status Off/Online Yahoo Messenger

Dalam trik kali ini kita akan coba membahas tentang "Bagaimana Caranya Menampilkan Status Offline/Online Yahoo Messenger". Trus fungsinya apa nih? gini, kalo ada misalnya ada penandanya seperti itu kan nanti pengunjung blogmu akan bisa langsung berinteraksi langsung denganmu, nha kalo gitu kan nanti pengunjung blogmu jadi tambah sayang ma kamu :p
Ok Langsung aja, Contohnya akan seperti ini, jika status kamu offline maka gambarnya akan seperti ini :



trus jika kamu online maka iconya akan berubah seperti ini:



Cara buatnya sangat gampang kamu tinggal copy script berikut ini trus kamu pasang di sidebar kamu, udah tahu kan cara pasanganya, itu lho seperti kalo km masang "page element", Masuk ke "Page Element" trus "Add a Gadget --> HTML/Javascript".

<a href="ymsgr:sendIM?Rizki"> <img src="http://opi.yahoo.com/online?u=Rizki&amp;m=g&amp;t=2&amp;l=us"/>
</a>

Ganti text yang warna merah (Rizki) dengan id YM kamu.
perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda.

Cara Membuat Search Engine

Tentu kita semua sudah tahu apa itu Search Engine (hari gini gak tahu apa itu search engine? cape' deeh...). Search Engine adalah ... bla.. bla..bla.. dst.
Saat ini Search Engine tidak bisa dipisahkan dalam dunia internet. Dengan Search Engine kita bisa mencari tahu tentang suatu hal yang kita inginkan sesuai dengan keyword yang kita ketikkan dan juga bla.bla..bla..... udah ah penjelasannya, yang mau dibahas disini adalah bagaimana caranya membuat search engine di blogger . Caranya sangat mudah, yaitu:

1. Login ke blogger terus klik Layout terus pilih page elements nha disitu kan banyak tulisan Add a page elements klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine
2. kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.

<form action="http://nama-blogmu.blogspot.com/search"method="get"><input class="textinput" name="q" size="50" type="text"/><input value="Cari Tis dan Trik" class="buttonsubmit"name="submit" type="submit"/></form>

Keterangan:

Hijau=Ganti dengan alamat blog anda.
Merah=Adalah panjang kotak pencarian, silahkan disesuaikan.
Kuning=Nama Tampilan Tombol Pencarian.


Inilah tampilannya :

Semoga Bermanfaat []