CARA MEMBUAT MENU MULTI TAB DI BLOG...

...Menjawab pertanyaan dari Sobat Sigit Super... " oia gan caranya buat daftar isi kaya bung book online gimana?ajarin lagi dong.cz kemarin aku nyoba dengan tak contek di view page source malah eror " ..baiklah kalau begitu akan saya bahas melalui posting ini..

...Menu Multi Tab ini biasanya digunakan pada blog yang kontennya sudah padat.. jadi bisa menghemat ruang .. 3 in 1 widget jadinya...tinggal klik tabnya saja untuk berpindah-pindah ke isi menu tab berikutnya... didalam widget multi tab ini pada tiap-tiap tab-nya bisa kamu sematkan kode script Buku Tamu (Tab 1), Kode script Daftar isi (Tab 2), dan Kode Script Blogroll (Tab 3) atau terserahlah sesuai keinginan kamu...

Demo

...Pahami langkah-langkah cara membuatnya berikut ini ;

A. Menyisipkan Kode Script Menu Multi Tab di Kode HTML Template Blog

1. Seperti biasa.. Login ke Blogger > Rancangan > Edit HTML ( Biasakan centang expand template widget )..
2. Lalu Copy kode script dibawah ini...

/*----MULTItab----*/
div.TabView div.Tabs
{
height: 35px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
background-color: #56FCFA;
-moz-border-radius:10px 0px 0px 0px;
width: 125px;
text-align: center;
height: 35px;
padding-top: 3px;
vertical-align: middle;
border: 0px solid #999999;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #56FCFA;
text-shadow: 4px 4px 4px #aaa;
font-size:12px;
}
div.TabView div.Pages
{
clear: both;
border: 0px solid #999999;
-moz-border-radius:0px 0px 0px 10px;
text-shadow: 4px 4px 4px #aaa;
font-size:14px;
overflow: hidden;
background-color: #56FCFA;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/*----end----*/

3. Dan Paste kan sebelum kode ]]></b:skin> ...seperti contoh dibawah ini...

/*----MULTItab----*/
div.TabView div.Tabs
{
height: 35px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
background-color: #56FCFA;
-moz-border-radius:10px 0px 0px 0px;
width: 125px;
text-align: center;
height: 35px;
padding-top: 3px;
vertical-align: middle;
border: 0px solid #999999;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #56FCFA;
text-shadow: 4px 4px 4px #aaa;
font-size:12px;
}
div.TabView div.Pages
{
clear: both;
border: 0px solid #999999;
-moz-border-radius:0px 0px 0px 10px;
text-shadow: 4px 4px 4px #aaa;
font-size:14px;
overflow: hidden;
background-color: #56FCFA;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/*----end----*/
]]></b:skin>

4. Kembali ke Wigdet Edit HTML... Copy lagi kode dibawah ini...

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

5. Paste kan lagi sebelum kode </head> ...seperti contoh dibawah ini...

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

</head>

6. Jika sudah selesai dan benar, sesuai dengan langkah-langkah diatas.. maka klik Simpan Template...


B. Menambahkan Widget Menu Multi Tab di Elemen Halaman Blog

1. Blogger > Rancangan > Elemen Halaman > Tambah Gadget > HTML/Javascript... ( Silahkan letakan widget Menu Multi Tab ini di bagian halaman blog yang kamu inginkan )...
2. Lalu Copy kode script dibawah ini...

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 80;text-shadow: 4px 4px 4px #aaa;font-size: 12px;">
<a>GANTILAH NAMA MENU TAB 1 INI</a>
<a>GANTILAH NAMA MENU TAB 2 INI</a>
<a>GANTILAH NAMA MENU TAB 3 INI</a>
</div>
<div class="Pages" style="width: 465px; height: 250px;">

<div class="Page">
<div class="Pad">
ISI MENU TAB 1 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

<div class="Page">
<div class="Pad">
ISI MENU TAB 2 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

<div class="Page">
<div class="Pad">
ISI MENU TAB 3 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

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

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

3. Jika sudah.. Simpan & Refresh blog kamu untuk melihat hasilnya...

...Menghemat Ruang Blog...

CARA MEMBUAT KATA SAMBUTAN, KATA PENUTUP & KATA PERTANYAAN DI BLOG...

...Menjawab lagi pertanyaan dari sobat Cerita Dewasa lagi... "Bagaimana caranya (cara pasang + scriptnya) kalo blog kita ada pengunjung, trus pengunjung tersebut mau keluar(close) dari blog kita, secara otomatis blog kita ngeluarin pertanyaan (kata-kata apalah...) pada saat blog kita di tutup ? "... maaf sob.. baru saya jawab pertanyaan kamu sekarang dikarenakan adanya kesibukan dalam 1 minggu terakhir ini diluar dunia maya..

...Disini juga akan saya bahas Cara membuat kata sambutan & Cara membuat kata penutup... trik ini menggunakan javascript.. kata-kata ini akan muncul dengan pop-up window pada saat ada yang berkunjung ke blog ataupun meninggalkan blog kita.. yang perlu kamu lakukan hanya Copy-Paste Javascript -nya dan ubah kata-katanya sesuai keinginanmu..

...Oke Langsung saja ya, simak caranya berikut ini ;

A. Cara membuat Kata Sambutan di blog

1. Login di Blogger > Rancangan > Edit HTML ( Centang saja Expand Template Widget )...
2. Lalu Copy Javascript dibawah ini..

<SCRIPT language='JavaScript'>alert("WELCOME TO ECAKNYO BLOG! FIND TUTORIAL THAT YOU WANT AND DO NOT FORGET GIVE COMMENTS!");</SCRIPT>

Ket : ...Gantilah kata-kata yang berwarna biru sesuai keinginan kamu..

3. Paste kan di atas kode </head> seperti contoh dibawah ini..

<SCRIPT language='JavaScript'>alert("WELCOME TO BLOG ECAKNYO! FIND TUTORIAL THAT YOU WANT AND DO NOT FORGET GIVE COMMENTS!");</SCRIPT>
</head>

4. Simpan template & refresh blog kamu untuk melihat hasilnya...


B. Cara membuat Kata Penutup di blog

1. Login di Blogger > Rancangan > Edit HTML ( Centang saja Expand Template Widget )...
2. Lalu Copy Javascript dibawah ini..

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('MAU KEMANA SOBAT.. UDAHAN YA BACANYA.. KOMENTARNYA SUDAH KAN ?.. NANTI KEMBALI LAGI YAA.. ^_^" ');
}
parent.window.onunload=goodbye;

</script>

Ket : ..Gantilah kata-kata yang berwarna biru sesuai keinginan kamu..

3. Paste kan di atas kode </head> seperti contoh dibawah ini..

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('MAU KEMANA SOBAT.. UDAHAN YA BACANYA.. KOMENTARNYA SUDAH KAN ?.. NANTI KEMBALI LAGI YAA.. ^_^" ');
}
parent.window.onunload=goodbye;

</script>
</head>

4. Simpan template & refresh blog kamu untuk melihat hasilnya...

ATAU....

C. Cara membuat Kata Sambutan Berupa Pertanyaan di blog

1. Login di Blogger > Rancangan > Edit HTML ( Centang saja Expand Template Widget )...
2. Lalu Copy Javascript dibawah ini..

<script type="text/javascript">
var question = prompt("APA KABAR GAN..? MAU BACA-BACA & KASIH KOMENTAR KAN ?", " ");
</script>

Ket : ..Gantilah kata-kata yang berwarna biru sesuai keinginan kamu..

3. Paste kan di atas kode </head> seperti contoh dibawah ini..

<script type="text/javascript">
var question = prompt("APA KABAR GAN..? MAU BACA-BACA & KASIH KOMENTAR KAN ?", " ");
</script>
</head>

4. Simpan template & refresh blog kamu untuk melihat hasilnya...


D. Cara membuat Kata Penutup berupa Pertanyaan di blog

1. Login di Blogger > Rancangan > Edit HTML ( Centang saja Expand Template Widget )...
2. Lalu Copy Javascript dibawah ini..

<script type='text/javascript'>
// goodbye alert
function goodbye(){
var question = prompt("MO KEMANA GAN..? NTAR BALIK LAGI YAA.. JAWAB DONG ?", " ");
}
parent.window.onunload=goodbye;

</script>

Ket : ..Gantilah kata-kata yang berwarna biru sesuai keinginan kamu..

3. Paste kan di atas kode </head> seperti contoh dibawah ini..

<script type='text/javascript'>
// goodbye alert
function goodbye(){
var question = prompt("MO KEMANA GAN..? NTAR BALIK LAGI YAA.. JAWAB DONG ?", " ");
}
parent.window.onunload=goodbye;

</script>
</head>

4. Simpan template & refresh blog kamu untuk melihat hasilnya...

ATAU YANG SEPERTI INI...

E. Cara membuat Kata Sambutan Secara Beruntun di blog

1. Login di Blogger > Rancangan > Edit HTML ( Centang saja Expand Template Widget )...
2. Lalu Copy Javascript dibawah ini..

<SCRIPT language='JavaScript'>alert("Halo Bro ! ");alert("WELCOME TO BLOG ECAKNYO!FIND TUTORIAL THAT YOU WANT AND DO NOT FORGET GIVE COMMENTS!");alert("Silahkan Mulai Membaca Sob...");</SCRIPT>

Ket :
> Gantilah kata-kata yang berwarna biru sesuai keinginan kamu..
> Tambah / Kurangi kata-katanya sesuai keinginan kamu..
> Bisa juga kamu masukan kata Pertanyaan...
> Contoh Kata Sambutan Beruntun di atas juga bisa kamu terapkan di Kata Penutup...
> Tapi hati-hati kata beruntun ini bisa buat jengkel sobat blog kita karena mau confirm "ok" melulu.. :))

3. Paste kan di atas kode </head> seperti contoh dibawah ini..

<SCRIPT language='JavaScript'>alert("WELCOME TO BLOG ECAKNYO! ");alert("FIND TUTORIAL THAT YOU WANT AND DO NOT FORGET GIVE COMMENTS!");alert("Silahkan Mulai Membaca Sob...");</SCRIPT>
</head>

4. Simpan template & refresh blog kamu untuk melihat hasilnya...

..Contohnya ada disini > eksperimen284

..Silahkan Mencoba..

CARA MEMBUAT EXPLORER D-TREE...

.... Kali ini sobat blogger yang bertanya adalah Cerita-Dewasa "brooo,, kalo pengin daftar isi kayak yang paling atas gimana caranya??? itu tuu... yang open all ? " ... memang sudah ada beberapa yang tanya seperti ini karena melihat tampilan Menu D-Tree di blog ini.. Sebenarnya malas banget kalau membahas trik yang satu ini karena pembahasannya panjang..fiiuuh.. tetapi akan saya buat sesederhana mungkin sobat..biar kalian paham.. jika kalian telah paham maka akan lebih mudah untuk mengubah-ubahnya tampilannya seperti kemauan kalian sendiri :)

...Explorer D-Tree yaitu menu berantai yang mirip seperti window explorer.. tampilannya yang sepertinya sederhana dan ringkas tetapi sebenarnya bisa mencakup isi yang terdapat dalam blog kita... terus bisa juga kita atur lagi Menu D-tree secerdik kita..tetapi menu ini daftar isinya harus dilakukan secara manual.. :D hehe

...Langsung saja simak caranya berikut ini ;

Tahap A - Copy Paste Js Explorer D-Tree ke dalam kode HTML Template Blog
1. Login ke blogger > rancangan > Edit HTML ..klik Expand Template Widget (dibiasakan)
2. Cari kode html " </head> " lalu letakan kode JS dibawah ini diatasnya ( dibawahnya juga tidak apa-apa) ;

<link href='http://sites.google.com/site/ecaknyo/blog/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://sites.google.com/site/ecaknyo/blog/dtree_ecaknyo.js' type='text/javascript'/>

Contohnya seperti dibawah ini ;

<link href='http://sites.google.com/site/ecaknyo/blog/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://sites.google.com/site/ecaknyo/blog/dtree_ecaknyo.js' type='text/javascript'/>

</head>

3. jika sudah lalu klik Simpan Template...


Tahap B - Copy Paste kode Menu D-Tree ini di Gadget HTML/Java Scripts
4. Rancangan > Elemen Halaman > Tambah Gadget > HTML/Js.. terserah mau kamu letakan dimana Gadgetnya.. aturlah sesukamu.. :)
5. Copy-paste kode dibawah ini..

<div class="dtree">

<p><a href="javascript: d.openAll();"><img src="http://sites.google.com/site/ecaknyo/blog/plus.gif" /><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://sites.google.com/site/ecaknyo/blog/minus.gif" /><b>Close all</b></a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Home','http://ecaknyo.blogspot.com');

d.add(2,0,'Arsip Lainnya')

d.add(3,2,'Antivirus','');
d.add(10,3,'Download PcMAV Antivirus','http://ecaknyo.blogspot.com/2009/08/download-pcmav-antivirus.html');
d.add(20,3,'Cara Update Manual Avira Antivir Personal Edition','http://ecaknyo.blogspot.com/2009/08/cara-update-manual-avira-antivir.html');
d.add(30,3,'Cara Update Manual Avast Home Edition','http://ecaknyo.blogspot.com/2009/08/cara-download-update-database-virus.html');
d.add(40,3,'Cara Update Manual AVG Free Edition','http://ecaknyo.blogspot.com/2009/08/cara-update-avg-free-edition-update.html');

d.add(4,2,'Dak Seru','');
d.add(10,4,'Inilah Robot2 yang Akan Membantu Manusia Di Masa Depan','http://ecaknyo.blogspot.com/2009/09/inilah-robot2-yang-akan-membantu.html');
d.add(20,4,'Kecelakaan Kendaraan yang Hebat','http://ecaknyo.blogspot.com/2009/09/apakah-yang-terjadi-kok-bisa-sampai.html');
d.add(30,4,'Mobil2 yang Amazing','http://ecaknyo.blogspot.com/2009/09/wow-mobil-mobil-ini-amazing.html');
d.add(40,4,'Penemuan2 Alat Terbang','http://ecaknyo.blogspot.com/2009/09/penemuan-alat-terbang.html');
d.add(50,4,'Only For Women','http://ecaknyo.blogspot.com/2009/09/only-for-womenweleh2.html');

d.add(5,2,'Download','');
d.add(10,5,'Simple IP Address Calculator','http://ecaknyo.blogspot.com/2009/09/simple-ip-addres-calculator.html');
d.add(20,5,'TweakNow WinSecret','http://ecaknyo.blogspot.com/2009/09/tweak-windows-pake-aplikasi-tweaknow.html');
d.add(30,5,'Download Photoshop Font','http://ecaknyo.blogspot.com/2009/08/photoshop-font-download-gratis-lengkap.html');
d.add(40,5,'Download Software Gratis','http://ecaknyo.blogspot.com/2009/08/download-software-gratis.html');

d.add(6,2,'Elektro','');
d.add(10,6,'Kemampuan Hantar Arus (KHA)','http://ecaknyo.blogspot.com/2009/08/kemampuan-hantar-arus-kha.html');
d.add(20,6,'Rugi-rugi Daya (P Loss)','http://ecaknyo.blogspot.com/2009/08/rugi-rugi-daya-p-loss.html');
d.add(30,6,'Macam-macam Daya Listrik','http://ecaknyo.blogspot.com/2009/08/macam-macam-daya-listrik.html');

d.add(7,2,'X-Tra Duit');
d.add(10,7,'Kumpul Blogger','http://ecaknyo.blogspot.com/2009/09/gabung-di-kumpul-blogger-dapet-duit.html');
d.add(20,7,'PPCMuslim Adsense','http://ecaknyo.blogspot.com/2009/09/adsense-indonesia-ya-ppcmuslim.html');
d.add(30,7,'AdsenseCamp','http://ecaknyo.blogspot.com/2009/09/adsense-indonesia-ya.html');

d.add(8,0,'Komunitas','','','','http://sites.google.com/site/ecaknyo/blog/Globe.gif');
d.add(10,8,'Komunitas Blogger Palembang','http://palembang-blogger.blogspot.com/','','','http://sites.google.com/site/ecaknyo/blog/Icon_User.gif');
d.add(20,8,'Komunitas Blogger Sumatera','http://andalas-comunity.blogspot.com/','','','http://sites.google.com/site/ecaknyo/blog/Icon_User.gif');
d.add(30,8,'Politeknik Negeri Sriwijaya','http://www.polisriwijaya.ac.id/','','','http://sites.google.com/site/ecaknyo/blog/Icon_User.gif');
d.add(40,8,'Universitas Negeri Sriwijaya','http://www.unsri.ac.id/','','','http://sites.google.com/site/ecaknyo/blog/Icon_User.gif');

document.write(d);

//-->
</script>

</div>

Panduan :
Merah = Gantilah dengan alamat url blog kamu..
Biru = Gantilah dengan nama Folder Arsip kamu..
Pink = Gantilah dengan nama Judul Posting kamu..
Orange = Gantilah dengan url posting blog kamu yang berhubungan dengan judul posting tersebut..

Keterangan :
d.add(0,-1, = Link Utama Url Utama Blog " Home "..dimulai dari " 0,-1 " ..dst
|
|
d.add(2,0, = Link Kedua berupa Folder " Arsip Lainnya ".. dimulai dari " 2,0 "..dst
|
+---- d.add(3,2, = Link Ketiga Folder " Antivirus " dimulai dari " 3,2 "..dst..
|
+------- d.add(10,3, = isi dari Folder Antivirus... dimulai dari " 10,3 "..dst...

6. Jika sudah selesai ..kLik Simpan Gadget.. lalu refresh blog kamu dan lihatlah hasilnya.. ;)

Note :

> Sengaja tidak saya buat penjelasan yang lebih rinci.. takutnya nanti kalian malah tambah bingung.. pahami saja langkah-langkah diatas.. saya yakin kalian bisa.. dengan begitu kalian akan mengerti sendiri..

> Pakailah dulu alamat url file .Js dan url icon Menu D-Tree saya.. jika Menu kalian sudah sempurna ..baru kalian bisa ganti dengan url file .Js dan url Icon D-Tree kalian sendiri.. Simpan Saja di Google site..

... Susah2 Mudah ya ...

CARA MEMBUAT BUKU TAMU MELAYANG...

Repost... berhubung ada yang tanya lagi dan telah saya beri petunjuk kalau ada di dalam daftar tutorial blog..coba dicari lagi tapi katanya tidak ada ??..setelah saya lihat eh ternyata judulnya bukan buku tamu melayang melainkan CaRa BuaT WidGet MELAYANG di BLoG.. .. jadi wajar saja sobat blogger pada bingung?? cari di daftar tutorial blog saya ini tapi malah tidak ketemu..dan akhirnya malah tanya lagi.. tanya lagi ?... hehehe.. sory ya :))

...Buku Tamu Melayang yaitu widget/gadget buku tamu yang seolah-olah melayang diatas halaman blog kita..yang memakai tab dengan tulisan buku tamu kalau mau ditampilkan kita klik tab buku tamunya maka buku tamunya akan muncul.. Contohnya seperti disini > websiteecak2.blogspot.com

..Oke ..langsung saja simak caranya berikut ini :

1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

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

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FFFFFF;
background:#FAFD03;
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">

PASTE KODE BUKU TAMU DISINI YAA...

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

Keterangan :

Merah = Gantilah dengan kode Scripts Widget Buku Tamu yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..

border = Memberi warna pada border konten...aturlah/ubahlah warnanya jika mau.. misalnya FAFFFF (sebaiknya gunakan pencari kode warna Photoshop)
background = Memberi warna pada isi konten.. disini saya menggunakan warna kuning

4. Simpanlah Widget Melayang ini... Selesai.. namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. Untuk melihat hasilnya silahkan Refresh blog kamu.. Mudahkan.. ;-)

Note :
> Width (Lebar) di kode scripts buku tamunya diatur "190" yaa.. ( width = 190 ) ..agar tampilan tab buku tamunya pas... kecuali kalau kamu ingin tampilan buku tamunya agak kelihatan sedikit... ya bisa diatur > 190 lebarnya..
> Biasanya jika sudah ada widget melayang lainnya diblog kamu kemungkinan bisa menyebabkan error..

..Mari di isi Buku Tamunya yaa !!..

CARA MEMBUAT LINK YANG DI MOUSEOVER MENJADI BESAR....

... Menjawab pertanyaan sobat Sigit Super .. dia tanya begini "oia btw cara buat link biar jadi besar gimana gan?maksudnya kalo mouse dideketin ke link, terus tulisan link jadi besar ? " ..Trik ini sebenarnya trik lawas alias trik dasar tetapi memang membuat tampilan link blog kita menjadi lebih hidup...

Mau Linknya menjadi BESAR !!!... Simak caranya dibawah ini ;

1. LOginlah di blogger > Tata letak > Edit HTML > di Edit Template kamu Centang Expand Widget Template.. akan tetapi Copas-lah terlebih dahulu Kode HTML Template kamu di Notepad jika nanti kamu ingin mengembalikan lagi tampilan blogmu seperti semula..

2. Cari kode HTML " a:hover " seperti gambar dibawah ini.. lihat pada bagian yang saya beri kotak merah...
3. Aturlah ;
color = aturlah warna yang kamu inginkan pada saat link disorot.. Panduan > CaRa MeLihat Kode WarNA UnTuk BLoG...
font-size = aturlah berapa besar huruf link yang kamu inginkan pada saat link disorot..
font-style = aturlah style huruf yang kamu inginkan.. mau arial / comic / forte dan sebagainya..

4. Jika sudah kLik Simpan TempLate.. Selesai... Refresh Blog kamu.. dan lihatlah hasilnya..

Dan..

Note : Bagi yang TempLate Blog nya yang pada bagian "a:hover" tidak dilengkapi dengan kode HTML color, font-size, font-style kamu tinggal Copy kodenya berikut ini...

color:#5D3EFD;
font-size:22px;
font-style:italic;

dan Paste-kan ditengah-tengah " a:hover{ "seperti contoh dibawah ini ;

a:hover{
color:#5D3EFD;
font-size:22px;
font-style:italic;}

..Paham yaa.. lalu klik Simpan Template..

...Mudah Bukan...

CARA MEMBUAT SPOILER..... SHOW & HIDE BUTTON...

..Cara membuat spoiler ini ada yang tanya tapi saya lupa siapa yang tanya.. maaf ya jadinya nama blog kamu tidak bisa saya tampilkan di artikel ini.. mungkin sudah banyak sobat blogger yang sudah mengerti memposting trik ini.. tapi berhubung ada sobat yang tanya ke saya.... oke deh.. kita bahas lagi disini...

...Langsung ke intinya .. Spoiler ini digunakan untuk menghemat ruang pada artikel/tampilan blog kita karena kemampuannya yang bisa menyembunyikan dan menampilkan kembali widget/gambar/kalimat..

...Simak caranya berikut ini.. :

1. Copas Kode Script Spoiler dibawah ini ;
2. Terserah ini Spoiler mau diletakan di artikel atau di widget/gadget...

<div style="margin: 5px 20px 10px;" align="center">
<div class="smallfont" style="margin-bottom: 2px;"> <input value="Show" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

PASTE KODE SCRIPT YANG INGIN DI SEMBUNYIKAN DISINI YA

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

Ket :
align = untuk merubah posisi spoiler tengah/kiri/kanan
border = untuk memberi garis kotak pada spoiler
show/open = nama pada tombol spoiler bisa kamu ubah-ubah

3. Aturlah Sesuai dengan keinginan kamu.. lalu Simpan..

a. Contoh Spoiler Gambar dengan Border = 1px

...ini Spoiler dengan border biasa (border = 1px) .. untuk menghilangkan bordernya jadikan border = 0 px

b. Contoh Spoiler Gambar tanpa border alias 0px...

c. Contoh Spoiler Gambar dengan border alternatif...

Dan ini Contoh SpoiLer yang digunakan pada Widget > eksperimen284.blogspot.com

..Selamat Mencoba..