Thêm Css3 dark blue navigation bar cho blog

Mặc dù không phải là một người viết code nhưng với mong muốn đem lại thật nhiều thủ thuật hay cho cộng đồng blogger, nên hôm nay mình sưu tầm được một bài viết về thủ thuật Thêm Css3 dark blue navigation bar  cho blogger từ nguồn ở nước ngoài. Với một ích kiến thức anh ngữ nên mình có thể sưu tầm và phiên dịch lại cho các bạn dễ hiểu và có thể áp dụng thành công cho blog của bạn. Còn về vấn đề bố cục của tiện ích hay những vấn đề của tiện ích này thì chắc mình không thể trả lời cho các bạn được. Nếu có thắc mắc thì mình sẽ cố gắng tìm câu trả lời cho các bạn từ các bác thạo về code.Nào bây giờ chúng ta cùng bắt đầu nào...!!!

Bước 1: Đăng nhập vào tài khoản blogger của bạn, và click vào nút drop down

Bước 2: Chọn mục Template giống hình bên dưới.

Bước 3: Chọn EDIT HTML.

Bước 4: Nhấn Ctr+F  để tìm đoạn code ]]></b:skin>

Bước 5: dán đoạn code dưới đây vào trước thẻ ]]></b:skin> bạn tìm được ở bước 4.

/* The CSS Code for the menu starts here bloggertrix.com */

#navigation1 { width:900px;height: 45px; background: url(http://2.bp.blogspot.com/-ZcNk0q2D_ns/USc-WVQpr5I/AAAAAAAAG24/1qFDgndtT2E/s1600/nav-bg.gif) repeat-x 0 0;
border:inherit 2px #000000;
-moz-border-radius-topleft: 10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px; }
#navigation1 ul { list-style: none outside; padding: 8px 0 0 8px; }
#navigation1 li { float: left; display: inline; height: 29px; line-height: 29px; text-transform: uppercase; margin-right: 3px }
#navigation1 li.last { margin-right: 0; }
#navigation1 li a,
#navigation1 li a span { float: left; display: inline; height: 29px; padding-left: 10px; background-position: 0 0; color: #919191; }
#navigation1 li a span { padding-left: 0; padding-right: 10px;  background-position: right 0; }
#navigation1 ul.sf-menu li a:hover,
#navigation1 ul.sf-menu li a:hover span { background-image: url(http://2.bp.blogspot.com/-TdLW8VcsFyk/UgZao7p7vWI/AAAAAAAAAzQ/cmUZwaLl3tM/s1600/bt_nav_hover.png); text-decoration: none; color: #fff; }
#navigation1 li a.clicked,
#navigation1 li a.clicked span { background-position: 0 bottom }
#navigation1 li a.clicked span { background-position: right bottom; }

Bước 6: Lưu mẫu lại.

Bước 7: Đăng nhập vào blog và chọn mục Bố Cục(Layout) 

Bước 8: Chọn thêm tiện ích=> chọn thêm HTML.

Bước 9: Sau đó dán đoạn code phía dưới vào.

<div id="navigation1">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li class="cat-item cat-item-29"><a title="Home" href="#"><span>HOME</span></a></li>
<li class="cat-item cat-item-29"><a href="#" title="Graphics"><span>Graphics</span></a></li>
<li class="cat-item cat-item-31"><a href="#" title="Coding"><span>Coding</span></a></li>
<li class="cat-item cat-item-18"><a href="#" title="inspiration"><span>inspiration</span></a> </li>
<li class="cat-item cat-item-1"> <a href="#" title="Photography"><span>Photography</span></a></li>
<li class="cat-item cat-item-30"><a href="#" title="Freebies"><span>Blogger</span></a></li>
<li class="cat-item cat-item-19"><a href="#" title="Wordpress"><span>Wordpress</span></a></li>
<li class="cat-item cat-item-25"><a href="#" title="Logo"><span>Logo</span></a></li>
<li class="cat-item cat-item-22"><a href="#" title="Contact"><span>Contact</span></a>
</li></ul></div>

Lưu ý: Nhớ thay dấu '#" bằng link của bạn.

Bước 10: Lưu lại và tận hưởng thành quả  nhé!

Chúc các bạn thành công!