Cara Membuat Menu Shout

Menu Shout adalah menu layaknya komik yang dibuatkan kotak perkataan yang diarahkan kepada sebuah gambar. Menu ini bagus buat diletakkan di sidebar, selain untuk menghemat space juga untuk menambah nilai artistik halaman blog. Menu Shout bisa dijadikan untuk menu kontak us, produk yang dijual, dan apa saja informasi yang sangat spesifik dan private dalam sebuah blog.

Untuk lebih jelasnya seperti tampilan menu di bawah ini:

• • • • • • 
            • SABUN CAIR
            • SAMPO MOTOR
            • PEMBERSIH LANTAI
            • CONTACT US

Sebaiknya foto yang ditampilkan adalah foto frofil sendiri agar lebih serius, atau foto wanita yang cantik biar berdaya jual tinggi ;). Tetapi tidak disarankan menggunakan foto yang seksi.

Jika ingin mengaplikasikan menu shout ini ke dalam blog, hanya diperlukan meletakkan kode CSS kedalam template dan meletakkan kode HTML kedalam sidebar atau mungkin header.

Kopi Paste seluruh kode CSS di bawah ini dan letakkan di posisi yang mana anda inginkan. <div id="salak"> <ul class="kecoa"> <li><!--[if lte IE 6]><a href="/"><table> <tr><td><![endif]--> <ul> <li><!--[if lte IE 6]><a href="/"><table> <tr><td><![endif]--> <ul> <li><!--[if lte IE 6]><a href="/"><table> <tr><td><![endif]--> <ul> <li><!--[if lte IE 6]><a href="/"><table> <tr><td><![endif]--> <ul> <li><!--[if lte IE 6]><a href="/"><table> <tr><td><![endif]--> <ul> <li class="inner"> <a href="/"><img class="ie6" id="kodok" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijUGEII1rHhA3pBEIcXvGz0gavX6f4oJj8uvXb9v4ICREeEDjR93EKlvhpZZe2CgRWDs-ZyZmnTTSgjAZuT_R4djXa39fYqQdFxDgyd9M_C4WLtCGRtkDS4T4Pnb9EIrcTwgNpybZeOL4/s400/trans.gif" alt=""><img class="other" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJuov-vC4O2on_QQagTkxB3gnryd0puUTBEAhha-nF0NMsS2MQSaiIufxQtIl8ilYfAmuCPm1RsrCSDnujBTOWyGYoLkNXdlBe7bXDSjA-1E4SFXb-_K89b8pOW28Ixy-TGDP__Q9Vi4/s1600/female.png" alt=""><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table> <tr><td><![endif]--> <div> <b></b> <ul> <li><a href="/">PRODUCTS</a></li> <li><a href="/">SERVICES</a></li> <li><a href="/">OUTLETS</a></li> <li><a href="/">CONTACT US</a></li> </ul> </div> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr> </table> </a><![endif]--> </li> </ul> </div> <style> #duku {); width:250px; height:180px; padding-top:120px;} #salak {width:250px; height:140px; margin:0 auto;} #salak h3 {margin:0; color:#000; font:bold 18px/24px 'times new roman', serif;} ul.kecoa {padding:0; margin:0; list-style:none; width:140px; height:140px; float:left; position:relative;} ul.kecoa ul {padding:0; margin:0; list-style:none;} ul.kecoa a {text-decoration:none;} ul.kecoa table {border-collapse:collapse; padding:0; margin:-1px;} ul.kecoa li {display:block; float:left; padding:3px; margin:0;} ul.kecoa li.inner img.other {width:100%; display:block; border:0; cursor:pointer;} ul.kecoa li.inner img.ie6 {display:none;} ul.kecoa li:hover {padding:1px;} ul.kecoa li.inner:hover img {width:128px; height:128px;} ul.kecoa div {position:absolute; width:200px; height:200px; left:-9999px; top:-130px; z-index:100;} ul.kecoa div b {display:block; width:200px; height:200px; position:absolute; left:0; top:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiotFnORv0wgQboM3iSyLCtNeW-AhqBz5wc0mqE8q6x0mVcoHIrE7q1O9l7C8gd3vHYdCbPy-N_GjfmvGqR9gJSDGKngo8FekTVq-eVeKUQwc-6DnAfn_eg0N4siKP5aQyU69-V38ocGfk/s400/bubble.png); z-index:-1;} ul.kecoa li.inner ul {padding:0; margin:0; list-style:none; position:relative; z-index:100; width:180px; padding:35px 0 0 20px;} ul.kecoa li.inner ul li {padding:0; margin:0;} ul.kecoa li.inner ul li a {display:block; width:180px; font:bold 14px/23px verdana, sans-serif; color:#000; text-decoration:none; padding:0; margin:0; text-indent:20px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTHvbutlOYYNhFwtn8WyUiNcVtci8Kq_vjYNtKAIzNCMyeQmPA9DxnUKEkgUx8CaRZqNc1hAxMDiXIGy6RM873hK9KDPf7i9D70Ue3nSP8OVPzv4seweldRKT3hYnZCrlxt5Z7ZBWwFVc/s400/arrow.gif) no-repeat left center;} ul.kecoa li.inner ul li a:hover {color:#c00; padding:0; margin:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAd3fFwNCGLe23oaOnBGYoVvegzFyvKAk3Wz7iP-UFwiXQ9rpZxiJIqzBtDAdRriNK3ewtRxUfwanRmEEUqC38uD5KG3FfV9kLl4Lh8YZlbkgnDH1_incZlqUZCmafBoi2LZHgWP7HVeY/s400/red-arrow.gif) no-repeat left center;} ul.kecoa li.inner:hover div {left:50px;} </style> <!--[if lte IE 6]> <style> ul.kecoa li {padding:0;} ul.kecoa li a {float:left; display:block; padding:3px;} ul.kecoa a:hover {padding:1px;} ul.kecoa li.inner img.other {display:none;} ul.kecoa li.inner img.ie6 {width:100%; display:block; border:0; cursor:pointer;} ul.kecoa li.inner img#kodok {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJuov-vC4O2on_QQagTkxB3gnryd0puUTBEAhha-nF0NMsS2MQSaiIufxQtIl8ilYfAmuCPm1RsrCSDnujBTOWyGYoLkNXdlBe7bXDSjA-1E4SFXb-_K89b8pOW28Ixy-TGDP__Q9Vi4/s1600/female.png', sizingMethod='scale');} ul.kecoa div b {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiotFnORv0wgQboM3iSyLCtNeW-AhqBz5wc0mqE8q6x0mVcoHIrE7q1O9l7C8gd3vHYdCbPy-N_GjfmvGqR9gJSDGKngo8FekTVq-eVeKUQwc-6DnAfn_eg0N4siKP5aQyU69-V38ocGfk/s400/bubble.png', sizingMethod='scale');} ul.kecoa li.inner a:hover div {left:50px;} </style> <![endif]-->

Save Html anda lalu lihat hasilnya.
Jika ada yang kurang pastilah tampilan gambar belum sesuai dengan keinginan anda, silahkan ganti dengan profile anda. Selanjutnya ganti link dan menu seperti yang anda inginkan.

Selamat mencoba...semoga sukses
sumber :http://wisencare.blogspot.com/2011/04/cara-membuat-menu-shout.html

Anda telah membaca artikel tentang Cara Membuat Menu Shout dan anda juga bisa menemukan artikel Cara Membuat Menu Shout ini dengan url http://hbiepwidjaia.blogspot.com/2013/06/cara-membuat-menu-shout.html.Anda boleh menyebarluaskan atau mengcopy artikel Cara Membuat Menu Shout ini jika memang bermanfaat bagi Anda, namun dengan catatan jangan lupa untuk mencantumkan link sumbernya.