Reload Profile Tutobies Friends Skins Req Here

Sabtu, 29 Juni 2019

Tutorial Membuat Navigation #4

Hai guys! :D
Maafkan Angel karena enggak ngepos selama beberapa hari. Semua itu disebabkan sinyal yang tidak mendukung :") . Oke, sekarang aku mau ngasih tutorial lagi. Kali ini tentang membuat navigation. Navigation itu adalah menu tab berupa home,about,friends, dsb yang biasanya terdapat dalam sebuah blog. Oh iya, sebelumnya aku pernah ngepos tutorial membuat navigation di blog. Namun stylenya lain dengan yang kali ini! :D . Kalau kalian penasaran, cek aja halaman stuff di blogku ini :3 . And yeah, let's click next!
Ikuti aja cara-cara berikut:
Untuk denim dan simple template

  • Buka blogger
  • Pilih menu Tata Letak
  • Lalu klik Tambahkan Gadget
  • Pilih yang HTML/Javascript
  • Copas kode di bawah (ntar aku kasih kodenya, slow aja:v)
Untuk blogskin
  • Buka blogger
  • Pilih menu Tema
  • Copas kode di bawah, lalu letakkan di bawah kode </style>
Nih kodenya guys

<style>
a.fla {
color: white;
width:100px;
background: mistyrose;
font-family: 'delius', cursive;
font-size: 25px;
text-align : center;
padding: 3px;
border-radius: 70px 20px / 20px 70px;
margin:1px;
display: inline-block;
cursor:pointer;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
-webkit-transform: rotate(7deg) ;
-moz-transform: rotate(7deg) ;
-o-transform: rotate(7deg) ;
-ms-transform: rotate(7deg);
}
a.fla:hover {
background: white;
color: mistyrose;
border: 1px dashed mistyrose;
border-radius: 20px 70px / 70px 20px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
-webkit-transform: rotate(-7deg) ;
-moz-transform: rotate(-7deg) ;
-o-transform: rotate(-7deg) ;
-ms-transform: rotate(-7deg);
}
a.mam {
color: #fff;
width:120px;
background: blue;
font-family: 'delius', cursive;
font-size: 25px;
text-align : center;
padding: 3px;
margin:1px;
display: inline-block;
cursor:pointer;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
-webkit-transform: rotate(-2deg) ;
-moz-transform: rotate(-2deg) ;
-o-transform: rotate(-2deg) ;
-ms-transform: rotate(-2deg);
}
a.mam:hover {
background: white;
color:blue;
border: 1px dashed blue;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
-webkit-transform: rotate(2deg) ;
-moz-transform: rotate(2deg) ;
-o-transform: rotate(2deg) ;
-ms-transform: rotate(2deg);
}
</style>
<center>
<a class="fla" href="link"  />name</a>
<a class="mam" href="link" />name</a>
</center>

Setelah itu,dimodifikasi aja:3! Semoga bermanfaat yak! 
Credit: Kak Nanda
By the way, kalian bosen gak aku ngepos tutorial mulu? aku rasa jawabannya iya:v . Makanya, minggu depan bakalan ada pos yang berbeda dari yang sebelumnya aku pos di blog ini! Apakah itu? tunggu aja hehe *senyum misterius* . Makanya, jangan lupa follow blogku guys! biar gak ketinggalan pos terbaruku :) . Okay, see you next time!

3 komentar:

1. Jangan gunakan kata-kata kotor atau porno!
2. Jangan mempromosikan barang di komentar!
3. Komentar harus berhubungan dengan pos!