komputerdia.com - Efek whirling (berputar) pada sajian kafetaria dalam konteks pembuatannya memang tidak jauh berbeda dengan pembuatan jenis sajian kafetaria atau sajian navigasi lainnya. Unsur pertama yang harus kalian perhatikan yaitu isyarat CSS nya.
Jika kalian menginginkan sajian kafetaria dengan tampilan elegan yang dilengkapi dengan efek berputar, dalam artikel ini saya akan mencoba menjelaskan bagaimana cara menciptakan sajian kafetaria pada blog dengan memakai efek whirling (berputar).
Bagi kalian yang ingin mencoba jenis sajian 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 sajian template atau sajian theme dan klik tombol edit html .
- Setelah berada di halaman edit html, silahkan kalina cari kode ]]></b:skin>, dan tempelkan isyarat 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'> , jikalau kalian tidak menemukan isyarat menyerupai itu, carilah isyarat yang hampir menyerupai dengan isyarat tersebut
- Setelah isyarat tersebut ditemukan, kalian letakkan isyarat dibawah ini sempurna diatas kode <div class='outer-wrapper'> atau isyarat menyerupai mirip isyarat tersebut
<ul class="menu"> <li><a href="/">Home</a></li> <li><a href="#s1">Menu 1</a> <ul class="submenu"> <li><a href="aciknadzirah.blogspot.com/">Submenu a</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu b</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu c</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu d</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu e</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu f</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu g</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu h</a></li> </ul> </li> <li class="active"><a href="#s2">Menu 2</a> <ul class="submenu"> <li><a href="aciknadzirah.blogspot.com/">Submenu a</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu b</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu c</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu d</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu e</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu f</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu g</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu h</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul class="submenu"> <li><a href="aciknadzirah.blogspot.com/">Submenu a</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu b</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu c</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu d</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu e</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu f</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu g</a></li> <li><a href="aciknadzirah.blogspot.com/">Submenu h</a></li> </ul> </li> <li><a href="aciknadzirah.blogspot.com/">Menu 4</a></li> <li><a href="aciknadzirah.blogspot.com/">Back To</a></li> </ul>
- Silahkan kalian ganti isyarat yang berwarna merah dengan alamat url atau alamat link yang akan kalian tuju.
- Ganti juga setelan lainnya menyerupai nama sajian dan warna sesuai dengan selera kalian
- Jika semuanya telah kalian ubah, silahkan kalian tekan tombol simpan .
- Lihat hasilnya, biar bermanfaat untuk kalian semuanya
Sumber Referensi : https://mastamvan.blogspot.co.id/
Sumber http://www.komputerdia.com