,Okeh dikesempatan kali ini saya akan share cara membuat menu berbenti Circle atau Lingkaran. Caranya cukup mudah kok, tinggal menambahkan Gadget HTML / Javascript saja. Bagi yang pande main blog pasti tau dimana diletakkan menu ini hehee.
Kodenya :
Silahkan ganti nama menu dan link menunya sob =)<ul id="MenuBundar"><li class="home"><a href="#"><b>Udah Tidur Belom Nih</b></a></li><li class="chat"><a href="#"><b>Chattingan Dengan Sobat Blogger</b></a></li><li class="email"><a href="#"><b>Kirim E-mail Ke saya</b></a></li><li class="shop"><a href="#"><b>Toko Online Gan</b></a></li><li class="delivery"><a href="#"><b>Mobil Tukang NAgih Utang Nih....??</b></a></li><li class="search"><a href="#"><b>Kaca Pembesar Buat Nyari Artikel</b></a></li><li class="address"><a href="#"><b>Catatan Hutang </b></a></li><li class="upload"><a href="#"><b>Photo - Photo Blogger</b></a></li></ul><style type='text/css'>#MenuBundar {padding: 0;margin: 0 auto;list-style: none;position: relative;width: 300px;height: 300px;background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQH0BQjm5h8W28L2CyPiPV6RQXQDGY1HN9yOqJlv-Qi7TNDZSjoghJOg3u8wJfYtk51jqTlNJ4UfnZq2s4hIjpPl30kv3bxM_6yVTNH7JwWArsF_7bt-oiFH4ZKsj8zdKF_ar8lxBWRRpF/s1600/background.gif) no-repeat}#MenuBundar li {display: block;width: 60px;height: 60px;position: absolute}#MenuBundar li.home {left: 120px;top: 4px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAI5ZfHCBCkUSbr0_K5DJ42cq3tlPhulAXbn7WJcDed4QF8OSzFVhjLfCq91hr_1-EaUlvYsXtqwYrlCusI6BwORxpoXAxpRfstN3bwhkAIFpsrksyOCuebV86CesK8t59kMpAWmeeLut/s1600/home.gif) no-repeat center center}#MenuBundar li.chat {left: 200px;top: 40px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5nw0UDwJAJjTM_AIz_PhUSyRyI7RM9liKSHdep92vU_iFmX4QRVBPcGHzMW-GszeiGXYvSw_6u4fokSwEKuqnXyEkoNWI_ecuFomRpDM_QOGy4EK36pWkjTsfqr5NaVO9UIASBU7D12cO/s1600/chat.gif) no-repeat center center}#MenuBundar li.upload {left: 35px;top: 40px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkswLAKAsasxP7AS9MPMx0XwQ00bh_Hc_bluGebCVpGatwWJDZdG1Jvn5UI84xjzNcRWgVJUUhUP2TLXn-CZQOOFy_C39Apr9fUtvNAx4IOOipTOUWLkjyNxtUusEzFaJN0EigxmXNN_wA/s1600/photo.gif) no-repeat center center}#MenuBundar li.email {left: 230px;top: 115px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJXCY1iMxSxetWNX7STQ5xmLiCoM9y5ACxJbllI-RwsTEzJcIO83k5m6-iojCbiUoFSsoLuyEcBdyWQ-OdlWvHVupxouvBF-yVYDxai31v0UoesWojigWm3nO6pC9r3HNlvjOo30u1Eu9k/s1600/email.gif) no-repeat center center}#MenuBundar li.address {left: 5px;top: 115px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLCIagDY4CW2QeE3B7-3CwpzsclvUYlvYIuT_BFr_aRxZQrZmSE_axEv7yAt5o5mCM_GjAQyPBfi21DNRI7-q6WBBUTfLrix2Ub1DnyL0Irjro-Q9LAh1wdVzLFuQr-lLyqg0zHRUM2Dl/s1600/address.gif) no-repeat center center}#MenuBundar li.shop {left: 200px;top: 190px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkF74d1H09fDcyOY5Ej-TfpjMX6Q2KOJvdpsDm0qDLgx0fCYvM-qi9SQnqCWsy9ysxj6c1luB9ls3Er_EwQ2-e4bolHznSD6ImMDz5KZQ9WAI-BnwlDI8SKmIg_fMrnE4o6Ha9vUPhoWih/s1600/shop.gif) no-repeat center center}#MenuBundar li.search {left: 35px;top: 190px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOPov0CdWO2HL1kywoOieCQn__31WvGR1q6AEfUgbMOPkQ_FzpWF1fWUJ1pZnJjXk8WY7mXuqPQpc15wc-p59KmB9KUUpTx_4_Da0EInEp1ZadZttCWltD7T-RH9wsww3apQI-kOu_4yoA/s1600/search.gif) no-repeat center center}#MenuBundar li.delivery {left: 120px;top: 225px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFvN2R9BSwJsRMIwMxHwwB2gGfu-lRo4qOLE640WjTepsh-zS2gNA6zqpdbPXKGXVOetK5xaJvPkyymlA85T0rm24hUokN8l03_eLuJb20OINngkJOaJgvon8FWIH43NXZWEETP1a_DJD/s1600/delivery.gif) no-repeat center center}#MenuBundar li a b {display: none}#MenuBundar li a {display: block;width: 60px;height: 60px;text-align: center}#MenuBundar li a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgaSfihZuo4A40vwnMNCfMoAdvi68-4doz0BeHBIuzuyd-_M6mK3EvByU0pLPT8Tzq6P97kCVBZydjVrpcO796ToGVS8NKmhpRn2p74vHDK9AeNheZcUxgST4o-dcXq8ErJR17CVWp2aM7/s320/circle.gif);text-decoration: none;font-family: georgia, serif}#MenuBundar li a:hover b {position: absolute;display: block;width: 100px;height: 100px;font-size: 14px;color: #63352c;background: #FFF}#MenuBundar li a:hover b span {display: block;font-size: 12px;color: #888;font-weight: normal;margin-top: 15px}#MenuBundar li.home a:hover b {left: -22px;top: 100px}#MenuBundar li.chat a:hover b {left: -102px;top: 64px}#MenuBundar li.upload a:hover b {left: 63px;top: 64px}#MenuBundar li.email a:hover b {left: -132px;top: -11px}#MenuBundar li.address a:hover b {left: 93px;top: -11px}#MenuBundar li.shop a:hover b {left: -102px;top: -87px}#MenuBundar li.search a:hover b {left: 63px;top: -87px}#MenuBundar li.delivery a:hover b {left: -22px;top: -121px}</style>
sumber http://davidchielietonga06.blogspot.com/2012/06/cara-membuat-menu-berbentuk-lingkaran.html
0 Response to "cara membuat menu berbentuk lingkaran"
Posting Komentar