Pernak Pernik Blogger

Slide Post Images Dengan Java Script

2010-04-27T14:30:00.014+07:00

Pernak Pernik Blogger menambah satu koleksi lagi yaitu Slide Foto / Gambar, buat para Sobat Blogger yang mau mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

DEMO SLIDE POST IMAGES

* Langkah yang Pertama
@- Login dahulu seperti biasa dengan ID Blog milik Sobat.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Copy Kode CSS dibawah ini kemudian Paste di atas Kode ]]></b:skin>

#coverslide{
position:relative;
width:220px;
background:#1c1c1c;
float:left;
height:220px;
margin-top:5px;
}
#slider{
width:200px;
height:200px;
padding:0px 0px;
margin:10px 10px;
visibility: hidden;
background:#fff;
}
#slider ul{
margin:0px 0px;
padding:0;
list-style:none;
}
#slider li{
width:200px;
height:200px;
background:#000;
overflow:hidden;
margin:0px 0px;
}
.slider-position {
position:relative;
}

@- Lalu cari Kode : </head>
@- Kemudian Copy Kode di bawah ini lalu Paste di atas Kode </head>

<script src='http://iyang.googlecode.com/files/1.2.6.js' type='text/javascript'></script>
<script src='http://iyang.googlecode.com/files/imgslide.js' type='text/javascript'></script>
<script type='text/javascript'>
var $jx = jQuery.noConflict();
$jx (document).ready(function(){
$jx('#slider').css('visibility','visible');
$jx("#slider").easySlider({auto: true, continuous: true});})</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

@- Jika sudah jangan lupa Klick SAVE TEMPLATES / SIMPAN TEMPLATE
@- Langkah yang pertama selesai sudah.

* Sekarang Lanjut Kelangkah yang Kedua
@- Klik Tab Page Element / Elemen Halaman
@- Klik Add Widgate / Tambah Gadget
@- Klik Pilih Yang HTML / JavaScript
@- Lalu Copy Kode dibawah ini dan Paste pada Widgete / Gadget yang tadi barusan Sobat siapkan.

<div id='jqueryslider'>
<div id='coverslide'>
<div id='slider'>
<ul>
<li><a href='LINK ARTIKEL BLOG ANDA'><img alt="" height="200" src="LINK GAMBAR ANDA" width="200" /></a></li>
<li><a href='LINK ARTIKEL BLOG ANDA'><img alt="" height="200" src="LINK GAMBAR ANDA" width="200" /></a></li>
<li><a href='LINK ARTIKEL BLOG ANDA'><img alt="" height="200" src="LINK GAMBAR ANDA" width="200" /></a></li>
<li><a href='LINK ARTIKEL BLOG ANDA'><img alt="" height="200" src="LINK GAMBAR ANDA" width="200" /></a></li>
<li><a href='LINK ARTIKEL BLOG ANDA'><img alt="" height="200" src="LINK GAMBAR ANDA" width="200" /></a></li>
</ul>
</div></div></div>

@- Kemudian SAVE /SIMPAN
@- Selesai sudah langkah yang kedua.
@- Yang Saya tandai dengan warnan MERAH adalah Cover Luar Slide dan yang berwarna HIJAU adalah Cover Dalam Slide.
@- Untuk soal Tinggi dan Lebar Cover Slide silahkan Sobat Blogger sesuaikan menurut kebutuhan.
@- Silahkan lihat hasilnya dan sukses selalu buat para Sahabat Blogger semua.

Sticker Dengan Marquee Scroll Delay Dan True Speed

2010-04-22T16:28:00.010+07:00

Buat para sahabat Blogger semua tentunya hal ini sudah bukan barang baru lagi, tapi tidak ada salahnya jika saya mengulang kembali soal text berjalan ini, sengaja saya publikasikan kembali dengan sedikit kode tambahan biar jalannya text lebih halus dan terlihat lebih profesional, tidak panjang lebar saya menjelaskan karena memang Sahabat Blogger sudah biasa menggunakan text berjalan tersebut.

DEMO Sticker Dengan Marquee Scroll Delay Dan True Speed

STICKER ►►

Sample Widget 1 Sample Widget 2 Sample Widget 3 Sample Widget 4 Sample Widget 5 Sample Widget 6 Sample Widget 7 Sample Widget 8

DEMO Sticker Dengan Marquee Tanpa Scroll Delay Dan True Speed

STICKER ►►

Sample Widget 1 Sample Widget 2 Sample Widget 3 Sample Widget 4 Sample Widget 5 Sample Widget 6 Sample Widget 7 Sample Widget 8

Buat Blogger Pemula silahkan ikuti langkah-langkahnya dibawah ini:
1. Login Seperti biasa dengan ID Anda / Masuk ke Blog
2. Klik Tab Layout / Tata Letak
3. Klik Tab Page Element / Elemen Halaman
4. Klik Add Widgate / Tambah Gadget
5. Klik Pilih Yang HTML / JavaScript
6. Lalu Copy Kode dibawah ini dan Paste pada Widgete / Gadget yang tadi barusan Sobat siapkan.

<table border="0" cellpadding="1" cellspacing="0" width="100%" class="text_small" bgcolor="#000000"><tr><td color="FFFFFF" bgcolor="#FF0000" width="17%" align="center" style="color:#FFFFFF;font-weight:bold;">STICKER ►►</td><td width="75%" style="color:#FFFFFF;font-weight:bold;"><marquee direction="left" scrolldelay="20" truespeed="truespeed" scrollamount="1" onmouseover="this.stop()" onmouseout="this.start()"><a href='#'>Sample Widget 1</a> <a href='#'>Sample Widget 2</a> Sample Widget 3 <a href='#'>Sample Widget 4 </a> Sample Widget 5 <a href='#'>Sample Widget 6 </a> Sample Widget 7 <a href='#'>Sample Widget 8</a></marquee></td></tr></table>

@- Jika sudah jangan lupa Klick SAVE / SIMPAN
@- Silahkan lihat hasilnya.
@- Untuk Speed / Kecepatan Text berjalan silahkan Sahabat Blogger sesuaikan menurut selera yang saya tandai dengan warna MERAH
@- Selamat Berkreatifitas dan Sukses selalu buat Sahabat Blogger Semua.

Blog INTRO Dengan Flash Player

2010-04-21T19:07:00.009+07:00

Seperti janji saya kemarin pada postingan Blog INTRO Tanpa Flash Player saya akan mengulang soal Blog INTRO dengan Flash Player, tapi terus terang saja saya tidak ahli dalam hal Flash jadi Flash yang saya gunakan ini hanya sebagai contoh saja dan saya yakin kalau para Sahabat Blogger banyak yang lebih jago dalam hal Flash. Langsung saja pada inti permasalahanya seperti biasa.

DEMO BLOG INTRO DENGAN FLASH PLAYER

Langkah-langkahnya sebagai berikut:
@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lalu cari Kode yang seperti ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='contoh (Header)' type='Header'>
<b:includable id='main'>
@- Jika sudah ketemu kemudian Copy Kode dibawah ini lalu Paste persis dibawah Kode tersebut diatas.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>body{background-color:#000000;background-image:none;}img{border:0px solid #000000;}#intro-blog{font-size:80px;padding-top:220px;text-align:center;color:#ff0000;}#navbar-iframe{display:none;}#layout_wrapper{display:none;}#outer-wrapper{display:none;}#es{margin-top:0px;text-align:center;font-size:18px;font-weight:bold;</style><b:else/><style>#es{display:none;}#intro-blog{display:none;}</style></b:if>

@- Lalu Copy Kode yang dibawah ini dan Paste dibawahnya Kode <body>

<div id='intro-blog'><embed height='100' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash' quality='high' src='http://www.iyangmulia.com/flash/test-flash.swf' type='application/x-shockwave-flash' width='90%'/></div><div id='es'><a expr:href='data:blog.homepageUrl + "search/label/?max-results=3"'><img alt='enter' src='http://www.iyangmulia.com/gambar/ani-enter1.gif'/></a></div>

@- Lalu jangan lupa klick SAVE TEMPLATE / SIMPAN TEMPLATE
@- Dengan Postingan kemarin hanya sedikit perbedaan pada Kode yang saya tandai dengan warna HIJAU.

* Silahkan lihat hasilnya dan selamat mencoba semoga sukses.

Blog INTRO Tanpa Flash Player

2010-04-19T17:39:00.018+07:00

Dua pekan lebih saya belum update Artikel di blog ini, dan banyak pula yang menanyakan bagai mana cara buat tampilan INTRO di blogspot, memang tutorial ini saya uji coba dulu sebelum saya publikasikan, maksudnya agar lebih yakin saja. Baiklah tidak usah panjang lebar saya menjelaskan nantipun sobat akan lihat hasilnya sendiri jika sudah selesai.

DEMO INTRO BLOG

Dan langkah-langkahnya sebagai berikut:
@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lalu cari Kode yang seperti ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='contoh (Header)' type='Header'>
<b:includable id='main'>
@- Jika sudah ketemu kemudian Copy Kode dibawah ini lalu Paste persis dibawah Kode tersebut diatas.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>body{background-color:#000000;background-image:none;}#intro-blog{font-size:80px;padding-top:220px;text-align:center;color:#ff0000;}#navbar-iframe{display:none;}#layout_wrapper{display:none;}#outer-wrapper{display:none;}#es{padding-top:30px;text-align:center;font-size:14px;font-weight:bold;</style><b:else/><style>#es{display:none;}#intro-blog{display:none;}</style></b:if>

@- Lalu Copy Kode yang dibawah ini dan Paste dibawahnya Kode <body>

<div id='intro-blog'><data:blog.pageTitle/></div><div id='es'><a expr:href='data:blog.homepageUrl + "search/label/?max-results=3"'><blink>Enter Site</blink></a></div>

@- Lalu jangan lupa klick SAVE TEMPLATE / SIMPAN TEMPLATE
@- Yang saya beri tanda warna MERAH adalah warna latar belakang pada INTRO Blog, Silahkan Sobat Blogger sesuaikan menurut selera.
@- Jika Sobat Blogger meninginkan tampilan INTRO dengan flash Player atau dengan gambar, silahkan Sobat Ganti Kode yang saya beri tanda warna HIJAU.

* Silahkan lihat hasilnya dan selamat mencoba semoga sukses.
NB: Untuk Update mendatang saya akan coba mengulang kembali Tutorial INTRO dengan Flash Player dan sedikit tambahan Aplikasi demi Sobat Blogger semua. Terima Kasih dan Selamat Berkreasi.

Haedline Scroll Up

2010-04-08T22:03:00.014+07:00

Saya coba publikasikan sebuah mainan yang memang bukan barang baru lagi, tapi siapa tahu ada sobat Blogger yang sedang membutuhkannya yaitu Haedline Scrollup, untuk sobat Blogger yang mau mencobanya silahkan ikuti langkahnya dibawah ini.

JUDUL ARTIKEL BLOG 1

Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog Cuplikan Artikel Blog

JUDUL ARTIKEL BLOG 2

JUDUL ARTIKEL BLOG 3

@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lalu cari Kode yang seperti ini : </head>
@- Kemudian Copy Kode Script dibawah ini lalu Paste diatas Kode </head>

<script src='http://www.iyangmulia.com/javascript/line-ims.js' type='text/javascript'/>
<script type='text/javascript'>
var headline_count;
var current_headline=0;
$(document).ready(function(){
headline_count = $("div.headline").size();
$("div.headline:eq("+current_headline+")").css('top', '5px');
setInterval(headline_rotate,5000); //time in milliseconds
});
function headline_rotate() {
old_headline = current_headline % headline_count;
new_headline = ++current_headline % headline_count;
$("div.headline:eq(" + old_headline + ")").css('top', '210px');
$("div.headline:eq(" + new_headline + ")").show().animate({top: 5},"slow");
}
</script>
<style media='screen' type='text/css'>
#scrollup {
position: relative;
overflow: hidden;
border: 0px solid #000;
height: 190px;
width: 200px;
}
.headline {
position: absolute;
top: 250px;
left: 0px;
height: 190px;
width: 200px;
}
</style>

@- Jika sudah jangan lupa klick SAVE TEMPLATE.
@- Sesuaikan Kode yang berwarna MERAH BERKEDIP dengan lebar Widget Blog Sobat.

@- Kemudian langkah berikutnya sobat Klick Tab Page Elements/Elemen Halaman
@- Klik Add Widgate / Tambah Gadget
@- Lalu Pilih Widgate yang HTML / JavaScript
@- Copy kode berikut dibawah ini lalu Paste pada Widgate HTML/JavaScript yang barusan Sobat buat tadi.

<center><div id="scrollup">
<div class="headline">
<a href="LINK ARTIKEL BLOG ANDA"><div style="background: #EFEFEF;text-align: center;font-family: Verdana;font-size:110%;font-weight: bold;color: #E1771E;border:1px solid #dedede;-moz-border-radius:5px;margin-bottom:4px;">JUDUL ARTIKEL BLOG 1</div></a>
<div style="text-align: justify;font-family: Verdana;font-size:100%;border:1px solid #dedede;-moz-border-radius:5px;padding:7px 10px 7px 10px;">CUPLIKAN ARTIKEL BLOG ANDA DISINI</div></div>
<div class="headline">
<a href="LINK ARTIKEL BLOG ANDA"><div style="background: #EFEFEF;text-align: center;font-family: Verdana;font-size:110%;font-weight: bold;color: #E1771E;border:1px solid #dedede;-moz-border-radius:5px;margin-bottom:4px;">JUDUL ARTIKEL BLOG 2</div></a>
<div style="text-align: justify;font-family: Verdana;font-size:100%;border:1px solid #dedede;-moz-border-radius:5px;padding:7px 10px 7px 10px;">CUPLIKAN ARTIKEL BLOG ANDA DISINI</div></div>
<div class="headline">
<a href="LINK ARTIKEL BLOG ANDA"><div style="background: #EFEFEF;text-align: center;font-family: Verdana;font-size:110%;font-weight: bold;color: #E1771E;border:1px solid #dedede;-moz-border-radius:5px;margin-bottom:4px;">JUDUL ARTIKEL BLOG 3</div></a>
<div style="text-align: justify;font-family: Verdana;font-size:100%;border:1px solid #dedede;-moz-border-radius:5px;padding:7px 10px 7px 10px;">CUPLIKAN ARTIKEL BLOG ANDA DISINI</div></div></div></center>

@- Kemudian klick SAVE / SIMPAN.
@- Kalau Sobat Blogger mau sedikit kreatif sebenarnya Widget diatas masih bisa di modifikasi kembali.
@- Selesai dan selamat mencoba semoga sukses.

Navbar Blog Rata Dengan Sisi Template

2010-04-07T16:34:00.009+07:00

Saya baru ke ingatan kalau ada salah satu sobat blogger yang menanyakan soal Navbar Blog biar lebarnya sama dengan lebarnya template. Sebaiknya saya tidak pakai lama langsung pada pokok permasalan, mari ikuti langkah-langkahnya seperti dibawah ini.

@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lalu cari kode seperti dibawah ini.

body {
background:#000000;
color:$textcolor;
font-family:Trebuchet MS, Arial, sans-serif;
font-size:12px;
margin:0;
text-align:left;

@- Jika sudah ketemu, Copy kode dibawah ini kemudian Paste di atas kode tersebut.

#navbar-iframe{width:960px;margin:0 auto 0;}

@- Nomor yang berwarna merah harus di samakan atau mengikuti nomor yang ada di CSS outer-wrapper Template Blog milik Sobat, silahkan Sobat cari dahulu.
@- Jika sudah ketemu dan sudah Sobat samakan kode nomernya, jangan lupa untuk Klick SAVE TEMPLATE.
@- Selesai dan silahkan lihat hasilnya.

" ini adalah contoh CSS outer-wrapper di Template Blog ini "
#outer-wrapper {
font: $bodyfont;
margin:0 auto 5px;
text-align:left;
width:960px;
}

Navbar Bawah Template Blog

2010-04-07T07:08:00.017+07:00

Buat sahabat Blogger semua yang kebetulan mampir disini, saya ada pernak pernik Blog seperti gambar dibawah ini, dengan menambah tampilan ini Blog akan terlihat lebih oke. Buat Sobat yang mau bawa pulang silahkan ikuti cara pemasangannya dibawah ini :

*Langkah yang pertama.
@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lalu cari Kode yang seperti ini : ]]></b:skin>
@- Jika sudah ketemu, Copy kode dibawah ini lalu Paste di atas kode ]]></b:skin>

#ctop {position:fixed;_position: right:0px; bottom:13px;left:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#cleft {position:fixed;_position:bottom:0px;bottom:-4px;;right:99px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#cright {position:fixed;_position:bottom:0px; bottom:-4px;left:99px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#left-l {position:fixed;_position: bottom:0px; left:0; bottom:-4px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#right-r {position:fixed;_position:bottom:0px; right:0; bottom:-4px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#closebott {position:fixed;_position:bottom:0px; bottom:4px; left:47px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#close {position:fixed;_position:bottom:0px; bottom:4px; right:48px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

* Langkah yang kedua silahkan Sobat cari Kode </head>
@- Kemudian Copy Kode Script dibawah ini lalu Paste dibawah Kode </head>

<div id='cleft'>
<img height='71' src='http://2.bp.blogspot.com/_zAAY5TLuWGg/S7uDB7_Ng0I/AAAAAAAABMA/kRwzqY9_8b8/s400/cleft-cright.png' width='623px'/>
</div>
<div id='cright'>
<img height='71' src='http://2.bp.blogspot.com/_zAAY5TLuWGg/S7uDB7_Ng0I/AAAAAAAABMA/kRwzqY9_8b8/s400/cleft-cright.png' width='622px'/>
</div>
<div id='ctop'>
<div style='text-align:center;font-size:12px;font-weight:bold;text-transform:uppercase;'><span style='color: #ffffff;'><data:blog.title/> Best View Using Mozilla <span style='color: #FF0000;'>Firefox</span> <span style='color: rgb(255, 102, 0);'>3.6</span> With High Resolution</span>
</div>
</div>
<div id='left-l'>
<img src='http://1.bp.blogspot.com/_zAAY5TLuWGg/S7toysMFFLI/AAAAAAAABLY/CP6VFkqHDhg/s400/left-l.png'/>
</div>
<div id='right-r'>
<img src='http://2.bp.blogspot.com/_zAAY5TLuWGg/S7tiXdxfW2I/AAAAAAAABLI/FafrIk39NJ0/s400/right-r.png'/>
</div>
<div id='closebott'>
<a href='http://www.blogger.com'><img height='30' src='http://1.bp.blogspot.com/_zAAY5TLuWGg/S6bmWrruoSI/AAAAAAAABHw/paS0eVMcI6U/s400/blogger.png' width='30px'/></a>
</div>
<div id='close'>
<a href='http://www.mozilla.com' target='_blank'><img height='28' src='http://4.bp.blogspot.com/_zAAY5TLuWGg/S6h83m0PGUI/AAAAAAAABIg/rvu157P8u0M/s400/Firefox_32.png' width='28px'/></a>
</div>

@- Jika sudah jangan lupa klick SAVE TEMPLATE
@- Selesai.
@- Selamat mencoba semoga sukses.

NB : Kalau pada bagian paling bawah Template sedikit tertutup oleh Navbar, coba sobat cari seperti Kode contoh milik Template blog saya dibawah ini, jika sudah ketemu silahkan sobat naikkan nominal angkanya yang berwarna merah berkedip sesuai dengan ke inginan Sobat Blogger.

#outer-wrapper {
font: $bodyfont;
margin:0 auto 5px;
text-align:left;
width:960px;
}

Membuat Efek Tooltip Sederhana

2010-03-20T20:18:00.055+07:00

Membuat Efek Tooltip Sederhana adalah tema saya kali ini, sudah agak lama tidak update postingan di karenakan memang belum ada bahan untuk saya publikasikan, dan akhirnya tanpa tak sengaja terpikir untuk berbagi tentang tutorial Tooltip tersebut.
Baiklah mari sekarang kita mulai saja bagaimana cara pasang Tooltip pada Blog.
Langkah-langkahnya adalah sebagai berikut:
*Langkah yang pertama.
@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lalu cari Kode yang seperti ini : ]]></b:skin>
@- Jika sudah ketemu, silahkan Copy Kode CSS dibawah ini dan Pastekan persis di atas kode ini ]]></b:skin>

a.tooltip {position:relative}
a.tooltip span {
display:none;
padding:4px 5px 4px 6px;
z-index:100;
background:#000000 url(http://1.bp.blogspot.com/_S75uo-2cS2E/S4OUzirN6KI/AAAAAAAABCQ/WC2d22ar7hs/s320/nav.gif) repeat-x;
color:#FFFFFF;
text-decoration:none;
width:100%;
height:auto;
text-align:center;
-moz-border-radius:5px;
border:1px solid #999999;
}
a:hover.tooltip {
font-size:99%;
cursor:pointer
}
a:hover.tooltip span {
display:block;
position:absolute;
-moz-opacity:0.9;
top:auto;
left:auto;
right:-20px;
bottom:30px;
line-height:14px;
font-size:12px;
font-weight:normal;
}

@- Jika sudah jangan lupa klick SAVE TEMPLATE / SIMPAN TEMPLATE
@- Nah... langkah yang pertama sudah selesai.

* Langkah berikutnya agar efek tooltip muncul, sobat hanya cukup menyisipkan kode yang berwarna MERAH TEBAL di link yang mau sobat beri efek Tooltip, dan contoh kodenya seperti di bawah ini.

<a class="tooltip" href="http://LINK ARTIKEL BLOG ANDA">JUDUL ARTIKEL BLOG ANDA<span><strong>JUDUL ARTIKEL BLOG ANDA</strong></span></a>

@- Dan hasil dari kode di atas adalah seperti ini » » JUDUL ARTIKEL BLOG ANDAJUDUL ARTIKEL BLOG ANDA

@- Tambahkan link gambar, jika sobat menginginkan efek tooltip disertai dengan gambar, sobat cukup menambahkan kode link gambar yang berwarna PINK, dan contoh kodenya seperti dibawah ini.

<a class="tooltip" href="http://LINK ARTIKEL BLOG ANDA">JUDUL ARTIKEL BLOG ANDA<span><center><img src="http://GANTI DENGAN LINK GAMBAR ANDA"/></center><strong>JUDUL ARTIKEL BLOG ANDA</strong></span></a>

@- Hasil efek tooltip yang disertai dengan gambar » » JUDUL ARTIKEL BLOG ANDAJUDUL ARTIKEL BLOG ANDA

@- Nah... selesai sudah saya berbagi cara membuat efek tooltip sederhana hanya dengan kode CSS saja, monggo... monggo... silahkan dicoba semoga bermanfaat.
@- Mohon maaf jika dalam postingan ini ada banyak kekurangannya, harap maklum kalau saya juga masih belajar.
@- Sukses selalu buat SAHABAT BLOGGER semua.

Navbar Di Atas Header

2010-02-07T03:58:00.033+07:00

@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lakukan back-up Template dengan mengklick Download Full Template, di maksud untuk memudahkan pengembalian Template seperti semula jika terjadi kesalahan.
@- Kemudian beri tanda Centang pada kotakan kecil di sebelah kiri Expand Widget Templates, dan tunggu sesaat biarkan Loading selesai.
@- Lalu cari Kode yang seperti ini : ]]></b:skin>
@- Jika sudah, silahkan Copy Kode CSS dibawah ini dan Pastekan di atas kode ini >> ]]></b:skin>

#top-panel{
background:#000000 url();
border-bottom:5px solid #363636;
padding:10px 10px;
text-align:left;
font-family: Verdana, Trebuchet, Trebuchet MS, Arial, sans-serif;
font-size:12px;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:0px;
float:right;
color:#FF0000;
text-decoration:none;
margin-right:30px;
margin-top:-45px;
font-size:10px;
font-weight:bold;
background:url() bottom left no-repeat;
}
#sub-panel a span{
padding:-10px;
background:url() right bottom no-repeat;
display:block;
}
strong{color:#FFFFFF;}
.face{border:solid 0px #a6c34e; margin:-2px 10px 0px 0; float:left;}

@- Setelah itu silahkan Sobat cari Kode </head>
@- Kemudian Copy Kode Script dibawah ini lalu Pastekan di atas Kode </head>

<script src='http://iyang.googlecode.com/files/toolbarHDR.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>

@- Dan yang terakhir silahkan Sobat Copy Kode dibawah ini lalu Pastekan di bawah Kode <body>

<div id='top-panel'>
<img class='face' height='47' src='URL GAMBAR' width='50'/>
ISI KATA-KATA DISINI
<br/>
<span style='color: #1422DB;'>
ISI KATA-KATA DISINI
</span>
<br/><span style='color: #1422DB;'><data:blog.pageTitle/></span></div>
<div id='sub-panel'><a href='/#' id='toggle'><span><img src='http://i377.photobucket.com/albums/oo215/momospeed/hide-tab.gif'/></span></a></div>

@- Jika sudah jangan lupa untuk klick SAVE TEMPLATE
@- Selesai, dan selamat mencoba kawan.
NB : Soal background alias warna latar toolbar, silahkan Sobat atur saja sesuai selera.

Pasang Headline Posts Di Blogspot

2010-02-04T20:41:00.030+07:00

Sebelum para Sobat memulainya silahkan lihat dulu demonya DISINI

@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lakukan back-up Template dengan mengklick Download Full Template, di maksud untuk memudahkan pengembalian Template seperti semula jika terjadi kesalahan.
@- Kemudian beri tanda Centang pada kotakan kecil di sebelah kiri Expand Widget Templates, dan tunggu sesaat biarkan Loading selesai.
@- Lalu cari Kode yang seperti ini : ]]></b:skin>
@- Jika sudah, silahkan Copy Kode CSS dibawah ini dan Pastekan di atas ]]></b:skin>

#slider {
height: 110px;
text-align:left;
overflow: hidden;
position: relative;
margin: -5px 0px;
}
#mover {
width: 600;
position:absolute;
overflow:hidden;
}
.slide {
padding: 8px 0px;
width: 1000px;
float: left;
position: relative;
height:130px;
}
.slide ims {
font-family:Trebuchet, Trebuchet MS, Arial, sans-serif;
font-size: 12px;
font-weight:bold;
text-align:left;
color: #FFFF00;
padding:0px 0px 30px 0px;
margin:0px 0px;
width:440px;
overflow:hidden;
}
.slide rg a:link, .slide rg a:visited {
color:#E1771E;
background-color: transparent;
}
.slide rg a:hover {
color: #c0c0c0;
background-color: transparent;
}
span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Trebuchet, Trebuchet MS, Arial, sans-serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #c0c0c0;
font-size: 12px;
text-align:justify;
font-family: Trebuchet, Trebuchet MS, Arial, sans-serif;
line-height: 20px;
width: 379px;
padding:0px 0px 0px 0px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 225px;
background:;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Trebuchet, Trebuchet MS, Arial, sans-serif;
top: 1000px;
right: -125px;
color: #FF0000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

@- Setelah itu silahkan Sobat cari Kode </head>
@- Kemudian Copy Kode Script dibawah ini lalu Pastekan di atas Kode </head>

<script src='http://iyang.googlecode.com/files/jquery-1.2.6.js' type='text/javascript'/>
<script src='http://iyang.googlecode.com/files/slider.js' type='text/javascript'/>
<script type='text/javascript'><![CDATA[//><!]]></script>

@- Langkah yang terakhir buatlah Element baru klick Gadget pilih HTML/JAVA SCRIPT kemudian Pastekan kode HTML di bawah ini :

<div id="casing">
<div id="slider">
<div id="mover">
<div class="slide">
<ims><a href="http://per2nak-nik.blogspot.com/2010/02/blog-post.htm">JUDUL ARTIKEL BLOG</a></ims>
<p>isi artikel disini</p>
</div>
<div class="slide">
<ims><a href="http://per2nak-nik.blogspot.com/2010/02/blog-post.htm">JUDUL ARTIKEL BLOG</a></ims>
<p>isi artikel disini</p>
</div>
<div class="slide">
<ims><a href="http://per2nak-nik.blogspot.com/2010/02/blog-post.htm">JUDUL ARTIKEL BLOG</a></ims>
<p>isi artikel disini</p>
</div>
<div class="slide">
<ims><a href="http://per2nak-nik.blogspot.com/2010/02/blog-post.htm">JUDUL ARTIKEL BLOG</a></ims>
<p>isi artikel disini</p>
</div>
<div class="slide">
<ims><a href="http://per2nak-nik.blogspot.com/2010/02/blog-post.htm">JUDUL ARTIKEL BLOG</a></ims>
<p>isi artikel disini</p>
<img src=""/>
</div>
</div>
</div>

@- Ganti kode yang berwarna MERAH dengan link artikel Anda, dan Kode yang berwarna HIJAU adalah judul dari Artikel Blog Anda.
@- Jika nanti hasilnya kurang cocok, Sobat bisa menyesuaikan dan cukup mengatur pada Kode CSSnya saja.
@- Selesai.
@- Selamat mencoba semoga berhasil.

Pasang Nomor Urut Di Kotak komentar

2010-01-29T22:08:00.016+07:00

1- Login dahulu seperti biasa dengan ID milik sobat.
2- Klick Layout / Tata Letak.
3- Klick Edit HTML.
4- @- Kemudian beri tanda Centang pada kotakan kecil di sebelah kiri Expand Widget Templates, dan tunggu sesaat biarkan Loading selesai.
5- Kemudian Copy Kode CSS di bawah ini lalu Pastekan di atas Kode ini : ]]></b:skin>

/*Mulai css Comments Numbering*/
.numberingcomments{
float: right;
display: block;
width: 40px;
text-align: center;
margin-right: 16px;
margin-top: -30px;
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 22px;
font-weight: bold;
}

/*since the numbers are actually links, we need to force the color properties*/
.numberingcomments a:link, .numberingcomments a:visited {color: #08F70C !important; text-decoration: none !important;}

.numberingcomments a:hover, .numberingcomments a:active {color: #FF0000 !important; text-decoration: none !important;}

5- Jika sudah lalu SAVE TEMPLATE
@- Langkah Pertama selesai.

@- Sekarang kita lanjutkan Langkah yang berikutnya.
1- Silahkan Sobat Cari Kode yang seperti ini : <dl id='comments-block'>
2- Kalau sudah ketemu Copy Kode di bawah ini dan Pastekan persis dibawah Kode yang di atas tadi.

<script type='text/javascript'>var CommentsCounter=0;</script>

3- Lalu Sobat cari kode seperti di bawah ini :
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
4- Kalau sudah ketemu, kemudian Copy Kode di bawah ini dan Pastekan persis di atas Kode </dt>.

<span class='numberingcomments'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

@- Nah sekarang Langkah yang kedua sudah selesai.
@- Untuk pengaturan / peletakan Nomor dan warna Nomor tersebut Sobat bisa ubah di Kode CSSnya sesuai dengan selera.
@- Selamat mencoba Semoga berhasil dan sukses selalu buat Sobat.

Color Code Generator

2010-01-29T20:45:00.013+07:00

Color Code Generator ini bisa sobat simpan dalam postingan atau dalam bentuk Widget. Silahkan sobat copy kode berikut di bawah ini dan Pastekan di Blog milik sobat, dan semoga bermanfaat.

<center><div id="TrixCGv1"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="430" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"><param name="movie" value="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf"><param name="quality" value="high"><param name="bgcolor" value="#cccccc"><embed src="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf" flashvars="lng=Tamil&timeint=30&skt=yes" quality="high" bgcolor="#cccccc" width="400" height="430" name="flash" align="middle" play="true" loop="false" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div></center>

Mengganti Tulisan POST A COMMENT

2010-01-26T18:20:00.024+07:00

@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lakukan back-up Template dengan mengklick Download Full Template, di maksud untuk memudahkan pengembalian Template seperti semula jika terjadi kesalahan.
@- Kemudian beri tanda Centang pada kotakan kecil di sebelah kiri Expand Widget Templates, dan tunggu sesaat biarkan Loading selesai.
@- Lalu cari Kode yang seperti ini : <data:postCommentMsg/>
@- Biasanya Kode tersebut ada DUA yaitu antara Atas dan Bawah, Anda cari dan Hapus Kode tersebut di Atas dan ganti dengan tulisan atau berbentuk Gambar sesuai dengan Selera Anda.
@- Jika sudah jangan lupa klick SAVE TEMPLATE / SIMPAN TEMPLATE
@- Selamat Mencoba semoga Berhasil.

Toolbar Footer Ala Facebook

2010-01-13T16:27:00.014+07:00

@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML, Lalu cari Kode </head>
@- Silahkan Copy kode Script dibawah ini kemudian Pastekan di atas kode </head>

<script src='http://iyang.googlecode.com/files/toolbarFB.js' type='text/javascript'/>
<link href='http://iyang.googlecode.com/files/FBtoolbar.css' rel='stylesheet' type='text/css'/>
<link href='http://www.mosquitomagazine.com/facebook-toolbar/modules/mod_fbtoolbar/fbtoolbar.css' rel='stylesheet' type='text/css'/>

@- Dan Langkah berikutnya Anda cari kode </body>
@- Copy Kode berikut di bawah ini lalu Paste persisi di atas Kode </body>

<script src='http://h1.ripway.com/iyang111/per2per.txt' type='text/javascript'/>
<div class='moduletable'>
<div class='dhmbox' id='dhmbox1'>
<div class='dhmbox-content' id='dhmbox-content1' style='width:250px'>
<div class='dhmbox-content-title' style='width:250px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(1);'/>
<div class='dhmbox-content-title-main'>About Me</div>
</div>
<div class='dhmbox-content-item'>
<div class='mod_twitter'>



</div>
</div></div></div>

<div class='dhmbox' id='dhmbox2'>
<div class='dhmbox-content' id='dhmbox-content2' style='width:250px'>
<div class='dhmbox-content-title' style='width:250px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(2);'/>
<div class='dhmbox-content-title-main'>Chat Shout Mix</div>
</div>
<div class='dhmbox-content-item'>
<div>
<center><br/>



</center></div>
</div></div></div>

<div class='dhmbox' id='dhmbox3'>
<div class='dhmbox-content' id='dhmbox-content3' style='width:250px'>
<div class='dhmbox-content-title' style='width:250px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(3);'/>
<div class='dhmbox-content-title-main'>Link Friend</div>
</div>
<div class='dhmbox-content-item'>



</div></div></div>

<div class='dhmbox' id='dhmbox4'>
<div class='dhmbox-content' id='dhmbox-content4' style='width:200px'>
<div class='dhmbox-content-title' style='width:200px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(4);'/>
<div class='dhmbox-content-title-main'>Comment Visitor</div>
</div>
<div class='dhmbox-content-item'>



</div></div></div>

<div id='dhm-bar'>
<div id='dhm-bar-container'>

<div class='dhm-title'>
<form action='http://NAMA BLOG ANDA.blogspot.com/search' method='get'> <input class='textinput' name='q' onblur='if (this.value == "") {this.value = "Cari artikel ●●●●";}' onfocus='if (this.value == "Cari artikel ●●●●") {this.value = ""}' size='15' type='text' value='Cari artikel ●●●●'/><input class='buttonsubmit' name='submit' type='submit' value='search'/> </form></div>

<div class='dhm-title'>
<a href='http://www.blogger.com' title='Login Blog'>
<img src='http://1.bp.blogspot.com/_zAAY5TLuWGg/S0zYC_3zHGI/AAAAAAAAA6k/vmc0OF9TGpA/s200/lock.png'/> <div>Login Blog</div></a></div>

<div class='dhm-title'>
<a Title='Home' expr:href='data:blog.homepageUrl'><img src='http://4.bp.blogspot.com/_zAAY5TLuWGg/S01KRnOyjpI/AAAAAAAAA7k/OpU-EU7jW4w/s320/house.png'/> <div>Home</div></a></div>

<div class='dhm-title'>
<a href='http://www.facebook.com/ID Facebook Anda' target='_blank' title='My Facebook'>
<img border='0' src='http://static.ak.fbcdn.net/favicon.ico?8:132011'/>
<div>My Facebook</div></a></div>

<div class='dhm-title'>
<a Title='RSS Posts' expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img height='15' src='http://2.bp.blogspot.com/_zAAY5TLuWGg/S01OpueIwoI/AAAAAAAAA78/hcyNedB6gLw/s320/feed.png' width='15'/> <div>RSS Posts</div></a></div>

<div class='dhm-title'>
<a href='http://twitter.com/ID Twitter Anda' target='_blank' title='My Twitter'>
<img border='0' src='http://4.bp.blogspot.com/_zAAY5TLuWGg/S0zkGWPIO4I/AAAAAAAAA7M/WPXjf_F79I0/s200/Twitter-icon.png'/> <div>My Twitter</div></a></div>

<div class='dhm-title'>
<img src='http://2.bp.blogspot.com/_zAAY5TLuWGg/S1G9wEpuVqI/AAAAAAAAA-8/VjMIYy0zcto/s320/user-online.png'/><div><script src='http://fastonlineusers.com/on4.php?d=NAMA BLOG ANDA.blogspot.com' type='text/javascript'/> User Online</div></div>

<div class='dhm-title'>
<a href='#' id='backTop' onclick='MGJS.goTop();return false;' title='Back to Top'><img src='http://2.bp.blogspot.com/_zAAY5TLuWGg/S02VgprsJfI/AAAAAAAAA8M/DpxGN1UQxZk/s320/arrow_up_blue_round.png'/> <div>Back To Up</div></a></div>

<div class='dhm-button' id='dhm-button-1' onclick='showDHMPopup(1);'><img src='http://img269.imageshack.us/img269/4061/notif.png'/> <div>About Me</div></div>

<div class='dhm-button' id='dhm-button-2' onclick='showDHMPopup(2);'><img src='http://1.bp.blogspot.com/_zAAY5TLuWGg/S0zfqSV50WI/AAAAAAAAA68/F_c22GTOnaA/s200/group.png'/> <div>Chat Shout Mix</div></div>

<div class='dhm-button' id='dhm-button-3' onclick='showDHMPopup(3);'><img src='http://2.bp.blogspot.com/_zAAY5TLuWGg/S0zgUS6mGgI/AAAAAAAAA7E/hxhsZ3LK90w/s200/link_add.png'/> <div>Link Friend</div></div>

<div class='dhm-button' id='dhm-button-4' onclick='showDHMPopup(4);'><img src='http://1.bp.blogspot.com/_zAAY5TLuWGg/S01GuvDL08I/AAAAAAAAA7c/5o95LXow8_I/s320/comments_add.png'/> <div>Comment Visitor</div></div>

</div></div></div>

@- Jika Sudah jangan lupa Klick SIMPAN TEMPLATE / SAVE TEMPLATES
@- Kode yang berwarna MERAH silahkan sesuaikan dengan selera Anda.
@- Selamat Mencoba Kawan dan Sukses Selalu.

Efeck Blur Pada Link Gambar

2010-01-12T21:48:00.017+07:00

@- Login terlebih dahulu di Blog dengan ID milik Anda.
@- Klick TATA LETAK / LAYOUT.
@- Kemudian Klick EDIT HTML.
@- Beri Centang pada kotak Expand Widget Templates
@- Cari Kode yang seperti ini ]]></b:skin>
@- Copy Kode Berikut di bawah ini kemudian Paste di atas Kode ]]></b:skin>

.linkopacity img {filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; border:0;}
.linkopacity:hover img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;border:0;}

@- Jika sudah Klick SAVE TEMPLATES
@- Nah Langkah di atas sudah selesai.

Contoh gambar yang belum di Blur
<a href="http://per2nak-nik.blogspot.com"><img src="http://1.bp.blogspot.com/_zAAY5TLuWGg/Sz9SWHJDyVI/AAAAAAAAA3I/__QCCyUWsyQ/s400/ads.jpg"/></a>

Contoh gambar yang sudah di Blur
<a href="http://per2nak-nik.blogspot.com/" class="linkopacity"><img src="http://1.bp.blogspot.com/_zAAY5TLuWGg/Sz9SWHJDyVI/AAAAAAAAA3I/__QCCyUWsyQ/s400/ads.jpg"/></a>

@- Sisipkan selalu pada Link Gambar Anda, seperti kode yang saya beri warna MERAH.
@- Selamat mencoba kawan.

Cara Sederhana Membuat Spoiler

2010-01-12T18:21:00.013+07:00

@- Login Blog terlebih dahulu seperti biasanya.
@- Klick TATA LETAK / LAYOUT.
@- ADD Widget / Gadget, kemudian pilih yang HTML / Javasript
@- Copy Kode di bawah ini lalu Pastekan pada Widget yang barusan Sobat siapkan tadi:

<center><div><div style="margin: 0px;"><div style="margin-bottom: 0px;" class="smallfont"><input style="margin: 0px; padding: 0px; width: auto; font-size: 12px;" value="BUKA" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" type="button"/><p><div class="alt12"><div style="display: none;"><div style="border: 1px solid #363636; text-align: center;">ISI TEXT / GAMBAR ANDA DISINI</div></div></div></p></div></div></div></center>

@- Kode yang berwarna Silahkan di sesuaikan dengan selera Anda.
@- Jika sudah lalu Klick SAVE
@- Selamat Mencoba Semoga Berhasil.

Contohnya seperti berikut dibawah ini

Pasang Widget Calendar

2010-01-12T16:17:00.015+07:00

@- Login di Blog terlebih dahulu dengan ID Blog milik Sobat.
@- Klick Tata Letak / Layout Lalu Add Widget / Gadget.
@- Pilih yang HTML/JavaScript.
@- Copy Kode Berikut dibawah ini dan Pastekan pada Widget yang baru Sobat siapkan tadi:

<center><script language="JavaScript">

</script></center>

@- Jika sudah kemudian klick SAVE
@- Selamat Mencoba.

Magaling Template Wordpress

2010-01-11T02:05:00.038+07:00

Template Wordpress Mimbo Magazine

2010-01-11T02:05:00.037+07:00

Pasang Musik Di Facebook

2010-01-10T22:32:00.013+07:00

@- Login terlebih dahulu di ID Facebook Anda, buka URL aplikasi facebook berikut dibawah ini :

http://apps.new.facebook.com/mixpodplaylist
@- Kemudian masukan nama judul lagu / nama group Bandnya di kotak pencarian tersebut, seperti contoh berikut di bawah ini yang saya beri tanda linkar merah, kemudian klick SEARCH

@- Dan jangan lupa sebelum Anda memilih lagu sebaiknya diputar terlebih dahulu, cari yang buffering / loadingnya cepat dan juga bunyi.

@- Selamat Mencoba.

Menghilangkan Show all posts

2010-01-10T17:28:00.012+07:00

1. Login ke Account Blog anda

2. Pilih menu Tata Letak atau Layout dan masuklah kedalam menu Edit HTML

3. Cari kode seperti di bawah ini :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

4. Kemudian Hapus Kode tersebut diatas lalu Ganti dengan Kode Berikut di bawah ini:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
</b:if>
</b:includable>

5. Dan yang terakhir jangan lupa Klick SAVE TEMPLATES / SIMPAN TEMPALTE

@- Silahkan Lihat Hasilnya dan Selamat Mencoba Semoga Sukses.

Widget Blog Human Calendar

2010-01-03T09:20:00.017+07:00

Tak sengaja pagi ini lagi jalan-jalan nemu Widget Calendar, jadi kebetulan banget buat bahan postingan unruk hari ini, mungkin widget ini sudah tidak baru lagi tapi tidak apalah siapa tahu masih ada yang membutuhkan, hitung-hitung sekalian buat koleksi saya juga, jika kebetulan pembaca sedang membutuhkan atau memang cari widget seperti ini. Silahkan Copy saja kode scriptnya di bawah ini, dan untuk pemula apa bila masih sedikit bingung cara pemasangannya, silahkan ikuti langkah-langkahnya di bawah ini :

1. Login Seperti biasa dengan ID Anda / Masuk ke Blog

2. Klik Tab Layout / Tata Letak

3. Klik Tab Page Element / Elemen Halaman

4. Klik Add Widgate / Tambah Gadget

5. Klik Pilih Yang HTML / JavaScript

6. Copy dan Paste Kode Yang Berwarna BIRU Di Bawah ini Pada Element yang baru Anda buat tadi:

<a href="http://www.humancalendar.com" target="_blank"><img src="http://api.humancalendar.com/2x2/275/540/ms.jpg" width="100%" height="275" border="0" /></a>

CONTOH TAMPILAN WIDGET " HUMAN CALENDAR "

7. Nomor yang berwarna MERAH adalah LEBAR dan TINGGI, Anda bisa merubahnya untuk menyesuaikan kebutuhan di blog milik Anda.

8. Dan yang terakkhir jangan lupa Klik SAVE TEMPLATE.

@- Selamat Mencoba dan Sukses Selalu Buat Anda.

Buat Navigasi Halaman Di Blog

2009-12-24T19:09:00.015+07:00

Yang jelas Artikel ini sudah banyak sekali di publikasikan di berbagai Blog, tapi tidak ada salahnya jika saya mempublikasikan kembali sebagai koleksi tutorial diBlog saya dan juga sebagai bahan belajar, atau yang kebetulan sedang mampir dan pas lagi membutuhkan tutorial ini. Dan langkah-langkahnya sebagai berikut di bawah ini:

1. Login ke Account Blog anda

2. Pilih menu ‘Tata Letak' atau ‘Layout’ dan masuklah kedalam menu ‘Edit HTML’

3. Pada kotak 'Expand TemplateWidget' dibiarkan saja.

3. Cari kode yang seperti ini : ]]></b:skin>
Kemudian Copy kode di bawah ini dan Pastekan persis di atas kode tersebut di atas:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

4. Berikutnya anda cari yang ini : </ body>
Copy kode di bawah ini kemudian Pastekan persis di atas kode tersebut di atas:

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://h1.ripway.com/iyang111/asc.txt' type='text/javascript'/>
</b:if>

5. Simpan Template dan Selesai.

@ - Selamat Mencoba.

Pasang Artikel Terkait

2009-12-13T08:40:00.008+07:00

# Sigin ( masuk ) di blogger dengan id Anda
# Klik menu layout ( Tata Letak ).
# Klik menu yang bertuliskan Edit HTML
# Klik yang Bertuliskan Download Template Lengkap, Silahkan Disave dulu template sobat, Hal ini untuk mencegah resiko terjadinya kesalahan dalam melakukan editing template.

# Klik kotak kecil berada di samping tulisan Expand Template Widget, Dan jangan lupa untuk memberi tanda centang dahulu, sebab kalau tidak di beri tanda centang maksudnya akan lain.

# Dan tunggu beberapa saat sampai proses selesai.

# Sekarang Anda Cari kode ini di Template Blog Milik Anda :

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>

# Dan copy kode di bawah ini, lalu paste persis di bawahnya kode yang di atas tadi :

<b:if cond='data:blog.pageType == "item"'>
<div class='similar'>
<div class='widget-content related-by-cat'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 100;
var maxNumberOfLabels = 100;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 100;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

# Dan Klik tombol SIMPAN TEMPLATE / SAVE TEMPLATE.

# Selesai.

Cara Pasang TV Online Di Facebook

2009-12-13T05:40:00.007+07:00

Mungkin artikel ini masih ada atau tidak ada yang membutuhkan saya mencoba mempublikasikan dengan maksud sebagai update artikel di blog saya, tapi ya siapa tahu lagi ada yang membutuhkan dan kebetulan kesasar di sini, jadian ada manfaatnya buat sobat blogger semuanya.

@- Untuk Memasang Tv Online di facebook, di perlukan sebuah Aplikasi Facebook yaitu My Stuff.

Cara Instal Aplikasi My Stuff adalah berikut di bawah ini :

1.Silakan buka facebook anda

2.Lalu bukalah Link dibawah ini untuk menginstal My Stuff

http://apps.facebook.com/wildfire/behandel.ashx?mode=side_nav&_fb_fromhash=c534ee95007954c367e944c21d384952

3.Klik "Izinkan"

Setelah itu nanti akan ada tampil halaman profil facebook milik anda.
Kemudiaan untuk memasang Tv Onlinya berikut seperti di bawah ini :

1. Anda buka Link dibawah ini :

http://apps.facebook.com/wildfire/fbhandler.ashx?mode=side_nav

2. Kemudian pada kotak " Add Code " silakan masukan kode TV berikut di bawah ini :

<div style="overflow: auto; height: 200px;"><center><strong>TV-ONE</strong></center>
<center><embed flashvars="file=tvone&type=video&streamer=rtmp://stream2.vivanews.com/live/&autostart=false" allowfullscreen="true" allowscriptaccess="always" bgcolor="#000000" src="http://www.tvone.co.id/embed/player.swf" width="165" height="180"></embed></center>
<br/><center><strong>ANTV</strong></center>
<center><embed flashvars="file=antv&type=video&streamer=rtmp://stream2.vivanews.com/live/&autostart=false" allowfullscreen="true" allowscriptaccess="always" bgcolor="#000000" src="http://www.tvone.co.id/embed/player.swf" width="165" height="180"></embed></center></div>

3. Kemudian setelah itu klik Add to Profil

4. Lalu tunggu loadingnya sampai selesai Kemudian klik Cantumkan ke dalam Profil

5. Lalu lihatlah di Profil anda pada Tabs "Kotak", atau jika memang widget/Tab Dinding profile Facebook anda masih di bawah lima otomatis akan di bawa langsung ke Tab Dinding.

@- Selamat mencoba semoga berhasil.

Kotak Komentar Di bawah Posting

2009-12-11T04:36:00.005+07:00

Bagi anda yang belum pernah memodifikasi kotak komentar sebelumnya, bisa mencoba langkah-langkah di bawah ini :
Langkah #1
1. Masih dalam posisi yang tadi, klik Tata Letak.

2. Klik Edit HTML.
3. Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).
4. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.
5. Tunggu beberapa saat sampai proses selesai.
6. Cari kode yang seperti di bawah ini( karena kadang kode template berbeda-beda, silahkan fokus ke kode yang warna HIJAU, dan biasanya kode ini ada dua, pilih kode yang posisinya di bagian paling bawah.

<p class='comment-footer'>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</p>

7. Hapus / delete kode diatas, lalu ganti dengan kode di bawah ini :

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>

8. Klik tombol Simpan Template.

9. Langkah #1 selesai

Langkah #2

1. Klik pada Pengaturan

2. Klik tab Komentar, tuju ke tulisan Penempatan Formulis Komentar, kemudian beri tanda pada radio button untuk Disemat di bawah entri / klick ( Embedded below post ).

3. Klik tombol Simpan Pengaturan yang ada di bagian bawah layar monitor anda.

4. Selesai. Silahkan lihat hasilnya.

Buat Kolom Di Atas Kolom Postingan

2009-12-11T04:15:00.007+07:00

# Silahkan login ke Blogger dengan ID anda.
# Klik Tata Letak
# Klik tab Edit HTML.
# Klik tulisan Download Template Selengkapnya.

# Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

# Cari kode ini »» »» ]]>.</b:skin>

# Copy kode bawah ini lalu Paste persis di atas kode ini »» »» ]]>.</b:skin>

.topcolumn{
width: 578px;
padding:10px 0px 10px 10px;
background:#fff;
margin:0px 0px 10px 0px;
text-align:left;
border:1px solid #C0C0C0;
}

.topcolumn .widget{
}

# Lihat ke bagian bawah, lalu cari kode berikut :

<div id='main-wrapper'>

# Copy kode bawah ini lalu Paste persis di bawah kode ini »» »» <div id='main-wrapper'>

<b:section class='topcolumn' id='topcolumn' preferred='yes'/>

# Klik tombol SIMPAN TEMPLATE.

# Selesai.

Tab View Dengan Slide Show

2009-12-08T16:21:00.010+07:00

Yang jelas Artikel Tab View Dengan Slide Show suadah bukan barang baru lagi tapi tidak ada salahnya say publikasikan kembali siapa tahu masih ada yang membutuhkan widget yang seperti ini untuk mempercantik Blog Saudara atau mungkin Blogger pemula yang kebetulan lagi cari widget ini.

@- Dan langkah-langkahnya sebagai berikut di bawah ini :

* Sign in seperti biasa di blogger dengan id milik sobat.

* Klik menu Layout.

* Klik menu Edit HTML.

* Klik tulisan Download Full Template.

* Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

* Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya.

* Dan Tunggu beberapa saat ketika proses sedang berlangsung.

6. Jika sudah Copy Kode Berikut Di Bawah ini dan Paste persis di atas Kode ]]></b:skin>

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}
.indentmenu ul li a:hover{
background:#ddd;
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 212px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}

@- Langkah berikutnya Copy Kode Sript di bawah ini dan Paste kan di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
//** Tab Content script v2.0- Â© Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
// -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
// -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
// -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
// -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0)

////NO NEED TO EDIT BELOW////////////////////////

function ddtabcontent(tabinterfaceid){
this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
this.enabletabpersistence=true
this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtabcontent.setCookie=function(name, value){
document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
this.cancelautorun() //stop auto cycling of tabs (if running)
var tabref=""
try{
if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
tabref=document.getElementById(tabid_or_position)
else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
tabref=this.tabs[tabid_or_position]
}
catch(err){alert("Invalid Tab ID or position entered!")}
if (tabref!="") //if a valid tab is found based on function parameter
this.expandtab(tabref) //expand this tab
},

cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
if (dir=="next"){
var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
}
else if (dir=="prev"){
var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
}
if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
this.cancelautorun() //stop auto cycling of tabs (if running)
this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
},

setpersist:function(bool){ //PUBLIC function to toggle persistence feature
this.enabletabpersistence=bool
},

setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
this.selectedClassTarget=objstr || "link"
},

getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
},

urlparamselect:function(tabinterfaceid){
var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

expandtab:function(tabref){
var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
this.expandsubcontent(subcontentid)
this.expandrevcontent(associatedrevids)
for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
}
if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
},

expandsubcontent:function(subcontentid){
for (var i=0; i<this.subcontentids.length; i++){
var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
}
},

expandrevcontent:function(associatedrevids){
var allrevids=this.revcontentids
for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
}
},

setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
for (var i=0; i<this.hottabspositions.length; i++){
if (tabposition==this.hottabspositions[i]){
this.currentTabIndex=i
break
}
}
},

autorun:function(){ //function to auto cycle through and select tabs based on a set interval
this.cycleit('next', true)
},

cancelautorun:function(){
if (typeof this.autoruntimer!="undefined")
clearInterval(this.autoruntimer)
},

init:function(automodeperiod){
var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
var selectedtab=-1 //Currently selected tab index (-1 meaning none)
var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
this.automodeperiod=automodeperiod || 0
for (var i=0; i<this.tabs.length; i++){
this.tabs[i].tabposition=i //remember position of tab relative to its peers
if (this.tabs[i].getAttribute("rel")){
var tabinstance=this
this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
this.tabs[i].onclick=function(){
tabinstance.expandtab(this)
tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
return false
}
if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
}
if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
selectedtab=i //Selected tab index, if found
}
}
} //END for loop
if (selectedtab!=-1) //if a valid default selected tab index is found
this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
else //if no valid default selected index found
this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
}
} //END int() function

} //END Prototype assignment

//]]>
</script>

@- Kalau sudah lalu Klik Save Template / Simpan Template

Dan Langkah yang terakhir :

1. Klik Tab Page Element / Elemen Halaman

2. Klik Add Widgate / Tambah Gadget

3. Klik Pilih Yang HTML / JavaScript

4. Copy Kode di bawah dan Paste kan pada Widget yang baru Anda buat tadi.

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:262px;">

<div style="background:#none;">
<div style="width:232px;text-align:justify;padding: 5px; margin-bottom:1em">

<div id="tab1" class="tabcontent">
<a href="LINK BLOG ANDA">
<img border="0" style="border-right: 2px; border-top: 2px; border-left: 2px; border-bottom: 2px" alt="" width="230" src="LINK GAMBAR ANDA" height="180" title="Arthemia-blogger-template"/></a>
<div style="background:#0F5310;"><span ><p><center><span ><strong>JUDUL ARTIKEL</strong></span></center></p></span></div>
</div>

<div id="tab2" class="tabcontent">
<a href="LINK BLOG ANDA">
<img border="0" style="border-right: 2px; border-top: 2px; border-left: 2px; border-bottom: 2px" alt="" width="230" src="LINK GAMBAR ANDA" height="180" title="Firebug"/></a>
<div style="background:#0F5310;"><span ><p><center><span ><strong>JUDUL ARTIKEL</strong></span></center></p></span></div>
</div>

<div id="tab3" class="tabcontent">
<a href="LINK BLOG ANDA">
<img border="0" style="border-right: 2px; border-top: 2px; border-left: 2px; border-bottom: 2px" alt="" width="230" src="LINK GAMBAR ANDA" height="180" title="Dy 2008"/></a>
<div style="background:#0F5310;"><span ><p><center><span ><strong>JUDUL ARTIKEL</strong></span></center></p></span></div>

</div>

<div id="tab4" class="tabcontent">
<a href="LINK BLOG ANDA">
<img border="0" style="border-right: 2px; border-top: 2px; border-left: 2px; border-bottom: 2px" alt="" width="230" src="LINK GAMBAR ANDA" height="180" title="Genesis Blogger"/></a>
<div style="background:#0F5310;"><span ><p><center><span ><strong>JUDUL ARTIKELr</strong></span></center></p></span></div>
</div>

<div id="tab5" class="tabcontent">
<a href="LINK BLOG ANDA">
<img border="0" style="border-right: 2px; border-top: 2px; border-left: 2px; border-bottom: 2px" alt="" width="230" src="LINK GAMBAR ANDA" height="180" title="Revolution Lifestyle"/></a>
<div style="background:#0F5310;"><span ><p><center><span ><strong>JUDUL ARTIKEL</strong></span></center></p></span></div>
</div>

<div id="tab6" class="tabcontent">
<a href="LINK BLOG ANDA">
<img border="0" style="border-right: 2px; border-top: 2px; border-left: 2px; border-bottom: 2px" alt="" width="230" src="LINK GAMBAR ANDA" height="180" title="Wordpress Admin Blogger"/></a>
<div style="background:#0F5310;"><span ><p><center><span ><strong>JUDUL ARTIKEL</strong></span></center></p></span></div>
</div>

<div id="tab7" class="tabcontent">
<a href="LINK BLOG ANDA">
<img border="0" style="border-right: 2px; border-top: 2px; border-left: 2px; border-bottom: 2px" alt="" width="230" src="LINK GAMBAR ANDA" height="180" title="Tab Template 3 Colomn"/></a>
<div style="background:#0F5310;"><span ><p><center><span ><strong>JUDUL ARTIKEL</strong></span></center></p></span></div>
</div>
</div>

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>

<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>
<li><a href="#" rel="tab5">5</a></li>
<li><a href="#" rel="tab6">6</a></li>
<li><a href="#" rel="tab7">7</a></li>
</ul>

<br style="clear: left"/>
</div>

<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script></div></div>

@- Lalu Klik SAVE

Selamat Mencoba Semoga Berhasil.

Widget Total Posts & Total Comments

2009-12-06T23:34:00.010+07:00

Widget ini adalah fungsinya sebagai penghitung berapa banyak Postingan yang ada di blog kita, yang jelas widget ini sudah bukan barang baru lagi, tapi tidak ada salahnya jika saya mempublikasikan kembali sebagai kemudahan Anda pada saat membutuhkannya.

Dan Total Comments juag bukan barang baru lagi, fungsinya juga untuk menghitung berapa banyak Visitor yang meninggalkan Commentar di Blog Anda, dan kode Scriptnya berikut langkah-langkahnya di bawah ini :

1. Login di blogger
2. Masuk ke menu layout / tata letak
3. Pada menu Elemen Halaman, klik pada kata Tambah Gadget, untuk menambah widget baru.
4. Kemudian pilih Html / Javascript, lalu copy paste kode dibawah ini :

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}</script>
<ul><li><script src="http://NAMA BLOG ANDA.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
<li><script src="http://NAMA BLOG ANDA.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

Jangan lupa ganti NAMA BLOG ANDA dengan nama blog Saudara.
5. Dan yang terakkhir Klik SAVE TEMPLATE
Selamat mencoba......

Membuat Footer Menjadi 4 Kolom

2009-04-18T23:58:00.023+07:00

Pusing cari inspirasi,..eehh..akhirnya dapat juga buat postingan, malam ini adalah malam minggu, malam yang lumayan puaanass udaranya, kayaknya mau turun hujan nih,..walah kok ngomongin masalah hujan.., baiklah sobat blogger mari kita sedikit berbicara masalah kolom FOOTER dengan menjadi 4 (empat) bagian atau biasa kita sebut dengan FOOTER menjadi 4 (empat) kolom, pada postingan hari yang kemarin saya sudah mempublikasikan tutorial cara membuat FOOTER menjadi 3 kolom, kali ini saya akan menambahkan satu kolom lagi jadi jumlahnya ada empat kolom ( walah banyak banget...) mungkin secara tidak kebetulan Anda sedang mememikirkan hal tersebut di atas bagaimana cara buat FOOTER menjadi 4 (empat) kolom,..Nah sekarang mari kita lihat langkah-langkahnya di bawah ini. ( Artikel ini sebelum di publikasikan sudah kami coba di beberapa Template Blogspot dan hasilnya bisa Anda lihat sendiri nanti )

* Sign in seperti biasa di blogger dengan id milik sobat.

* Klik menu Layout.

* Klik menu Edit HTML.

* Klik tulisan Download Full Template.

* Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

* Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya.

* Dan Tunggu beberapa saat ketika proses sedang berlangsung.

* Langkah yang PERTAMA, Silahkan Sobat Blogger Copy Kodes CSS di bawah ini, kemudian Paste di atas kode >>> ]]></b:skin>

#lower1 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

#lower2 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

#lower3 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

#lower4 {
background:#363636;
width: 200px;
float: left;
margin:2px;
padding:5px 10px;
border-top: 1px solid #FFFFFF;
height:250px;
}

* Selanjutnya Langkah yang ke DUA Copy kode script di bawah ini, Lalu Paste di atas kode ini >>> 

<div class='clearfloat' id='lower'>
<div class='clearfloat' id='lower1'>
<b:section class='extra-bottom' id='extra-bottom1' preferred='yes' showaddelement='yes'/>
</div>
<div class='clearfloat' id='lower2'>
<b:section class='extra-bottom' id='extra-bottom2' preferred='yes' showaddelement='yes'/>
</div>
<div class='clearfloat' id='lower3'>
<b:section class='extra-bottom' id='extra-bottom3' preferred='yes' showaddelement='yes'/>
</div>
<div class='clearfloat' id='lower4'>
<b:section class='extra-bottom' id='extra-bottom4' preferred='yes' showaddelement='yes'/>
</div>
</div>
<div class='clear'/>

* Dan yang terakhir jangan lupa Klick SAVE TEMPALTE / SIMPAN TEMPLATE

* Selesai dan Selamat Berkarya.

@ Untuk nomor kode yang saya beri warna BIRU, nanti bisa Anda sesuaikan di template Blog milik para Sobat Blogger.

@ Sukses selalu buat Sobat Blogger Semua.
@ Jangan Lupa Komentarnya ya...

DEMO GAMBAR FOOTER MENJADI 4 BAGIAN / 4 KOLOM

Membuat Footer Menjadi 3 Kolom

2009-04-13T01:51:00.024+07:00

Mungkin saat ini atau sebelumnya sobat Blogger ada rasa ke inginan bagaimana cara membuat FOOTER menjadi 3 kolom, nah..., disini bisa anda lihat/dapatkan bagaimana caranya membuat FOOTER menjadi 3 kolom atau 3 bagian yaitu kolom kiri, kolom tegah, dan kolom kanan, Mari kita mulai cara membuatnya, silahkan Sobat lihat langkah-langkahnya sebagai berikut di bawah ini :
* Sign in seperti biasa di blogger dengan id milik sobat.

* Klik menu Layout.

* Klik menu Edit HTML.

* Klik tulisan Download Full Template.

* Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

* Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya.

* Dan Tunggu beberapa saat ketika proses sedang berlangsung.

* Langkah yang PERTAMA copy kode CSS di bawah ini kemudian Paste di atas kode ini >>> ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

* Langkah ke DUA Silahkan cari kode script seperti di bawah ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

* Dan Langkah yang ke TIGA Jika kode script di atas tadi sudah Anda ketemukan, kemudian ganti kode di atas yang saya beri warna BIRU dengan kode script di bawah ini:

<div id='footer-column-container'>
<div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> </div>
<div style='clear:both;'/>
<p> <hr align='center' color='#5d5d54' width='90%'/>
</p> <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'> <b:widget id='Text2' locked='false' title='' type='Text'/> </b:section>
</div> <div style='clear:both;'/>
</div>

* Lalu SAVE TEMPLATE / SIMPAN TEMPLATE.

@ Kode yang saya beri warna MERAH, Anda bisa merubahnya sesuai dengan selera, jika sobat ingin memilih bermacam-macam warna favorite silahkan lihat DISINI

* Selesai dan Selamat Mencoba.

SMS Gratis Lewat Yahoo Messenger

2009-04-04T17:49:00.035+07:00

Kali ini saya mempublikasikan tentang SMS GRATIS lewat YM (Yahoo Messenger), buat para pengunjung / pembaca sekalian yang ingin mencobanya atau tertarik dengan artikel ini atau kebetulan sedang Online Yahoo Messenger dan tiba-tiba HP anda berbunyi karena ada SMS yang masuk, Anda boleh mencoba dengan membalasnya lewat YM (Yahoo messenger), (Sementara ini kami sudah mencobanya di beberapa oprator GSM seperti INDOSAT, XL, dan SIMPATI, jika Anda masih penasaran silahkan di coba ke Oprator selain yang kami coba), Anda bisa melihat langkah-langkanya sebagai berikut di bawah ini :

@ Langkah yang Pertama :

Silahkan Anda Login Yahoo Messenger seperti biasanya, kemudian klick Actions yang kami lingkari warna merah

Setelah Anda klick Actions maka akan terlihat gambar seperti di bawah ini.

@ Langkah yang ke Dua :

Lalu Anda klick Send an SMS Message...

@ Langkah yang ke Tiga :

Klick Other Contact

Jika Anda sudah mengklick Other Contact akan terlihat seperti gambar berikut di bawah ini.

@ Langkah yang ke Empat :

Kemudian Masukan Nomor yang akan anda tuju atau bisa Test dengan nomor HP Anda sendiri

@ Langkah yang ke Lima :

Jika sudah memasukan nomor yang akan di tuju jangan lupa untuk Klick OK

@ Nah..., setelah selesai dengan langkah-langkah tersebut di atas nanti hasilnya akan seperti pada gambar di bawah ini, jadi layaknya anda chatting padahal Anda sedang berSMS ria lewat Yahoo Messenger

@ Selamat Mencoba Semoga Bermanfaat

24 Status / Ikon YM (Yahoo Messnger)

2009-04-04T12:21:00.028+07:00

Jika Anda pernah melihat ikon status YM (Yahoo Messenger) di Web Blog atau mungkin di Friendster dan Multiply, kami ada beberapa koleksi model ikon status YM / Yahoo Messenger, Anda bisa memasangnya di Blog, Web, Friendster, atau di Multiply. Silahkan Anda mengcopy kode scriptnya di bawah ini kemudian Paste di Web Blog Anda :

<a href="ymsgr:sendim?YOUR-YAHOO-ID" border="0"><img src="http://opi.yahoo.com/online?u=YOUR-YAHOO-ID&t=5"></a>

BERIKUT DIBAWAH INI ADALAH BEBERAPA CONTOH TAMPILANNYA

TAMPILAN 1

TAMPILAN 2

TAMPILAN 3

TAMPILAN 4

TAMPILAN 5

TAMPILAN 6

TAMPILAN 7

TAMPILAN 8

TAMPILAN 9

TAMPILAN 10

TAMPILAN 11

TAMPILAN 12

TAMPILAN 13

TAMPILAN 14

TAMPILAN 15

TAMPILAN 16

TAMPILAN 17

TAMPILAN 18

Anda bisa mengganti tampilan sampai dengan nomor 24

@ Ganti YOUR-YAHOO-ID dengan ID Yahoo milik Anda.

@ Jika Anda ingin mengganti tampilan, gantilah nomor yang berwarna BIRU sesuai dengan selera Anda.

@ Selamat mencoba semoga bermanfaat.

3 Column Mango Magazine

2009-03-30T22:42:00.012+07:00

Pasang Widget Track IP Address

2009-03-28T07:38:00.039+07:00

Kali ini saya mencoba mempublikasikan hiasan / widget buat Blog yang mungkin kebetulan anda cari yaitu Track IP Address yang tidak lain hanyalah untuk memonitor IP anda dan juga Widget ini menurut saya cukup bagus, buat para pembaca yang secara kebetulan berkunjung dan tertarik ingin mempercantik wajah blog atau tampilan Blognya, Anda bisa ambil pernak-pernik Blognya disini.

1. Login Seperti biasa dengan ID Anda / Masuk ke Blog

2. Klik Tab Layout / Tata Letak

3. Klik Tab Page Element / Elemen Halaman

4. Klik Add Widgate / Tambah Gadget

5. Klik Pilih Yang HTML / JavaScript

6. Copy dan Paste Kode Yang Berwarna Merah Berikut Di Bawah ini Pada Element yang baru Sobat Buat Tadi:

<iframe id="preview-iframe" width="200" frameborder="0" src="http://aruljohn.com/gadget/ip/?container=blogger&mid=1&v=b0fba5ab2cac3e9d3fe64fb4eb7293c&lang=en&country=ALL&view=default" height="155"></iframe>

CONTOH TAMPILAN WIDGET " TRACK IP ADDRESS "

7. Nomor yang berwarna Biru adalah LEBAR dan TINGGI, Anda bisa merubahnya untuk menyesuaikan kebutuhan di blog milik Anda.

ADA JUGA TAMPILAN VERSI SEPERTI DIBAWAH INI

<a href="http://www.ipnow.org"><img border="0" src="http://www.ipnow.org/images/1/FFFFFF/000000/newmyinfo.jpg"></a>

ADA JUGA SEPERTI DIBAWAH INI

<a href="http://www.ongsono.com/check_ip_address.htm" title="Check Your IP Address"><img src="http://www.ongsono.com/show_ip_address.php" alt="what is my ip address?" border="0" /></a>

<a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a>

<a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/" border="0" width="125" height="125" alt="IP" /></a>

8. Kalau sudah lalu klick Save / Simpan.

@ Kode Yang Berwarna MERAH adalah Warna Latar Belakang / Background Color.

@ Sedangkan kode yang berwarna BIRU adalah Warna Tulisan / Text Color.

@ Silahkan Anda ganti sesuai dengan selera Anda, dan jika Anda membutuhkan berbagai macam Warna, Anda bisa melihatnya DISINI

@ Selamat Mencoba

Background Pada Kotak Komentar

2009-03-28T02:42:00.023+07:00

Malam semakin larut, mata ini rasanya sudah tidak kuat lagi untuk di ajak kompromi, tapi saya mencoba menahan rasa kantuk ini yang mulai mengganggu konsentrasi saya untuk membuat Artikel baru, sedikit demi sedikit mulai mengurang setelah saya istirahat sejenak dan ke luar dari kamar tidur, sambil membuat minuman yang tak lain hanya untuk sekedar membantu mengurangi rasa kantuk, dan akhirnya saya bisa kembali melanjutkan menulis Artikel dengan segar bugar kembali ( walah kelaman ngomong nih...mas.. ), Baiklah mari kita mulai saja dengan inspirasiku yang agak sedikit nyleneh ini, bagaimana cara Buat Background Pada Kotak Komentar.

* Sign in seperti biasa di blogger dengan id milik sobat.

* Klik menu Layout / Tata Letak.

* Klik menu Edit HTML.

* Klik tulisan Download Full Template / Download Template Penuh.

* Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

* Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu, sebab kalau tidak, nanti maksudnya akan lain dan tidak sesuai dengan langkah berikutnya.

* Tunggu beberapa saat ketika proses sedang berlangsung.

* Langkah Pertama :

* Sekarang silahkan Anda cari kode seperti di bawah ini :

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>

Satu syarat Script di atas ini adalah untuk Kotak komentar yang sudah Anda modif seperti yang saya pakai saat sekarang, jadi nanti hasilnya bisa seperti yang Anda inginkan, jika kotak komentar anda belun di modif anda bisa lihat cara modifnya DISINI

* Langkah yang ke Dua :

* Copy kode yang berwarna BIRU dan PINK di bawah ini lalu Paste persis di bawah kode : <p class='comment-footer'>

<div style='background:#000000 url(http://i305.photobucket.com/albums/nn203/s-babe14/Bubbles.gif);'>

* Langkah yang ke Tiga :

Copy Kode ini>></div> lalu pasang di Atas Kode ini>></p>

* Tulisan yang berwarna PINK bisa anda ganti sesuai dengan selera Anda dengan URL gambar yang sudah anda Upload di web hosting.

* Setelah itu klick SAVE TEMPLATE / SIMPAN TEMPLATE.

* Selesai dan Selamat mencoba.

@ Kode-kode di atas tadi kalau di rangkai menjadi satu akan terlihat seperti di bawah ini :

<p class='comment-footer'>

<div style='background:#000000 url(http://i305.photobucket.com/albums/nn203/s-babe14/Bubbles.gif);'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</div>

</p>

Nah..., mudahkan...?

Komentar Dengan SHOW or HIDDEN

2009-03-26T08:51:00.032+07:00

Tidak sengaja saya lagi ngedit script Blog ini, kok tiba-tiba timbul inisiatif untuk utak-atik kotak komentar biar bisa di model SHOW or HIDDEN COMMENT alias PERLIHATKAN atau SEMBUNYIKAN KOMENTAR, ternyata jadi juga yang sekarang ini saya pakai, maksudnya tidak lain adalah untuk menghemat ruangan tentunya, dan sekali gus mempercantik Blog Anda. Baiklah sekarang mari kita mulai saja bagaimana cara memasangnya atau membuatnya :
* Sign in seperti biasa di blogger dengan id milik sobat.

* Klik menu Layout.

* Klik menu Edit HTML.

* Klik tulisan Download Full Template.

* Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

* Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya.

* Tunggu beberapa saat ketika proses sedang berlangsung.

* Langkah Pertama :

* Sekarang silahkan Sobat cari kode seperti di bawah ini :

.feed-links {
clear: both;
line-height: 2.5em;
}

* Nah...., kalau sudah ketemu kemudian Copy kode di bawah ini lalu Paste persis di atas kode yang di atas tadi :

.commenthidden {
display:none
}
.commentshown {
display:inline
}

* Sekarang lanjut ke langkah yang ke Dua :

* Cari kode yang ini >>> </head>

* Copy kode di bawah ini dan Paste persis di atas kode</head>

<script type='text/Javascript'>

function togglecomments (postid) {

var whichpost = document.getElementById(postid);

if (whichpost.className=="commentshown") {
whichpost.className="commenthidden";
}
else {
whichpost.className="commentshown";
}
}
</script>

* Langkah yang ke Tiga :

* Selanjutnya silahkan Sobat cari lagi kode seperti di bawah ini :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</dt>mengatakan pada <dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>
<dd class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:loop>
</dl>

* Kalau sudah ke temu kemudian Copy kode berikut di bawah ini lalu Paste persis di atas kode yang di atas tadi :

<base target='_self'><h2><a aiotitle='click to expand' href='javascript:togglecomments ("comments-block")' rel='nofollow'><b> <center>PERLIHATKAN ATAU SEMBUNYIKAN KOMENTAR</center></b></a></h2></base>
<dl class='commenthidden' id='comments-block'><br/>

* Kemudian Tambahkan kode yang ini >>> </dl>

* Lalu Paste di bawah kode ini >>> </dl>

* Setelah itu klick SAVE TEMPLATE / SIMPAN TEMPLATE.

* Selesai.

NAMBAH BICARA :

* Untuk langkah yang ke TIGA atau yang terakhir kalau di lihat secara keseluruhan akan terlihat seperti ini :

<base target='_self'><h2><a aiotitle='click to expand' href='javascript:togglecomments ("comments-block")' rel='nofollow'><b> <center>PERLIHATKAN ATAU SEMBUNYIKAN KOMENTAR</center></b></a></h2></base>
<dl class='commenthidden' id='comments-block'><br/>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</dt>mengatakan pada <dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>
<dd class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:loop>
</dl>
</dl>

* Dan tulisan yang ber warna BIRU bisa anda ganti sesuai dengan selera Anda.

* Silahkan Lihat Hasilnya.

* Selamat Mencoba semoga bermanfaat dan terus berkarya.

" Saya tunggu comment dari Sobat blogger semuanya...Thanks.. "

Marco Templates

2009-03-25T05:25:00.007+07:00

[DOWNLOAD]

Dbluez Templates

2009-03-25T05:17:00.006+07:00

[DOWNLOAD]

Simplex Templates

2009-03-25T05:10:00.007+07:00

[DOWNLOAD]

Widget Jam Digital Plus Calendar

2009-03-24T09:36:00.011+07:00

Buat Sobat Blogger yang kali aja tertarik untuk Pasang Jam Digital Plus Calendar silahkan copy kode di bawah ini, tapi jangan lupa buat eleman baru dahulu untuk menempatkan Kode Scripenya, klick Layout atau Tata Letak lalu klick Page Element dan pilih yang HTML/JAVA SCRIPE, setelah itu baru sobat Copy dan Paste kode yang di bawah ini pada element baru yang tadi sobat sediakan.

<iframe id="preview-iframe" width="240" frameborder="0" src="http://1.blogger.gmodules.com/gadgets/ifr?container=blogger&mid=1&v=f481142f5f4eda48784987ce3947788&lang=en&country=ALL&view=default&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F101114783872353139053%2FLCD_Clock_3_5.xml" height="490"></iframe>

CONTOHNYA SEPERTI DIBAWAH INI :

@ Jangan lupa kalau sudah klick Save / Simpan.

Selamat mencoba.

Pasang Blogger User Login Form

2009-03-24T07:25:00.009+07:00

Buat Sobat Blogger yang kali aja tertarik untuk Pasang Blogger User Login Form silahkan copy kode di bawah ini, tapi jangan lupa buat eleman baru untuk menempatkan Google translite, klick Layout atau Tata Letak lalu klick Page Element dan pilih yang HTML/JAVA SCRIPE, setelah itu baru sobat Copy dan Paste kode yang di bawah ini pada element baru yang tadi sobat sediakan.

<center><form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: (e-mail) <br/><input id="Email" tabindex="1" value="" name="Email" size="25" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">Lupa password</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="25" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="User Login" class="ubtn ubtn-block" name="submit" type="submit"/></form></center>

CONTOHNYA SEPERTI INI :

Jangan lupa kalau sudah klick Save / Simpan.

Selamat mencoba.

Pasang Google Translite

2009-03-24T07:14:00.019+07:00

Buat Sobat Blogger yang kali aja membutuhkan Google translite silahkan copy kode di bawah ini, tapi jangan lupa buat eleman baru untuk menempatkan Kode Scripenya, klick Layout atau Tata Letak lalu klick Page Element dan pilih yang HTML/JAVA SCRIPE, setelah itu baru sobat Copy dan Paste kode yang di bawah ini pada element baru yang tadi sobat sediakan.

<style>
.translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
padding-left:0px;
}
.translate:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
border:0;
}
</style>

<div style="text-align:center">
<a class="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="http://lh5.ggpht.com/_15FopxVONSo/Sbs0I7gaReI/AAAAAAAACJk/vpx3tp_jg_k/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="http://lh4.ggpht.com/_15FopxVONSo/SbszlpR2QrI/AAAAAAAACIs/AwPD69Z7dnU/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://lh3.ggpht.com/_15FopxVONSo/Sbsz1CIjjCI/AAAAAAAACI0/6PJIWHvMAh4/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="http://lh6.ggpht.com/_15FopxVONSo/Sbs0IY8NOGI/AAAAAAAACJc/GncIRRDiVq0/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="http://lh6.ggpht.com/_15FopxVONSo/Sbsz1TJ5xdI/AAAAAAAACI8/0dtYx_clT4s/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="http://lh6.ggpht.com/_15FopxVONSo/SbszlYjxPRI/AAAAAAAACIk/n-yzKfbktew/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<br/><br/>
<a class="translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="http://lh5.ggpht.com/_15FopxVONSo/Sbsz1TzIcWI/AAAAAAAACJU/otXl-gtu1zg/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="http://lh4.ggpht.com/_15FopxVONSo/SbszlB3M6II/AAAAAAAACIU/jZYjX1vwGAo/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="http://lh3.ggpht.com/_15FopxVONSo/Sbsz1U6a6KI/AAAAAAAACJE/B3pvO5vYH8s/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="http://lh4.ggpht.com/_15FopxVONSo/Sbsz1e4_30I/AAAAAAAACJM/fuEkLjyIHiE/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="http://lh6.ggpht.com/_15FopxVONSo/SbszlITiTZI/AAAAAAAACIM/Jec1INW-YFE/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

<a class="translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="http://lh3.ggpht.com/_15FopxVONSo/SbszlRrumlI/AAAAAAAACIc/rL_X9LTyuRE/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

HASILNYA SEPERTI DI BAWAH INI

<center><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img src="http://1.bp.blogspot.com/_CO9lGYF0lME/S1nxXMytsKI/AAAAAAAAAJ4/YcLwMeU0CFA/s320/arabsaudi.jpg"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img src="http://1.bp.blogspot.com/_CO9lGYF0lME/S1nxtjtrcLI/AAAAAAAAAK4/NERHbfiHrwc/s320/korsel.jpg"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img src="http://4.bp.blogspot.com/_CO9lGYF0lME/S1nxsRzD1mI/AAAAAAAAAKg/4KK16B_Qz-E/s320/jepang.jpg"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img src="http://2.bp.blogspot.com/_CO9lGYF0lME/S1nxXzor92I/AAAAAAAAAKQ/5mc2e_TFSQk/s320/china.jpg"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img src="http://4.bp.blogspot.com/_CO9lGYF0lME/S1nx0hcS7cI/AAAAAAAAALI/t_BvpAF7Wzg/s320/rusia.jpg"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img src="http://3.bp.blogspot.com/_CO9lGYF0lME/S1nxXkPJv5I/AAAAAAAAAKI/yLhUR9vWVMs/s320/brazil.jpg"/></a>
<br/>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img src="http://1.bp.blogspot.com/_CO9lGYF0lME/S1nxYdgsB8I/AAAAAAAAAKY/C7hb-7dKXaE/s320/inggrish.jpg"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img src="http://4.bp.blogspot.com/_CO9lGYF0lME/S1nxt1uddyI/AAAAAAAAALA/5br7zkiBykg/s320/prancis.jpg"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img src="http://3.bp.blogspot.com/_CO9lGYF0lME/S1nxtZm6tOI/AAAAAAAAAKw/rqSHoMnQOb0/s320/jerman.jpg"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img src="http://4.bp.blogspot.com/_CO9lGYF0lME/S1nx0wmNTmI/AAAAAAAAALQ/gYt3gDeanHs/s320/spanyol.jpg"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img src="http://3.bp.blogspot.com/_CO9lGYF0lME/S1nxs5Lg1iI/AAAAAAAAAKo/lNb9cXSoe4s/s320/italia.jpg"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img src="http://1.bp.blogspot.com/_CO9lGYF0lME/S1nxXToMn4I/AAAAAAAAAKA/mq85WRuT0nY/s320/belanda.jpg"/></a></center>

CONTOHNYA SEPERTI DIBAWAH INI :

ADA JUGA YANG VERSI SEPERTI DIBAWAH INI :

DIBAWAH INI ADALAH KODE SCRIPENYA :

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>

Jangan lupa kalau sudah klick Save / Simpan.

Selamat mencoba.

Text Yang Selalu mengikuti Cursor

2009-03-24T06:55:00.010+07:00

1. Login / Masuk ke Blog

2. Klik Tab Layout / Tata Letak

3. Klik Tab Page Element / Elemen Halaman

4. Klik Add Widgate / Tambah Gadget

5. Klik Pilih Yang HTML / JavaScript

6. Copy dan Paste Kode Yang Berwarna Merah Berikut Di Bawah ini Pada Element yang baru Sobat Buat Tadi.

<script>//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='GALLERY CLASSIC'.split('').reverse().join('');
var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;
// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;
// Alter no variables past here!, unless you are good
//---------------------------------------------------
var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" color="+color+" size="+size+">";
if (ie)
window.pageYOffset=0
// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="nsmsg'+i+'" height="+a+"><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}
if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}
var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}
var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}
}
cursor_text_circle(); </script>

7. Ganti tulisan berwarna Biru itu dengan tulisan pilihan kesukaan sobat, misalnya " WELCOME TO MY BLOG " , ya...pokoknya selera aja deh...heheheheee....
8. Ganti juga tulisan yang berwarna Hijau itu dengan warna favorite anda, Sobat bisa cari warna favorite Disini.
8. Kalau sudah kemudian jangan lupa klick Save / Simpan.

Selamat mencoba.

Pasang Anti Klick Kanan / Mendisable

2009-03-24T06:44:00.008+07:00

<script>var message="Oppss,..No Right Click";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")</script>

7. Ganti tulisan berwarna Biru itu dengan tulisan pilihan kesukaan sobat.

8. Kalau sudah lalu klick Save / Simpan.

Selamat Mencoba.

Trik Gambar Pojok & Logo Blogger

2009-03-09T19:44:00.033+07:00

Buat para sobat blogger yang kebetulan atau mungkin pingin buat copy banner tetapi di luar halaman sobat bisa mencoba tips dari saya, dan juga kebetulan ada yang menayakan sobat Blogger " bagaimana sih cara buat copy banner di luar halaman ", sebenarnya trik pojok itu sama seperti kita pasang gambar, banner iklan, foto, atau gambar animasi dll, baiklah kita langsung saja pada pokok tujuannya.
* Sign in seperti biasa di blogger dengan id milik sobat.

* Klik menu Layout.

* Klik menu Edit HTML.

* Klik tulisan Download Full Template.

* Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

* Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya.

* Tunggu beberapa saat ketika proses sedang berlangsung.

* Langkah pertama:

* Sekarang silahkan Sobat cari kode ini »» ]]></b:skin> pada kode template milik sobat :

* Setelah itu copy kode berikut di bawah ini dan paste persis di atas kode ini »» ]]></b:skin>

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#melayang {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

* Langkah ke dua:

* Copy kode berikut di bawah dan paste persis di bawah kode : </head>

<div id='trik_pojok'> <marquee align='center' direction='up' height='665' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' width='100%'> <center><a href='http://www.blogger.com/'><img src='http://2.bp.blogspot.com/_8yAmNvOPuaw/SXhKLzXwQ0I/AAAAAAAAAaA/p5bqDyFZF-4/s200/blogger-powerby-blue.gif'/></a></center></marquee> <center><img src='http://4.bp.blogspot.com/_zAAY5TLuWGg/SVy5AwYeCYI/AAAAAAAAAFc/eje_rRXzTkg/s320/logo+nwi.gif'/></center> <center><textarea name='codes' onclick='this.focus();this.select()' style='border: 1px solid rgb(0, 0, 0); background: rgb(237, 237, 237) none repeat scroll 0% 50%; width: 98px; height: 50px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: justify; font-size: 12px;'><center><a href='http://1-1y4n9.blogspot.com/' target='_blank'><img src='http://4.bp.blogspot.com/_zAAY5TLuWGg/SVy5AwYeCYI/AAAAAAAAAFc/eje_rRXzTkg/s320/logo+nwi.gif'/></a></center></textarea></center> <center><span style='font-family: times new roman;'><span style='font-size:85%;'><span style='font-weight: bold;'><span style='color: rgb(255, 255, 255);'><blink>ADD MY BANNER</blink></span></span></span></span></center> </div>

* Setelah itu jangan Lupa Klick SAVE TEMPLATES / SIMPAN TEMPLATE.

* Jika Sobat Blogger mengalami error kode, sobat bisa memparse kode langkah yang ke dua dan baru di pasang kembali kode yang telah di parse, Sobat blogger bisa memparse kodenya DISINI

* ANDA Cukup Mengganti Kode yang berwarna BIRU ganti dengan nama URL Blog milik Anda.

* Kode ini juga cukup yang Berwarna COKLAT ganti dengan URL gambar Banner milik Anda.

* Selesai dan silahkan lihat hasilnya, mudah-mudahan berhasil.

* Selamat mencoba.

* Saya tunggu kommentar dari para Sobat Blogger semua.

Kode Warna Favorite

2009-03-02T18:35:00.012+07:00

Bermacam-macam jenis warna, jika sobat blogger kebetulan butuh warna yang berbeda dari yang sebelumnya, sobat bisa dapatkan di sini.

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)


#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00

#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00

#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900

#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600

#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300

#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000

#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00

#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00

#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900

#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600

#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300

#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000

#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00

#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00

#9999FF	#9999CC	#999999	#999966	#999933	#999900

#9966FF	#9966CC	#996699	#996666	#996633	#996600

#9933FF	#9933CC	#993399	#993366	#993333	#993300

#9900FF	#9900CC	#990099	#990066	#990033	#990000

#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00

#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00

#6699FF	#6699CC	#669999	#669966	#669933	#669900

#6666FF	#6666CC	#666699	#666666	#666633	#666600

#6633FF	#6633CC	#663399	#663366	#663333	#663300

#6600FF	#6600CC	#660099	#660066	#660033	#660000

#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00

#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00

#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00

#3399FF	#3399CC	#339999	#339966	#339933	#339900

#3366FF	#3366CC	#336699	#336666	#336633	#336600

#3333FF	#3333CC	#333399	#333366	#333333	#333300

#3300FF	#3300CC	#330099	#330066	#330033	#330000

#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00

#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00

#0099FF	#0099CC	#009999	#009966	#009933	#009900

#0066FF	#0066CC	#006699	#006666	#006633	#006600

#0033FF	#0033CC	#003399	#003366	#003333	#003300

#0000FF	#0000CC	#000099	#000066	#000033	#000000

Color Name	Color HEX	Color
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGray	#A9A9A9
DarkGrey	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
Darkorange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkSlateGrey	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DimGrey	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#808080
Grey	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGray	#D3D3D3
LightGrey	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGray	#778899
LightSlateGrey	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370D8
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#D87093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGray	#708090
SlateGrey	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

Cara Membuat Menu Tab View

2009-03-02T15:08:00.012+07:00

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Copy kode di bawah ini dan paste di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah berikutnya adalah pasang kode berikut di bawah ini persis di atas kode ini </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian "Save Template"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

# Selesai.

* Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.

# Selamat Mencoba....

Cara Membuat Search Engine

2009-02-25T00:08:00.018+07:00

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

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

Ganti tulisan yang berwarna MERAH dengan nama blog kamu. Angka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya.

Text Area Dengan Memakai HighLight

2009-02-24T03:24:00.015+07:00

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

CONTOH

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.

2009-02-24T03:09:00.022+07:00

Menghapus Angka Pada Label

2009-02-24T03:01:00.006+07:00

Jika anda ingin mencoba mengubah atau menghapus angka dalam label (Label Count) ikuti tutorialnya dibawah ini:

1. Masuk pada menu Edit HTML

2. Jangan lupa beri tanda centang pada Expand Template Widget

3. Kemudian cari kode seperti dibawah ini
(<data :label.count/>)

4. Silahkan anda ganti tanda ( dan ) dengan apa saja.

Contoh :

[<data :label.count/>]

atau

{<data :label.count/>}

5. Jika anda tidak ingin menampilkannya tinggal hapus aja semua kode yang di bawah ini

(<data :label.count/>)

6. Jangan lupa Klick Save Template / Simpan Template.

Selamat mencoba.

2009-02-24T01:35:00.030+07:00

2009-02-24T01:14:00.021+07:00

Watch Templates

2009-01-10T05:44:00.002+07:00

Titulo Del Blog

2009-01-10T05:43:00.004+07:00

Flowers

2009-01-10T05:34:00.008+07:00

Isnaini Templates

2009-01-10T05:20:00.003+07:00

Hada Negra

2009-01-10T05:19:00.004+07:00

Natural

2009-01-10T05:18:00.004+07:00

Notepad Chaos

2009-01-10T05:16:00.004+07:00

Code Emoticon Yahoo Messenger

2009-01-10T05:15:00.011+07:00

Personal Blog

2009-01-10T04:48:00.003+07:00

Blogy Styleicious

2009-01-10T03:57:00.003+07:00

Arthemia Blogger

2009-01-10T02:48:00.004+07:00

Blue Steel

2009-01-10T02:47:00.003+07:00

Firebug

2009-01-10T02:46:00.008+07:00

Dy 2008

2009-01-10T02:46:00.007+07:00

Genesis Blogger

2009-01-10T02:45:00.003+07:00

Revolution Lifestyle

2009-01-10T02:42:00.003+07:00

Wordpress Admin Blogger

2009-01-10T02:34:00.003+07:00

Zen Template

2009-01-10T02:13:00.003+07:00

Sunset Template 3 Colomn

2009-01-09T22:37:00.005+07:00

DEMO | DOWNLOAD

Vinery Template 2 Colomn

2009-01-09T22:36:00.005+07:00

DEMO | DOWNLOAD

Andreas Template 3 Colomn

2009-01-09T22:35:00.014+07:00

DEMO | DOWNLOAD

Pernak Pernik Blogger

Slide Post Images Dengan Java Script

Sticker Dengan Marquee Scroll Delay Dan True Speed

Blog INTRO Dengan Flash Player

Blog INTRO Tanpa Flash Player

Haedline Scroll Up

Navbar Blog Rata Dengan Sisi Template

Navbar Bawah Template Blog

Membuat Efek Tooltip Sederhana

Recent Posts Dengan Javascript

Tag Cloud Label

Navbar Di Atas Header

Pasang Headline Posts Di Blogspot

Pasang Nomor Urut Di Kotak komentar

Color Code Generator

Mengganti Tulisan POST A COMMENT

Toolbar Footer Ala Facebook

Efeck Blur Pada Link Gambar

Cara Sederhana Membuat Spoiler

Pasang Widget Calendar

Magaling Template Wordpress

Template Wordpress Mimbo Magazine

Pasang Musik Di Facebook

Menghilangkan Show all posts

Recent Comments Dengan JavaScript

Widget Blog Human Calendar

Buat Navigasi Halaman Di Blog

Pasang Artikel Terkait

Cara Pasang TV Online Di Facebook

Read More Pada Template Baru

Kotak Komentar Di bawah Posting

Buat Kolom Di Atas Kolom Postingan

Tab View Dengan Slide Show

Widget Total Posts & Total Comments

Membuat Footer Menjadi 4 Kolom

Membuat Footer Menjadi 3 Kolom

SMS Gratis Lewat Yahoo Messenger

24 Status / Ikon YM (Yahoo Messnger)

3 Column Mango Magazine

Pasang Widget Track IP Address

Background Pada Kotak Komentar

Komentar Dengan SHOW or HIDDEN

Marco Templates

Dbluez Templates

Simplex Templates

Widget Jam Digital Plus Calendar

Pasang Blogger User Login Form

Pasang Google Translite

Text Yang Selalu mengikuti Cursor

Pasang Anti Klick Kanan / Mendisable

Trik Gambar Pojok & Logo Blogger

Kode Warna Favorite

Cara Membuat Menu Tab View

Cara Membuat Search Engine

Text Area Dengan Memakai HighLight

Menghapus Angka Pada Label

Watch Templates

Titulo Del Blog

Flowers

Isnaini Templates

Hada Negra

Natural

Notepad Chaos

Code Emoticon Yahoo Messenger

Personal Blog

Blogy Styleicious

Arthemia Blogger

Blue Steel

Firebug

Dy 2008

Genesis Blogger

Revolution Lifestyle

Wordpress Admin Blogger

Zen Template

Sunset Template 3 Colomn

Vinery Template 2 Colomn

Andreas Template 3 Colomn