Cara Membuat Recent Comment / Komentar Terbaru

Cara Membuat Recent Comment / Komentar Terbaru

Pernahkah anda menjumpai kolom seperti tersebut diatas? karena hampir setiap blog, sekarang memasang widget seperti itu,Agar pengunjung blog anda bisa mengetahui komentar terbaru blog anda dengan cepat, maka diperlukan widget khusus untuk menampung komentar yang masuk ke blog anda yang terbaru. Di Blogger sendiri sebenarnya telah disediakan fasilitas tersebut. tinggal anda sendiri yang menambahkan dalam blog anda. Caranya sangat mudah, ikuti petunjuk dibawah ini

Cara Membuat Recent Post / Posting Terbaru

Pernahkah anda menjumpai kolom seperti tersebut diatas? karena hampir setiap blog, sekarang memasang widget seperti itu,Agar pengunjung blog anda bisa mengetahui posting terbaru anda dengan cepat, maka diperlukan widget khusus untuk menampung posting anda yang terbaru. Di Blogger sendiri sebenarnya telah disediakan fasilitas tersebut. tinggal anda sendiri yang menambahkan dalam blog anda. Caranya sangat mudah, ikuti petunjuk dibawah ini

Membuat TAB VIEW

Apa yang anda lakukan jika space blog anda semakin sempit, sementara artikel postingan semakin bertambah, belum lagi widget baru yang mulai banyak,seakan akan halaman blog semakin sempit saja, sehingga ruang satu centimeter persegi sangat berarti sekali. Jika masalah seperti itu anda rasakan saat ini, jangan kuatir. karena anda bisa menambah TAB VIEW untuk solusi masalah tersebut. Untuk membuatnya, baca terus tutorial dibawah ini.

div.TabView div.Tabs<br /><br />{<br /><br />height: 24px;<br /><br />overflow: hidden;<br /><br />}<br /><br />div.TabView div.Tabs a<br /><br />{<br /><br />float: left;<br /><br />display: block;<br /><br />width: 98px;<br /><br />text-align: center;<br /><br />height: 24px;<br /><br />padding-top: 3px;<br /><br />vertical-align: middle;<br /><br />-moz-border-radius-topleft:12px;<br /><br />-moz-border-radius-topright:12px;<br /><br />border-top: 1px solid #d9e3ff;<br /><br />border-left: 1px solid #d9e3ff;<br /><br />border-right: 1px solid #d9e3ff;<br /><br />border-bottom: 1px solid #d9e3ff;<br /><br />font-family: "verdana", Serif;<br /><br />font-weight: 900;<br /><br />color: #1E62B6;<br /><br />}<br /><br />div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active<br /><br />{<br /><br />background-color: #F2F2F2;<br /><br />}<br /><br />div.TabView div.Pages<br /><br />{<br /><br />clear: both;<br /><br />border-left: 1px solid #d9e3ff;<br /><br />border-right: 1px solid #d9e3ff;<br /><br />border-bottom: 1px solid #d9e3ff;<br /><br />overflow: hidden;<br /><br />background-color: #ffffff;<br /><br />}<br /><br />div.TabView div.Pages div.Page<br /><br />{<br /><br />height: 100%;<br /><br />padding: 0px;<br /><br />overflow: hidden;<br /><br />}<br /><br />div.TabView div.Pages div.Page div.Pad<br /><br />{<br /><br />padding: 3px 5px;<br /><br />}

3. Cari script seperti dibawah ini
</head>
Kemudian masukkan kode berikut ini diatas kode </head>

<script src='http://sites.google.com/site/hitsukeproject/tabview.js' type='text/javascript'/>

4. lalu klik SAVE

5. Pemasangan di SIDE BAR
Pilih menu Page Elements ---> Trus Add Gadget ---> pilih HTML / JavaScript

lalu copy script dibawah ini dan paste di widget tersebut

<form action="tabview.html" method="get"><br /><br /> <div id="TabView" class="TabView"> <br /><br /> <div style="width: 300px;" class="Tabs"> <br /><br /> <a class="Active" href="javascript:tabview_switch('TabView',%201);">Tab One</a><br /><br /> <a class="" href="javascript:tabview_switch('TabView',%202);">Tab Two</a><br /><br /> <a class="" href="javascript:tabview_switch('TabView',%203);">Tab Three</a><br /><br /> </div> <br /><br /> <div style="width: 300px; height: 275px;" class="Pages"> <br /><br /><br /> <div style="overflow: auto; height: 274px; display: block;" class="Page"> <br /><br /> <div class="Pad"> <br /><br /> <ol><br /><br /> <li><a href="Your Link Here">Your Link Name </a></li> <br /><br /> <li><a href="Masukkan link postingan kamu disini">Nama Postingan </a></li> <br /><br /> </ol> <br /><br /> </div> <br /><br /> </div> <br /><br /><br /> <div style="overflow: auto; height: 274px; display: none;" class="Page"> <br /><br /> <div class="Pad"> <br /><br /> <ol><br /><br /> <li><a href="Your Link here">Name of your link </a></li> <br /><br /> <li><a href="Masukkan link postingan kamu disini">Nama Postingan </a></li> <br /><br /> </ol> <br /><br /> </div> <br /><br /> </div> <br /><br /><br /> <div style="overflow: auto; height: 274px; display: none;" class="Page"> <br /><br /> <div class="Pad"> <br /><br /> <ol><br /><br /> <li><a href="Your Link here">Name of your link </a></li> <br /><br /> <li><a href="Masukkan link postingan kamu disini">Nama Postingan </a></li> <br /><br /> </ol> <br /><br /> </div> <br /><br /> </div> <br /><br /><br /> </div> <br /><br /> </div> <br /><br /> </form> <br /><br /><br /> <script type="text/javascript"><br /><br /> tabview_initialize('TabView');<br /><br /> </script>

Lalu lihat hasilnya, mudah bukan

Software Online Encode Script HTML

Menuliskan Script HTML pada sebuah postingan ternyata tidak mudah dan cukup rumit, jika dilakukan dengan manual. Ada beberapa karakter yang tidak bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi untuk menuliskannya harus menggunakan kode-kode tertentu, dapat dibayangkan betapa rumit, betapa susah dan betapa lamanya jika kita menuliskan sebuah perintah script HTML yang sangat panjang. Tapi anda jangan khawatir karena sekarang ada software online untuk meng encode script-script HTML menjadi karakter-karakter khusus. Software online tersebut adalah seperti pada gambar dibawah ini

Basic Script HTML

Berikut ini adalah Basic Script HTML (Hyper Text Mark up Language)

MEMBERI WARNA TEXT
<font color="#AC58FA"> tempat text</font>

MEMBUAT BACKGROUD WARNA PADA TEXT
<div style="background: #81BEF7">Tempat TEKS</div>

CARA MEMASUKKAN GAMBAR
<img src="http://images.cooltext.com/1231180.png" border="0" height="17" width="90">

CARA MEMBUAT LINK
<a href="http://www.cobalah-klik.blogspot.com/" target="_blank">

CARA MEMBUAT LINK DENGAN GAMBAR
<a href="http://www.cobalah-klik.blogspot.com/" target="_blank"><img border="0" alt="Cobalah KLIK" width="144" src="http://images.cooltext.com/1231180.png" height="48"/></a>

Membuat Background WARNA pada TEKS

Untuk mempercantik tampilan warna pada blog, biasanya dibutuhkan berbagai warna agar terkesan lebih indah dipandang, apalagi warna tersebut menjadi background dari sebuah TEKS, baik itu teks di postingan ataupun teks dalam blogroll. sehingga trend warna default putih bisa diganti dengan warna selera kita.

Berikut ini adalah contoh dari aplikasi penggunaan warna pada background TEKS. Dengan sedikit tambahan script HTML, tampilan bisa berubah lebih indah

Bagaimana cara membuatnya? berikut ini adalah trik untuk pembuatan background warna pada TEKS

Cara Menghilangkan Title Blog

Jika kita menggunakan Title atau Judul blog dengan menggunakan template bawaan blogger tentu tidak akan banyak variasi yang kita dapatkan, sehingga tampilan header blog terasa kaku kurang enak dipandang, terutama model font serta background dari header blog itu sendiri. Karena itu untuk memperindah tampilan header blog, kita harus menggantikannya dengan banner kreasi kita sendiri yang biasanya sudah dipasangi title blognya sekalian, sehingga header blog kelihatan lebih indah, tapi ingat! jika kita hanya mengganti header blog dengan banner tanpa menyembunyikan title blog, jangan harap hasilnya akan bagus, karena tanpa menyembunyikan title blog, akan tampil title blog yang dobel, yaitu title blog dari default setting dan title blog dari kreasi banner. Untuk mengganti default setting pun tidak bisa, karena sistem di blogger tidak mengijinkan untuk menghapus (mengosongkan) title blog. Terus bagaimana caranya ?

Cara Membuat DROP CAP pada Artikel

Membuat Huruf besar di awal artikel ternyata sangatlah mudah. Mode huruf seperti ini mengingatkan kita pada artikel disebuah surat kabar ataupun majalah. Tahukah anda bahwa huruf besar di awal artikel tersebut sering disebut dengan DROP CAP. dan cara membuatnya pun ternyata sangatlah mudah, tinggal sisipkan beberapa script html, maka jadilah DROP CAP tersebut, berikut ini cara membuatnya

Cara Membuat Text Area

Text Area adalah suatu kotak yang didalamnya terdapat tulisan tulisan yang sudah ditempatkan dalam suatu kotak yang praktis, intinya untuk mempersempit ruangan yang digunakan text sebelumnya yang lebih panjang. kegunaan text area ini sangat diperlukan jika kita menulis script HTML dalam postingan kita, berikut ini adalah cara membuat Text Area.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :


<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Sebagai contoh :

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :<br />

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.
Elemen tombol highlight All :

1. <div align="center">--> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.

2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">--> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.

3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Element text area :

1. <p align="center">--> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.

2. # <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"

3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD>dan</HEAD>
Mudah bukan....selamat mencoba.

Cara Pasang Kalender di Judul Posting

Tutorial kali ini adalah cara memasang kalender di judul posting. Bila anda merasa bosan melihat kalender asli bawaan dari template blogger, anda bisa merubahnya dengan cara yang sangat sederhana seperti berikut :
Ada beberapa Pengaturan yang harus Anda lakukan sebelum masuk ke Edit HTML,
1. mengganti setting tanggal di Pengaturan, Login ke blogger --> pengaturan --> Format, ganti "format header tanggal" menjadi (mm.dd.yyyy) bulan.tangal.tahun contohnya 7.20.2009 terus simpan.

<br />.dateblock<br />{<br />background: url("http://i721.photobucket.com/albums/ww215/ferialfazianto/bluecalend.gif")<br />no-repeat;<br />width: 55px;<br />margin: 0;<br />font-weight: bold;<br />height: 50px;<br />/*position: absolute;<br />top: 0;<br />left: 0;*/<br />float: left;<br />text-align: center;<br />}<br /><br />.month {<br />font-size: 11px;<br />width: 37px;<br />margin: 0 5px;<br />text-transform: uppercase;<br />color: #fff;<br />}<br /><br />.day {<br />color:#666666;<br />font-size: 19px;<br />width: 37px;<br />margin: 0 5px;<br />}<br />

Kode http://i721.photobucket.com/albums/ww215/ferialfazianto/bluecalend.gif
adalah gambar icon kalender. anda bisa menggantinya mengantinya
dengan gambar-gambar dibawah ini :


blackcalend.png


greencalend.png


orangecalend.png

kode color:#66666; adalah kode warna
tanggal, yang bisa juga anda ganti sesuai kode warna yang anda inginkan.

4. langkah selanjutnya yaitu kamu cari kode ini dan ganti dengan kode script berikut ini:

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Simpan Template kamu dan lihat hasilnya.

Koleksi Gambar FLASH beserta LINK nya

Berikut ini adalah contoh dari Gambar FLASH yang bisa di pasang di Blog anda.

1. Gambar Berkelahi
Link gambar : http://i32.tinypic.com/30kzw9z.jpg



2. Gambar Mengeluarkan Tenaga Dalam
Link gambar : http://i27.tinypic.com/34pkrol.jpg

Cara Mempercantik Blog Dengan FLASH

Suatu saat anda pernah membuka suatu alamat blog, dan anda disuguhkan suatu tontonan gambar yang menarik yang bergerak-gerak dan kadang melayang-layang disudut atas bog atau disudut bawah blog, suatu hari pun saya juga pernah bertanya tanga, bagaimana sih untuk membuat gembar seperti itu, sehingga suatu blog dapat terlihat lebih cantik.
Berikut ini ada tutorial bagaimana cara membuat Flash tersebut, sehingga seorang Spider Man pun bisa bergoyang0goyang tiada lelahnya di blog kita. Pertama tama yang kita lakukan adalah :

CARA MENGHILANGKAN TULISAN SUBSCRIBE TO POST (ATOM)

Biasanya pada template blogger akan terdapat tulisan subscribe to: post(atom) atau berlangganan : post(atom) yang terletak dibawah postingan. Tulisan ini berfungsi sebagai feed dari blog anda. Tujuannya agar pengunjung bisa dengan mudah menemukan alamat feed anda. Tetapi jika anda sudah menggunakan layanan feed dari Feedburner. Maka kehadiran dari tulisan ini sudah tidak terlalu penting lagi.

CARA MEMBUAT KOLOM ADS IKLAN 125X125

Membuat kolom ads iklan banner 125x125 di bawah header atau di sidebar blog anda, sangatlah berguna jika anda ingin menambah penghasilan dari blog anda dengan cara memasang iklan dari pihak ketiga. Dibawah ini cara membuat kolom-kotak iklan ukuran 125x125. dibawah header
atau dibagian atas sidebar.

Cara pembuatannya adalah :

<br />#Banner-ads {<br /><br />margin:0px;<br /><br />padding: 5px;<br /><br />text-align: center;<br /><br />width : 960px;<br /><br />}<br /><br />#Banner-ads img {<br /><br />margin: 7px 4px 4px 0px;<br />padding: 3px;<br />width : 100px;<br />height : 100px;<br />text-align: center;<br /><br />border: 1px solid #c0c0c0;<br /><br />}<br /><br />#Banner-ads img:hover {<br /><br />margin: 7px 4px 4px 0px;<br /><br />padding: 3px;<br /><br />text-align: center;<br /><br />border: 1px solid #333;<br /><br />}<br />

lalu copy kode dibawah ini :

<br /><div id='Banner-ads'> <br /><center> <br /><a hight='100' href='http://cobalah-klik.blogspot.com/' width='100'><img alt='ads' border='0' src='http://i356.photobucket.com/albums/oo5/nalanindya/BannerAds.gif'/></a><br /><a hight='100' href='http://cobalah-klik.blogspot.com/' width='100'><img alt='ads' border='0' src='http://i356.photobucket.com/albums/oo5/nalanindya/BannerAds.gif'/></a><br /><a hight='100' href='http://cobalah-klik.blogspot.com/' width='100'><img alt='ads' border='0' src='http://i356.photobucket.com/albums/oo5/nalanindya/BannerAds.gif'/></a><br /><a hight='100' href='http://cobalah-klik.blogspot.com/' width='100'><img alt='ads' border='0' src='http://i356.photobucket.com/albums/oo5/nalanindya/BannerAds.gif'/></a><br /><a hight='100' href='http://cobalah-klik.blogspot.com/' width='100'><img alt='ads' border='0' src='http://i356.photobucket.com/albums/oo5/nalanindya/BannerAds.gif'/></a><br /><a hight='100' href='http://cobalah-klik.blogspot.com/' width='100'><img alt='ads' border='0' src='http://i356.photobucket.com/albums/oo5/nalanindya/BannerAds.gif'/></a><br /><a hight='100' href='http://cobalah-klik.blogspot.com/' width='100'><img alt='ads' border='0' src='http://i356.photobucket.com/albums/oo5/nalanindya/BannerAds.gif'/></a></center> <br /></div> <br />

Jika ingin kolom ads iklan tersebut diletakkan dibawah header maka cari kode <div id=main-wrapper> dan paste dibawah kode tersebut.

Jika ingin kolom ads iklan tersebut diletakkan diatas sidebar maka cari kode <div id=side-wrapper> dan paste dibawah kode tersebut.

contoh diatas adalah untuk add iklan banner 3 kolom, untuk penambahan jumlah kolom bisa anda sesuaikan dengan mengcopy paste kode dibawah ini.

<a hight='100' href='http://cobalah-klik.blogspot.com/' width='100'><img alt='ads' border='0' src=''http://i356.photobucket.com/albums/oo5/nalanindya/BannerAds.gif''/></a>


gampang bukan.....selamat mencoba

CARA MEMBUAT READ MORE / PENGGALAN POSTING BLOG

Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :

<br /><b:if cond='data:blog.pageType == "item"'><br /><style>.fullpost{display:inline;}</style><br /><p> <data:post.body/></p> <br /><b:else/><br /><style>.fullpost{display:none;}</style><br /><br /><p> <data:post.body/></p> <br /><br /><a expr:href='data:post.url'>Read More......</a><br /></b:if><br />

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">


</span>

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">


</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini :<span class="fullpost">sementara sisanya yaitu keseluruhan posting letakkan di antara kode<span class="fullpost">dan</span>

Mudah bukan...Selamat Mencoba...

Cara Membuat Tabel Kode Warna HTML

Membuat tabel kode warna HTML sangat diperlukan jika anda ingin mempercantik hasil postingan dengan beraneka warna sehingga akan lebih menarik untuk dibaca oleh setiap orang. Tabel ini befungsi untuk mengetahui kode-kode warna dalam format HTML. Contohnya seperti warna merah, dalam kode HTML warna tersebut memiliki kode #FE2E2E. Contoh tabelnya adalah seperti ini :

Kode warna yang terpilih :

Berikut ini cara untuk membuat tabel seperti diatas :

1. Login dulu ke account blogger kamu.
2. Pilih tab Tata Letak ---> Edit HTML
sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula. atau dengan mengklik Expand template Widget

3. Silakan copas script berikut di atas kode </head>

<br /><br /><script language='javascript'><br />function Barva(koda)<br />{<br />document.getElementById("vzorec").bgColor=koda;<br />document.hcc.barva.value=koda.toUpperCase();<br />document.hcc.barva.select();<br />}<br />function BarvaDruga(koda)<br />{<br />document.getElementById("vzorec2").bgColor=koda;<br />document.hcc.Barva2.value=koda.toUpperCase();<br />document.hcc.Barva2.select();<br />}<br /></script><br /><br /><script type='text/javascript'><br /><br />var hue;<br />var picker;<br />//var gLogger;<br />var dd1, dd2;<br />var r, g, b;<br /><br />function init() {<br />if (typeof(ygLogger) != "undefined")<br />ygLogger.init(document.getElementById("logDiv"));<br />pickerInit();<br />//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"<br />//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"<br />}<br /><br />// Picker ---------------------------------------------------------<br /><br />function pickerInit() {<br />hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);<br />hue.onChange = function(newVal) { hueUpdate(newVal); };<br /><br />picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);<br />picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };<br /><br />hueUpdate();<br /><br />dd1 = new YAHOO.util.DD("pickerPanel");<br />dd1.setHandleElId("pickerHandle");<br />dd1.endDrag = function(e) {<br />// picker.thumb.resetConstraints();<br />// hue.thumb.resetConstraints();<br />};<br />}<br /><br />executeonload(init);<br /><br />function pickerUpdate(newX, newY) {<br />pickerSwatchUpdate();<br />}<br /><br /><br />function hueUpdate(newVal) {<br /><br />var h = (180 - hue.getValue()) / 180;<br />if (h == 1) { h = 0; }<br /><br />var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);<br /><br />document.getElementById("pickerDiv").style.backgroundColor =<br />"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";<br /><br />pickerSwatchUpdate();<br />}<br /><br />function pickerSwatchUpdate() {<br />var h = (180 - hue.getValue());<br />if (h == 180) { h = 0; }<br />document.getElementById("pickerhval").value = (h*2);<br /><br />h = h / 180;<br /><br />var s = picker.getXValue() / 180;<br />document.getElementById("pickersval").value = Math.round(s * 100);<br /><br />var v = (180 - picker.getYValue()) / 180;<br />document.getElementById("pickervval").value = Math.round(v * 100);<br /><br />var a = YAHOO.util.Color.hsv2rgb( h, s, v );<br /><br />document.getElementById("pickerSwatch").style.backgroundColor =<br />"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";<br /><br />document.getElementById("pickerrval").value = a[0];<br />document.getElementById("pickergval").value = a[1];<br />document.getElementById("pickerbval").value = a[2];<br />var hexvalue = document.getElementById("pickerhexval").value ='#'+<br />YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);<br />ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)<br />if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();<br />}<br /><br /></script><!--[if gte IE 5.5000]><br /><script type="text/javascript"><br /><br />function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.<br />{<br />for(var i=0; i<document.images.length; i++)<br />{<br />var img = document.images[i]<br />var imgName = img.src.toUpperCase()<br />if (imgName.substring(imgName.length-3, imgName.length) == "PNG")<br />{<br />var imgID = (img.id) ? "id='" + img.id + "' " : ""<br />var imgClass = (img.className) ? "class='" + img.className + "' " : ""<br />var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "<br />var imgStyle = "display:inline-block;" + img.style.cssText<br />if (img.align == "left") imgStyle = "float:left;" + imgStyle<br />if (img.align == "right") imgStyle = "float:right;" + imgStyle<br />if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle<br />var strNewHTML = "<span " + imgID + imgClass + imgTitle<br />+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"<br />+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"<br />+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"<br />img.outerHTML = strNewHTML<br />i = i-1<br />}<br />}<br />}<br /><br />YAHOO.util.Event.addListener(window, "load", correctPNG);<br /><br /></script><br /><![endif]--><br />

4. Simpan Template.

Cara menambahkan Kode Warna ada 2 Cara :
Cara I pada halaman posting :
1. Buat Posting ---> Copy faste kode warna dibawah ini.
2. Berikan judul posting kamu, ex: Kode Warna.
3. Tambahkan label yang sesuai.
4. Terbitkan Entri.


Cara II menambahkan dalam elemen blog kamu :

1. Tata Letak, ---> Element Halaman ---> Tambah Gadget
2. Tambahkan "HTML/Javascript" > Copy pastekan kode warna dibawah ini.

Kode warna berikut di copy pastekan pada halaman posting atau dalam elemen blog :

<br /><br /><center> <form name="hcc" id="hcc"> <br /><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"><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> <br /><table align="center" border="0" cellpadding="0" cellspacing="2"><tbody> <tr height="24"><td id="vzorec" height="24" width="24"><br /></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> <br /></form> </center> <br />

Tips : loading blog nantinya akan tambah lambat, ada cara lain dengan widget atau gadget ini diletakkan dalam postingan supaya loading blog dapat diminimalisir dan dibuat link khusus ke postingan kode warna.