 |
| Kindness. Sang kebaikan hati. (senior virtue) |
Hallo!!!! Fathya pulang semuanya.... Maaf nih, jarang nge-post, sebenarnya ada urusan keluarga sih... kemarin pergi ke
ketep pass seharian... kemarin lusa ada urusan keluarga, ditambah internet Fathya habis. (Ini lagi nupang internet kak aisha >w<) Oke lha... yuk langsung aja! Btw, ada yang tahu navigation itu apa? yang gak tahu, Fathya jelasin deh. Tapi click baca selengkapnya dhunk....
WHAT IS NAVIGATION?: Oke, sesuai janji Fathya tadi, Fathya akan jelasin apa itu
Navigation? Nah... Navigation tuh, yang biasanya ada diblog, yang
Home, About, Link, Stuff, Theme. pokoknya yang gitu -gitu deh. Contohnya, yang punya Fathya itu, pas diclick, kita pergi ke halaman lain.
HOW TO MAKE A NAVIGATION?: Nah... Sesuai judul postingan ini. Fathya kasih tahu cara bikin navigation ya? Nah, kalian bisa cari diblog temen kalian tutorial bikin Navigation, kalian ikutin caranya, udah jadi. Trus pas kalian click malah "Halaman yang and cari tidak ada" atau semacamnya kan? Makannya cari tahu dulu dhok! #nadasombongtapicandaguys:v. Oke langsung saja.:
1. click Halaman >> Buat Halaman.
Nah, gitu dulu. Kalian buat judulnya dulu. Contoh: About,: isinya: Nama Fathya, Umur 11, Ttl 1 april 2008, Kelas 1 smp. Pokoknya biodata kalian diposting dihalaman itu.
2. Sudah? click publikasikan. >> setelah click publikasikan, kalian hover postingan About tadi, nanti ada tulisan: edit lihat hapus. kalian click yang Lihat. Lihat-lihat dulu, ada yang salah tulis gak? Kalau ada, kalian edit aja tuh :)
3. kalian click halaman lagi>> buat halaman>> bikin link:
yang mau pake gambar diatasnya. Click :
Google cari aja gambar orang sama sahabatnya (itu yang buat cocok sama judulnya.) boleh semau kalian. Kalau udah, paste.
4. Kalian boleh bikin NAMA NAMAnya dibuat sendiri dengan cara: tulis aja NAMA NAMA NAMA NAMA, nanti yang bilang "Ex-link yuk!" kalian balas "yuk" dulu aja :p. Nanti, tulisan NAMA NAMA NAMAnya diganti nama yang coment tadi, selesai! Atau kalian mau buat yang ucul ucul? kalau mau, cari tutorialnya aja. Boleh pake yang kayak Fathya, dengan cara:click stuff milik Fathya, cari aja "tutorial membuat linkies like me" (kalau gak salah judulnya gitu :v ) ikutin aja tutonya.
5. Buat lha Stuff, Theme, dll.
FOUR NAVIGATION STYLE: Oke, Ini ada tutonya:
<style>
.tablo{
font-size:12px;
color:black;
text-transform:uppercase;
background:#FFF9FA;
font-family:century gothic;
text-decoration:none;
padding:3px;
width: 50px;
display:inline-block;
border:1px solid #FFE3E6;
margin-top: 5px;margin-bottom: 5px;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tablo:hover {
background:#FFC6CF;
color:white;
}
</style>
<center>
<div style="background: #FFEBED;width:260px;border: 2px solid #FFEEEE;margin-bottom:7px; margin-top:7px;box-shadow:0px 2px 2px 2px #ffeeee;border:3px solid #ffffff;">
<a class="tablo" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">About</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="tablo" href="http://kawaiilady.blogspot.com/">Linky</a>
</div>
</center>
Style number two :
<style>
.haha{
width:60px;height:40px;
box-shadow:0px 0px 2px 3px #FFE9C6;
background:#FFF9E1;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#888888;
display:inline-block;
-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;
padding-bottom:5px;
padding-top:20px;padding-left:0px;padding-right:0px;
display:inline-block;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.haha:hover{
background:#FFFFFF;
color:#777;
border-top-right-radius: 35px;
-webkit-transform: rotate(-50deg) ;
-moz-transform: rotate(-50deg) ;
-o-transform: rotate(-50deg) ;
-ms-transform: rotate(-50deg) ;
}
</style>
<center>
<a class="haha" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="haha" href="http://kawaiilady.blogspot.com/">About</a>
<a class="haha" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="haha" href="http://kawaiilady.blogspot.com/">Linky</a>
</center>
<style>
.lola{
width:51px;height:35px;
padding-top:17px;
text-transform:uppercase;
border: 1px solid #E7F4FF;
background:#EFF8FF;
font:12px century gothic;
text-align:center;
Text-decoration:none;
color:#333333;
display:inline-block;
-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;
margin:5px;margin-bottom:20px;
display:inline-block;
border-radius: 100%;
}
.lola:hover{
background:#FFFFFF;
color:#FFFFFF;text-shadow:0px 37px 0px #333333;
-webkit-transform: rotate(-360deg) ;
-moz-transform: rotate(-360deg) ;
-o-transform: rotate(-360deg) ;
-ms-transform: rotate(-360deg) ;
}
</style>
<center>
<a class="lola" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">About</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="lola" href="http://kawaiilady.blogspot.com/">Linky</a>
</center>
Style number 4 :
<style>
.leaf {
width:45px;height:30px;
padding-top:15px;
text-transform:uppercase;
border: 3px solid #E2FFD5;
background:#E8FFE1;
font:11px century gothic;
text-align:center;
Text-decoration:none;
color:#333333;
display:inline-block;
-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;
margin:3px;
display:inline-block;
border-radius: 100%;
border-top-right-radius:0px;
}
.leaf:hover{
background:#FFFFFF;
color:#000000;
border: 3px solid #E8FFE1;
background:#E2FFD5;
border-top-right-radius:100%;
border-bottom-left-radius:0px;
}
</style>
<center>
<div style="width:240px;padding:5px;background:#FFFCF2;box-shadow:0px 0px 2px 3px #FFF9E7;border:2px solid #ffffff;">
<a class="leaf" href="http://kawaiilady.blogspot.com/">Home</a>
<a class="leaf" href="http://kawaiilady.blogspot.com/">About</a>
<a class="leaf" href="http://kawaiilady.blogspot.com/">Stuff</a>
<a class="leaf" href="http://kawaiilady.blogspot.com/">Linky</a>
</div>
</center>
No comments:
Post a Comment