Membuat widget Multi halaman/tab view

Dari anda melihat gambar disamping ini saja,anda pasti sudah mengerti apa yang saya maksud dari multi halaman/multi tab tersebut.

Yup! Membuat Widget sederhana yang bertujuan untuk menghemat tempat,sekaligus menambah kerapian dari blog/web tersebut.

Selain itu,pengunjung tidak merasa lelah menaikan maupun menurunkan scrollbar hanya untuk sekedar mencari status dari blog tersebut.

Nah! kesempatan kali ini,akan membahas tentang widget multi tab tersebut.

Sebenarnya sangat sederhana dalam membuat widget bertab-tab ini,untuk yang belum tahu cara membuatnya,anda bisa ikuti lagkah berikut:


Cara Membuat Multi Halaman

Pergilah ke Dashboard,lalu pilih Tata Letak,kemudian pilih Add New Widget/Tambah Gadget/Element Baru,pilih HTML/Javascript.

Letakkan kode berikut:

<style type="text/css">

div.TabView div.Tabs a

{

float: left;

display: block;

width: 80px; /* Lebar Kotak Tab */

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

text-align: center; /* Posisi Teks Menu Tab */

margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */

background-color: #222222; /* Warna background Kotak Tab */

padding-top: 2px; /* Spasi Atas */

border: 1px solid #ffffff; /* Warna border kotak Tab */

border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */

font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */

font-weight: 900; /* Ketebalan Teks kotak tab */

}

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

{

background-color: #736F6E; /* Warna background utama kotak tab */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #cccccc; /* Warna border Kotak Konten */

overflow: hidden;

background-color: #ffffff; /* Warna background Kotak konten */

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 5px; /* Jarak teks dalam kotak content */

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

</style>

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 385px;" class="Tabs">

<a><span style="color:white">TAB 1</span></a>

<a><span style="color:white">TAB 2</span></a>

<a><span style="color:white">TAB 3</span></a>

</div>

<div style="width: 252px; height: 180px;" class="Pages">

<div class="Page">

<div class="Pad">

Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1

</div>

</div>

<div class="Page">

<div class="Pad">

Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2

</div>

</div>

<div class="Page">

<div class="Pad">

Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3

</div>

</div>

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

<script style="text/javascript" src="http://scriptforyou.googlecode.com/files/tabview.js"></script>

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

</script>

Untuk kode yang berwarna hijau, ubahlah dan gantilah sesuai keinginan anda,sedangkan kode yang berwarna merah,hanya sebuah penjelasan dari masing-masing kode.

Sekarang tinggal menyisipkan kode-kode html yang ingin anda letakkan pada masing-masing tab.
Anda bisa meletakkan seperti,kode Shout,Recent Comment,Blogroll dll.
Semoga berhasil ya..

Cara membuat shoutmix tersembunyi

Bagaimana yah caranya membuat buku tamu tersembunyi atau shoutmix tersembunyi, ini dia langkah-langkah dan caranya :
1. Masuk ke account Blogger kamu, pilih Layout; kemudian Page Elements;
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. 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/AVvXsEijqqUJlvOdINaFKZaGaMyqPbJy0Neu00ml_Yl2QZXwiqvMGfzxyRUrTbarQrDldjmBiaB4MeIF_9eHR2dKfH8Zq9Iw-3oPnW8ZIdAcm5Pw3UO56VEK6t5XklVIOIpZ_0h0tkU1qBTOG_v4/') 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/>
<br/>
<a href="http://forantum.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

# Pada kode di atas, cari kode <!-- Ganti ini dengan kode buku tamu kamu --> 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.

Judul blog bergerak atau berjalan

Anda pasti pernah melihat judul suatu blog bergerak atau berjalan dari kiri ke kanan. Judul blog bergerak ini tentunya dapat menarik perhatian pengunjung. Cara membuat judul blog bergerak atau berjalan adalah sebagai berikut :

1. Masuk ke Dasbor
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode

<title><data:blog.pageTitle/></title>

6. Ganti kode tersebut dengan script berikut ini

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=300;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

7. Angka 300 di dalam script tersebut merupakan kecepatan bergeraknya, silahkan ganti sesuai dengan selera anda. Jika anda ganti menjadi 100 atau 200 maka kecepatannya akan bertambah, sebaliknya kecepatan akan berkurang bila diganti menjadi 400
8. Klik Pratinjau untuk melihat apakah sudah ada perubahan sesuai dengan yang kita inginkan
9. Jika sudah oke, klik Simpan Template
10. Selesai

Selamat mencoba, semoga bermanfaat

Solusi java script yg tdk bekerja

Ini adalah solusi apabila efek efek Java Sript anda hilang atau tidak bekerja.Saat yang paling tidak menyenangkan dimana saat file javascript yang kita simpan di host lain mulai kehabisan bandwidth.Blog yang semula terlihat interaktif malah jadi kacau balau khan tampilanya. Yah, inilah salah satu kelemahan blogger karena tidak memberikan kita kapasitas ruang simpan, terutama yang berurusan dengan file javascript. Sebagai alternatif biasanya kita bisa saja meminjam web hosting gratis dari pihak ketiga, sayangnya tawaran yang diberikan ternyata tidak selalu memuaskan. kapasitas simpan yang ditawarkan sih besar, tapi jadi percuma bila kapasitas bandwidth yang diberikan sangat tidak sebanding hehehe. Nah, disini saya coba berbagi tips untuk mengatasi masalah hosting javascript di blogger, mudahan cukup membantu :)

Mengubah format ekstensi file dari .js ke .txt

Ingat, tidak semua javascript dipanggil dengan akhiran .js, ini sebuah keuntungan dimana kita dapat menyimpan dan memanggil file javascript dalam format text yang tersimpan dalam format .txt

Tidak semua layanan free web hosting memberikan keleluasaan bagi kita untuk menyimpan file berformat .js pada hosting mereka, jadi kita dapat mengakalinya dengan cara mengubah extensinya saja, dari .js ke .txt

Cara memanggil javascript berformat .txt pada host lain:

<script type="text/javascript" src="alamat-url-namafile.js" />

Pemanggilan bisa diganti dengan

<script type="text/javascript" src="alamat-url-namafile.txt" />

Simpan Javascript pada element halaman HTML/Blogger Gadget

Tidak semua kode javascript harus di simpan di host lain atau hanya dalam halaman Edit HTML, kita sebenarnya bisa saja memasang kode JS ini langsung pada element halaman blogger "HTML/Javascript". Namun sangat disayangkan cara ini tidak selalu 100% berhasil, karena tidak semua file javascript bisa support dengan penyimpanan pada widget ini. Mungkin hanya berhasil jika code javascript tersebut hanya berdiri sendiri, dalam artian file JS tersebut tidak saling berhubungan dengan memanggil kode yang satu dan kode lainnya.

Simpan code javascript langsung pada halaman EDIT HTML


platform blogger sebenarnya membebaskan kita untuk meletakan langsung kode javascipt pada halaman Edit HTML. Cara ini selalu berhasil saya terapkan, namun kadang tidak terlalu efektif juga bila code javascript yang kita gunakan terlalu panjang code scriptnya. Cara yang terakhir ini menurut saya merupakan salah satu terbaik yang harus dicoba.

Sebelum mencoba cara dibawah, pastikan kita sudah mempunyai code JS yang akan disimpan. Jika rekan masih bingung, kode JS bisa ditemukan langsung dengan mengambil melalui alamat URL. lihat contoh pemanggilan kode dibawah yang tercetak tebal. disitulah biasanya kode JS disimpan.

<script type="text/javascript" src="alamat-url-namafile.js" />

Coba dengan masukan langsung urlnya di browser kalo sudah ketemu tinggal copy saja kodenya.

Agar kode JS yang sebelumnya di host dialamat lain bisa langsung digunakan diblogger, kita bisa langsung menggunakan kode dibawah ini.

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

Semoga saja cara diatas bisa mengatasi masalah kehabisan bandwidth, kalo masih bermasalah ya tinggal gunakan saja Hosting berbayar..beres heheheh

MESSAGE ALERT

MESSAGE ALERT adalah pesan yang dari admin kepada pengunjung website, yang akan muncul ketika blog dibuka. kata yang muncul bisa ucapan salam atau ucapan terimakasih dari admin, misalnya : Assalamu'alaykum, welcome in my blog atau terimakasih telah mengunjungi blog saya.

Nah apabila sobat semua tertarik untuk membuatnya, caranya sangat mudah. kita tinggal sedikit menambah kode java script pada halaman edit HTML di blog kita. ini dia caranya:

1. Okey...sobat, silakan login ke blogger

2. Klik Layot (Tata Letak). Lalu Klik tab Edit HTML

3. Cari kode </head>

4. sudah ketemu kan...??? kalo sudahCopy paste kode dibawah ini diatas kode </head> jangan lupa ganti "PESAN" dengan pesan yang sobat pengen.


=========================================

 <script language="JavaScript">alert("PESAN");</script>
=========================================


5. yang terakhir ini adalah cara yang paling mudah tetapi paling menentukan. Klik Save...hehehe

Membuat kupu-kupu di blog

Ingin tahu gimana caranya membuat kupu kupu terbang di blog. Kayak di blog ini. simaklah tutorial saya berikut ini yaa....

Caranya cukup mudah anda cukup memasukkan java sript untuk memunculkan kupu-kupu indah di blog anda. Baiklah langsung saja akan saya tuliskan cara membuatnya :


1. Login ke Blogger
2. Masuk ke Tata Letak

3. Trus Edit HTML

4. Trus copy-paste kode java script di bawah ini tepat
sebelum kode </head> untuk mempermudah pencarian tekan ctrl+f.

=================================================


   

<script type='text/javascript'>
//<![CDATA[
var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES


//FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!


var floatimages=new Array();
floatimages[0]='http://i363.photobucket.com/albums/oo72/herisys/butterfly.gif';
floatimages[1]='http://i363.photobucket.com/albums/oo72/herisys/butterfly.gif';




//*********DO NOT EDIT BELOW***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);


function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}


function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}


function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}


function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}


function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}


function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}


function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}


function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}


function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}


function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}


function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}


function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}


function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}


if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}


//]]>
</script>

5. Save...buka blog anda dan refresh browser....sekarang ada sesosok binatang yang indah menawan di blog anda....

Apabila anda belum berhasil membuatnya gunakan cara kedua di bawah ini:
1. Login ke Blogger
2. Klik Tata letak
3. Klik Tambah Gadget
4. Pilih HTML/Java Script
5. Masukkan kode Java script seperti di bawah ini.

<script src="http://sites.google.com/site/javascriptnew/java-script/butterfly.js" type="text/javascript">

6. Save.