Arti Lambang OSIS

OSIS, Organisasi Siswa Intra Sekolah merupakan organisasi yang beranggotakan siswa dan berada di satuan pendidikan (sekolah). Maksud/tujuan OSIS sebagai sarana pembinaan dan pengembangan generasi bangsa sehingga bertaqwa, berwatak budi pekerti luhur, kepemimpinan, minat, dan bakat.Pedoman pembinaan OSIS diatur berdasarkan Permendiknas Nomor 39 Tahun 2008. Lambang/logo OSIS diadakan adalah untuk

Mengetahui Perkiraan Nilai Suatu Blog Atau Situs

MENGETAHUI PERKIRAAN NILAI SUATU BLOG ATAU SITUS. Kemarin, Tips dan Trik Blog melakukan browsing dan secara tidak sengaja menemukan sebuah layanan online yang mampu menyajikan perkiraan nilai sebuah situs, informasi , dan data pengunjung suatu situs dan informasi situs yang berguna lainnya.

Adalah BIZ INFORMATION yang menyediakan layanan dimaksud. Untuk mengetahui informasi serta nilai perkiraan suatu situs, kita hanya perlu memasukkan alamat URL situs tersebut pada kotak yang disediakan. Kemudian kita hanya perlu menekan button “NILAI” dan kemudian menunggu beberapa detik untuk mendapatkan informasi yang lengkap dari situs tersebut.

Informasi yang ditampilkan antara lain :

1. Nilai Situs
2. Titik Halaman Harian
3. Pengunjung Harian
4. Peringkat Dunia
5. Peringkat Indonesia
6. Jenis Web
7. Page Rank
8. Jumlah Halaman
9. Tautan Eksternal
10. Nilai Metrik
11. Pengenalan Situs
12. Sejak Online Situs
13. Dll

Untuk mencobanya, silakan ikuti langkah-langkah berikut ini.

Pertama, buka halaman http://bizinformation.org/id/

Kedua, masukkan alamat URL situs/blog pada kotak yang disediakan

Ketiga, klik “NILAI”

Keempat, tunggu beberapa saat untuk mendapatkan hasilnya.

Berikut contoh hasil dari informasi blog ini (Tips dan Trik Blog). Dan dari penilaian layanan tersebut BLOG ini mempunyai nilai perkiraan 41 juta. Sungguh angka yang menakjubkan. Sayangnya hanya berupa angka saja.

Selamat Mencoba!!

Cara Memasang Share This Post

Cara Memasang Share This Post. Banyak trik SEO yang dapat kita gunakan agar blog atau halaman blog kita menjadi populer dan diindeks oleh mesin pencari (search engine). Salah satu trik yang dengan dengan mudah dapat kita lakukan adalah dengan cara memasang Share This Post pada halaman atau postingan blog milik kita.

Dengan memasang tool tersebut adalah halaman atau postingan kita dipublikasikan pada situs social bookmark yang dipilih oleh pengunjung, antara lain Digg, Delicious, Facebook, Google, Stumble, Technorati dan Twitter. Dengan terpublikasinya halaman postingan blog kita maka diharapkan akan dapat meningkatkan traffic pengunjung pada blog kita.

Jika pengunjung tertarik untuk memasang tool tersebut, Tips dan Trik Blog akan mengetengahkan cara untuk memasangnya.

Berikut langkah-langkah memasang Share This Post tersebut.

Pertama, login ke akun blogger masing-masing hingga masuk Dasbor >> Rancangan >> Edit HTML

Kedua, jangan lupa centangi “Expand Templates Widget”

Ketiga, cari kode ]]>></b:skin>

Keempat, copy script di bawah ini di atas kode ]]>></b:skin> tersebut.

div.sociable { margin: 16px 0;}
span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;

border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

Kelima, kemudian cari kode <data:post.body/>

Jika blog kita sudah menggunakan fungsi readmore maka akan terdapat dua kode tersebut dan pilih kode yang kedua atau terakhir agar tidak tampak pada halaman utama.

Keenam, copy script di bawah ini dan letakkan di bawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='sociable'>
<div class='sociable_tagline'>
<img alt='maspeypah' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOFqwS2P6Hsy5OR6E9CtFUpy2PTBBP-FaJ3oi6kYA5NyljVghUVPINZNF7VYk2g-RanO4_2FUeSj1JdrcXiT3f0YNCKfG2NnR-mzHbpRyxYtCS6XvbXIXfwekicxmCFaPuVl22kdDKU6li/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2oV1u_V4RI2xh71XJhFQ2L86U92s9vAmoch5aAzmwS6riH9uLztP0WRwJRFK_YB0ZjEQQne5AyFou1FDbW6PIqie5-hxcWvq3ZVjMOpaxj7qMaYGraB410DUiiia8Q_mdozZ5Sbr6EdIA/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqZuObfH4NenvrFCuz0KPJQo5NqyiLrvkb-jl_GIfqCBXz0mJ627e_3OnybAdt1oVTog5zwWVWa1kf5e-dPjnkyKYSfEPqqvvikLnYUZbKpI4xfTDsDYz0E72D3z71t6gIwBJEGfWXOAf/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7OOWHhIQXvUdQZFLZjKjON276ZlukGm-X_zRhck1PUJlopc_dhtPzB_olIW4HnOUb1ufxlVQ-7A1K2QA6i7XS6UotHl7YVy66HQcc-OIBToHbKIPnE-TqvUxDygBkXya4lF_kilX5kEAR/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwK5sK4eaRYrZchqT9HjkvZqs28UKriHtoIXsHh243jqI8uZU3JbOkiTICj8nvrfqWDBMwupHaqgvpqBMyjlBI1djc8gadPig_mE8at5Djeyx_Kyf17JLhvBHl04ha5omkLpWc1AFd3-Fg/s400/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfS1MCgvcZfcR9wXzTkoCoP8vhvmOrgtlaH4OzEGFuM-cfHLAcWDWnUWiYNfL9S-nyePn4oVaPFR19TWANjdKORqEPnp-bczzry45uAvXbZAim0WID1tHeALqUd98O7e1B8L6TZ8m9ssb/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='"http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAvGSPqAppIjxKg3RPInnpdknbzE6qD_XRhnjky6jjnq5iSaJRzrro8k_-aAQlQbPIepjp-ZJRVcvBEoiCbECXxSfQReZ3-5RKbOhd7kVdM3WCuAVbd5ejmEpVi3tvAuHiML4hoCDbdps6/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='"http://twitter.com/home?status=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaUJljtOelP5QYjPBJMydJqqA9s-zojsVj0SvolwPo0-bh3K02f9FS11VCLmE2QJqTGMZZvv-tvUVmTegSYaISECcuNqdtRfopWTE9aCT2-YzbPC2jJCh1NuxU3xg33hVqNsVDqO4jY6qQ/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div>
</b:if>

Ketujuh, simpan template.

Kedelapan, refresh blog kita dan pastikan tool tersebut sudah “hadir” dalam setiap postingan yang telah kita buat.

Selamat ber-SEO ria.

Visi-Misi Pertamina

VisiMenjadi Perusahaan Minyak Nasional Kelas DuniaMisiMenjalankan usaha inti minyak, gas, dan bahan bakar nabati secara terintegrasi, berdasarkan prinsip-prinsip komersial yang kuatTata Nilai Clean (Bersih)Dikelola secara profesional, menghindari benturan kepentingan, tidak menoleransi suap, menjunjung tinggi kepercayaan dan integritas. Berpedoman pada asas-asas tata kelola korporasi yang

Memasang Widget Kurs Mata Uang

Memasang Widget Kurs Mata Uang Rupiah. Pada kesempatan yang terdahulu, di sini, sebenarnya Tips dan Trik Blog telah memposting tema serupa tentang pemasangan kurs mata uang ini. Namun tidak ada salahnya, jika kali ini Tips dan Trik Blog mempostingnya kembali dengan layanan yang berbeda, yaitu KlikBCA. Dengan postingan ini diharapkan para pengunjung mempunyai banyak pilihan jika ingin menggunakan salah satunya.

Dengan memasang kurs mata uang pada blog diharapkan dapat membantu para pengunjung (terutama yang sering berkecimpung dalam dunia perdagangan valas) untuk mengetahui kurs mata uang rupiah secara up to date (realtime). Dengan demikian mereka tidak perlu repot-repot menuju ke situs yang menyediakan kurs mata uang.

Cara pemasangannya cukup mudah, yaitu dengan langkah-langkah sebagai berikut.

Pertama, login ke akun blogger hingga masuk Dasbor >> Rancangan >> Tambah Gadget >> Tambahkan HTML/Javascript.

Kedua, kemudian copy kode berikut ini.

<iframe border="0" frameborder="0" marginheight="0" marginwidth="0" height="250" src="http://masterbisnis.com/kurs_bca.php" scrolling="no" width="180"></iframe>

Keterangan
Jika menginginkan, kita dapat merubah variable “height” dan “width” dengan angka yang lebih besar atau lebih kecil tergantung selera dan kebutuhan.

Ketiga, simpan perubahan

Keempat, selesai

Sekarang, refreshlah blog dan pastikan widget kurs mata uang telah "bercokol" pada blog kita. Hasilnya seperti di bawah ini.



Selamat Mencoba!!!

Memasang Harga Emas Realtime

Memasang Widget Harga Emas Realtime. Ketika bersilahturahmi di blog teman, Tips dan Trik Blog menemukan widget yang menampilkan Harga Emas secara realtime, di mana kita dapat melihat harga emas yang terupdate setiap saat. Sebenarnya widget serupa juga pernah Tips dan Trik Blog ketengahkan pada postingan sebelumnya, di sini, namun tidak ada salahnya jika Tips dan Trik Blog mengetengahkan lagi dengan harapan para blogger mempunyai pilihan untuk memasang salah satu widget harga emas tersebut.

Adalah Gold-Quote.net yang menyediakan layanan harga emas yang akan terupdate secara realtime. Harga emas yang ditampilkan adalah dalam satuan dollar per troy oz, di mana 1 troy oz sama dengan 31,1 gram. Jadi untuk mengkonversi harga emas ke dalam rupiah adalah dengan membagi harga tersebut dengan 31,1 kemudian dikalikan dengan kurs rupiah terhadap dollar.

Contoh perhitungannya telah Tips dan Trik Blog sampaikan pada postingan yang terdahulu, di sini.

Untuk memasang widgetnya pada side bar blog kita dengan cara sebagai berikut.

Pertama, login kea kun blogger hingga masuk Dasbor >> Rancangan >> Tambah Gadget >> HTML/Javascript

Kedua, buka halaman http://gold-quote.net/dashboard.php?lang=en

Ketiga, kita akan melihat beberapa tampilan yang dapat kita pilih sesuai dengan selera masing-masing. Dan pilihlah tampilan yang kita inginkan.



Keempat, di bawah tampilan yang kita inginkan tersebut terdapat script yang harus kita pastekan pada di sidebar blog kita. Copy dan pastekan script tersebut pada Gadget.



Kelima, simpan.

Keenam, selesai

Sekarang, refresh blog dan pastikan widget harga emas tersebut telah muncul pada blog kita, contoh hasilnya adalah seperti di bawah ini.

Selamat Mencoba!!!

Cara Memberi Keterangan Gambar Pada Posting Blog

Cara Memberi Keterangan Gambar Pada Posting Blog. Jika kita sering membaca koran, kita pasti sering melihat photo / gambar yang berfungsi sebagai ilustrasi atas berita / artikel tertentu. Nah, biasanya pada bagian bawah photo /gambar tersebut diberi keterangan sehubungan dengan photo / gambar tersebut. Dalam dunia blog, kita juga dapat melakukan hal yang serupa, yaitu menambahkan photo / gambar ilustrasi dan kemudian kita dapat memberikan keterangan di bawah gambar ilustrasi tersebut. Jika tertarik, silakan ikuti tipsnya berikut ini bersama Tips dan Trik Blog.

Kita semua mengetahui bahwa untuk memasang photo / gambar pada postingan blog dapat dilakukan dengan dua cara. Pertama, dengan cara mengupload gambar secara langsung dari PC (komputer) dan kedua, dengan cara menempatkan / mengupload gambar pada suatu layanan photo hosting (misalnya, photobucket, flicker, dll) kemudian linknya dipastekan (ditempatkan) pada postingan blog.

Jika kita menggunakan cara yang pertama, kita akan mendapati scriptnya seperti contoh di bawah ini.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s1600/hacker1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 109px; height: 122px;" src="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s200/hacker1.jpg" alt="" id="BLOGGER_PHOTO_ID_5494492217407883570" border="0" /></a>

Untuk memberi keterangan gambarnya, caranya adalah dengan menyisipkan teks (keterangan) pada script gambar tersebut. Tuliskan teks (keterangan) pada teks yang berwarna merah seperti di bawah ini.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s1600/hacker1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 109px; height: 122px;" src="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s200/hacker1.jpg" alt="" id="BLOGGER_PHOTO_ID_5494492217407883570" border="0" /> keterangan gambar </a>

Jika kita menggunakan cara yang kedua, maka contoh scriptnya adalah seperti di bawah ini.

<a href="http://s209.photobucket.com/albums/bb287/yono_pati/?action=view&current=hp.jpg" target="_blank"><img src="http://i209.photobucket.com/albums/bb287/yono_pati/th_hp.jpg" alt="Photobucket" border="0" /></a>

Untuk memberi keterangan gambarnya, caranya juga serupa yaitu dengan menyisipkan teks (keterangan) di antara script tersebut. Perhatikan teks yang berwarna merah.

<a href="http://s209.photobucket.com/albums/bb287/yono_pati/?action=view&current=hp.jpg" target="_blank"><img src="http://i209.photobucket.com/albums/bb287/yono_pati/th_hp.jpg" alt="Photobucket" border="0" /> Keterangan Gambar </a>

Hasilnya seperti di bawah ini.

keterangan gambar

dan

Keterangan Gambar

Jika kita perhatikan, posisi gambar di atas adalah di tengah (center) secara horizontal, hal ini disebabkan karena pada waktu menguploadnya, Tips dan Trik Blog memilih opsi “center” sedangkan tulisan (keterangan)nya rata kiri sehingga terlihat kurang bagus.

Oleh karena itu, untuk menjadikan keterangan gambar menjadi rata tengah, kita dapat menambahkan script <div style="text-align: center;"> dan </div> yang mengapit script di atas, sehingga selengkapnya menjadi seperti ini.

<div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s1600/hacker1.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 109px; height: 122px;" src="http://4.bp.blogspot.com/_dATSF_iv-iw/TEBbj4e-yTI/AAAAAAAADzc/QaXcvWavVIA/s200/hacker1.jpg" alt="" id="BLOGGER_PHOTO_ID_5494492217407883570" border="0" /> keterangan gambar </a></div>

<div style="text-align: center;"><a href="http://s209.photobucket.com/albums/bb287/yono_pati/?action=view&current=hp.jpg" target="_blank"><img src="http://i209.photobucket.com/albums/bb287/yono_pati/th_hp.jpg" alt="Photobucket" border="0" /> Keterangan Gambar </a></div>

Setelah itu, hasilnya seperti di bawah ini.

keterangan gambar

dan

Keterangan Gambar

Oh, iya jika kita perhatikan, keterangan gambar pada image yang kedua berada di samping gambar, jika menginginkan di bawah gambar, kita dapat menambahkan <br> sebelum keterangan gambar, selengkapnya menjadi seperti ini.

<div style="text-align: center;"><a href="http://s209.photobucket.com/albums/bb287/yono_pati/?action=view&current=hp.jpg" target="_blank"><img src="http://i209.photobucket.com/albums/bb287/yono_pati/th_hp.jpg" alt="Photobucket" border="0" /> <br> Keterangan Gambar </a></div>

dan hasilnya akan menjadi seperti di bawah ini.

Keterangan Gambar

Selamat Mencoba!!

Cara Memasang Kode Warna Pada Blog

Cara Memasang Kode Warna Pada Blog. Jika kita sering mengotak-atik template terutama yang berhubungan dengan warna maka kita akan sering menggunakan kode html warna . Tidak susah untuk menemukan kode html untuk warna ini, kita bisa melakukan browsing di internet untuk menemukan situs atau link yang menyediakan hal tersebut. Atau daripada susah-susah mencari ke sana kemari, kita dapat memasang kode html warna tersebut pada blog kita sendiri. Dengan begitu, setiap kali kita melakukan pengeditan pada template, kita hanya perlu menuju ke "kode html warna" yang kita buat tersebut.

Untuk memasang kode warna pada blog, langkah-langkahnya sebagai berikut.

Pertama, login ke akun blogger hingga masuk [Dasbor][Rancangan][Edit HTML]

Kedua, jangan lupa centangi "Expand Template Widget".

Ketiga, cari dan temukan kode </head>

Keempat, copy paste kode berikut ini di atas kode </head> tersebut.

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

Kelima, simpan template.

Keenam, langkah selanjutnya adalah memasang kode warna pada blog kita. Kode warnanya adalah seperti 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" height="24" width="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>

Untuk memasang kode warna ini dapat dilakukan dengan dua cara. Cara Pertama, kita dapat menempatkan kode warna ini pada postingan dan Cara Kedua, kita dapat menempatkan kode warna ini pada side bar.

Cara Pertama
1. Buat postingan >> kemudian copy paste kode warna di atas.
2. Beri judul postingan, misalnya Kode HTML Warna
3. Berilah label yang relevan
4. Terbitkan Entri (postingan)

Cara Kedua
1. Masuk Dasbor >> Tata Letak >> Rancangan Template >> Elemen Halaman
2. Tambahkah Gadget >> Tambahkan HTML/Javascript
3. Kemudian copy paste kode warna di atas.
4. Simpan Perubahan

Saran saya, agar tidak membuat blog menjadi "lelet", sebaiknya tempatkan kode warna ini pada postingan saja kemudian buatkan link ke postingan tersebut.

Selamat Mencoba!!

Contoh hasilnya dapat dilihat pada link kode warna ini.

Sejarah Gedung Negara Grahadi Surabaya

Gedung Negara Grahadi berdiri sejak 1795 pada masa Belanda. Kini, meski usia sudah lebih 2 abad tetap berdiri kukug dan megah.Terletak dijantung kota Surabaya, tidak jauh dari pusat perbelanjaan Tunjungan Plasa, tepatnya di Jalan Gubernur Suryo wisatawan dapat menjumpai sebuah bangunan megah yang memiliki sejarah pada masa lampau. Gedung ini lebih dikenal dengan sebutan Grahadi karena di dalam