Santri-ne Mbah GOogLe

Membuat Tulisan Jungkir Balik kiri kanan atas bawah

2010-12-21T12:42:00.000-08:00

Bismillah
bukan sulap bukan sihir, tulisan kamu akan jadi terbalik sesuai keinginan kamu

salam sahabat blogger dari santri-one

Membuat Tabel Pada posting Blog

2010-12-17T19:31:00.000-08:00

Bismillah, sobat blogger yang udah pernah posting blog pasti udah bisa donk caranya menulis dan meng,edit postingan, tapi ada yang tahu gak caranya membuat tabel/kotak2 untuk postingan???
nah yang blom bisa, langsung aja kita praktek otak atik kode tabel..

Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag <TABLE> yang menandai sebuah tabel, tag <TR> yang membentuk baris dan tag <TD> yang membentuk kolom. Masing-masing tag tersebut harus memiliki tag penutup.

Untuk lebih jelasnya berikut contohnya :

<TABLE>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>

Susunan tag-tag di atas memerintahkan kepada browser untuk menampilkan sebuah tabel yang terdiri dari satu baris dan satu kolom yang diisi dengan tulisan: kolom 1 dari baris 1.

kolom 1 dari baris 1

Mana tabelnya? Sesungguhnya, tabelnya ada, hanya saja tanpa bingkai (border). Ternyata, secara default, tabel menggunakan nilai border = 0 (nol) alias tanpa bingkai. Jadinya yang tampak hanya tulisan semata. Untuk membuat bingkai dari tabel tersebut, kita harus menyertakan atribut BORDER.

<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>

Sehingga tabelnya tampak sebagai berikut:

kolom 1 dari baris 1

Semain besar nilai BORDER ( Bingkai ) yang di masukkan otomatis semakin besar juga Bingkai tabel yang di tampilkan seperti contoh berikut :

<TABLE BORDER=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>

Hasilnya akan seperti ini :

kolom 1 dari baris 1

Pada contoh di atas kita coba masukkan Nilai BORDER 10 ( Bingkai ) Maka otomatis bingkai tabel akan berubahkan....? seperti contoh di atas

Nah Silakan coba sendiri mengganti ukuran bingkai menjadi 2, 3 dan seterusnya lalu bandingkan hasilnya. Sekarang mari kita membagi tabel sebaris tersebut menjadi dua kolom. Artinya kita menambah sepasang tag TD lagi.
Seperti contoh berikut:

<TABLE BORDER=1>
<TR>
<TD> kolom 1 dari baris 1</TD>
<TD> kolom 2 dari baris 1</TD>
</TR>
</TABLE>

Beginilah hasilnya :

kolom 1 dari baris 1

kolom 2 dari baris 1

Nah, bila anda ingin menambah sekian baris ke bawah, cukup menyalin ulang dari tag <TR> sampai </TR>. Sorot (blok) dari tag <TR> hingga </TR> lalu Copy (Ctrl+C). Tempatkan kursor di bawah tag </TR> lalu Paste (Ctrl+V). Sekian baris yang ingin anda buat, sekian kali pula anda harus menyalinnya (melakukan perintah Paste). Setelah itu tinggal meng-edit tulisan sesuai keinginan anda. Begini contohnya:

<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Tampilannya Akan menjadi:

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Setelah atribut BORDER, atribut selanjutnya yang perlu kita ketahui adalah atribut CELLSPACING yang mengatur jarak antar sel dan CELLPADDING yang mengatur jarak antara sel dan tulisan di dalamnya. Misalnya:

<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Dengan penambahan atribut CELLSPACING=10 dalam tag TABLE berarti akan dihasilkan sebuah tabel dengan jarak antar sel adalah 10 pixel.

Beginilah tampilannya :

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Sekarang mari kita coba bandingkan bila atribut CELLSPACING tersebut diganti dengan CELLPADDING.

<TABLE BORDER=1 CELLPADDING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Beginilah hasilnya :

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Sedangkan kalau kedua tag tersebut dipakai bersama-sama seperti ini:

<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=10>
<TR>
<TD> kolom 1 dari baris 1</TD>
<TD> kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD> kolom 1 dari baris 2</TD>
<TD> kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Akan menghasilkan tabel seperti ini:

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Ternyata mudah, kan membuat tabel? Bila kita lihat tabel-tabel pada contoh di atas, tampak bahwa secara default, lebar kolom dan tinggi baris mengikuti lebar dan tinggi tulisan di dalamnya. Kita bisa mengatur sendiri lebar dan tinggi tabel, kolom dan barisnya dengan menggunakan atribut WIDTH (lebar) dan HEIGHT (tinggi). Misalnya:

<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Bagaimana jadinya tabel dengan lebar 100% ?

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Kesimpulannya, lebar tabel 100% artinya tabel tersebut akan melebar hingga memenuhi lebar tampilan halaman. Bila lebar setiap kolom tidak ditentukan, maka lebar 100% itu akan terbagi sejumlah kolomnya. Seperti dalam contoh di atas, karena terdiri dari dua kolom maka lebar masing-masing kolom adalah 50%. Nah, bagaimana bila kita ingin membagi lebar kolom tidak sama? Ya, caranya sama saja, yaitu dengan memasukkan atribut WIDTH dalam tag kolom.

<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 1</TD>
<TD WIDTH=75%>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD WIDTH=25%>kolom 1 dari baris 2</TD>
<TD WIDTH=75%>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Bagaimana jadinya?

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

Bagaimana halnya dengan atribut HEIGHT (tinggi)? Atribut ini juga bisa disisipkan dalam tag TABLE dan tag TR (baris). Selain menggunakan persen untuk menentukan ukuran tabel, kita bisa pula menggunakan satuan pixel. Bila angka sesudah WIDTH dan HEIGHT tidak menggunakan persen (%), berarti satuannya adalah pixel. Contoh:

<TABLE BORDER=7>
<TR HEIGHT=40>
<TD WIDTH=150> kolom 1 dari baris 1</TD>
<TD WIDTH=250> kolom 2 dari baris 1</TD>
</TR>
<TR HEIGHT=80>
<TD WIDTH=150> kolom 1 dari baris 2</TD>
<TD WIDTH=250> kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Ukuran border tabel kita ubah menjadi 7. Tinggi baris pertama adalah 40 pixel sedang baris kedua 80 pixel. Adapun lebar kolom pertama adalah 150 pixel sedang kolom kedua 250 pixel. Perhatikanlah bagaimana atribut-atribut di atas, menghasilkan tampilan tabel menjadi:

kolom 1 dari baris 1	kolom 2 dari baris 1
kolom 1 dari baris 2	kolom 2 dari baris 2

nb:

waktu posting usahakan anda dalam modus "edit html" untuk preview, pilih modus"compose"

silahkan ganti kata kolom 1 baris 1 dst dengan teks anda/ kode anda

tabel ini juga bisa di pasang di sidebar

Oke Selamat Mencoba, salam sahabat blogger dari santri-one

Membuat duplikat Blog Dengan iframe

2010-12-17T17:55:00.000-08:00

Bismillah

nah ini nich tutorial yang paling mudah banget. yaitu menduplikat blog/situs...dengan cara menggandakan tampilan blog sesuai dengan aslinya merupakan trik dari pembuatan frame satu halaman, dengan maksud tujuan yang lain atau juga apabila sobat blogger sekalian mempunyai nama domain baru yang mempunyai page index dan tidak bermaksud merubah kondisi Pagerank,Alexa, dan Status lainnya yang sudah ada pada Blog sebelumnya, sahabat blogger sekalian bisa menngunakan teknik ini sebagai cara alternatif. Berikut adalah kode html yang akan disimpan pada halaman index.html :

<html>
<head>
<title>Title</title>
</head>
<frameset><frame src='http://sobatmbs.blogspot.com/'/></frameset>
<body></body>
</html>

masuk ke pengaturan>> edit html>> hapus semua kode template/html/script yang ada disana (pokoknya html harus kosong. hehehe sadis amat..!! ) dan ganti dengan kode di bawah ini

<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
</head>
<frameset><frame src='http://sobatmbs.blogspot.com/'/></frameset><body></body>
</html>

contoh hasilnya nya bisa kamu lihat tampilan blog:
sobatmbs.blogspot.com dan blog duplikatnya di mymbsfm.blogspot.com
gimana??? sama khan?? rubah alamat blog berwarna merah dengan alamat blog yang mau kamu tapilkan... :)

salam sahabat blogger dari santri-one

Memasang Emoticon KaskuSer

2010-12-17T16:56:00.000-08:00

Bismillahketemu lagi nech, adem2 gini di temanin kompie untuk buat posting blog...
hmmmm ada yang pernah lihat blog yang ada emoticonnya gak?? seperti emoticon yahoo, emoticon kucing, dan emoticon yang laen2. nah sekarang kita akan coba bikin emoticon yang paling rame bikinan anak indonesia , yaitu emoticon Kaskus, di jamin dech, tampilan komentar kamu bakal lebih rame.... untuk contohnya, langsung lihat aja di kotak komentar blog ini... hehehe
cara bikinnya: Pertama Log In ke Blogger.com

- Habis itu ke Menu Tata Letak
- Lalu Pilih tab Edit HTML
- Nah disini jangan lupa centang dulu gan Expand Template Widget
- Sudah? Kalo sudah langsung cari kode yang </body>. Dan copas kode berikut sebelum kode </body>

- Kalo sudah langsung cari kode yang berwarna merah di bawah ini

- Uah ketemu! Kalo udah Copy Kode berikut lalu paste di antara kode yang warna merah tersebut.

- Terakhir klik Simpan Template
Selesai!.... lalu kamu tinggal cobain/test dengan komentar2 unik n lucu ala kaskus, di jamin rame dech..
salam sahabat blogger dari santri-one

Membuat Widget Top Comment

2010-12-15T06:47:00.000-08:00

Bismillah
sesuai dengan judul di atas, saat ini kita akan membuat widget top comments, widget ini berguna untuk menampilkan siapa saja yang sering berkomentar di artikel2 kita, dengan begitu, siapa yang paling sering komentar, maka ia akan selalu tampil di barisan paling atas. nah ini juga bisa meningkatkan trafic jumlah pengunjung blog agar mereka berlomba2 menjadi Top Komentator di blog kita. gimana,,,, menarik bkan???

Nah, cara menampilkan Top Comment di blog sebagai berikut :

Login dulu ke Blogger
Pada halaman dashboard, klik Tata Letak/Layout
Klik Add Gadget
Pilih HTML/Javascript
"untuk pemula, yang masih bingung, langsung aja kalian baca cara menambahkan sesuatu di sidebar"
yang sudah tahu caranya, langsung Masukkan code dibawah ini :

Ganti tulisan berwarna merah dengan link blog sobat
Ganti tulisan berwarna biru dengan Nama sobat yang biasa dipakai untuk membalas komentar.
Sedangkan angka 10 adalah jumlah Top Comment yang akan ditampilkan
Simpan Gadgetnya
Coba dech lihat hasilnya

Selamat mencoba sobat
Semoga bermanfaat
Terima Kasih
salam sahabat blogger dari santri-one

sumber: serba-seru.blogspot.com

Cara membuat Animasi Teks Membesar Part1

2010-12-12T04:26:00.000-08:00

Bismillah... kali ini kita mau mencoba membuat teks animasi
Cara Membuat" Text Animation Hover dengan efek membesar ketika disorot dengan mouse. Kita tidak perlu menambahkan code apa-apa di template blog, langsung ditempat postingan saja, bener-bener simple dan tidak memengaruhi berat blog.

Cara Membuatnya :

Masuk ke halaman posting, pilih "Edit HTML" bukan Compose
Letakkan kode berikut

<style type="text/css">
#qthink{margin:0 auto;padding:5px;text-align:CENTER;}.polo_box {width:280px;height:200px;background:none;}#ease.polo_box {
-webkit-transition: all 4s ease-in;-moz-transition: all 4s ease-in;-o-transition: all 4s ease-in;-webkit-transition: all 4s ease-in;transition: all 4s ease-in;}#qthink:hover .polo_box, #qthink.hover_effect .polo_box {text-shadow: 0 0 10px rgb(251, 51, 51);color:GREEN;-moz-transform:scale(2.2);-webkit-transform:scale(2.2);-webkit-transition-duration: 3s;}
</style>
<div id="qthink">
<div class="polo_box" id="qthink">
<div class="center">
ARAHKAN KURSOR KESINI...!!! MEMBESAR KHAN???</div>
</div>
</div>

Keterangan : GREEN adalah kode warna setelah membesar. none adalah warna background, jika ingin memberi background dengan warna, silahkan ganti dengan kode warna. CENTER adalah rata teksnya, silahkan dimodif sendiri. Jangan lupa ganti teksnya. Baca : Kode-Kode Warna HTML
HASILNYA :

ARAHKAN KUSOR KESINI..!!! MEMBESAR KHAN??? HEHEHE

salam sahabat blogger dari santri-one

Html Encoder untuk menampilkan script pada posting

2010-12-12T03:19:00.000-08:00

biasanya, kode html/javascrit itu khan kalo langsung di posting di ~~majalah~~ postingan, itu kodenya tidak muncul, nah caranya gimana yach supaya bisa muncul???? kita gunakan aja html encoder yang aq dapat dari blog sebelah. hehehe
Bagi Yang belum tahu cara posting kode HTML (Blog), maka disini disediakan tool atau generator untuk merubah kode HTML (Parse / Encode) supaya bisa ditampilkan pada Posting Blog

Silakan Copy Paste atau tulis kode HTML yang ingin anda Tulis pada posting Blog pada Form atau kotak yang tersedia, Lalu Klik "HTML Encode" dan Copy Paste hasilnya pada Postingan anda. Jika ingin Parse (Encode) kode yang lain silakan klik "Reset"

santri-one

salam sahabat blogger dari santri-one

Membuat Menu Custom Dropdown

2010-12-11T18:58:00.000-08:00

Bismillah
kali ini kita akan belajar cara membuat menu sendiri, jadi bisa kita edit sesuka kita, tampilannya juga bisa kita ganti2, seperti yg di bawah ini.... gmana???

lihat menu di atas?? sepertinya biasa aja, tapi sebenarnya Menu diatas merupakan contoh Menu Drop-Down Unik...
Menu tersebut sangat cocok untuk tampilan blog anda karena ukuran dan tampilan yang unik yang cocok untuk tampilan di menu blog anda..
Tertarik untuk memasangnya?
Oke Langsung saja Copy Paste kode nya dibawah ini dan taruh di sidebar, caranya bisa kamu baca di " cara memasang html di sidebar"
untuk kodenya, silahkan ganti yang berwarna biru dengan url/alamat link kamu. untuk yanga hijau, silahkan ganti dengan judul menu yg kamu inginkan

<ul>

<li><a href="http://facebook.com">Facebook</a></li>

<li><a href="http://id.yahoo.com">Yahoo!</a></li>

<li><a href="http://twitter.com">Twitter</a></li>

<li><a href="http://www.youtube.com">Youtube</a></li>

</ul>

</div></center>

<style>

margin:0;

padding:0;

}

#menu{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pcdN-guCc93y1jZMUIHRLBWKaE0axUl9v0Qf8F3g5xGUUVuG2VwukGXjH0cyOovnG4SZ6IODKw6jmlfcFg3krF2oIJsjrcVdsvqExbiIhKCa0JNvpjP6AqFFCJaQEm6gjjmXm2GIzGs/s1600/menu_026_bg.jpg) no-repeat;

width:172px;

height:193px;

padding:15px;

}

#menu ul{

list-style:none;

padding:0 0 0 8px;

}

#menu li{

list-style:none;

display:block;

padding:10px 0;

}

#menu li a{

list-style:none;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jE3LBT9ivd0G8O3TkveREYuRqYJk6DKbogNK8gNQ970J1A5lmg5IN7hzdvixTA9nsNGUMVOKcOTjbPJasgDE9vS-2BhVKndP8A7apnVLhcB_3Aq0yaFWuHA7rE53kY9bfol09RmdoXy-/) no-repeat left center;

color:#ffe991;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

line-height:1.5em;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a:hover{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt7B7p01o0Cu_VMOdzyETf_zZLx2GpX4tgUnjWOuGbuC21g_c9a3R8nMNhAbkIP0drj3nvfThFv9BJgXvOjMyE_KsgdQxfp41V4aX2tM3G5flS9SkbIPg0pm-suXtcpd3ndu2ovVFjIVz/) no-repeat left center;

color:#fff;

text-decoration:none;

}

#menu li .current{

list-style:none;

display:block;

color:#fff;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a.current, #menu li a:hover.current{

color:#fff;

text-decoration:none;

}

</style>

salam sahabat blogger dari santri-one

Kode warna Untuk Blog

2010-12-11T17:57:00.001-08:00

Bismillah

Kode warna sangat penting terutama untuk anda yang sering mengotak-atik kode HTML template. Oleh karena itu saya akan membahas cara memasang kode warna blogspot. Ini adalah contoh mesin kode warna yang akan kita buat

get like this
Cara membuatnya sebagai berikut :
#Langkah 1 :
1. Login ke blogger.
2. kalau sudah masuk ke Dasbor, klik Tata Letak.
3. masuk ke Elemen Halaman
4. Klik Tambah Widget
5. Pilih HTML/Java Sript
6. Masukkan kode JS di bawah ini :

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

7. Simpan

#Langkah 2 :

1. Buat satu postingan baru.
2. Masukkan kode HTML di bawah ini :

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="10"><td>
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" width="24" height="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form><p><a href="http://santri-one.blogspot.com/2010/12/kode-warna-untuk-blog.html" target="new">Get it</a></p></center>

3. Klik Terbitkan Entri.
Nah Sekarang kita sudah mempunyai mesin kode warna sendiri di blog kita.

salam sahabat blogger dari santri-one

Memasang Google Translate di sidebar

2010-12-11T17:46:00.000-08:00

Bismillah
al-ikhtilafu rahmatun. artinya: perbedaan adalah rahmat. dan kita harus bersukur dengan adanya perbedaan tersebut semoga kita bisa saling memahami. termasuk dalam perbedaan bahasa, kalo masih ada yg belom memahami ya silahkan kamu pakai google translate aja biar faham.. hehehe
Dengan adanya widget ini para pengunjung dari seluruh belahan dunia dapat menikmati isi blog kita tanpa terhalang oleh perbedaan bahasa. Apabila ada pengunjung dari luar negeri, mereka tinggal menerjemahkan isi blog dari bahasa indonesia ke dalam bahasa mereka. Tapi ada satu masalah, yaitu widget ini sulit untuk menerjemahkan tulisan dengan bahasa yang tidak baku. Tapi gak papalah yang penting pengunjung dapat mengerti apa isi dari blog kita ( Visitor's is King). Bentuk dari Penerjemah minimalis, simpel pokoknya ndak mberatin blog kita deh. Kayak gini bentuknya:

Nah Tulkan, minimalis n' simpel. Okey... sekarang pertanyannya gimana cara buatnya...? caranya sangat mudah yaitu sebagai berikut:
1. Masuklah ke menu layout atau Tata Letak.
2. Klik Page Element atau elemen halaman.
3. Klik Add new gadgets atau tambah gadget.
4. Pilih Gadget HTML/JavaScript.
5. Masukkan kode HTML berikut ini:

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

6. Nah... kode yang berwarna hijau adalah ukuran widget yang bisa anda ganti-ganti sesuai ukuran yang anda kehendaki.
7. Klik Save.
8. Sekarang para pengunjung dapat menikmati blog anda tanpa terhalangi oleh perbedaan bahasa.
salam sahabat blogger dari santri-one

Membuat Animasi yang berterbangan di blog

2010-12-11T10:43:00.000-08:00

Bismillah langsung saja yah.. karena terinspirasi sama seseorang yang seneng banget sama "bintang" jadi aku pengen posting sesuatu yang ada bintangnya, tapi apa yach??
ya udah dech kali ini kta akan mulai mempercantik blog kita dengan animasi2 yang gak kalah cantiknya yaitu animasi bintang kecil dan bidadari terbang di blog kamu...

sebenarnya gak cuma bintang aja yang bisa di pasang. tapi gambar2 lain sesuka kamu tapi kita coba dulu dengan gambar bintang soalnya, gimanaa gtu.. contohnya bisa dilihat / klik di blog percobaan ini

gimana?? tertarik?
langsung aja kali ya, gak usah banyak omong lagi. Langkah:
1. Masih seperti biasa Log-In dulu dengan ID masing-masing
2. Lalu masuk ke “Rancangan/Tata Letak” Trus “Elemen Laman”
3. Kemudian “Tambah Gadget” dan pilih “HTML/JavaScrip” caranya
4.yang belom tau caranya, silahkan baca cara menambah script di sidebar
5. Kalo sudah tau caranya, langsung copy paste kode dibawah ini :

Ket:

floatimage : Untuk menempatkan URL Image-nya, kalian bisa nambah atau mengurang.
Penetapan diawali dengan angka “0” sampai seterusnya
Kode yang warna merah ntu bisa kalian ganti dengan “URL IMAGE KALIAN” bisa lhat disini "url gambar animasi" sekian dulu semoga bermanfaat, wassalam. salam sahabat blogger dari santri-one

Membuat Gambar Dari Huruf / ascii

2010-12-11T09:55:00.000-08:00

Bismillah kali ini ada satulagi nech gemerator unik buat shobat semua.
kalo sobat belom tahu yang namanya ascii, sebenarnya ascii itu adalah susunan huruf yang di susun menjadi huruf lain atau bahkan huruf huruf pun juga bisa di susun menjadi gambar. nah itulah yang namanya ascii versi saya.. hehehe disini adalah generator/ alat pembuat teks ascii

Dengan Generator Ini Anda Dapat Membuat huruf unik dan menarik....
gak usah di contohin juga pasti tahu dech kalo lihat gambar dibawah ini

salam sahabat blogger dari santri-one

Mengenal Widget/ Gadget Blogger

2010-12-11T07:20:00.000-08:00

Bismillah
Apa itu Gadget? Pengertian Gadget pada umumnya dengan pengertian Gadget di Blogger.com beda. Gadget secara umum adalah barang elektronik kecil yang yang didesain sedemikian rupa sehingga menjadikannya sebagai sesuatu inovasi terbaru, atau juga bisa dikatakan sebagai suatu penemuan yang benar-benar menakjubkan pada masanya. sedangkan Gadget di blogger.com adalah kumpulan elemen atau fitur yang memang disediakan oleh pihak blogger.com dengan tujuan untuk mendukung fungsi blogger.com sebagai web penyedia jasa blogging gratis. Berhubung pengertian di atas adalah hasil pengertian yang dibuat oleh empunya blog sebagai secuil pengalamannya di dunia per-blog-an, jadi teman-teman juga bisa mencari ide untuk memunculkan pengertian tersendiri (asal jangan keluar rel ya...).

kembali ke topik kita kali ini, yaitu mengenal Fungsi Gadget Blogger. Memang fungsi dari masing-masing gadget sudah dijelaskan oleh pihak blogger, namun beberapa pemula di blogger.com merasa penjelasan tersebut masih kurang, oleh karena itu si empunya blog berharap teman-teman menjadi lebih mudah dengan hadirnya postingan ini. Agar teman-teman cepat menghafal atau paham mengenai fungsi dari Gadget Blogger, ada baiknya teman-teman sambil memperaktekkannya, karena kalau teman hanya sekedar membaca dan tidak memperaktekkannya maka akan sia-sia saja.
Fungsi dari Gadget-gadget Blogger.com adalah sebagai berikut:

1. Pengikut.
Gadget ini Berfungsi untuk Menampilkan daftar pengguna yang mengikuti blog Anda, lalu apa kegunaan dari mengikuti suatu blog? Kegunaannya adalah si pengikut akan segera tahu apabila ada artikel terbaru yang terposting di blog yang ia ikut, dan ini akan langsung tampil di Dasbor si pengikut. Agar lebih gampang seperti ini ilustrasinya: Si A mengikuti Blog si B, maka si A akan dengan cepat mengetahui apabila ada postingan terbaru dari blog si B, karena postingan terbaru tersebut akan langsung tampil di dasbornya si A, tatkala ia login/ masuk ke akun blogger-nya. sedangkan kegunaan bagi si pemilik blog yaitu untuk mempermudah penyebaran postingan terbarunya. Dengan kata lain, gadget ini bisa dikatakan memiliki peranan dalam mempermudah kedua belah pihak, antara si pemilik dan si pengikut. Apabila anda menambahkan gadget ini ke blog anda, maka seperti inilah nanti tampilannya:

2. Kotak Penelusuran/ search box
Gatget ini berfungsi untuk menelusuri isi blog-blog, blogroll, atau apapun yang pernah Anda tauti ke dalam blog anda. Anda juga bisa mengatur Gatget penelusuran ini hanya untuk mencari isi yang berada di blog anda saja, contohnya saja blog t4belajarblogger ini. Blog ini menggunakan gatget penelusuran khusus blog ini saja. Gadget penelusuran ini di dukung oleh Om Google, jadi gak perlu khawatir tentang kualitas pencariannya. Apabila anda belum ada gambaran bagaimana bentuk gadget ini setelah dipasang ke blog anda, anda bisa menengok di bagian atas postingan blog ini, dan anda akan melihatnya seperti di bawah ini:

3. HTML/ JavaScript.
Gadget ini berfungsi untuk menambahkan fungsional pihak ketiga atau kode lainnya ke blog Anda. Dengan gadget ini anda bisa menambahkan kode HTML/ script di blog anda. Kode script itu biasanya bermacam-macam, ada yang berupa kode script iklan, banner, dll. Seperti apakah kode script itu? Agar teman-teman lebih jelas seperti apakah kode script itu, teman-teman bisa memperhatikannya melalui contoh berikut ini:

"<div style="text-align: center;"><a href="http://whos.amung.us/stats/gaaxkjwwh9sj/"><img src="http://whos.amung.us/cwidget/gaaxkjwwh9sj/ffffff000000.png" title="Click to see how many people are online" border="0" height="29" width="81" /></a></div>"

Dan hasil dari kode di atas adalah:

dan kode di atas berfungsi untuk mengetahui orang yang sedang online di blog kita.
4. Teks.
Melalui gadget ini, anda bisa menambah kata-kata di blog anda, seperti: Selamat datang di blog kami, selamat membaca, jangan lupa meninggalkan komentar, dll. Anda juga bisa menulis beberapa puisi atau juga pantun. Selain itu anda bisa membuat tulisan yang diselipi dengan link (Hyper Link) di dalamnya, seperti dengan menggunakan kata-kata, "untuk membaca panduan merakit komputer silahkan untuk pergi ke halaman ini" (kata ini, anda selipi dengan suatu link), atau juga bisa anda selipi dengan alamat e-mail.
5. Gambar.
Melalui gadget ini teman-teman bisa menambah suatu gambar ke blog-nya teman-teman. Entah itu gambar dari komputer atau suatu web. Selain itu teman-teman juga bisa membuat link tujuan gambar tersebut, contohnya saja teman-teman memiliki posting tentang masjid atau tentang ka'bah, maka teman-teman bisa memasang gambar masjid atau ka'bah tersebut ke blognya teman-teman dengan link yang bertujuan ke postingan yang isinya tentang masjid dan ka'bah tadi.
6. tampilan Slide.
Dengan Gadget ini teman-teman bisa memunculkan tampilan slide di blognya teman-teman. Slide yang akan ditampilkan sudah disediakan oleh pihak blogger.com itu sendiri, jadi teman-teman tinggal mengaktifkannya. Sebelum mengaktifkan gadget ini, teman-teman juga bisa mengatur jenis tampilan slide-nya nanti seperti apa.
7. Baris Video.
Dengan gadget ini teman-teman bisa menambah video klip dari Youtube juga video Google, sehingga para pengunjung bisa menontonnya. Bagusnya lagi, para pengunjung tersebut dapat menonton video tadi tanpa harus meninggalkan halaman posting, anda juga bisa mensettingnya dengan menggunakan kotak keyword yang tersedia.
8. Polling.
Dengan gadget ini anda bisa melakukan survey terhadap para pengunjung. Apakah kegunaan dari survey tersebut? Dengan adanya survey tersebut anda akan mengetahui sampai di manakah daya tarik pembaca terhadap blog anda, sehingga anda bisa memantau kualitaf dari isi blog anda.
9. Daftar Blog.
Dengan gadget ini anda dapat menampilkan blog vaforit anda di blog anda. Anda cukup menulis link blog faforit anda, lalu klik tombol tambah. Dengan begitu anda juga akan mudah untuk pergi ke blog tersebut, tanpa harus menghafal alamat URL-nya atau mungkin dengan tujuan lain seperti sebagai referensi blog anda.
10. Daftar Link.
Gadget yang ini kegunaannya hampir sama dengan gadget di atas. Namun untuk gadget yang ini, yang muncul nantinya hanyalah link-nya saja. Namanya juga Daftar Link. Gadget ini dapat anda manfaatkan untuk tujuan tukar link, atau sebagai blog roll (link ke teman-teman blogger lainnya).
11. Daftar.
Dengan gadget ini, anda bisa menambah daftar buku kesukaan anda, film kesukaan anda, atau apapun yang memang anda rasa penting untuk didaftarkan ke blog anda.

12. Feed.
Dengan Gadget ini anda bisa menyisipi feed RSS atau Atom ke blog anda, belum tahu apa itu Feed RSS atau Atom? Agar lebih jelas, teman-teman bisa melihat contohnya di: Sini. Jadi link Rss Blog t4belajarblogger adalah http://t4belajarblogger.blogspot.com, silahkan anda ganti yang dicetak tebal dengan alamat URL blog anda.
13. NewsReel.
Dengan gadget ini, secara otomatis menampilkan tajuk google news dari blog anda.

14. Label.
Dengan gadget ini anda dapat menampilkan label/ kategori semua postingan yang ada di dalam blog anda. Lalu apakah kegunaan label/ kategori tersebut? Dengan adanya label/ kategori para pengunjung akan merasa lebih mudah dalam mencari artikel yang mereka butuhkan. Contohnya blog anda membahas tentang kesehatan. Sedangkan artikel anda banyak sekali yang membahas tentang kesehatan, dengan tersedianya gadget label ini, anda dapat mengkategorikan postingan anda, sehingga para pengunjung menjadi mudah untuk menemukan postingan-postingan yang mereka cari. Contoh label yang berkaitan dengan kesehatan: Kesehatan rongga mulut, kesehatan mata, dll.
15. Tautan Berlangganan.
Gadget ini dapat anda gunakan untuk menampilkan fitur langganan. Sehingga Memudahkan para pembaca untuk berlangganan blog Anda lewat pembaca feed populer.

16. Logo.
Anda bisa menampilkan logo blogger.com ke dalam blog anda melalui gadget ini.

17. Profil.
Dengan Gadget ini, anda dapat menampilkan profil blogger anda di blog anda. Apa fungsi profil blogger? Biasanya digunakan sebagai tanda pengenalan, atau sebagai tanda bukti kepemilikan blog. Untuk memahami serba-serbi profil, silahkan klik di: Sini.
18. Arsip Blog.
Anda dapat menampilkan arsip blog anda dengan menggunakan gadget ini. Apa itu arsip? Singkatnya, apabila anda menambahkan gadget ini ke dalam blog anda, maka anda dan para pengunjung blog anda dapat dapat melihat semua daftar postingan anda, atau biasanya beberapa blogger menamakan gadget ini sebagai daftar isi, karena memang manampilkan semua isi/ postingan di blog kita. Anda dapat men-setting tampilan arsip blog anda nantinya, seperti: ingin ditampilkan menurut bulanan, mingguan, atau harian. Selain itu juga, anda bisa menentukan style/ gaya, mau secara hirarki (tersusun), atau menu dropdown.
19. Header Halaman
Umumnya gadget ini secara otomatis sudah ditambahkan ke dalam blog kita. Namun, bagi anda yang ingin memodifikasi/ mengatur ulang header blog anda, anda bisa menggunakan gadget ini. Seperti halnya anda ingin memodif header blog anda dengan menambahkan gambar di dalamnya (sebagai latar atau background). Agar lebih jelas apa itu header blog/ halaman, anda dapat melihatnya di blog ini, yaitu terletak di bagian paling atas di blog ini, anda akan melihatnya seperti di bawah ini:

---------------------------------------------------------------------

Di atas adalah 19 Gadget utama/ dasar yang disediakan oleh pihak blogger.com. Bagi anda yang ingin menambahkan gadget yang lain, dapat anda cari melalui kotak pencarian yang telah disediakan. Letaknya ada di bagian kanan atas window tambah gadget. Gambar:

Sekian saja dulu untuk postingan kali ini...

Semoga Bermanfaat []
salam sahabat blogger dari santri-one

Membuat Widget new post/ posting terbaru yang unik

2010-12-11T02:46:00.000-08:00

Bismillah. salah satu widget yang harus dimiliki seorang blogger adalah, widget new post/ posting terbaru. karena dengan widget inilah para pengunjung/ blogwalker mengetahui posting baru di blog ~~orang lain~~ kita, sebenarnya blogger sudah menyediakan widget ini pada saat kita klik >>tambah gadget>>new post
tapi sayangnya, widget bawaan blogger tadi terlalu (maaf) monoton, jadi kurang menarik untuk di klik... hehehe, nah bagaimana membuat widget tersebut agar lebih menarik lagi,??

widget new post

seperti yang udah ada di sidebar blog ini nich... lihat aja widget"posting terbaru" di pojok situ tuuh... posting terbarunya bisa jalan2 dari atas kebawah dilengkapi thumbnail/gambar mini dari posting shobat... hehehe
caranya gampang,

baca basmalah. masuk blogger seperti biasa
klik >> rancangan
klik >> tambah widget
pilih Html/javascript
copy seluruh kode di bawah ini.

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6QtAvsbs4c04Nugiq7Mym-tQ-RNZWpL0FRFRslxa2-ZOwPYqxXS3VVAI_XNgTgUVipz0mg0BbTU-uxlplwvLHF4n6o6VESUCQzzrhz571U7nPh1ZQMlrw056ogHHrpvF6Rwgca16s8cG9/s128/globe%20new.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6QtAvsbs4c04Nugiq7Mym-tQ-RNZWpL0FRFRslxa2-ZOwPYqxXS3VVAI_XNgTgUVipz0mg0BbTU-uxlplwvLHF4n6o6VESUCQzzrhz571U7nPh1ZQMlrw056ogHHrpvF6Rwgca16s8cG9/s128/globe%20new.gif";
imgr[2] = "http://img1.jurko.net/avatar_1672.gif";
imgr[3] = "http://img1.jurko.net/avatar_1672.gif";
imgr[4] = "http://img1.jurko.net/avatar_1672.gif";
showRandomImg = true;
boxwidth = 270;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 45;
thumbheight = 45;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://santri-one.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div></center>

keterangan: ubah nama blog yang berwarna merah dengan nama blog kamu
nah, setelah di copy paste semuanya, lalu simpan, dan jadi dech....

Cara membuat kotak Komentar terbaru" dengan fungsi scrollBox

2010-12-10T15:23:00.000-08:00

Bismillah
kali ini kita akan membahas bagaimana cara membuat recent comments / komentar terbaru. tapi yang kita buat disini itu agak berbeda, soalnya komentar terbaru disini sudah dilengkapi dengan scrollBox. jadi tidak memakan banyak tempat di sidebar. soalnya ukuran kotaknya pasti sesuai keinginan kita dan isinya bisa di scroll/ di tarik ke atas bawah gtu.. hehehehe

contohnya bisa di lihat di sidebar blog ini yg judulnyakomentar terbaru

Recent Comment with Scroll, yaitu Recent Comment yang ditampilkan dalam bentuk menu scroll.
- Login ke akun Blogger anda.

- Klik Rancangan.

- Pilih Tambah Gadget.

- Dasar-dasar → tambah (+) HTML/JavaScript.

- Tuliskan judul seperti Recent Comment atau Komentar Terbaru dan isi content dengan script di bawah ini :

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

Keterangan:

240 → sesuaikan tinggi recent comment.

10 → menunjukkan jumlah komentar terakhir yang ditampilkan, kamu bisa merubah sesuai selera.

60 → menunjukkan jumlah hurup komentar yang ditampilkan, kamu bisa merubah sesuai selera.

blogkamu → ganti dengan nama blog anda.

- Klik SIMPAN. dan jadi dech....

Membuat Tul1s4n 4lay 0Tom4tisz

2010-12-10T09:36:00.000-08:00

hak asasi manusia dilindungi oleh negara.kalo loe mau berekpresi jadi orang alayy silahkan aja, yang penting jangan ajak2 apalagi deket2 ama gue... hehehehe
aplikasi ini bisa kamu gunakan buat kamu copy paste di status facebook, twitter, friendster de el el langsung aja kamu tulis teks kamu dan kamu centang untuk memilih model2 tulisan yg kamu sukai, pilih semua juga gpp koq... langsung klik tombol di bawah dan jadi dech....

Jika Anda mengaku anak gaul jangan lewatkan artikel yang satu ini,, anda dapat menulis tulisan gaya sms allay dengan menggunakan generator ini..
tertarik untuk menggunakannya....

salam sahabat blogger dari santri-one

Cara Menambahkan Sesuatu Di Sidebar

2010-12-10T05:02:00.000-08:00

Bismillah...
"menambahkan sesuatu di sidebar" mungkin ini emang ketinggalan banget ya shob... hehehe
tapi tak apa2, tidak ada kata terlambat untuk sharing, mungkin shobat2 yang newbie/baru aja blogging masih ada yang belum faham caranya.
sebenarnya yang saya maksud dengan "sesuatu" disini adalah, ya sesuatu seperti :

jam
kalender
musik
gambar
banner/ logo blog anda
widget2 lainya yg gak bisa di sebutin satu persatu

dan ke semuanya itu biasanya di awali dengan menambahkan HTML/Javascript di sidebar.
caranya gampang banget

1. pada halaman dasbor. shobat klik "rancangan"

2.kalo udah, pasti kamu masuk ke elemen halaman

3. di bagian "elemen laman" kamu klik "tambah gadget"

4. setelah itu akan muncul jendela baru dan silahkan cari "html/javascript" dan klik tanda "+"

5. akan muncul kolom kosong, nah silahkan paste code dari "sesuatu" yang ingin kamu tambahkan di sidebar pada kolom tersebut...

6 jangan lupa klik "simpan"

7 selesai.... hehehehe

wassalam sampai jumpa lagi

salam sahabat blogger dari santri-one

Memasang Radio Streaming Di blog/ website

2010-12-10T03:26:00.000-08:00

Bismillah. Shobat tentunya sudah tau donk apa yang namanya radio streaming?? itu lho, radio yang bisa di denger via internet. jadi gak perlu ribet nyari antena, langsung aja kamu buka situs resmi radio tersebut. dan subhaanalah, dimanapun anda berada, pasti bisa dengar radio tersebut.
contohnya seperti radio dakwah MBS fm nich.. keren khan....

pasang radio ini di blog/ situs sobat

cara pasang:

1. baca basmalah >> masuk dasbor blog >> pengaturan>> tata letak

2. tambah gadget >> html/ java script

3. copy dan paste code pada kolom yang tersedia di atas

4. simpan dan... jadi dech

5. ucap hamdalah...

untuk ukuran, silahkan di modifikasi sesuai keinginan anda

ubah angka width="220" untuk lebar player radio

dan height="90" untuk tinggi player radio

dan rubah http://119.110.87.71:1073 dengan alamat radio kesukaan anda.
kalo bisa sich gak usah di rubah... demi syiar islam

berikut adalah daftar alamat radio streaming yang bisa di akses

http://119.110.87.71:1073 radio MBS FM gresik jawa timur

http://live.radiomadufm.com:8550 Suara Madufm Tulungagung

http://69.73.140.13:8555 Madufm Yaman

http://69.73.186.78:8555 madufm yaman
http://69.73.186.78:1077 MADUFM KAIRO

dan masih banyak lagi link radio streaming yang bisa anda search di google :)

hehehe

kalau streaming tidak berjalan, kemungkinan server radio sedang tidak aktif

Membuat Efek Link Pelangi

2010-12-10T02:28:00.000-08:00

Bismillah
masih seputar masalah mempercantik blog nich.... kali ini yaitu membuat efek link berkedip pelangi. bagi yang belum tahu, link adalah sesuatu yang bisa berupa tulisan yang kalau kita klik, maka kita akan langsung dibawa menuju alamat situs/blog/postingan lain.. nah biar tampilan link lebih menarik, maka kita akan memberi efek pelagi pada link tsb biar lebih menarik.
Cara memasangnya sebagai berikut :
1. pada halaman utama blogger, kamu Pilih Rancangan
2. Edit HTML, beri tanda centang pada Expand Template Widget
3. Cari kode berikut </head>
4. Copy kode dibawah ini dan pastekan diatas kode </head>
<script src='http://h1.ripway.com/pendi05/rainbow.js' type='text/javascript'>
</script>
5. Untuk melihat hasilnya klik pratinjau terlebih dahulu, jika sudah berhasil klik simpan. gampang khaaan...... hehehe
salam sahabat blogger dari santri-one

Membuat Tulisan ʞılɐqɹǝʇ

2010-12-09T22:04:00.000-08:00

assalamualaikum. shobat pernah lihat tulisan yang terbalik nggak???

¿¿¿ʞɐƃ ɐɔɐq ɐsıq ǝɥǝɥǝɥ oooɥlnʇı ıuıƃ ʞɐʎɐʞ ƃuɐʎ uɐsılnʇ

kalo kamu mau bkin yg kayak gtu, caranya gampang, tulis aja teks kamu di kolom pertama di bawah ini, dan hasilnya yang udah kebalik bsa kamu kopi paste untuk blog, facebuk, situs de el el dari kolom bawahnya...

ok selamat mencoba

Original text (type here):

Flip, text, generator, fliped, fliped text,flip text, text flip, fliptext, textflip, upside down, reverse, backwords, upsidedown, write upside down, flip text generator, fliptextgenerator

Generator widget ( grunge heart )

2010-12-07T06:30:00.000-08:00

Assalamualaikum, ketemu lagi nech di blog yang sama, hehehe
semoga aja jangan bosen bosen mampir kesini, apalagi buat sobat yang pingin jalan jalan blogwalking ato sekedar nyari inspirasi. nah buat shobat yang pengen mempercantik tampilan blognya biar tambah cute gtuu...
nech ada satu ( generator widget ) pembuat widget cakep. yang isi tulisannya bisa kamu gonta ganti dengan nama kamu, pesan kamu ato sekedar sapaan buat pengunjung blog kamu...caranya

isi kolom pertama ( heart 1) dan kolom ke dua ( heart 2 ) dengan tulisan kamu,
klik dan drag/geser tulisan yang tampil diatas kolom ke posisi yang tepat.
klik tombol "copy" di pojok
kembali ke blogger. pilih tambah gadget>> html/javascript.
paste kode yang tadi sudah di copy
simpan dan lihat blog kamu... tambah cakep khan...!!! hehehe

salam blogger dari santri-one

Memasang Profil Facebook Di blog

2010-12-05T19:07:00.000-08:00

Bismillah
buat shobat santri-one yang punya blog, sekaligus punya facebook, dan kamu mau pengunjung blog kamu bisa mengenal kamu lebih dekat, knapa gak kita manfaatin aja fasilitas dari facebook yang bernama facebook badge / lencana profil

Terus bagaimana cara membuat lencana facebook tersebut ? Ikuti langkah2 nya d bawah ini :

masuk ke dgn akun facebook sobat

lalu masuk ke profil sobat modif

cari dan klik "Buat Lencana Profil" , posisinya di sebelah kiri pojok bawah profil kamu. ( lihat gambar.. )

lalu klik buat lencana

kemudian atur Tata Letak Lencana sobat modif tersebut. Pilih mendatar atau tegak. Untuk melihat hasilnya , tunggu sebentar hingga lencananya muncul. Untuk Format Lencana, ada 2 pilihan. Yang satu berupa gambar doank, dan yang satunya lagi berupa javascript. Untuk Isi Lencana, sobat modif bisa mengatur sesuai kehendak . Klik Tambah item kalau mau menambahkan isi lencana

jika sudah selesai klik Simpan

maka akan muncul kode lencananya

masuk ke blog. klik tambah gadget. pilih html/javascript dan copy lalu paste kode pada kolom yang tersedia.

simpan gadget, dan jadi dech... gampang khan....... hehehe

hasil penampakan setelah di simpan di gadget adalah seperti ini nech... hehehehe keren khan....

sekian dulu yach... semoga bermanfaat.
wassalam... salam blogger dari santri-one

Cara membuat Teks/ Tulisan Berjalan

2010-12-05T18:17:00.000-08:00

Bismillah

How are you?? kaifa haaluk?? gimana kabarnya?? pasti baik2 aja khan..?? nah buat kamu yang ingin otak atik blog biar lebih menarik lagi ( bukan narik becak lho yach.. hehehe ) maksudnya biar menarik, ini ada sedikit cara yang bisa di praktekin sobat santri-one sekalian. yaitu dengan membuat teks berjalan atau dalam bahasa pemrogaman, ini disebut dengan teks marquee.
teks berjalan ini berguna untuk membuat teks yang kamu pasang di sidebar maupun posting, bisa menjadi lebih ekspresif dan tidak monoton. hehehe
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.

CARA MEMASANG TEKS BERJALAN INI ADALAH:

Copy Kode yang sudah saya sediakan beserta contohnya dibawah.
paste di tempat yang anda inginkan. pada gadget/ posting
ganti kata yang berwarna merah dengan kata2 yang anda inginkan. seperti: puisi, kata mutiara, atau sekedar coret2an...
kalau sudah di ganti, langsung save/ publish dan lihat hasilnya

Agar lebih jelas akan saya sertakan contohnya :

Kode marquee yang bergerak sesuai gerakan yang kita inginkan:

<MARQUEE align="center" direction="right"

height="200" scrollamount="2" width="30%">

jalan jalan dari kanan ke kiri
</MARQUEE>

hasilnya :

jalan jalan dari kanan ke kiri

ganti kata "right" dengan keinginan anda yaitu bisa : left, up, down .

Kode untuk marquee dari perilaku gerakan :

<MARQUEE align="center"

direction="left" height="200" scrollamount="3"

width="70%" behavior="alternate">

marquee menurut perilaku</MARQUEE>

marquee menurut perilaku

Kode marquee dengan variasi hurup dan warna latar belakang :
<div align="left"><FONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">marquee dengan fariasi huru</MARQUEE></b></FONT></div>

hasilnya :

marquee dengan variasi hurup

UNTUK YANG DIBAWAH INI, ADA YANG LAIN, SOALNYA, SAAT MOUSE MELINTAS, MAKA TEKS YANG TADI BERJALAN AKAN BERHENTI. hehehe
kode teks yang berjalan dan berhenti saat mouse melintas,
silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

silahkan tunjuk ke sini</marquee>

hasilnya :

silahkan tunjuk ke sini

kode marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">



<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>



<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>



<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>

</marquee>

hasilnya :

Free Template

Kolom iklan

Kang Rohman

Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Selamat ber eksperimen.
jangan lupa komentarnya yach.....
wassalam... salam blogger dari santri-one

Cara Membuat Menu 3 Tab View

2010-12-04T17:47:00.000-08:00

Bismillah
Menu tab view adalah menu yang bisa menampilakan 2 - 3 halaman atau lebih dalam satu kotak halaman widget sehinga dapat menghemat space pada ruangan side bar blog anda dan yang pasti selain lebih ramping juga tampil cantik. dan bisa menghemat 3 widget di satu tempat.
Tampilannya seperti gambar di bawah ini:

Membuat menu tab view bagi saya gampang-gampang susah. di bilang gampang karena sudah bisa, di bilang susah karna belum nyoba. baiklah tanpa banyak basa-basi lagi yuk langsung praktek aja, ikuti langkah-langkah berikut ini:

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"

2. Kemudian cari kode ini ]]></b:skin>

3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 84px; /* Lebar Menu Utama Atas */

text-align: center;

height: 24px; /* Tinggi Menu Utama Atas */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #999999; /* 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: #1E62B6; /* Warna Font Menu Utama Atas */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FFFFFF; /* Warna background Menu Utama Atas */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #999999; /* Warna border Kotak Utama */

overflow: hidden;

background-color: #FFFFFF; /* 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.

5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

6. Kemudian "Di save"

7. Lalu pergi ke menu "Page Elements"

8. Pilih "Add a Gadget" --> "HTML/Javascript" di tempat yang akan anda letakkan Manu Tab View ini.

9. Inilah script yg harus di pasang :

</div>

<div class="Pages" style="width: 256px; height: 270px;">

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

Keterangan :

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

- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).

- Kode yang berwarna merah adalah isi dari tabview tsb. Anda bisa mengisinya dengan link, gambar, banner, script dll.

- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. tambahkan menu tersebut dibawahnya.

wassalam... salam blogger dari santri-one

Membuat Buku tamu Tersembunyi

2010-12-04T16:50:00.000-08:00

Bismillah
“Membuat Buku Tamu Tersembunyi”,apa maksudnya ya,Untuk lebih memudahkan pemahaman anda coba klik link berikut dan terlihat di pojok kanan ada widget Buku tamu jika anda klik tab warna hijau tersebut,maka Buku Tamunya akan tertarik keluar, selain unik, buku tamu seperti ini juga bisa menghemat tempat pada blog anda...
Untuk Membuat hal seperti itu sebenarnya caranya sangat mudah kok,untuk lebih ngerti lebih baik ikuti aja trik berikut ini sampai akhir,dan tolong berikan komentar anda.OK
sebelumnya, pastikan anda sudah punya buku tamu. yang belum punya, silahkan klik disini
kalau sudah, Berikut langkah-langkahnya

1. Login di blogger dengan ID anda

2. Klik menu Layout

3. Klik Page Elements

4. Klik Add a Page Element

5. Klik ADD TO BLOG pada menu HTML

6.Lalu Copy kode berikut dan Pastekan Pada kotak HTML

<div style="text-align:right">
<a href="http://santri-one.blogspot.com/2010/12/membuat-buku-tamu-tersembunyi.html">
[click here to get it]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

7.ganti tulisan berwarna merah dengan kode buku tamu kamu
8.Save Widget tersebut.
jadinya akan seperti ini

buku tamu tersembunyi

Jika langkah tersebut sudah anda lakukan,anda dapat melihat hasilnya pada blog anda masing-masing

Jika ada pertanyaan,Silahkan tanyakan pada komentar Blog ini wassalam

Logo Text:	pilih modus Logo Style: