Hai! Satu jam berlalu, sekarang sudah pukul: 22.22. Fathya mau posting tutorial "3D Flip Navigation Tab". Apa itu Navigation? Yang gak tahu, click ini: https://f47hy4.blogspot.com/2019/08/what-is-navigation-how-to-make.html#more Fathya juga bisa jelasin disini kok! Yuk lanjut! Credit:http://www.giftasblog.co.vu/2017/06/3d-flip-navigation-tab.html#more
Live Preview:
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.
HOW TO MAKE NAVIGATION?: Hmm... caranya tu... Gampang-gampang susah (eh canda :v) Gampang kok, ikutin aja tutonya!~
Step one:
- Blogger >> Layout / Tata Letak >> Add a Gadget >> HTML/JavaScript
Step two:
- Copy this code:
<script src="http://www.google.com/jsapi"></script><script type="text/javascript">// If you have jQuery directly, then skip next linegoogle.load("jquery", "1");function sticky_relocate() {var window_top = $(window).scrollTop();var div_top = $('#nav-anchor').offset().top;if (window_top > div_top)$('#sticky').addClass('nav')else$('#sticky').removeClass('nav');}// If you have jQuery directly, use the following line, instead// $(function() {// If you have jQuery via Google AJAX Librariesgoogle.setOnLoadCallback(function() {$(window).scroll(sticky_relocate);sticky_relocate();});</script>
<center><style>.effect {position: relative;display: inline-block;width:120px;perspective: 180px;margin:8px;}.effect > div, .effect a {border-radius: 70px 20px 70px 20px;border:1px solid #000;font-family:short stack;font-size:16px;text-transform:uppercase;text-align:center;background-color:#FFDDAC;color:#000000;display:inline-block;width:120px;padding:3px;margin-top:3px;margin-bottom:0px;margin-right:3px;margin-left:3px;-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;}.effect a {border-radius: 70px 20px 70px 20px;border:1px solid #000;font-family:short stack;font-size:16px;text-transform:uppercase;text-align:center;background-color:#FFDDAC;color:#000000;display:inline-block;width:120px;height:20px;padding:3px;margin-left:63.5px;-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;}.effect > a {display: block;color:#fff;background-color: #DC143C;width:120px;text-decoration:none;}.effec {position: relative;display: inline-block;width:120px;perspective: 180px;margin:8px;margin-right:20px;}.effec > div, .effec a {border-radius: 20px 70px 20px 70px;border:1px solid #000;font-family:short stack;font-size:16px;text-transform:uppercase;text-align:center;background-color:#FFC5E9;color:#000000;display:inline-block;width:130px;height:20px;padding:3px;margin-top:3px;margin-bottom:0px;margin-left:3px;-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;}.effec a {border-radius: 20px 70px 20px 70px;border:1px solid #000;font-family:short stack;font-size:16px;text-transform:uppercase;text-align:center;background-color:#FFDDAC;color:#000000;display:inline-block;width:120px;padding:3px;margin-left:64px;-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;}.effec > a {display: block;color:#fff;background-color: #DC143C;width:120px;text-decoration:none;}.shutter > div, .shutter a {transition: 0.1s all linear;position: absolute;}.shutter > div {z-index: 100;transform-origin: 0% 0%;}.shutter:hover > div {transform: rotateX(110deg);}
#sticky { background-color: transparent; padding: 0px; width: 100%;}
#sticky.nav { position: fixed; top: 0px; left: 0px; opacity: .5; -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;}
#sticky.nav:hover{ opacity: 1;}</style><div id="navigationbar"><div id="nav-anchor"><div id="sticky"><div class= "effect shutter"> <div>home</div> <a href="http://www.giftasblog.co.vu/">Beranda</a></div><div class= "effec shutter"> <div>the owner</div> <a href="http://www.giftasblog.co.vu/p/about-owner.html">About Me</a></div></div></div></div></center>Lalu, paste! Oh iya, bisa dicoba dulu dan diedit di html editor ini
Step three:
- Save!
Mudah bukan?
No comments:
Post a Comment