Tạo Cut & Paste Mega Menu ẩn hiện chuyên nghiệp cho Blogspot

Một thao tác nhỏ giúp bạn trang bị cho mình tiện ích Mega Menu nhỏ gọn, không chiếm nhiều diện tích của blog và thật chuyên nghiệp. Cách thức hoạt động đơn giản và bạn hoàn toàn có thể dễ dàng tùy biến sao cho phù hợp nhất với sở thích của mình.

Cut & Paste Mega Menu

Trang chủ: Cut & Paste Mega Menu

Các bước thực hiện

Bước 1: Các bạn dán đoạn code sau vào trên thẻ đóng </head>. Lưu ý đây là thư viện JQuery, nếu blog của bạn đã có thư viện này thì không cần thực hiện bước này nhé!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Bước 2: Thêm đoạn code sau vào trên thẻ đóng ]]></b:skin>

.megamenu{position:absolute;display:none;left:0;top:0;background:white;border:1px solid #f06b24;border-width:5px 1px;padding:10px;font:normal 12px Verdana;z-index:100}
.megamenu .column{float:left;width:180px;margin-right:5px}
.megamenu .column ul{margin:0;padding:0;list-style-type:none}
.megamenu .column ul li{padding-bottom:5px}
.megamenu .column h3{background:#e0e0e0;font:bold 13px Arial;margin:0 0 5px 0}
.megamenu .column ul li a{text-decoration:none}
.megamenu .column ul li a:hover{color:red}

Bước 3: Thêm đọan code sau vào bên trên thẻ đóng </head>

<script type="text/javascript" src="http://yourjavascript.com/2112191944/jkmegamenu.js"></script>

Bước 4: Các bạn vào Bố cục→Thêm tiện ích HTML→Thêm vào đoạn code bên dưới:

<a href="Link" id="megaanchor">Menu</a>
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>Nhãn 1</h3>
<ul>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
</ul>
</div>
<div class="column">
<h3>Nhãn 2</h3>
<ul>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
</ul>
</div>
<div class="column">
<h3>Nhãn 3</h3>
<ul>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
</ul>
</div>
<div class="column">
<h3>Nhãn 4</h3>
<ul>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
</ul>
</div>
<div class="column">
<h3>Nhãn 5</h3>
<ul>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
</ul>
</div>
<div class="column">
<h3>Nhãn 6</h3>
<ul>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
<li><a href="Link">Nhãn</a></li>
</ul>
</div>
</div>

Sau khi thêm đoạn code trên bạn tiến hành lưu và xem kết quả nhé!