That's Uzma's Profile

Hi! Mau post Tuto lagi... Tuto kali ini agak sulit, o ya, tuto ini di request oleh 4 orang (wiiih), yaitu Lion, Rista, Nazwa, dan Nayyara.  Simak baik-baik, ya.... Re-post? Credit + Link to me!
1. Log in ke Akun Blogger. 2. Klik Template. 3. Lihat code-codemu. Biasanya kan ada kode kayak gini:

body { background:url(url background); background-attachment: fixed; font-family: font; font-size: 12px; text-align: left; cursor:url(url cursor),auto; }

Nah, bawahnya kan biasanya ada kayak gini:

a:link,a:visited{

text-decoration:none;

color:kode warna;-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

a:hover{

color:kode warna;

background:transparent;

cursor:url(url hover link),auto;

}

NOTE: Aku nggak tahu, code kalian kayak gitu atau nggak. Tapi biasanya kayak gitu.
Nah, setelah itu, biasanya ada code-code kayak:

.title

atau

.navigate

atau

.sidebar

Dll. Kalau di aku gini:

.link,a.link{

background:#fff;

text-decoration:;

color:kode warna;

padding:5px;

font:11px font;

margin-left:5px;

margin-right:5px;

border: 1px border #eee;

-webkit-transition:All 0.4s ease;

-moz-transition:All 0.4s ease;

-o-transition:All 0.4s ease;

display:inline-block;

width:100px;}

.link:hover,a.link:hover{background:kode warna;

color:#fff;

border: 1px border #eee;

}

Kode-kode lainnya seperti .title, .navigate, .sidebar, juga ada kode-kode yang mirip kayak gitu dibawahnya, kan? Nah, paste kan kode ini dibawah kode }:

.box{background:url(url background kotak secret box);padding:5px;border:2px solid #58FAF4;text-align:center;width:200px;color:#000;}

a:hover{

-webkit-transition: 0.4s;

-moz-transition: 0.4s;

text-decoration:none;}

img{

-webkit-transition: .7s;

-moz-transition: .7s ;

transition: .7s ;

}

Sudah? Lanjut. Lihat kode awal sidebar kamu. Misal:

<div class="tit">D'Owner</div><br>

atau

<div class="h1">D'Owner</div><br>

Dll. Semua blog beda2 codenya. Oke, langsung, ya! Nah, sekarang pastekan kode ini di sidebar kamu. NOTE: Tulisan yang berwarna ungu itu sesuai dengan code sidebar kamu. Misalnya code Disclaimer/D'Owner kamu itu kayak: <div class="h1">D'Owner</div><br> , berarti yang warna ungu itu diganti dengan code h1. Begitu, oke?

<div class="title">Secret Box</div><br>

<br><center><div class="box">

<a class="button" onclick="document.getElementById('wra').innerHTML=document.getElementById('1').innerHTML" >1</a> 

<a class="button" onclick="document.getElementById('wra').innerHTML=document.getElementById('2').innerHTML" >2</a> 

<a class="button" onclick="document.getElementById('wra').innerHTML=document.getElementById('3').innerHTML" >3</a> 

<a class="button" onclick="document.getElementById('wra').innerHTML=document.getElementById('4').innerHTML" >4</a></div>

<div id="wra" style="width:200px;color:#000; padding:5px;border:2px solid #FAEBD7;border-top:none;font-size:11px; letter-spacing:1px;">

<center>This is the Secret Box. You'll get a suprise on it.</center></div>

<div id="1" style="display: none;">

Navigation number 1</div>

<div id="2" style="display: none;">

Navigation number 2</div>

<div id="3" style="display: none;">

Navigation number 3</div>

<div id="4" style="display: none;">

Navigation number 4

<p></div>

<br>

Nah, jadi!!! Oh ya, buatnya disini, ya. Supaya bisa dilihat langsung, jadinya kayak apa. Error atau nggak. Oke, mungkin banyak yang nggak ngerti :p kalau nggak ngerti, comment yaa!!! Semoga kalian mengerti, hehehe :p Oke, sekian!