Tạo Menu Ngang Cho Trang Chủ Blogspot
Sau khi thiết lập Cấu hình chuẩn SEO ban đầu cho trang Blogspot của bạn.
Bước tiếp theo của quá trình Xây dựng trang web trên nền tảng Blogspot, chúng ta cần tạo menu ngang cho trang blogspot (danh mục) phù hợp với ý tưởng về nội dung mà bạn muốn truyền tải lên trang web của mình. Như: số đề mục, số menu con.
Nội dung bài viết dưới đây trình bày chi tiết cách bạn tự tạo menu ngang cho trang blogspot của mình như mong muốn.
Các bước thực hiện như sau:
Bước 1:
Truy cập vào Blogger.com => sau đó bạn vào mục Chủ đề => tiếp theo vào Chỉnh sửa HTML => tiếp theo bạn nhấn Ctrl + F sau đó tìm thẻ
]]></b:skin> vào ô search (tìm kiếm) như hình bên dưới.
Bước 2:
Chúng ta copy đoạn code dưới đây dán trước thẻ ]]</b:skin>
/* Drop menu by http://orientlife4u.blogspot.com/ */
/* ddsmoothmenu */
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*Màu nền của thanh menu phần khi chưa có Menu con*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*Màu nền của thanh menu khi chứa menu con*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;/*Màu chữ */
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
/* ddsmoothmenu-v */
.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Main Menu Item widths */
list-style-type: none;
font: bold 12px Verdana;
border-bottom: 1px solid #ccc;
}
.ddsmoothmenu-v ul li{
position: relative;
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
background: #414141; /*background of menu items (default state)*/
color: white;
}
.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu-v ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*Sub level menu items */
.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
font-weight: normal;
visibility: hidden;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */
Trong đó #414141 là màu nền của thanh Menu bạn có thể thay đổi tùy theo sở thích.
Để các thanh Menu con của mỗi Menu chính hiển thị xuống mỗi khi chúng ta rê chuột vào vị trí Menu chính, chúng ta copy và dán đoạn code dưới đây nối tiếp dưới lệnh /*End*/ của đoạn code trên.
/*—– Drop Down Menu —-*/
#drnavbar { background: #060505; width: 960px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid #960100; height:35px;}#drnav { margin: 0; padding: 0; } #drnav ul { float: left; list-style: none; margin: 0; padding: 0; } #drnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #drnav li a, #drnav li a:link, #drnav li a:visited { color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #drnav li a:hover, #drnav li a:active { background: #BF0100; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; }#drnav li { float: left; padding: 0; } #drnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #drnav li ul a { width: 140px; } #drnav li ul ul { margin: -25px 0 0 161px; } #drnav li:hover ul ul, #drnav li:hover ul ul ul, #drnav li.sfhover ul ul, #drnav li.sfhover ul ul ul { left: -999em; } #drnav li:hover ul, #drnav li li:hover ul, #drnav li li li:hover ul, #drnav li.sfhover ul, #drnav li li.sfhover ul, #drnav li li li.sfhover ul { left: auto; } #drnav li:hover, #drnav li.sfhover { position: static; }#drnav li li a, #drnav li li a:link, #drnav li li a:visited { background: #BF0100; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #drnav li li a:hover, #drnavli li a:active { background: #060505; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }
Bước 3:
Tiếp theo nhấn Ctrl + F tìm thẻ </head>
Chúng ta copy đoạn code bên dưới dán vào trước thẻ </head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://namkna-tratt.googlecode.com/files/ddsmoothmenu-namkna.js' type='text/javascript'></script>
<script type='text/javascript'>
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script> Bước 4:
Tiếp theo tìm thẻ </header> Copy đoạn code dưới đây dán vào trước thẻ </header>
<div id="drnavbar">
<ul id="drnav">
<li><a href="http://orientlife4u.blogspot.com/">Home</a></li>
<li><a href="#" itemprop="url"><span itemprop="name"> Tên menu 1
</span> </a>
<ul>
<li><a href="địa chỉ trang" itemprop="url"><span itemprop="name">Tên menu con 1</span></a></li>
<li><a href="địa chỉ trang" itemprop="url"><span itemprop="name">Tên menu con 2</span></a></li>
</ul>
</li>
<li><a href="#" itemprop="url"><span itemprop="name"> Tên menu 2
</span> </a>
<ul>
<li><a href="địa chỉ trang" itemprop="url"><span itemprop="name">Tên menu con 1</span></a></li>
<li><a href="địa chỉ trang" itemprop="url"><span itemprop="name">Tên menu con 2</span></a></li>
</ul>
</li>
<li><a href="#" itemprop="url"><span itemprop="name"> Tên menu 3
</span> </a>
<ul>
<li><a href="địa chỉ trang" itemprop="url"><span itemprop="name">Tên menu con 1</span></a></li>
<li><a href="địa chỉ trang" itemprop="url"><span itemprop="name">Tên menu con 2</span></a></li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>
Những dấu # sẽ được thay bằng các đường dẫn đến các trang mà chúng ta muốn nó xuất hiện.
Sau đó bạn nhấn Lưu chủ đề và truy cập vào Blog để xem kết quả.
Bạn có thể xem hướng dẫn qua hình ảnh từ video bên dưới:
Chúc bạn thành công.
Bạn có thể cập nhật những thông tin mới nhất qua:
Website: https://toihoclaixe.com/
Youtube: http://bit.ly/2JDC4hi
Facebook: https://www.facebook.com/Share-of-Life-376314419549008/groups/
