Cara Menciptakan Hidangan Kafetaria Keren Dengan Efek Whirling (Berputar)
bang2 sutara - Efek whirling (berputar) pada hidangan kafetaria dalam konteks pembuatannya memang tidak jauh berbeda dengan pembuatan jenis hidangan kafetaria atau hidangan navigasi lainnya. Unsur pertama yang harus kalian perhatikan yaitu arahan CSS nya.
Jika kalian menginginkan hidangan kafetaria dengan tampilan elegan yang dilengkapi dengan pengaruh berputar, dalam artikel ini saya akan mencoba menjelaskan bagaimana cara menciptakan hidangan kafetaria pada blog dengan memakai pengaruh whirling (berputar).
Bagi kalian yang ingin mencoba jenis hidangan kafetaria yang lainnya, kalian sanggup membaca dan mempelajari artikel saya yang lainnya pada list dibawah ini :
Baca Juga :
- Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog .
- Cara Membuat Menu Bar Dengan Gaya Slide Responsive .
- Cara Membuat Menu Bar Responsive Scroll Dropdown .
- Cara Membuat Menu Navigasi Simple Dropdown Di Blog .
Cara Membuat Menu Bar Blog Dengan Efek Whirling
- Silahkan kalian masuk ke akun blogger kalian
- Pilih hidangan template atau hidangan theme dan klik tombol edit html .
- Setelah berada di halaman edit html, silahkan kalina cari kode ]]></b:skin>, dan tempelkan arahan dibawah ini sempurna diatas kode ]]></b:skin> .
/*Menubar Efek Berputar*/ .menu, .menu ul { list-style: none; padding: 0; margin: 0; } .menu { height: 58px; } .menu li { background: -moz-linear-gradient(#292929, #252525); background: -ms-linear-gradient(#292929, #252525); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525)); background: -webkit-linear-gradient(#292929, #252525); background: -o-linear-gradient(#292929, #252525); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')"; background: linear-gradient(#292929, #252525); border-bottom: 2px solid #181818; border-top: 2px solid #303030; min-width: 160px; } .menu > li { display: block; float: left; position: relative; } .menu > li:first-child { border-radius: 5px 0 0; } .menu a { border-left: 3px solid rgba(0, 0, 0, 0); color: #808080; display: block; font-family: 'Lucida Console'; font-size: 18px; line-height: 54px; padding: 0 25px; text-decoration: none; text-transform: uppercase; } .menu li:hover { background-color: #1c1c1c; background: -moz-linear-gradient(#1c1c1c, #1b1b1b); background: -ms-linear-gradient(#1c1c1c, #1b1b1b); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b)); background: -webkit-linear-gradient(#1c1c1c, #1b1b1b); background: -o-linear-gradient(#1c1c1c, #1b1b1b); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')"; background: linear-gradient(#1c1c1c, #1b1b1b); border-bottom: 2px solid #222222; border-top: 2px solid #1B1B1B; } .menu li:hover > a { border-radius: 5px 0 0 0; border-left: 3px solid #C4302B; color: #C4302B; } /* submenu styles */ .submenu { left: 0; max-height: 0; position: absolute; top: 100%; z-index: 0; -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; } .submenu li { opacity: 0; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transition: opacity .4s, -webkit-transform .5s; -moz-transition: opacity .4s, -moz-transform .5s; -ms-transition: opacity .4s, -ms-transform .5s; -o-transition: opacity .4s, -o-transform .5s; transition: opacity .4s, transform .5s; } .menu .submenu li:hover a { border-left: 3px solid #454545; border-radius: 0; color: #ffffff; } .menu > li:hover .submenu, .menu > li:focus .submenu { max-height: 2000px; z-index: 10; } .menu > li:hover .submenu li, .menu > li:focus .submenu li { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } /* CSS3 delays for transition effects */ .menu li:hover .submenu li:nth-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .menu li:hover .submenu li:nth-child(2) { -webkit-transition-delay: 50ms; -moz-transition-delay: 50ms; -ms-transition-delay: 50ms; -o-transition-delay: 50ms; transition-delay: 50ms; } .menu li:hover .submenu li:nth-child(3) { -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; -ms-transition-delay: 100ms; -o-transition-delay: 100ms; transition-delay: 100ms; } .menu li:hover .submenu li:nth-child(4) { -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; -ms-transition-delay: 150ms; -o-transition-delay: 150ms; transition-delay: 150ms; } .menu li:hover .submenu li:nth-child(5) { -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .menu li:hover .submenu li:nth-child(6) { -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -ms-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 250ms; } .menu li:hover .submenu li:nth-child(7) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } .menu li:hover .submenu li:nth-child(8) { -webkit-transition-delay: 350ms; -moz-transition-delay: 350ms; -ms-transition-delay: 350ms; -o-transition-delay: 350ms; transition-delay: 350ms; } .submenu li:nth-child(1) { -webkit-transition-delay: 350ms; -moz-transition-delay: 350ms; -ms-transition-delay: 350ms; -o-transition-delay: 350ms; transition-delay: 350ms; } .submenu li:nth-child(2) { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } .submenu li:nth-child(3) { -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -ms-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 250ms; } .submenu li:nth-child(4) { -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .submenu li:nth-child(5) { -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; -ms-transition-delay: 150ms; -o-transition-delay: 150ms; transition-delay: 150ms; } .submenu li:nth-child(6) { -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; -ms-transition-delay: 100ms; -o-transition-delay: 100ms; transition-delay: 100ms; } .submenu li:nth-child(7) { -webkit-transition-delay: 50ms; -moz-transition-delay: 50ms; -ms-transition-delay: 50ms; -o-transition-delay: 50ms; transition-delay: 50ms; } .submenu li:nth-child(8) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } - Langkah selanjutnya silahkan kalian cari kode <div class='outer-wrapper'> , bila kalian tidak menemukan arahan ibarat itu, carilah arahan yang hampir ibarat dengan arahan tersebut
- Setelah arahan tersebut ditemukan, kalian letakkan arahan dibawah ini sempurna diatas kode <div class='outer-wrapper'> atau arahan ibarat mirip arahan tersebut
<ul class="menu"> <li><a href="/">Home</a></li> <li><a href="#s1">Menu 1</a> <ul class="submenu"> <li><a href="https://bang2sutara.blogspot.com/">Submenu a</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu b</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu c</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu d</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu e</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu f</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu g</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu h</a></li> </ul> </li> <li class="active"><a href="#s2">Menu 2</a> <ul class="submenu"> <li><a href="https://bang2sutara.blogspot.com/">Submenu a</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu b</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu c</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu d</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu e</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu f</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu g</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu h</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul class="submenu"> <li><a href="https://bang2sutara.blogspot.com/">Submenu a</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu b</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu c</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu d</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu e</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu f</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu g</a></li> <li><a href="https://bang2sutara.blogspot.com/">Submenu h</a></li> </ul> </li> <li><a href="https://bang2sutara.blogspot.com/">Menu 4</a></li> <li><a href="https://bang2sutara.blogspot.com/">Back To</a></li> </ul>
- Silahkan kalian ganti arahan yang berwarna merah dengan alamat url atau alamat link yang akan kalian tuju.
- Ganti juga setelan lainnya ibarat nama hidangan dan warna sesuai dengan selera kalian
- Jika semuanya telah kalian ubah, silahkan kalian tekan tombol simpan .
- Lihat hasilnya, agar bermanfaat untuk kalian semuanya
Sumber Referensi : https://mastamvan.blogspot.co.id/
){kind=link}