Chuyên mục Menu tại Khamphablog.com

Showing posts with label Menu. Show all posts

[Tips] - Menu chuyên mục Css full Responsive cho Blogspot

Đỗ Mạnh Hồng June 19, 2015 0

Tiếp tục share cho các bạn một mẫu menu dùng css siêu đẹp cho blogspot dùng làm menu chuyên mục, điều đặc biệt ở menu này là tích hợp Responsive co giản theo các loại màn hình.

[Tips] - Menu Responsive Blogspot

Đỗ Mạnh Hồng June 13, 2015 0

Đỗ Mạnh Hồng

Như những bài trước mình cũng nói khá nhiều về Responsive cho các bạn và cũng có những bài hướng dẫn cách tích hợp Responsive cho blogspot. Hôm nay mình cũng nói sơ qua Responsive là giao diện mobile cho blogspot khi xem ở những loại màn hình khác nhau nó sẽ co giản hợp lý khá chuyên nghiệp.

Menu Responsive cũng tương tự như thế khi bạn tích hợp menu Responsive này thì khi xem trên desktop nó sẽ giản ra và khi xem mobi nó sẽ co lại trông rất chuyên nghiệp
Demo desktop

Demo mobile

[Tips] - Menu responsive cho blogspot

Đỗ Mạnh Hồng June 10, 2015 0

Đỗ Mạnh Hồng

Responsive là điều chỉnh blogspot phù hợp khi xem trên thiết bị di động. Menu responsive có nghĩa là menu khi xem blogspot trêm mobi được thu gọn trông rất đẹp.

Thêm menu responsive cho blogspot

1. Đăng nhập vào blogspot

Vào phần quản trị Blogger > Templates (mẫu) > Chỉnh sửa HTML

2. Chỉnh sửa mẫu

Bước 1 : Tìm đến thẻ <head> và thêm đoạn code sau dưới nó. Nếu có rồi thì bỏ qua bước này

<meta content='width=device-width, initial-scale=1' name='viewport'/>

Bước 2. Tìm đến thẻ </head> và thêm đoạn css sau trên nó

<style type='text/css'>
/* MENU TREN MOBILE */
a.nav {
display: block;
margin-bottom: 20px;
padding: 20px;
background-color: #dce6f0;
color: #646464;
text-align: center;
}
a.nav:hover {
background-color: #c8d2dc;
}
/* the breakpoint same as above */
@media all and (min-width: 480px) {
a.nav-toggle {
display: none;
}
}
.nav {
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
*display:inline; /* ie7 */
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}
/* right nav */
.nav.right ul {
text-align: right;
}
/* center nav */
.nav.center ul {
text-align: center;
}
@media screen and (max-width: 800px) {
.nav {
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7nUeXHAf_iReOhOh15wRPuffGzVh5EWTo0N7hGH2Ca-HlLwSvC516eZMiwcOTWcumDOKM-DixDtfIO_51ii6w8-spsxU8bOfsgkKLfbfjk4iqJwNrPIF-JKkZrhL30VBRZX_Nnmum9V_z/s1600/icon-menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* hide all li items */
margin: 0;
}
.nav .current {
display: block; /* show only current li item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQYpFXyt7MXThqWnqQm_zssPDl8qY9Uh8Bpzyjw_tHu21hFDWSXx3HvOYf9v9TOQyicUIZbC8S2trSnHikS35GH8JM1oCXM7zOlJuUSyve1YjZvmMoRuBXE1UlnIa4ZyOwAA20B0L6fiM/s1600/icon-check.png) no-repeat 10px 7px;
}
/* right nav */
.nav.right ul {
right: 1%;
top: 1%;
left: auto;
}
/* center nav */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}
@media all and (min-width: 801px) {
.nav {
display: none;
}
}
@media all and (max-width: 800px) {
#outer-wrapper {
width: 98%;
margin: 0 1%;
}
#main-wrapper,#header-wrapper {
width: 100%;
min-height: 50px;
}
#header-wrapper {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqC57o5MH4e03FDGYTtB13Cy31g0GEChOa76oi63CLo_7gPi4nLXzBZhek31iaGIbMKdgAwT850iCgf8AT0q-SzKvpT_6MWLJjKrgCEcuNfoj002nNSGbrmNzfQSnpNSFB6VHslUrgi5r/s1600/logo-gamuda-gardens2.png);
background-repeat: no-repeat;
}
#footer,#rsidebar-wrapper {
width: 100%;height: auto;
float: none;
margin: 0;
padding: 0px;
}
div#Header1,#lsidebar-wrapper,div#HTML92,.span-24, div.span-24 {
display: none;
}
}
</style>

Bước 3. Tùy chỉnh xem menu trên di động

@media all and (min-width: 801px) {
#menu-computer {display:none;}
}

Giải thích đoạn code trên : đoạn code này có nghĩa là khi xem blog ở màn hình có kích thước là 801px thì menu trên desktop sẽ ẩn đi và hiện menu ở di động. Nếu bạn thích thêm các bạn màn hình khác thì tự thêm nhé, mình chỉ làm ví dụ.
Bước 4 : Chèn đoạn code sau ở nơi cần hiển thị menu

<nav class='nav right'>
<ul>
<li class='current'><a href='#'>MENU</a></li>
<li><a expr:href='data:blog.homepageUrl'>Trang chủ</a></li>
<li><a href='link bai viet 1'>Menu 1</a></li>
<li><a href='link bai viet 2'>Menu 2</a></li>
<li><a href='link bai viet 3'>Menu 3</a></li>
<li><a href='link bai viet 4'>Menu 4</a></li>
</ul>
</nav>

Lưu mẫu lại và lôi điện thoại ra test ngay và luôn nào. Chúc các bạn thành công.

[Tips] Menu phân cấp cho blogspot

Đỗ Mạnh Hồng May 30, 2015 0

Đỗ Mạnh Hồng

Menu phần cấp hay gọi đúng là dropdown là menu xổ xuống theo dành cho những blog nhiều label (nhãn) giúp người đọc dễ dàng tìm đến nội dung họ cần. Hôm nay Khám Phá Blog sẽ giới thiệu cho các bạn một dạng dropdown không dùng js mà chỉ dùng css nhằm tăng tốc cho blogspot

Menu dropdown css3 cho blogspot

1. Thêm css

Đăng nhập vào templates blogspot tìm đến thẻ ]]></b:skin> và thêm đoạn code sau trên thẻ này

#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
}
#contact-links a {
color: #4C9FEB;
}
#contact-links a:hover {
color: #3D85C6;
}
#my-links {
float: right;
font-size: 12px;
margin: 4px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
margin-left: 7px;
padding-left: 8px;
text-decoration: none;
}
#my-links a:first-child {
border-width: 0;
}
#menu-container {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear: both;
height: 46px;
padding-top: 1px;
}
#neat-menu {
float: left;
}
#neat-menu a {
text-decoration: none;
}
#neat-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#neat-menu > ul > li {
float: left;
padding-bottom: 12px;
}
#neat-menu ul li a {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
color: #333333;
display: block;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom: 1px solid #2D81CC;
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 5px 5px 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 240px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#neat-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;
}
#neat-menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
border-top-width: 0;
}
#menu-search {
margin:8px 10px 0 0;
float: right;
}
#menu-search form {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOo7vM9idUdDA8ELFh5WBdmXOjU1ZLR3wsHArO25TI9FQAACvgZQkqZ6Fu8SgNdcFytwcAMbcllLEmuevpo9FrC5fYDog8VIzNPNzpw_zWc9KNeAe0bhT86sJP3yRidjsQkfEl4K6TLPr/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height: 26px;
padding: 0 25px;
position: relative;
width: 130px;
}
#menu-search form:hover {
background-color: #F9F9F9;
}
#menu-search form input {
color: #999999;
font-size: 13px;
height: 26px;
text-shadow: 0 1px 0 #FFFFFF;
background: none repeat scroll 0 0 transparent;
border: medium none;
float: left;
outline: medium none;
padding: 0;
width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
color: #C4C4C4;
}

2. Chọn nơi đặt menu

Bay giờ bạn chỉ cần chọn địa điểm đặt menu và dán đoạn code bên dưới vào chổ đó, thường thì các bạn nên đặt menu vào trước thẻ </header>

<div id='contact-links'>
<div id='my-links'>
<a href='#'>About</a>
<a href='#'>Contact</a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGCjsbSUFG5lU-IycNW_lSQc_3UdJvhFkOgJHx7Ck9BV8dP6HgC4atYix0ii0u5TpiwA-8I8U0M45WBaRSLzmRXMBQ4zTtYVMmQ-BwJq44YqBBpBZJb-zNDPbSM-EpH6IxWoBo4BRw-aHg/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZDUZp9q1vTgITciQB8aWWi2nij8CbyhaHNB_Qh2w70tBMDlVZSlwT_pVWj7jzNrJpAxo5aiksWrkxDqFKXBWcmgtM-EMAAPgYuQBL9b-TfxMCH6faLmYXHqHHSxTbDK0ZXbdE8D-c7PO/s1600/twitter.png' title='Twitter' width='18px' /></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWqMhNGwF9yQ5FVqmI3NbZqA4Xo2IQSz_3W9Px8AvbDSDBLQkCPGwBte6USNbAsUAqpL8kJQFrgWwcvn_oWKunHDfqKQlTvHHXE2-5pg1jDUEp7YFMbNVc9qsVNKJY8oe157z-ap8BVgw/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuS_E8CB9-1cXmn4-M1xuNSwpNh4qaUUJ0bMq-mby4KdJMAHj5LCYuvp3v4rnfKUVSEm6-pWjlJldnFJXMKpsWhwaVOkxQkoxjMg6LIwiBgc9e0ZD-P-62mdJtQy15PJ_hdxo4Sag_I9ML/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
</div>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>Single Menu</a></li>
<li><a href='#'>Single Menu</a></li>
<li><a href='#'>Dropdown</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
</ul>
</nav>

<div id='menu-search'>
<form method='get' action='/search'>
<input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
</form>
</div>
</div>
</div>

Bây giờ lưu mẫu lại và kiểm tra kết quả nhé.

[Tips] - Menu ghim cố định khi lăn chuột cho blogspot

Đỗ Mạnh Hồng May 21, 2015 0

Đỗ Mạnh Hồng

Menu ghim cố định còn có tên gọi khác là sticky menu, là menu được cố định trên top của blogspot, khi lăn chuột lên xuống thì nó vẫn được ghim cố định, giúp cho độc giả đỡ tốn thời gian cuộn trang mà vẫn có thể chuyển sang bài viết khác.

Cách thêm menu ghim cố định cho blogspot

[Tips] - Sticky menu kèm hộp tìm kiếm cho blogspot

Đỗ Mạnh Hồng May 17, 2015 0

Đỗ Mạnh Hồng

Nói đến stick menu là chúng ta nói đến một menu ghim cố định trên top blog, nó giúp tiện lợi hơn khi chúng ta lăn thanh cuộn lên xuống thì vẫn lựa chọn được menu rất có ích cho những blog tin tức nhằm tiết kiệm thời gian lướt web. Giúp những người dùng khó tính nhất khi ngại rê chuột nhiều.

Hôm nay Khám Phá Blog giới thiệu cho các bạn một mẫu menu khá đẹp, tất nhiên đó là một mẫu stick menu thông thường những nó có tích hợp thêm hộp tìm kiếm bên phải menu giúp blog của bạn trông gọn gàng và chuyên nghiệp hơn.

Stick menu kèm hộp tìm kiếm chuyên nghiệp cho blogspot

Cách thêm slick menu vào blogspot

Để thêm mẫu menu này vào blogspot thì bạn có thể làm theo hai cách đơn giản bên dưới nhé.

1. Thêm script vào mẫu

Đăng nhập vào Blogger > Mẫu (templates) > Chỉnh sửa HTML, tìm đến thẻ </head> và thêm đoạn code sau ngay trên nó.

<link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>

2. Chỉnh sửa menu

Bay giờ bạn tìm đến nơi mà bạn cần đặt menu này, thường thì chúng ta nên đặt dưới thẻ <body> trong templates blogspot và dán đoạn code này vào.

<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li>
<li class="search">
<form method="get" action="/search">
<input name="q" type="text" placeholder="Search..."/><input type="submit" value="" class="searchbutton"/>
</form>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>

Trong đó :

Thay Link 1 đến Link 6 là tên menu của bạn
Url là url đích đến của menu

Bay giờ tiến hàng lưu mẫu lại và quay lại trang chủ xem thành quả. Chúc các bạn thành công và may mắn.