✔ Cara Menciptakan Hidangan Memakai Css3 Tanpa Javascript

Udah sekian usang bloging rasanya jenuh, untuk menghilangkan kejenuhan iseng iseng Brosing eh menemukan artikel yg sangat cantik berdasarkan saya, Tentang Membuat tab hidangan memakai CSS3 tanpa javascript. Wah cantik juga tuh bang apa bapak atau om entahlah saya belum mengenal banyak sama yg punya Blog ini http://hendro-prayitno.blogspot.com pokok nya terimakasih Banyak sama Bang Hendro Prayitno Maaf Bang akan saya bagikan lagi nih script nya untuk sahabat yang lain siapa tau belum pernah berkunjung kesana.Untuk sahabat Bloger bagi yg ingin memasang hidangan menyerupai diblog ini silahkan Copy paste script nya,dibawah ini.

1.Tentunya masuk keakun blog anda
2.masuk ke edit html
3.jangan centang Expand Widget Templates

4.masukan arahan dibawah sempurna di atas
]]></b:skin>
/*****Tab hidangan css3 bang hendro *****/<br /> .navbox {<br /> position: relative;<br /> float: left;<br /> }<br /> <br /> ul.nav {<br /> list-style: none;<br /> display: block;<br /> width: 220px;<br /> position: relative;<br /> top: 0px;<br /> left: 0px;<br /> padding: 0px 0 0px 0;<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijgIQJJleNr9qM6znyu1JtkpAZXClWcL7yN-ZBKOIdafVJJsTlUNFlZNnCzcbcm693GOXGE1LuozLSrp1NVx8aPE2L5e2bQhJSWGTmyr2LL2KrUbNxPbnVwHas9kibpFizH_fjIva5EIQ/s320/shad2.png) no-repeat;<br /> -webkit-background-size: 50% 100%;<br /> -moz-background-size: 50% 100%;<br /> }<br /> <br /> li {<br /> margin: 5px 0 0 0;<br /> }<br /> <br /> ul.nav li a {<br /> -webkit-transition: all 0.3s ease-out;<br /> -moz-transition: all 0.3s ease-out;<br /> background: #cfe2f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflq-SXpam5u_ENA-MGzWg9JUWB8WUERbNF-SBBiTOZjkuRQfzrjz02Erl0-KsxU5NSEiF8EGjZ2EJtLmQP6XPdQ-CBskpyy44qNCQE8oVd2JKpvkdDBJxj7fCxJz6H5pY9QS8x_W8aes/s320/batas.png) no-repeat;<br /> color: #cc0000;<br /> padding: 7px 15px 7px 15px;<br /> -webkit-border-top-right-radius: 0px;<br /> -webkit-border-bottom-right-radius: 0px;<br /> -moz-border-radius-topright: 0px;<br /> -moz-border-radius-bottomright: 0px;<br /> <br /> width: 110px;<br /> display: block;<br /> text-decoration: none;<br /> -webkit-box-shadow: 4px 2px 4px #888;<br /> -moz-box-shadow: 4px 2px 4px #888;<br /> }<br /> <br /> ul.nav li a:hover {<br /> background: #cc0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflq-SXpam5u_ENA-MGzWg9JUWB8WUERbNF-SBBiTOZjkuRQfzrjz02Erl0-KsxU5NSEiF8EGjZ2EJtLmQP6XPdQ-CBskpyy44qNCQE8oVd2JKpvkdDBJxj7fCxJz6H5pY9QS8x_W8aes/s320/batas.png) no-repeat;<br /> color: black;<br /> padding: 7px 15px 7px 30px;<br /> }

5.Save template
6.Setelah itu masuk ke element laman dan klik add gadget lalu pilih html/java script
7.masukan arahan di bawah
<br /> <div class="navbox"><ul class="nav"><li><a href="masukan link">kategory 1</a></li> <li><a href="masukan link">kategory 2</a></li> <li><a href="masukan link">kategory 3</a></li> <li><a href="masukan link">kategory 4</a></li> <li><a href="masukan link">kategory 5</a></li> <li><a href="masukan link">kategory 6</a></li> <li><a href="masukan link">kategory 7</a></li> <li><a href="masukan link">kategory 8</a></li> <li><a href="masukan link">kategory 9</a></li> </ul><br /> </div>
8.Save dan lihat kesudahannya Selamat mencoba agar berhasil

Bagikan Artikel ini