Kythuatcongtrinh KythuatcongtrinhMenu Với hình ảnh Sử dụng jQuery Đối với Blogger

Menu Với hình ảnh Sử dụng jQuery Đối với Blogger

   



Hướng dẫn để làm theo:
Bước 1
Đăng nhập vào Blogger, vào Layout> Edit HTML
và đánh dấu hộp đánh dấu "Mở rộng Mẫu Widget"

Bước 2
Bây giờ tìm thấy (CTRL + F) mã này trong các mẫu:
]]></ b: skin>
Và ngay lập tức sau khi dán mã này:<script src='http://bloggerplugnplay-files.bravehost.com/Source(5)%5CSource/jquery-1.2.3.js' type='text/javascript'/> <script src='http://bloggerplugnplay-files.bravehost.com/Source%285%29%5CSource/jquery.easing.1.3.js' type='text/javascript'/> <script src='http://bloggerplugnplay-files.bravehost.com/Source(5)%5CSource/jquery.kwicks-1.5.1.js' type='text/javascript'/> <script type='text/javascript'> $().ready(function() { $(&#39;.kwicks&#39;).kwicks({ max : 200, duration: 800, easing: &#39;easeOutQuint&#39; }); }); </script> <style media='screen' type='text/css'> div.kwicks_container { width: 840px; margin: 100px auto 0 auto; } /*-------------------------KWICKS--------------------*/ .kwicks { list-style: none; position: relative; margin: 0; padding: 0; width:840px; height:50px; z-index:2; } .kwicks li { display: block; float: left; overflow: hidden; padding: 0; cursor: pointer; width: 100px; height: 35px; z-index:2; cursor:pointer; border-left-width: 1px; border-left-style: solid; border-left-color: #FF9933; } .kwicks li a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_VJGBtxxAq8-z9FS-R4jx5f_puPQ-gDUoU__MdCxVVgGA-yLKSSEtMGfFX6ZDiZ0K7LIKlMb2UYV1NR_n07w1l0Xzohs-1namyhk69cdAL2JDxuT53gkapiQASHDWstTmnrgl0QHjNRc/); background-repeat:no-repeat; font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial; font-size: 14px; letter-spacing: -0.07em; color: #AA0000; height: 40px; outline:none; display:block; z-index:100; cursor:pointer; text-transform: uppercase; font-weight: bold; margin-top: -3px; margin-left: 5px; text-decoration: none; } .kwicks li h3 { position: absolute; width: 120px; font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial; font-size: 10px; color: #FF6600; letter-spacing: -0.02em; outline:none; z-index:0; cursor:pointer; text-transform: uppercase; font-weight: normal; margin-left: 5px; text-decoration: none; left: 0px; top: 15px; right: 0px; bottom: 0px; } #kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7 { margin: 0pt; overflow: hidden; position: absolute; display: block; width: 120px; } #kwick_1 { left: 0px; border: none; } #kwick_2 { left: 120px; } #kwick_3 { left: 240px; } #kwick_4 { left: 360px; } #kwick_5 { left: 480px; } #kwick_6 { left: 600px; } #kwick_7 { right: 0px; } #kwick_1 a { background-position:0px 0px; } .kwicks a:hover, .kwicks #active { color: #3399FF; } .kwicks li a:hover h3, .kwicks li #active h3 { color: #999999; } #kwick_2 a { background-position:0px -50px; } #kwick_3 a { background-position:0px -192px; } #kwick_4 a { background-position:0px -100px; } #kwick_5 a { background-position:0px -150px; } #kwick_6 a { background-position:0px -250px; } #kwick_7 a { background-position:0px -300px; } </style>Và Save nó lạiBước 3 Đăng nhập vào Blogger, hãy để bố trí :Phần tử trang > Thêm tiện ích > HTML
Add a Gadget of HTML/JavaScript type.



Sau đó copy code sau đây dán vào HTML:

<div class="kwicks_container">

<ul class="kwicks">
<li id="kwick_1">
<a href="#">Home
<h3>Front page</h3>
</a>
</li>
<li id="kwick_2">
<a href="#">CSS & XHTML
<h3>Makeup web page</h3>

</a>
</li>
<li id="kwick_3">
<a href="#">Java
<h3>Learning Java</h3>
</a>
</li>
<li id="kwick_4">
<a href="#">Others
<h3>In the other hand</h3>

</a>
</li>
<li id="kwick_5">
<a href="#">PHP
<h3>PHP Programming</h3>
</a>
</li>
<li id="kwick_6">
<a href="#">Resources
<h3>Resources for Web Developers</h3>

</a>
</li>
<li id="kwick_7">
<a href="#">Themes
<h3>Bloggers - Wordpress Themes</h3>
</a>
</li>
</ul>
</div>

Save nó lại và thay đổi những thứ cần thiết.
Chúc bạn thành công.

Posted in: