BERBAGI ILMU: TOTURIAL BLOGGER

Tampilkan postingan dengan label TOTURIAL BLOGGER. Tampilkan semua postingan

Selasa, 28 September 2010

Membuat efek bintang dan daun berjatuhan

Maaf Sebelumnya ,Postingan Ini merupakan sudah editan dari yang sebelumnya karena JS nya sudah tidak jalan lagi,Pertama Membuat Efek Bintang Berguguran di blog kita
Jika anda tertarik untuk menambah efek tersebut pada halaman site anda, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan salah satu script di bawah ini ke kolom Konten


<script type='text/javascript'>
//<![CDATA[
//Configure below to change URL path to the snow image
var snowsrc="http://img6.imageshack.us/img6/4945/pinginbelajar.gif";
// Configure below to change number of snow to render
var no =20;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = "0";
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 400;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
//]]>
</script>

7. Klik Simpan
8. Selesai

Kedua Membuat Efek daun berjatuhan di blog kita
Jika anda tertarik untuk menambah efek tersebut pada halaman site anda, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan salah satu script di bawah ini ke kolom Konten


<script type='text/javascript'>
//<![CDATA[
//Configure below to change URL path to the snow image
var snowsrc="http://img300.imageshack.us/img300/4945/pinginbelajar.gif";
// Configure below to change number of snow to render
var no =20;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = "0";
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 400;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
//]]>
</script>

7. Klik Simpan
8. Selesai

Keterngan :

Apabila anda Ingin berkreatifitas atau anda ingin merubah gambar yang akan berguguran /floating pada blog tinggal ganti sendiri link yang berwarna merah dengan alamat gambar anda
Terima kasih buat temen blogger telah memberi konfirmasi JS yang sebelumnya tidak berjalan lagi

SElamata Mencoba...

Cara Membuat Footer Multi Kolom

Sebelumnya saya pernah memposting tentang cara membagi bagian sidebar menjadi 2 kolom. Nah kali saya akan membahas tentang cara membagi bagian footer menjadi multi kolom. Multi kolom disini maksudnya bisa jadi 2 kolom, 3 kolom atau 4 kolom. Tergantung dari kebutuhan anda.

Ok, bagi anda yang ingin memperbanyak ruang kolom pada bagian footer template anda. Langsung aja kita mulai:

1. Login ke Blogger. Klik Design -> Edit HTML

2. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.

3. Kalau sudah, cari kode ]]></b:skin>

4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

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

5. Jika sudah cari kode dibawah ini.

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

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/></div>

6. Tambahkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Catatan:
Jika anda tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>

Jika ingin membuat footer 2 kolom. Gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

Membuat footer 3 kolom. Gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' 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='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' 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;'/>
</div>

Membuat footer menjadi 4 kolom. Gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

7. Kalau sudah klik Save Template. Lalu klik Page Element. Jika berhasil maka hasilnya akan menjadi seperti ini.

Footer 2 kolom

Footer 3 kolom

Footer 4 kolom

Selamat mencoba...

Selasa, 31 Agustus 2010

Berapa Yang Online (User Online)

User online sebuah tools untuk melihat berapa pengunjung yang sedang online di blog atau situs kita pada saat waktu yang sama. Dengan tools user online kita bisa melihat berapakah yang sedang mengunjungi blog kita.

Kali ini saya akan memberikan trik tentang cara pembuatan user online di blog kita yang berupa text jadi gak begitu berat untuk blog kita.

<b><script type="text/javascript" src="http://fastonlineusers.com/on3.php?d=blogkamu.blogspot.com"></script> User Online</b>

Pasang code di atas pada menu Layout-> Page Elements lalu klik "Add a gadget" lalu pilih "HTML / JavaScript" kemudian paste.

Ingat tulisan yang berwarna merah dan tebal diatas ganti dengan alamat blog kamu

Membuat Recent Comments blogger

Pastikan dulu sudah Log In di blogger yah!
lalu beranjak ke menu Layout Kemudian Page elements
Kalau sudah! hoi sudah belom! sudah- sudah yaa jangan nangis... Lo kok malah mbulet-mbulet. Ahh serius nihhh Pilih tempat yang mau dipasangi terus Add a Gadget
Lalu pilih Menu HTML/JavaScript
Taruh Code Dibawah ini Kedalam HTML/JavaScript

<script style="text/javascript" src="http://sites.google.com/site/anasku2000/comments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan:
- Tulisan NamaBlogKamu yang tercetal tebal dan merah diatas harus kamu ganti dengan alamat blog kamu
- Angka 5 yang tercetak tebal dan biru itu menunjukkan Komentar terakhir yang ditampilkan di blog, kamu bisa mengubah sesuai selera kamu
Kalau sudah Simpan dehhhh

Aduhhh gampang kannnnn cuma itu aja gak ada yang ribet kok.
ohh yaa jangan sampai lupa isi komentar kamu dibawah yaaaa thx lo sebelumnya.... ihhh gemes dechhhhh

Senin, 23 Agustus 2010

Membuat "Read More" pada Blog

engan membuat "Read More" atau semacamnya, postingan yang tampil pada halaman utama hanya bagian-bagian tertentu saja. Dan untuk menampilkan semua bagian postingan, harus masuk ke halaman postingan tersebut. Tutorial ini aku dapat dari www.isnaini.com.
Caranya:

Masuk ke account blogger, pilih "Layout" dan "Edit HTML",
Centang "Expand widget Template",

Masukkan kode di bawah sebelum tag </head> dan setelah ]]></b:skin>

<style>
<b:if cond='data:blog.pageType == "item"'>
 span.fullpost{display:inline;}
<b:else />
 span.fullpost{display:none;}
</b:if>
</style>

Kemudian, untuk menambahkan tulisan "Read More" atau semacamnya, cari kode <data:post.body/>, dan tambahkan di bawahnya:
```
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read More</a>
</b:if>
```
Untuk mengatur postingan yang "tersembunyi", tambahkan tag <span class="fullpost"> Postingan yang disembunyikan </span> di postingan Anda.
Contoh:

Ini adalah pembuka dari postingan saya, dan saya ingin menampilkannya di halaman depan. <span class="fullpost">Dan ini adalah isi dari postingan saya, saya tidak ingin menampilkannya di halaman depan</span>
Dan hasilnya akan seperti ini:

Ini adalah pembuka dari postingan saya, dan saya ingin menampilkannya di halaman depan. Read More
Selamat mencoba!

Membuat Judul Halaman Bergerak di blogger

alau kamu mau buat blog kamu lebih unik lagi, buatlah judul halaman kamu "bergerak". Lihat contohnya di bawah:

ya! Inilah Contohn

Kalau mau lihat blog yang judulnya bergerak, lihat di sini (maaf kalau sudah tidak lagi).

Caranya:

Masuk ke account blogger kamu, klik "Layout" kemudian "Page Elements",
Tambahkan widget dengan meng-klik "Add a Gadget" dan pilih "HTML/JavaScript",

Copy-paste kode di bawah ini:

<script type="text/javascript">
var msg = document.title;
msg = " " + msg + " ";
var speed = 5;
var pos = 0;
function movingTitle(){
 document.title = msg.substr(pos) + msg.substr(0, pos);
 pos++;
 if(pos == msg.length){pos = 0;}
 setTimeout("movingTitle()", 1000/speed);
}
movingTitle();
</script>

Dan klik "Save",

Atau kamu juga bisa copy kode di atas, dan tempelkan di widget blog ini di sini, kemudian klik "Add to Blogger", dan klik "Add widget",
Atur kecepatannya dengan mengubah nilai speed.

Selamat mencoba!

Kode Hex Warna

alam mendesain web/blog, kita sering lihat kode2 warna yang terdiri dari tanda '#' dan 6 angka/huruf di belakangnya. Kode warna tersebut dapat diterjemahkan jadi kode warna RGB (Red, Green, Blue). Bagaimanakah cara menerjemahkannya?

Misalnya aku punya kode warna: "#0088FF", kita akan mencari berapa porsi untuk warna merah (red), hijau (green), dan biru (blue). Dengan begini, kita bisa memperkirakan warna apa yang terbentuk.

Pertama, tanda "#" menunjukkan kalau itu adalah kode warna, jadi tidak usah terlalu diperhatikan.
Untuk enam karakter di sampingnya, itu menggunakan bilangan berbasis 16, yang terdiri dari angka 0-9 dan A-F : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (semakin ke kanan nilainya semakin besar). Dan setelah F, ada angka 10 (bukan berarti bernilai "sepuluh", tapi satu angka lebih besar dari F), 11, 12, ..., 1E, 1F, 20, 21, ..., 2E, 2F, ..., A0, A1, ..., AE, AF, ..., F9, FA, FB, FC, FD, FE, dan terakhir FF.
Nah, yang kita dapatkan dari situ adalah bahwa "00" adalah angka terkecil, sedangkan "FF" adalah yang terbesar.

Lihat kembali kode warna "#0088FF".
Lihat dua angka setelah tanda "#": "00" menunjukkan porsi untuk warna merah (red).
Dua angka setelahnya: "88" menunjukkan porsi untuk warna hijau (green).
Dan dua angka terakhir: "FF" menunjukkan porsi untuk warna biru (blue).

Dari sini, kita lihat bahwa porsi untuk warna merah tidak ada, untuk warna hijau hanya sebagian, dan warna biru mendapatkan porsi paling banyak. Jadi bisa kita perkirakan bahwa kode "#0088FF" berwarna agak kebiru-biruan.

Kadang ada juga orang yang cuma menuliskan kode warna 3 angka/huruf. Tapi ini cuma untuk menyingkat penulisan jika terdapat banyak angka/huruf yang sama.
Contoh: "#0088FF" bisa disingkat jadi "#08F"

Kalau kamu ingin coba-coba buat kode warna kamu sendiri, silakan coba di bawah:

Selamat mencoba!

Mengganti Ikon Blog

ada awalnya, ikon blog kita adalah ikon Blogger (huruf B putih dengan latar belakang oranye). Tapi kita bisa mengganti ikon ini dengan ikon yang kita inginkan.

Caranya:

Buatlah gambar yang kamu inginkan untuk jadi ikon dengan ukuran kira-kira 16x16 pixel (bisa lebih besar);
Kalau file gambar tersebut bukan file .ico, ubah file tersebut jadi .ico (untuk .png, bisa di-convert di www.convertico.com)
Upload gambar tersebut di situs upload ikon gratis, seperti di picpanda, imageboo, dll (bisa tanya sama om Google);
Dapatkan URL gambar yang kamu upload tadi (cek URL-nya dengan memasukkan URL tersebut ke browser kamu, dan hasilnya harus sebuah gambar saja);
Masuk ke account blogger, klik "Layout" dan "Edit HTML";
Tambahkan kode di bawah setelah tag <b:include data='blog' name='all-head-content'/> dan sebelum tag </head>:
```
<link href="urliconkamu.ico" rel="icon"
      type="image/vnd.microsoft.icon" />
```

Catatan: kalau kamu kesulitan untuk meng-convert file jadi .ico, sebaiknya convert dulu ke .png kemudian convert lagi di www.convertico.com jadi .ico.
Sebenarnya tipe file yang lain juga bisa dijadikan ikon (seperti .png, .gif, dll), tapi hanya didukung oleh beberapa browser saja, seperti Mozilla FF 3.0.
Selamat mencoba!

Membuat Sesuatu yang Selalu di Pojok DI BLOGGER

Untuk membuat sesuatu selalu di pojok sebenarnya sangat sederhana, cukup dengan menambahkan atribut style='position:fixed'.

Tapi tidak semua browser mendukung fitur ini, contohnya seperti Internet Explorer 7.
Dan akhirnya setelah browsing2 lewat paman Google, dapat juga cara untuk "mengakali"-nya.

Nih, cara lengkapnya:

Masuk ke account Blogger, pilih "Layout" dan pilih "Page Elements",
Kemudian tambahkan Gadget dengan meng-klik "Add a Gadget",
Pilih "HTML/JavaScript",

Tambahkan kode di bawah (judul gadget sebaiknya jangan diisi):

<style type="text/css">
.fixed {
    position:fixed;
    bottom:0px;
    left:0px;
}
* html .fixed {position:relative;}
</style>

Kode bottom:0px; dan left:0px; menunjukkan kalau posisinya ada di sudut kiri-bawah. Kalau mau memindahkan ke sudut yang lain, cukup tentukan posisinya dengan top, bottom, left, atau right,
Tambahkan kode HTML di bawah kode tersebut dengan atribut class="fixed" pada "sesuatu" yang ingin kita taruh di pojok. Contoh, jika ingin menaruh sebuah gambar selalu di pojok:
```
<img src='urlgambarkamu.png' class='fixed' />
```

Membuat Rating Setiap Post dengan Fitur Blogger Baru

Membuat rating setiap post adalah hal yang perlu, karena dengan hal itu kamu bisa mengevaluasi artikel2 kamu, mana yang disukai pembaca dan mana yang kurang disukai.
Kalau kamu menggunakan Blogger baru (bukan yang classic), kamu bisa membuat rating di setiap post kamu dengan fitur dari blogger itu sendiri.

Caranya:

Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements",
Klik "Edit" di bagian pojok kanan bawah dari "Blog Posts" kamu,
Kalau sudah muncul window baru, centang kotak di samping "Reaction" (lihat gambar),
Kamu bisa mengedit tulisan "Reaction" tersebut jadi "Suka artikel ini?" dan semacamnya,
Untuk mengedit pilihan2nya, klik "Edit" di samping kanannya, kemudian tulislah pilihan2nya dipisahkan dengan tanda koma (,)
Klik "Save" jika sudah selesai mengedit pilihan, dan tombol "Save" jika ingin disimpan.

Selamat mencoba!

Membuat Buku Tamu "Tersembunyi" DI BLOGGER

alau kamu ga tau lagi mau taruh buku tamu kamu di mana, buat aja buku tamu kamu "tersembunyi", dan kalau diklik akan langsung terlihat.
Contohnya kamu bisa lihat di bagian sebelah kanan layar kamu, dan klik tab yang berwarna hijau tersebut. Dan buku tamu itu akan bergerak keluar, sehingga yang tadinya tidak kelihatan akan jadi terlihat.

Caranya:

Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements",
Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",

Copy-paste kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUeA1MSdv04Pj83ZxA7XAr3K0S_GlpLpsPyoj9ZqCZSAsr6nx7l29-qbg_d8s5Uw-Ee1Rb4WTbjW5sO01TebV7-EYXqOBdivSmlKtOtpEUfYBQsi96Z5xTYLPCfpJ4qrRpt5EXZ8YkckzP/') no-repeat;
}
.gbcontent{float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
sini (Info Blog)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Pada kode di atas, cari kode  dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya,
Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu.
Selamat mencoba!

buku tamu gratisan untuk blogger

Buku tamu tentunya sudah tidak asing lagi bagi kalangan para blogger.Fasilitas yang tentunya gratisan dan lumayan untuk berhubungan antara user blog dengan sang pemilik blog.Fasilitas ini banyak di tawarkan di internet.Tapi bagi saya fasilitas yang di tawarkan oleh shoutmix.com lebih menarik dan seringkali tidak mengalami error.Lagian selama ini fasilitas buku tamu yang saya pakai juga tidak bermasalah .Jadi saran saya jika kamu mau pasang buku tamu untuk interaksi dengan pengunjung.Silahkan saja kunjungi http://www.shoutmix.com/.

Nah langkah selanjutnya tinggal sign up aja dulu.isikan semua data yang di perlukan,lalu tinggal tunggu balasan,paling gak ada satu menit udah ada balasan dan shoutmix kamu bisa kamu modifikasi.

Selanjutnya bisa berimajinasi sendiri yah,sampai kamu dapat kode HTML dari shoutmix.Kalau sudah tinggal pasang di blog dengan cara login dulu ke akun blogger kamu,lalu pilih tata letak halaman,lalu klik tambah widget,klik tambah HTML atau java script.Tambahkan kode dari shoutmix tadi lalu simpan.

Nah udah selesai deh pasang buku tamu di blog Tinggal preview blog kamu

Selamat mencoba...:)

Minggu, 22 Agustus 2010

Cara Membuat Animasi Cursor Mouse di Blogger

Hello all.. apa kabar nya neeh.. Postingan kali ini akan saya coba sedikit garing heheee.. inspirasi ini muncul ketika saya sedang browsing ke salah satu situs web milik microsoft saya gerak - gerakkan mouse nya eeh ada gambar yang bikin mata saya melotot lihat nya (mata jengkol kale bang) hehehee... Cara pemasangan nya cukup mudah ga perlu neko - neko silahkan ikuti langkah berikut :

1. Login ke Blogger + Tata Letak + Edit HTML dan berikan centang pada Expand Tempelate Widget (untuk jaga - jaga sebaik nya kamu Download Tempelate Lengkap kamu)

2. Kemudian kamu cari kode body { (untuk memudahkan pencarian kamu teken Cntrl + F di keyboard kamu)

3. Seteleh ketemu kamu letakkan Script dibawah ini di bawah kode body {

cursor:url("http://i49.tinypic.com/flvjtl.gif"),text;

NB : Tulisan yang warna biru dapat kamu ganti dengan url gambar yang kamu inginkan atau kamu ingin mengganti dengan kode gambar di bawah ini :

Ini url nya http://i46.tinypic.com/24zivc8.gif

Ini url nya http://i45.tinypic.com/330bwwn.gif

Untuk lebih lanjut silahkan kamu berkunjung disini dan kamu bisa pilih ikon cursor mouse sesuka mu kemudian upload gambar tersebut di PhotoBucket/TinyPic

Cara Membuat Kalender di blogger

Lebih menarik jika kamu tambah kan kalender di blog kamu, agar para pengunjung tahu kalau hari ini tanggal, hari dan tahun apa hehee.. lebay bgt kayak nya...
oke langsung saja ke TKP

1. Klik disini dan pilih model kalender yang akan kamu inginkan ( lihat di bawah nya)

2. Jika sudah kamu temukan model yang cocok copy code HTML tersebut

3. Login ke blogger + tata letak + kemudian klik tambah gadget HTML/JavaScript

4. Paste kan kode HTML yang telah kamu copy dari model kalander yang telah di pilih tadi

5. Kemudian klik simpan dan lihat hasil nya

Semoga berhasil...

Cara Pasang Jam di Blog

Agar blog sobat terlihat cantik dan enak dilihat, sobat bisa mencoba dengan memasang jam pada blog sobat. Wuih terlihat cantik, emangnya dian sastro..

what ever lah. Ada banyak layanan online yang menyediakan script jam untuk di pasang di blog, salah satunya adalah clocklink.

langkah pertama untuk mendapatkan kode HTML nya, silahkan simak caranya berikut ini :

Klik tulisan Want a Clock on Your Website?

Kemudian pilih model jam yang akan sobat pasang pada blog.

Setelah itu klik tulisan View HTML Tag.

Lalu klik Accept.

Pilih zona waktu, untuk Indonesia bagian barat GMT +7:00

Bisa juga sobat klik radio button Select by the City --> lalu pilih Indonesia sebagai country dan Jakarta sebagai city

Set ukuran jam disamping tulisan Size.

Copy kode HTML nya ke dalam notepad.

Langkah kedua, silahkan sobat login ke Blogger.

Klik Tata Letak.

Klik tab Elemen Halaman.

Lalu klik Tambah Gadget.

Pilih yang HTML/Javascript.

Kemudian copy paste kode yang tadi sobat dapat dari clocklink.

Save.

Selamat Mencoba !! have a nice day..

Tutorial Membuat Text Area diblogger

Apa itu Text Area ? text area adalah area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text atau kode script dalam bentuk dan format text.

Biasanya text area dipakai untuk menyimpan kode HTML yang tidak bisa di tulis langsung ke dalam postingan di blog. Jadi fungsi dari text area ini kurang lebih untuk memudahkan pengunjung mengcopy seluruh isi text.

I. Text Area standard

Untuk membuat text area, silahkan copy code di bawah ini :

<p align="center"><textarea name="code" rows="2" cols="15"> Tulis text atau kode HTML yang sobat inginkan disini </textarea></p>

berikut hasilnya :

Keterangan :

untuk "rows"=3 adalah tinggi dari text area, jadi jika sobat menginginkan text area yang lebih tinggi silahkan sobat ganti dengan angka yang lebih tinggi.

untuk cols="15" adalah lebar dari text area, jadi jika sobat menginginkan text area yang lebih lebar silahkan sobat ganti dengan angka yang lebih tinggi.

Cukup paham ? mari kita lanjutkan.

II.Text Area dengan menggunakan Highlight
Variasi lainnya dari text area yaitu dengan menggunakan tombol Highlight, jadi dimaksudkan agar lebih memudahkan untuk mengcopy seluruh isi text area hanya dengan menekan tombol Highlight.

Hanya dengan menekan tombol highlight maka seluruh isi dari text area akan di highlight dan tinggal di copy saja. Fungsi tombol highlight ini sangat berguna untuk mencegah tertinggalnya satu atau beberapa isi dari text area.

Silahkan copy kode HTML di bawah ini :

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">simpan tulisan sobat di sini, maka tulisan yang sobat tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></form></div>

dan seperti ini hasilnya:

Agar dapat memahami kode diatas, saya akan berikan uraian tentang kode-kode text area diatas.

<div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika sobat 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.
<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 sobat jangan merubah tulisan ini.
Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika sobat ingin merubah tulisan ini silahkan ganti dengan kata yang sobat inginkan.
<p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika sobat ingin text area sobat berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
<text style="WIDTH: 150px">-->kata "WIDTH:150px" menunjukan lebar dari text area tersebut sebanyak 150 pixel, jadi jika sobat ingin memperpendek atau memperpanjang lebar text area, sobat tinggal menggantinya dengan angka yang sobat inginkan. misal: "WIDTH:500px;"
HEIGHT: 80px --> angka "80px" menunjukan bahwa text area akan mempunyai tinggi sebesar 80 px, jadi jika sobat ingin merubahnya tinggal ganti angka tersebut dengan angka yang sobat inginkan. Misal : HEIGHT:160px.

Nah itu dia sedikit penjelasan tentang Text Area. Silahkan dicoba !

Cara Membuat Label (Kategori) diblogger

Label itu apa ya? Label adalah pengelompokkan postingan dalam kategori. Bisanya jika dalam penulisan kita selalu mengkategorikan postingan kita dalam beberapa kelompok. Misalnya judul pada postingan ini yaitu cara membuat label, kemudian saya kelompokkan dalam beberapa kategori, seperti blogspot tutorial, label, cara membuat label (lihat pada bagian tags).
Cara membuatnya sangat mudah, hanya saja jika sobat jeli dalam setiap penulisan artikel, pada bagian bawah kolom postingan terdapat kotak kecil untuk meletakkan label postingan kita.

Bagaimana cara membuatnya ?

Pada halaman dashboard, klik Tata Letak

Klik Elemen Halaman

Kemudian pilih Tambah Gadget

Cari Label lalu di klik

Lalu akan ada halaman seperti di bawah ini :

Untuk Judul bisa sobat sesuaikan sendiri, setelahnya klik simpan.

Untuk mengisi Label atau Kategori, setiap sobat memposting tulisan sobat, isi kolom kosong dibawah kolom postingan dengan kategori yang sobat inginkan, seperti ini contohnya :

Nah, ada kolom kosong kan, isi dengan kategori yang sobat inginkan. Jadi tulisan sobat masuk dalam kategori yang sobat tulis tersebut.

Atau bisa juga menggunakan cara berikut, pada halaman edit entri --> contreng salah satu postingan sobat --> klik aksi label --> label baru, lalu isi dengan label yang sobat inginkan.

Selamat mencoba !

Cara Membuat Buku Tamu diblogger

Buku tamu ( shoutbox ) biasa digunakan untuk chatting di blog. Banyak blogger yang menggunakan sarana shoutbox ini, karena bentuknya sangat dinamis dan interaktif antara yang punya blog dengan pengunjung bisa saling berkomunikasi. Menurut pengalaman saya selama memakai shoutbox di sidebar saya, beragam pesan yang masuk, ada yang memuji, ada yang ingin tukeran link, bahkan ada juga yang pernah mengkritik blog saya, katanya blog saya terlalu banyak kode HTML-nya sehingga blog menjadi berat, berat ga sih blog saya ? berat ga, berat ga..ah biar aja yang penting keren..

Kita akan menggunakan jasa www.shoutmix.com. Selain bagus, shoutmix ini tergolong yang paling banyak di gunakan para blogger. Tidak usah panjang lebar, langsung saja kita menuju TKP..

Silahkan tuju browser sobat ke www.shoutmix.com

Kemudian Klik tombol Create Shoutbox.

Kemudian isikan data - data yang diperlukan.

Setelah itu klik Control Panel.

Pada gambar berikut, klik Get Codes.

Atur lebar dan tinggi shoutmix, kemudian copy kode HTML kedalam notepad.

Klik Tata Letak.

Klik Elemen Halaman.

Pilih yang HTML / Javascript.

Lalu copy paste kode HTML yang tadi sobat simpan di notepad ke dalam kolom kosong yang tersedia.

Simpan.

Untuk mengatur bentuk shoutmix, sobat bisa tuju Settings -->> kemudian pilih Display -->> Style & Colors. Siipp, selamat cuap - cuap ya..

Upload Gambar Dan Buat Link diblogger

Untuk membuat tampilan tulisan atau postingan kita lebih menarik, tentunya kita harus menyertakan gambar di dalamnya. Dalam tulisan, untuk menjelaskan sesuatu hal pembaca akan lebih tertarik jika gambar yang kita pasang juga sesuai bentuk dan ukurannya.
Dan untuk menambahkan link di setiap gambar yang kita upload ke dalam tulisan kita, agar jika gambar tersebut di klik oleh pembaca, akan keluar halaman url yang kita inginkan. Misalnya sobat akan membawa pembaca ke halaman dimana sobat mempromosikan iklan - iklan sobat, atau membawa pembaca ke halaman link url sobat.

Bagi sobat yang belum mengetahui cara mengupload gambar ke dalam postingan di blog sobat, berikut sedikit penjelasannya.

Klik Entri Baru.

Didalam postingan lihat gambar seperti dibawah ini.