Widget Menu Efek Bersinar

Dah lama saya tak kongsikan widget dalam blog ini. Bukan apa, saya dapati ramai dah rakan-rakan blogger yang kongsi widget serta gajet best-best dan menarik di blog mereka. Hanya Google, dah boleh dapat tutorial macam-macam. Tapi, yelah ... apa salahnya kongsi ye tak? Ok, saya nak kongsikan satu widget khas untuk mencantikkan menu blog. Ia boleh berikan efek bersinar gitu ...

Menu adalah perkara yang perlu dititik-beratkan oleh blogger Malaysia. Ia penting supaya ia boleh memberikan pengalaman menarik buat pengunjung dan pembaca blog. Selain nampak unik, ia boleh menjadi satu daya tarikan visual. Yelah, ramai pengunjung suka blog yang cantik .. tak gitu?

Widget Menu Efek Bersinar

Mudah sahaja, anda hanya perlu salin kod yang saya berikan ini dan letakkan di sidebar. Add Javascript/HTML... mudah je kan?

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9K33Obb2-VSo7JUkPFt3KhKCaTyy0MJuwf8NLLWUuOPseh_lcTQ8shbbzaktd2EAV1XwllWRP5V0E76dWAq1bYwgkhDPInbWCWGxPp4mkPob-aEMzGKUHcAZMxGSfrUnQBwgc9WQwciI/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style>
<a href="http://www.hasrulhassan.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuXpJBr2z79PB5Lqe1lSi988kxz-9r72GULBwLs4le-l7L60gRwuiCsHAK0RKemaukniJgIwNUXLK9ytO-X9VvOcUAS0ebkwcHZM_dG9Ttk77v8sBhUGBfSMfyjFtLbinQiEkeDHSRwFY/s1600/1x1juice.png" /></a>
<div class="wg-shining-menu">
    <ul class="menu">
<li><a href="http://www.hasrulhassan.com/">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="http://www.hasrulhassan.com/p/ruang-pengiklanan.html">Pengiklanan</a></li>
<li><a href="http://www.hasrulhassan.com/p/statistics.html">Statistik Blog</a></li>
<li><a href="http://www.hasrulhassan.com/search/label/WIDGET%20PILIHAN">Widget Pilihan</a></li>
<li><a href="http://www.hasrulhassan.com/p/penafian.html">Penafian</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

Selain memberikan kemudahan navigasi dalam blog, menu boleh berikan blog anda kelebihan untuk tambah pageviews, selain membolehkan beberapa entri dikumpulkan dalam satu katakunci untuk mudah baca.

Kod ini tak memberatkan blog memandangkan ia menggunakan pendekatan CSS dalam menyerlah menu di dalam blog anda. Cubalah.

Oh ya, jangan lupa untuk tukarkan link saya dalam kod itu dengan link kepunyaan anda ye ... :)

Sumber asal: Blogger Tutorials