Blog Oke: Blog Tutorial

Showing posts with label Blog Tutorial. Show all posts

Situs Penyedia Template Bloggger

Blogger memudahkan penggunanya dalam mengganti atau memodifikasi template sehingga bisa menyesuaikan dengan selera masing-masing. Berikut ini beberapa daftar situs penyedia template yang bisa anda kunjungi dan download.

Baca Selengkapnya

Cara membuat Kode Warna

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 gambar di samping ini :

Berikut ini cara untuk membuat tabel seperti gambar diatas :

Login dulu ke account blogger kamu.
Pilih tab Rancangan ---> Edit HTML sebaiknya simpan dulu template sobat 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
Silakan copas script berikut di atas kode </head>
<script language='javascript'> function Barva(koda) { document.getElementById("vzorec").bgColor=koda; document.hcc.barva.value=koda.toUpperCase(); document.hcc.barva.select(); } function BarvaDruga(koda) { document.getElementById("vzorec2").bgColor=koda; document.hcc.Barva2.value=koda.toUpperCase(); document.hcc.Barva2.select(); } </script> <script type='text/javascript'> var hue; var picker; //var gLogger; var dd1, dd2; var r, g, b; function init() { if (typeof(ygLogger) != "undefined") ygLogger.init(document.getElementById("logDiv")); pickerInit(); //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1" //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1" } // Picker --------------------------------------------------------- function pickerInit() { hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180); hue.onChange = function(newVal) { hueUpdate(newVal); }; picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180); picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); }; hueUpdate(); dd1 = new YAHOO.util.DD("pickerPanel"); dd1.setHandleElId("pickerHandle"); dd1.endDrag = function(e) { // picker.thumb.resetConstraints(); // hue.thumb.resetConstraints(); }; } executeonload(init); function pickerUpdate(newX, newY) { pickerSwatchUpdate(); } function hueUpdate(newVal) { var h = (180 - hue.getValue()) / 180; if (h == 1) { h = 0; } var a = YAHOO.util.Color.hsv2rgb( h, 1, 1); document.getElementById("pickerDiv").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; pickerSwatchUpdate(); } function pickerSwatchUpdate() { var h = (180 - hue.getValue()); if (h == 180) { h = 0; } document.getElementById("pickerhval").value = (h*2); h = h / 180; var s = picker.getXValue() / 180; document.getElementById("pickersval").value = Math.round(s * 100); var v = (180 - picker.getYValue()) / 180; document.getElementById("pickervval").value = Math.round(v * 100); var a = YAHOO.util.Color.hsv2rgb( h, s, v ); document.getElementById("pickerSwatch").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; document.getElementById("pickerrval").value = a[0]; document.getElementById("pickergval").value = a[1]; document.getElementById("pickerbval").value = a[2]; var hexvalue = document.getElementById("pickerhexval").value ='#'+ YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]); ddcolorposter.initialize(a[0], a[1], a[2], hexvalue) if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select(); } </script>
Simpan Template.

Tampilan Kode Warna Pada Postingan

Berikut langkah-langkahnya :

Login Blogger Sobat
Pilih Rancangan/ Design
Tambah Gadget pilih HTML Javasript
Kemudian copy paste code di bawah ini, dan jangan di beri 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>

Belum selesai sobat, Lanjut sobat buat postingan baru di blog sobat, lalu 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://anggasona-anotherbestblog.blogspot.com/2010/08/cara-memasang-widget-kode-warna-di-blog.html" target="new">Make Your Own</a></p></center>

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.

Selamat mencoba dan semoga berhasil

Cara Pasang Breadcrumb di Blog

Apakah blog sobat sudah dipasang navigasi breadcrumbs? Jika sobat ingin lebih mengoptimalkan blog sobat agar lebih seo friendly dan user friendly, sebaiknya sobat memasang breadcrumbs navigasi. selain untuk mempermudah pengunjung, konon kata para master SEO, si mbah google menyukai blog yang dipasangi navigasi breadcrumbs ini, jadi kenapa sobat tidak mulai berfikir untuk memasang Breadcrumbs Navigasi?

Beberapa sumber berita yang saya baca di Internet menyebutkan bahwa google sudah dapat membaca dan memahami data breadcrumbs blog kita, jadi jangan heran bila sobat menemukan ada sebuah blog pada hasil pencarian (SERP) url nya yang ditampilkan malah kategorinya.

Nah... bagaimana? sudah selesai berfikir? jika sudah, dan sobat ingin memasang navigasi Breadcrumbs ini, silahkan melakukan beberapa langkah yang saya berikan ini.

Masuk ke Rancangan > Edit HTML > checklist Expand Widget Templates. Untuk mengamankan template sobat, sebaiknya download dulu template sobat untuk berjaga-jaga.
Copy kode css berikut lalu pastekan sebelum kode </b:skin>. (gunakan ctrl+f untuk memudahkan pencarian)

.breadcrumbs{border-bottom:1px dotted #999;margin:2em 0 0.5em;padding:0 0 0.5em;font-size:10px}
Kemudian cari kode ini <b:includable id='main' var='top'> dan pasang kode berikut tepat di atas kode tadi.

<b:includable id='breadcrumbs' var='post'>
    
    <b:if cond='data:blog.pageType == "item"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:post.labels'>
    Go  :
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == "true"'>
    <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
    </b:if>
    </b:loop>
    <b:if cond='data:post.title'>
    > <b><data:post.title/></b>
    </b:if>
    </b:if>
    </span>
    </p>
    </b:if>
    
    </b:includable>
Lalu cari kode <b:loop values='data:posts' var='post'> (biasanya ada 2 kode yg sama pilih kode yang pertama) dan pasang kode berikut di bawah kode tadi

<b:include data='post' name='breadcrumbs'/>
Simpan Template sobat

Semoga bermanfaat

Membuat Arsip Blog dengan Scroll

Pada postingan kali ini akan membahas cara memasang arsip blog [ Archive Blog ] dengan scroll,
contoh nya dapat di lihat sendiri di blog saya ini, yuk langsung aja ikuti langkah - langkah yang ada di bawah ini :

Membuat Arsip Blog Fungsi Scroll

Masuk ke blogger
Klik Tata Letak
Klik Elemen Halaman
Tambahkan sebuah elemen halaman - Tambah elemen Arsip Blog
Tapi sobat harus pilih gaya Hierarki

Itu belum berfungsi scroll, untuk membuatnya memiliki fungsi scroll ikuti langkah-langkahnya lagi !

Setelah itu, klik Edit Html
Beri tanda centang pada tulisan Expand Widget Template
Kawan cari kode seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

Kawan akan menemukan kode lengkapnya seperti ini :

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut
Kode warna hijau yang dicetak tebal adalah tinggi dari elemen tadi, silahkan sobat ganti agar sesuai dengan blog sobat

Lalu jangan lupa untuk menyimpannya, Klik Simpan

Semoga berguna ^^

Mendisable klik kanan dan ctrl+c

Mendisable klik kanan dan ctrl+c langsung saja berikut cara-caranya:

Menambahkan kode pada <body>

Login terlebih dahulu ke Blogger.com
Dari halaman Dashboard, silahkan anda menuju ke Tata Letak > Edit HTML
Lalu cari kode <body> (dengan bantuan tekan Ctrl+F atau F3)
Tambahkan kode dibawah ini ke dalam kode <body> tadi, atau bisa juga di ganti sekalian

<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false' onkeypress='return false'>

Anda juga bisa menggunakan beberapa tambahan kode saja, atau semuanya juga boleh, terserah kebutuhan anda.
Berikut penjelasan dari kode-kode diatas:

oncontextmenu='return false' (untuk mematikan klik kanan mouse)

onmousedown='return false' (untuk mematikan klik blok ke bawah)

onselectstart='return false' (untuk mematikan seleksi blok)

onkeypress='return false' (untuk mematikan tombol keyboard)

Jika sudah, Simpan Template blog anda.

Saya rasa cukup itu saja, silahkan dicoba, semoga bermanfaat...

Download E-Book Joomla Berbahasa Indonesia

Bila anda pernah membuat website, anda pasti akan paham betapa sulitnya membuat website benar-benar dari dasarnya. Namun, bisakah anda bayangkan betapa lebih sulitnya untuk mengelola website anda, apalagi bila website anda bersifat dinamis.

Joomla adalah salah satu jenis CMS (content management system), yaitu digunakan untuk mengorganisir website anda. Jadi anda bukan hanya mempunyai website, namun anda memiliki website yang terstruktur.

Dengan Joomla! anda dapat mengutak-atik disain web tanpa mengubah konten isi web anda.

Bagi yang mau mempelajari Joomla, silahkan download E Book klik disini

Semoga Bermanfaat

Cara Membuat Tabel Dengan Funsi Scroll

Setelah pada postingan sebelumnya saya posting Cara Membuat Label Dengan Fungsi Scroll, pada postingan kali inisaya share bagaimana cara membuat tabel dengan fungsi scroll. Ini bertujuan untuk mensiasati adanya widget di blog yang terlalu panjang sehingga antara halaman posting dan sidebar jadi seimbang. Caranya cukup mudah, sobat tinggal menambahkan kode di bawah ini di antara kode widget sobat sobat.

<div style="border: 1px solid #aaa;background-colo r:#f9efef; width:350px; height:250px; overflow:auto; color:#FFF;"><p>

PASANG SCRIPT SOBAT DI SINI. BISA JUGA DAFTAR LINK ATAU DATA APAPUN

</p>
</div>

Teks yang berwarna hijau untuk mengatur lebar dan tinggi tabel,

Semoga bermanfaat.

Membuat Label Dengan Fungsi Scroll

Pada postingan kali ini saya akan menjelaskan bagaimana cara membuat label dan arsip ( archive ) dengan fungsi scroll. Langkahnya cukup sederhana, sobat tinggal menambahkan sedikit kode pada arsip sobat. Sebelumnya buatlah widget arsip/archive dengan nama arsip blog atau apa saja, ini cuma untuk memudahkan sobat dalam penambahan kode nantinya. Pilih model yang Hirearchy

Kalau sudah membuat widget arsip, langkah selanjutnya sobat masuk ke edit HTML jangan lupa klik kotak Expand Template Widget. Carilah nama widget arsip blog yang sudah sobat buat tadi ( tekan Ctrl F untuk lebih mudah ).

Carilah kode di bawah ini:

b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>

Kode yang berwarna hijau sebelumnya tidak ada, tambahkan kode itu untuk aktifkan fungsi scrollnya. Yang berwarna biru adalah tinggi arsipnya, sesuaikan dengan template sobat. Setelah itu simpan..

Untuk membuat label dengan fungsi scroll, langkah-langkahnya sama seperti yang di atas. Sobat cari kode seperti di bawah ini :

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'> <ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div> <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Tambahkan kode berwarna hijau, dan simpan template. Sekarang lihat pekerjaan sobat.

Semoga bermanfaat.

Cara Membuat Link Membuka Tab Baru

Kode link di klik open tab bar atau kode link di klik membuka tab baru. Sebenarnya link jenis ini tidak terlalu di sukai pengunjung karena selalu membuat ribet dan rumit. Pernah ga saat kalian membuka atau meng klik link seseorang, tiba-tiba saat di klik membuka tab baru. Biar ga pusing nie contoh silakan anda klik disini

Ingin tau cara buatnya?

Sebagai dasar, jika pada link biasa kodenya akan berbentuk seperti dibawah ini:

<a href='http://trikblogger.com'>klik disini</a>

Maka untuk membuat agar link membuka di tab baru secara automatis kodenya seperti ini:

<a href="#" target="_blank" rel="dofollow" onclick="window.open('http://alamat.com'); return false;">klik disini</a>

Nah jika pada banner biasanya memiliki kode:

<a href='alamat.com'><img src='alamat/gambar.jpg'></a>

Tinggal ganti kode sebelum

<img src... dengan <a href="#" target="_blank" rel="dofollow" onclick="window.open('http://alamat.com'); return false;">

Catatan !
Gantilah huruf yang berwarna merah dengan alamat link yang sobat inginkan dan yang berwarnah biru dengan text atau link gambar yang sobat inginkan

Ok mudah bukan? Selemat mencoba

Domain Gratis

Jika kita membuat blog secara gratis, baik di blogger atau di wordpress kita akan memperoleh nama/domain blog kita seperti ini http://blabla.blogspot.com atau http://blabla.wordpress.com. Bagi yang punya banyak uang mungkin bisa langsung membayar dan bisa memiliki nama domain dot.com. Namun bagi kita yang miskin ini :D pasti malas jika harus merogoh uang jajan kita demi mendapatkan domain yang lebih simple yaitu http://blabla.com. Tapi jangan khawatir bos, saya punya tips menarik supaya nama web/blog kita menjadi lebih pendek, dan juga tidak perlu bayar. mau tahu caranya?

Ada beberapa layanan di internet yang yang bisa mempersingkat nama domain blog kita. Disini akan saya sebutkan tiga saja yang menjadi favorit saya, karena selain gratis, cara daftarnya juga gampang, dan tidak ada iklannya. Berikut ini adalah layanannya:
1. co.cc nama blog kita akan menjadi http://nama.co.cc
2. co.nr nama blog kita akan menjadi http://nama.co.nr
3. uni.cc nama blog kita akan menjadi http://nama.uni.cc

Nah jadi lumayan pendek kan? mau tahu caranya? gampang kok, tinggal kunjungi situs tersebut terus daftarkan web/blog kita.
Pengen dijelasin caranya? OK deh
kali ini saya akan menjelaskan satu aja yang menjadi paling favorit saya dari ketiga layanan tersebut yaitu co.cc

1. Buka website ini http://co.cc maka tampilannnya akan seperti ini

2. Isikan nama domain untuk blog/web kamu sesuai yang kamu inginkan di kotak yang disediakan, terus klik tombol cek

3. Jika domain yang kamu minta ternyata sudah dimiliki orang lain maka kamu akan diminta memasukkan kembali nama dimain yang lain, namun jika belum ada yang punya maka kamu bisa langsung mendaftarkannya dengan meng-klik tombol Continue to Registration lalu klik link Create Account

4. Setelah itu akan muncul form pendaftaran, isilah form tersebut trus klik tombol Submit

5. Jika berhasil maka akan muncul halaman baru lagi, lalu klik tombol Set up Domain, trus muncul lagi halaman baru dan klik pada tombol Please Set up

6. Kemudian isikan alamat blog kamu, misalnya http://blogokezone.blogspot.com/ pada kotak Target URL dan isikan title dari blog kamu pada kotak Title

7. Jika kamu pingin nama asli blog kamu tidak kelihatan di addressbar maka klik pada link URL Hiding

8. Jika sudah lalu klik tombol Setup Domain

9. Web/blog kamu akan diperiksa dulu oleh tim dari co.cc. masa tunggunya paling lama 24 jam, jika sudah di approve atau disetujui maka kamu akan langsu bisa memakai nama domain kamu yang baru.

Oh ya, domain yang lama masih tetep bisa di akses.
Trus, catatan lagi nih, disini tidak menerima website yang mengandung unsur pornografi, spam, dan sesuatu yang ilegal.

untuk co.cc baca juga artikel disini untuk setting domainnya

Selamat Mencoba

Setting Domain di co.cc

Seperti yang sudah kita ketahui, bahwa co.cc adalah top level domain yang bisa kita dapatkan secara gratis. Kita bisa mengganti nama blog kita dari "http://namadomain.blogspot.com" atau "http"//namadomain.wordpress.com" (dll) menjadi "http://namadomain.co.cc" . Dengan co.cc kita bisa mengontrol DNS Records, A, MX, dan CNAME records, sehinga domain co.cc bukan hanya sekedar "URL Forwarding".
Berikut ini akan saya coba mengungkapkan tentang cara setting domain di co.cc:

Pada kolom "Host" isikan dengan nama domain yg sudah km daftarkan, misal "www.namadomain.co.cc" (jangan lupa dikasih "www")
Untuk option "TTL" biarkan saja, gak perlu dirubah2
Pada option "Type" pilih yang "CNAME"
Untuk kolom "Value" isikan "ghs.google.com" Sehingga akan seperti pada gamabr dibawah ini:
Langkah selanjutnya yaitu merubah settingan di blogger/blogspot caranya begini:
- Login ke blogger/blogspot kemudian masuk ke menu "Setting-->Publishing"
- Kemudian pilih "Switch to: Custom Domain"
- Setelah itu klik pada "Already own a domain? Switch to advanced settings"
- Kemudian isikan nama domain kamu yang baru pada kolom "Your Domain".
- Selanjutnya klik tombol "Save Setting"

Selesai. Kalau berhasil (Settingnya sudah benar) maka domain sobat yang baru akan aktif dalam waktu antara beberapa jam sampai 2 hari. Jadi sabar aja menunggunya. Blog sobat akan tetap bisa diakses dengan melalui domain yang lama.

URL Forwarding

URL forwarding bisa digunakan untuk apa aja, bisa web ato blog. Tapi URL Forwarding ini hanya memforward domain yg baru (yang di co.cc) ke domain lama. Jadi domain lama akan 100% seperti semula tanpa ada perubahan apapun, cuma kita bisa mengakses web/blog kita dengan mengetikkan nama domain baru kita di browser. Jika menggunakan URL Forwarding maka yang terindex di google atau Search engine yang lain adalah tetap Domain kita yang lama.
Untuk setting URL Forwarding sangat mudah, kita hanya mengisikan data-data yang diminta dan disesuaikan dengan web/blog kita, seperti "Redirect to:, Page Title, URL Hiding, Meta Description dan Meta Keywords". Kita tidak perlu lagi mensetting domain di web/blog kita lagi.

Note: Metode ini tidak dianjurkan jika tidak terpaksa

Jadi kesimpulannya adalah:

Jika kamu memakai layanan blogger/blogspot maka gunakanlah "Zone Records"
Jika domainnya digunakan untuk web yg memerlukan hosting atau untuk wordpress maka gunakanlah "Manage DNS"
Jangan menggunakan "URL forwarding" jika tidak terpaksa. Misal untuk untuk blog dari multiply yang tidak support custom domain.

Menghilangkan Navbar Blogger

Navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.

Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
Copy kode berikut lalu paste di atas kode ]]></b:skin>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
Klik tombol Simpan Template
Selesai.

Selamat menikmati blog tanpa navbar !

Cara Membuat Efek Sprinkle pada Cursor

Membuat efek sprinkle pada cursor. Tentunya efeknya terlihat kalau loadingnya sudah selesai, hehe...
Caranya yaitu:

Click "tambah gadget."
Click "HTML/JavaScipt"
Kemudian masukan script berikut ini:

<script>
// JavaScript Document<script type='text/javascript'>
// <![CDATA[
var colour="red";
var sparkles=65;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
Simpan

Ganti tulisan yang berwarna merah sesuai dengan warna sprinkle yang ingin kamu hasilkan. Misal "green" nanti hasilnya jadi hijau. O iya.. di blog ini ngga saya pasang efek sprinkle. Soalnya untuk mempercepat loading.
Semoga bermanfaat

Cara Mengganti Background Blog

Untuk mengganti background blog, caranya sebgai berikut:

Click "Tata Letak"
Click "Edit HTML"
Kemudian cari code ini:

body {
background:di sini ada code warna blog kamu
Letakkan code ini setelah code di atas:
url(almat url tempat gambar kamu di simpan)
Simpan

Sobat bisa mengganti background blog kamu sesuka hati. Bisa gambar jenis jpg, png, atau gif. Tentunya akan terlihat setelah loadingnya selesai. Nah.. biar loadingnya cepet, ukuran gambarnya yang kecil saja.
Selamat mencoba...

Cara Membuat Disable Click Kanan

Disable click kanan bisa melindungi isi blog sobat. Artikel, gambar, banner, atau yang lainnya.
Caranya sebagai berikut:

Click "tambah gadget."
Click "HTML/JavaScipt"
Kemudian masukan script berikut ini:

<script type="text/javascript">
function openComments(URL){
var win2 = window.open(URL,"wzCom835728","target=new,width=1000,height=600,resizable=yes,scrollbars=yes");
win2.focus();}
function wzOpenSiteLog(URL){
var win3 = window.open(URL,"wzCom835728","target=new,width=1000,height=600,resizable=yes,scrollbars=yes");
win3.focus();}
scrW="0";scrC="0";jScrp="0";
htRf=escape(document.referrer);
if (htRf=="" || htRf=="Bookmark") htRf="Bookmark+or+URL+Typed+Direct"
var dhRDM = Math.floor(Math.random()*1000);
scrW=screen.width;
if (navigator.appName != "Netscape")
{scrC=screen.colorDepth;}
else {scrC=screen.pixelDepth;}
jScrp=navigator.javaEnabled();
jData="&scrW="+scrW+"&scrC="+scrC;
jData=jData +"&htRefer="+htRf+"&jScrp="+jScrp+"";
if (!(navigator.appName == "Netscape"
&& navigator.appVersion.charAt(0) == "2")){}
function notifyUser() {alert("What are you doing?\nAnda tidak boleh melakukan hal itu!\nRight Click Protection By Asepjiku\nvisit\nbdg-asep.blogspot.com"); return false;}
function userIE4x(){if (event.button==2) notifyUser();}
function userNN4x(e){return (e.which==2||e.which==3) ? notifyUser() : true;}
usingIE4 = (document.all) ? true : false;
usingW3C = (document.getElementById && !usingIE4) ? true : false;
usingNN4 = (document.layers && !usingW3C) ? true : false;
if (usingNN4){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=userNN4x;}
else if (usingW3C) {document.oncontextmenu=notifyUser;}
else if (usingIE4){document.onmousedown=userIE4x;}
</script>
Lalu disimpan !

Semoga berhasil.

Cara Membuat "CircleText" (Teks Berputar yang Mengelilingi Cursor)

Dan scriptnya sebagai berikut:

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #0000FF;

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

</style>
<script type='text/javascript'>
//<![CDATA[

;(function(){

// Pesanmu di sini,(QUOTED STRING)
var msg = "www.trikblogger.com";

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 25;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

// BERHENTI NGEDITNYA..! //

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :

document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +

'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();
//]]>
</script>

Ganti teks yang berwarna merah sesuai dengan selera kamu.
Selamat mencoba...

Script untuk Membuat Efek Salju

Untuk caranya seperti biasa:

Click "Tata Letak"
Click "Edit Laman"
Click "Tambah Gadget" pilih "HTML/javascript" dan tambahkan Script berikut :

<script type='text/javascript'>
//Snow alias salju hehehe...

if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 30; //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;

for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');

currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - 2;
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth - 2;
}
}

function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function snow(){
var dy,dx;

for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;
x[i]+=dx;

if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];
}
setTimeout(snow,timer);
}

function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}

if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}

})();
}//tamat
</script>

Selamat mencoba

Cara Membuat Pesan Pembuka dan Penutup di Blog

Sebetulnya script ini sudah ada di postingan Blog Tutorial, Unik untuk Menyambut Pengunjung. Namun jika sobat ingin yang lebih simpel, scriptnya sebagai berikut:

<SCRIPT quality='high' type='text/javascript'>
var name = prompt("Welcome!!! di asepjiku.blogspot.com", "your name here ");
alert("Salam kenal ya "+name)
//
alert ("SELAMAT DATANG DI Trik Blogger Kami sarankan anda memakai browser Mozilla Firefox. ")
// goodbye alert
function goodbye(){
alert('Hayooo.... mau kemana! He..he..he.. O iya terima kasih atas kunjungannya! Lain kali kalau ada waktu luang jangan lupa main ke sini lagi ya..! THANKS AND VISIT MY BLOG AGAIN, OK..!');
}
parent.window.onunload=goodbye;
//<![CDATA[
//]]>
//<![CDATA[
//]]>
</SCRIPT>

Ganti alert yang berwarna merah sesuka hatimu, hehe..

Selamat mencoba...

Cara Membuat Kata Penutup Blog

Ketika anda pertama kali membuka blog, akan muncul pesan selamat datang bagi anda, dan begitu juga ketika anda menutupnya tentu anda akan menemui hal serupa yaitu akan muncul sebuah pesan penutup.
Kata penutup di Blog merupakan salah satu trik dari pemilik blog atau admin untuk menyampaikan suatu pesan terima kasih kepada para pengunjungnya karena telah membuka blognya. Anda pasti sudah pahamkan maksud saya mengenai penutup blog itu.

Cara buatnya :

Login ke account blogger anda.
Klik Layout
Edit HTML.
Cari kode </head> di dalam template anda.
Copy pastekan 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>
Klik Simpan Template.

Silahkan ganti teks (Bagaimana Pendapat Anda Tentang Blog Saya ? Silahkan Kembali dan Beri Komentar Anda! Terimah Kasih !!) dengan teks anda sendiri.

Selamat mencoba ...

Blog Oke

Blog Archive