Tạo menu ngang cho blogspot

  -  

Bước tiếp theo của quy trình Xây dựng website trên nền tảng gốc rễ Blogspot, bọn họ cần sinh sản menu ngang mang lại trang blogspot (danh mục) cân xứng với phát minh về nội dung mà bạn muốn truyền mua lên website của mình. Như: số đề mục, số thực đơn con.

Bạn đang xem: Tạo menu ngang cho blogspot

Nội dung bài viết dưới phía trên trình bày chi tiết cách bạn tự tạo menu ngang đến trang blogspot của chính mình như mong mỏi muốn.

Xem thêm: Sửa Lỗi Không Start Được Sql Server 2012, Fix Lỗi Không Start Được Sql Server Agent

Các bước tiến hành như sau:

Bước 1:

Truy cập vào Blogger.com => tiếp đến bạn vào mục Chủ đề => tiếp theo sau vào Chỉnh sửa HTML => tiếp sau bạn dấn Ctrl + F tiếp nối tìm thẻ


*

Bước 2:

/* Drop thực đơn by http://orientlife4u.blogspot.com/ *//* ddsmoothmenu */.ddsmoothmenufont: bold 12px Verdana;background: #414141; /*Màu nền của thanh thực đơn phần khi chưa tồn tại Menu con*/width: 100%;.ddsmoothmenu ulz-index:100;margin: 0;padding: 0;list-style-type: none;/*Top level danh mục items*/.ddsmoothmenu ul liposition: relative;display: inline;float: left;/*Top cấp độ menu link items style*/.ddsmoothmenu ul li adisplay: 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 gian lận to get sub menu links to behave correctly*/display: inline-block;.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visitedcolor: white;.ddsmoothmenu ul li a.selected /*CSS class that"s dynamically added lớn the currently active menu items" LI A element*/background: black;color: white;.ddsmoothmenu ul li a:hoverbackground: black; /*background of menu items during onmouseover (hover state)*/color: white;/*1st sub level menu*/.ddsmoothmenu ul li ulposition: absolute;left: 0;display: none; /*collapse all sub menus to lớn begin with*/visibility: hidden;/*Sub màn chơi menu danh mục items (undo style from top level list Items)*/.ddsmoothmenu ul li ul lidisplay: list-item;float: none;/*All subsequent sub menu levels vertical offset after 1st cấp độ sub menu */.ddsmoothmenu ul li ul li ultop: 0;/* Sub level menu link style */.ddsmoothmenu ul li ul li afont: normal 13px Verdana;width: 160px; /*width of sub menus*/padding: 5px;margin: 0;border-top-width: 0;border-bottom: 1px solid gray;/* Holly thủ thuật for IE */* html .ddsmoothmenuheight: 1%; /*Holly mod for IE7 and below*//* ######### CSS classes applied to lớn down & right arrow images ######### */.downarrowclassposition: absolute;top: 12px;right: 7px;.rightarrowclassposition: absolute;top: 6px;right: 5px;/* ######### CSS for shadow added lớn sub menus ######### */.ddshadowposition: 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 ulmargin: 0;padding: 0;width: 170px; /* Main Menu thành tựu widths */list-style-type: none;font: bold 12px Verdana;border-bottom: 1px solid #ccc;.ddsmoothmenu-v ul liposition: relative;/* Top màn chơi menu liên kết style */.ddsmoothmenu-v ul li adisplay: 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:activebackground: #414141; /*background of thực đơn items (default state)*/color: white;.ddsmoothmenu-v ul li a.selected /*CSS class that"s dynamically added to lớn the currently active thực đơn items" LI A element*/background: black;color: white;.ddsmoothmenu-v ul li a:hoverbackground: black; /*background of thực đơn items during onmouseover (hover state)*/color: white;/*Sub màn chơi menu items */.ddsmoothmenu-v ul li ulposition: absolute;width: 170px; /*Sub thực đơn Items width */top: 0;font-weight: normal;visibility: hidden;/* Holly gian lận for IE */* html .ddsmoothmenu-v ul li float: left; height: 1%; * html .ddsmoothmenu-v ul li a height: 1%; /* over */ trong đó#414141 là color nền của thanh Menu bạn cũng có thể thay đổi tùy theo sở thích.

Xem thêm: Hướng Dẫn Truyền Dữ Liệu Giữa 2 Máy Tính Qua Wifi Win 10, Cách Kết Nối 2 Máy Tính Với Nhau Qua Wifi

Để những thanh Menu nhỏ của mỗi Menu chủ yếu hiển thị xuống mỗi khi bọn họ rê con chuột vào địa chỉ Menu chính, họ copy cùng dán đoạn code tiếp sau đây nối tiếp dưới lệnh /*End*/ của đoạn code trên.

/*—– Drop Down thực đơn —-*/#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 search thẻ