Tạo Responsive Navigation cho Blogspot với jQuery và css3

Blogger SEO Blogspot Thủ thuật

{ 0 comments }

Tạo  Responsive Menu cho blogspot với khả năng hiển thị tốt trên tất cả các thiết bị như mobile, tablet và desktop dường như đang là một nhu cầu khá lớn của đông đảo các bạn đọc cũng như các webmaster.

Responsive Navigation Menu for Blogspot

Responsive Navigation Menu for Blogspot

Để có thể tạo Responsive Navigation theo ý của mình các bạn cần phải biết một chút HTML cơ bản, CSS3 và một ít kiến thức về jQuery nữa. Tuy nhiên trong bài này các bạn chỉ cần làm theo là cũng có thể có một Responsive Menu khá đẹp có thể hiển thị cực tốt trên các thiết bị di động cũng như trên máy tính để bàn.

Vậy Responsive Menu và Responsive Web Design là gì?

Thực ra để giải thích khái niệm này khá dài dòng và cũng đã có quá nhiều website nói về vấn đề này rồi. Các bạn chỉ cần hiểu đơn giản rằng khi ứng dụng Responsive Web Design vào blog, website thì website được áp dụng đó sẽ hiển thị rất tốt trên hầu hết mọi thiết bị như mobile, tablet và desktop. Để kiển tra website có thể tương thích trên hầu hết tất cả các thiết bị hay chưa bạn chỉ cần thu nhỏ kích cỡ trình duyệt tùy ý và xem sự biến đổi trong trang là sẽ hiểu.

Xem thêm  [Hướng dẫn] Trỏ domain từ Namecheap về Hosting

Tại sao cần tạo Responsive Menu và ứng dụng Responsive Web Design?

Trong bài viết này chỉ là một phần nhỏ khi ứng dụng Responsive Web Design vì tổng thể thì cần phải áp dụng trên toàn trang. Tuy nhiên không phải Site có hỗ trợ Responsive tức là sẽ có một Responsive Navigation đẹp.
Chúng ta cần áp dụng Responsive Web Design bởi vì như thế Google đánh giá mức độ thân thiện (Friendly Site) của website cao hơn. Đây cũng là một trong những đánh giá của google có liên quan đến vấn đề seo cho website.

Responsive Navigation này hình dáng thế nào?

Hình ảnh demo mình chụp trực tiếp trên màn hình:

Responsive Navigation for Blogspot

Responsive Navigation for Blogspot

Làm sao để tạo một Responsive Menu cho Blogspot?

Bước 1: Đăng nhập vào trang quản lý của blogspot, chọn Mẫu (Template)—>Chỉnh sửa HTML (Edit HTML)

Bước 2: Thêm code jQuery cho Responsive Navigation

Tìm đoạn code:

</head>

Thêm vào bên trên:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
		$(function() {
			var pull 		= $('#pull');
				menu 		= $('nav ul');
				menuHeight	= menu.height();

			$(pull).on('click', function(e) {
				e.preventDefault();
				menu.slideToggle();
			});

			$(window).resize(function(){
        		var w = $(window).width();
        		if(w > 320 && menu.is(':hidden')) {
        			menu.removeAttr('style');
        		}
    		});
		});
	</script>

Bước 3: Code HTML cho Responsive Navigation

Bước này các bạn cần biết được hiện tại thì menu của blogspot đang ở phần nào.
Thường thì menu sẽ được sử dụng một phần tử div để bao gọn nó và trong đó là một danh sách sử dụng ul và li. Nếu các bạn đã thêm và từng chỉnh sửa menu cho blog của mình các bạn sẽ biết nó nằm ở vị trí nào. Như trên Blog của tôi code menu cũ sẽ như thế này:

<div class='nav-menu'>
<div class='ct-wrapper'>
   <!-- Main Menu -->
<ul>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>Category #2</a></li>
  <li><a href='#'>Category #3</a></li>
  <li><a href='#'>Category #4</a></li>
  <li><a href='/p/about-me.html'>Tác giả</a></li>
</ul>
<div class='clr'/>
   </div><!-- /ct-wrapper -->
</div><!-- /sub-nav-menu -->

code HTML cho Responsive Navigation mới (thay toàn bộ code cũ bằng code mới):

<nav class="clearfix">
		<ul class="clearfix">
			<li><a href="#">Home</a></li>
			<li><a href="#">How-to</a></li>
			<li><a href="#">Icons</a></li>
			<li><a href="#">Design</a></li>
			<li><a href="#">Web 2.0</a></li>
			<li><a href="#">Tools</a></li>	
		</ul>
		<a href="#" id="pull">Menu</a>
	</nav>

Bước 4: Thêm CSS cho Responsive Navigation

Các bạn tìm đoạn code

]]></b:skin>

Thêm vào bên trên:

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 2px solid #283744;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #fff;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}
nav li a {
	border-right: 1px solid #576979;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #8c99a4;
}
nav a#pull {
	display: none;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #576979;
	}
}

Và bây giờ hãy ra trang chủ để xem Responsive Menu mới nhé.

Xem thêm  [Blogger Template] Các kiểu trang trong Blogger - Blogspot

Hình chụp demo:
Mẫu trên mobile này mặc định menu sẽ ẩn. Muốn hiện danh sách menu các bạn cần phải nhấn vào chữ menu để ẩn hoặc hiện.

Responsive Navigation trên Mobile

Responsive Navigation trên Mobile

Responsive Navigation trên Tablet

Responsive Navigation trên Tablet

Responsive Navigation trên Desktop

Responsive Navigation trên Desktop

Trong bài viết sau mình sẽ giới thiệu với các bạn một vài công cụ để các bạn có thể xem trực tiếp trên các thiết bị di động khác nhau thì website, blog của bạn sẽ hiển thị ra sao nhé!

Góp ý cho Tô Triều

  • Ngô việt 07/02/2015, 00:53

    vậy làm thế nào để có trang trủ hiển thị cách nào mặc định, tồi bài viết gần đây?MOng chỉ giáo

    Reply