Blue Bloggies


Disclaimer


Hello, everyone! Welcome to My Blue Blog ~.^ I know your IP. Your IP is: See? I know your IP, so dont open my Page Source. I see if you open my Page Source. Okay, thanks for visiting My Blog, enjoy ^.^ Follow me, please ^.^ Thanks!
If you dont like my blog or hate my blog, click here.

 Friend(s)


Chat Box


Secret Box


U Z M A
This is the Secret Box. You click one of U, Z, M, or A, you'll get one suprise ;)

Credits

© 2014 -
Skins by Me, Uzma
Basecode from: Kiya and Salsa
Others by: B L U E
Cara Membuat Secret Box
Jumat, 04 Juli 2014 | 7 Kawaii Blue (s)


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!
 
 
 
 
 
 


 
 


Blogger Nazwa Smart mengatakan...

Uzma kuuuuuu. Aku ngertiiiiiiii. Maacih Uzma ku cayaaaaaaaang. Liat deh Nazwa-blogging.blogspot.com. Maaf ganti skins nih, soalnya kata saudara ku skins nya itu yang aku edit - edit bagus, cuman aku ngedit nya ribet, jadi letak ask.fm sm C-box nya agak aneh. Tapi semua yg kamu kasih aku pakai kok ^^ Minta code banner waktu itu dong, Uzma! Kamu aku masukin credit! Karena nge bantuin aku melulu ^^

 
Blogger Oppy Andarista mengatakan...

aku belum ngerti aku sudah coba tapi gagal...

 
Blogger Benazier Uzma mengatakan...

@Nazwa: Thanks... Jarang banget ada anak yang ngerti tutorial ini, soalnya tutorial itu sulit dipahami, karena memang buat secret box itu agak sulit...
@Rista: Bisa, kok... Kadang2 beberapa blog ga bisa karena sidebarnya sudah penuh... Tapi kamu kayaknya ga penuh... Bisa, kok... Sulit dimengerti, ya?

 
Blogger iCHA Chan mengatakan...

thanks Uzma! tapi aku gak terlalu ngerti >>sorry<<

 
Blogger Hanna Nabila mengatakan...

cara edit secret box nya gimana sih uzma ? aku gak ngerti

 
Blogger raissa puteri mengatakan...

Uzma ini Aku Nayyara ngerti kok ^^ cuma kayaknya kamu agak berbelit2 menjelaskan nya *sorry*

 
Blogger Fahmi Fanirius mengatakan...

Wah. Unik. Jarang banget loh, tutorial kaya gini... Kunjungan baliknya ya... :) www.fahmifanirius.ga

 

Posting Komentar


Newer Post
Older Post