Thứ Hai, 10 tháng 11, 2014

Những bài viết trước đây Hồng Designer đã share nhiều mẫu menu cho các bạn nhưng phần lớn là menu chạy ngang header cho blogspot. Nay mình Share mẫu menu dọc cho blogspot, mẫu này thể hiện phong cách chuyên nghiệp của blog các bạn.
Menu blogspot
Mẫu menu các bạn có thể thêm vào một widget trong blogspot của bạn. Thêm bằng cách Bố cục => HTML/Javascrip. Bỏ trống tiêu đề và bên dưới bạn thêm đoạn code sau :
div class='slidertop-phai1a'>
<div class="span4 "><style>.span4 {  width: 229px;margin-left: 0px;}div.menu_l ul li a {color: #0088cc;font: 13px arial;}/* /Block related products */.menu_l{  background: url(https://lh5.googleusercontent.com/-iKy6PjbPM6c/U1D0ypT-6GI/AAAAAAAAAIM/XsEPGvg6Q30/s0/top_dieuhoa.png) no-repeat; background-color:#4AC5F4;     height: 241px;    overflow: hidden;    padding-top: 57px;    width: 239px; }.menu_l .level-0{  background: url(https://lh4.googleusercontent.com/-diUoM02aWmM/U1D0xv89-bI/AAAAAAAAAHk/nDP3yCkrthg/s0/menu_li.png) no-repeat;     height: 25px;    margin-left: 3px;    padding-left: 20px;    padding-top: 5px !important;}.menu_l .text-links { margin-bottom:2px;}</style>                    <div class=" menu_l">        
    <ul class="text-links ">                    <li class="level-0">                <a href="/may-lanh-lg/">Máy lạnh LG</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-daikin/">Máy lạnh Daikin</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-panasonic/">Máy lạnh Panasonic</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-toshiba/">Máy lạnh Toshiba</a>                             </li>                    <li class="level-0">                <a href="http://thanhtuan.com.vn/may-lanh-reetech/">Máy lạnh Reetech</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-general/">Máy lạnh General</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-mitsubishi-heavy/">Máy lạnh Mitsubishi Heavy</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-mitsubishi-electric/">Máy lạnh Mitsubishi Electric</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-carrier/">Máy lạnh Carrier</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-funiki/">Máy  lạnh Funiki</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-trane/">Máy lạnh Trane</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-midea/">Máy lạnh Midea</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-nagakawa/">Máy lạnh Nagakawa</a>                             </li>                    <li class="level-0">                <a href="/may-lanh-fujitsu/">Máy lạnh Fujitsu</a>                             </li>            </ul>
    </div><div class="wysiwyg-content"><p style="margin: 0; padding: 0;"> <img style="cursor: pointer;" onclick="menuzoom()" src="https://lh4.googleusercontent.com/-8Vt3-SOiYW0/U1D0xZSe2jI/AAAAAAAAAHo/pQLkNH7aPhQ/s0/menu_bottom.png" alt=""/></p><script type="text/javascript">// <![CDATA[function menuzoom(){if($('.menu_l').height()<410) $('.menu_l').height("420px");else  $('.menu_l').height("241px");}// ]]></script></div>            </div>
</div>
Lưu lại và f5 trình duyệt kiểm tra thành quả bạn vừa làm được nhé. Hồng Designer chúc các bạn thành công.

0 nhận xét:

Đăng nhận xét