Công nghệ tin học mò mẩm ( 07 )

Tìm tòi cách làm blogger ( phần 7 )

Cách tạo Menu ngang cho blog.

Vào google search, đánh chử Blogger, tìm đến Blogger – google accounts, nhấp vào đó, Sẽ hiện ra bảng Google, Choose an account, nhấp vào chọn google account của mình ( đã tạo khi trước )

Một trang mới hiện ra, bên phía tay phải, nhấp vào chữ Chào mừng, bạn nhấp vào chử Tạo blog mới , sau đó khung Tạo blog mới xuất hiện,

- Nhập tiêu đề vào khung ( 1 ), là chủ đề mà bạn muốn chọn cho blog của mình, thí dụ : Âm nhạc, Nghiên Cứu, Ẩm thực v...v.., ở đây tui chọn nháp là Tìm tòi.
- Nhập địa chỉ blog vào khung ( 2 ), thí dụ tui tên kim liên, thì chọn đại một tên kimliên828, cái đưôi : blotspot.com, sẽ nối vào là : kimlien828.blogspot.com
- Chọn vô tư một tem plate ( 3 ).
- Xong rồi nhấp vào ô : Tạo blog { màu đỏ bên dưới. ( 4 ) }
Một khung Google domain hiện ra, nhấp vào : Không, cảm ơn, ( nếu bạn nào muốn thì mua)
Và blogger sẽ hiện ra,

Trong đó phía bên cột tay trái bạn sẽ thấy tiêu đề mà bạn đã tạo,( ở đây tiêu đề của tui hiện ra là : Tìm tòi ) và nếu bạn nhấp vào xem blog, thì blog của bạn hiện ra, và trong khung địa chỉ của web, sẽ hiện ra địa chỉ của bạn đã tạo , ( ở đây địa chì của tui sẽ hiện ra là : kimlien828.blogspot.com ).

OK, đến đây Liên xin dừng lại, nói thêm một chút nhen, Muốn tạo menu ngang trên trang chủ của blogger, thì có nhiều cách, trước tiên ở đây, xin hướng dẩn 2 cách tạo menu ngang, đơn giản dể nhất, không cần biết làm mã code, html hay seo gì...gì cả, cứ làm đúng theo hướng dẩn sau đây là được ( Liên khuyên các bạn sau khi làm xong một menu ngang theo ý mình rồi, thì hãy tập làm lại cho nhuần nhuyễn bằng cách xóa blog đi, rồi làm lại blog mới, vài lần thì sẽ thông thạo thôi, Liên sẽ chỉ cách xóa blog sau, không hướng dẫn ở đây rối trí các bạn), bây giờ ta bắt đầu :

1 - Cách thứ nhất : ( Cách tự tạo nhản bằng bố cục )

Thí dụ các bạn muốn tạo menu ngang có tên là : sưu tầm, nghiên cứu, học tập, du lịch, âm nhạc ...v...v...

Bạn nhấp vào Bài đăng mới tại ô màu đỏ phía trên : ( theo mũi tên )

A -
( Để viết một bài đăng mới, bạn nên viết sẳn vài bài trên Word, rồi copy và past vào )
Một trang để viết bài đăng sẽ hiện ra :

Bạn nhấp chuột vào khung trống để viết bài, nếu có viết sẵn trong file nào đó trong máy rồi thì copy và paste vào đây, và nhớ phía trên tiêu đề bài đăng phải viết tựa đề bài viết của bạn vào , ( ở đây tui đã viết sẳn một bài trong word, với tiêu đề là viết đúng dấu hỏi, ngã trong tiếng Việt ), và tui paste bài viết vào

- Sau đó tui vào khung có chữ nhản,( nằm trong khung dọc bên phải ) đánh vào trong ô nhản hai chử : sưu tầm.
- Xong, nhấn vào khung phia dưới : Hoàn thành.
- Cuối cùng, nhấp vào : xuất bản ( ô màu đỏ phía trên)
- Nhấp vào chử Xem blog để xem giao diện với tựa đề bài viết ....

B -

Nếu các bạn theo đúng như tui hướng dẩn, thì trong giai đoạn tạo blog mới, các bạn cùng chọn giao diện nơi số ( 3 ) như tui, thì giao diện sẽ ra giống như vầy, còn nếu các bạn chọn giao diện khác thì cũng không sao.
OK, trên giao diện các bạn thấy chính giữa là tên của Blog : Tìm tòi, và bên dưới là bài viết với tiêu đề là : " Viết đúng dấu hỏi ngã trong tiếng Việt " ,( lúc này không thấy menu ngang ở đâu , đúng không ?), bạn nhìn lên trên bên phải là cái kính lúp để tìm kiếm, và bên tay trái phía trên có 3 cái vạch ngang nhỏ,bây giờ bạn làm ơn nhấp vào 3 cái gạch ngang đó xem thử có gì bên trong :

- Chết cha, vì trong những lúc hướng dẩn làm giao diện của những bài trước tui có làm cái mục giới thiệu bản thân, nên bây giờ dung nhan " ma chê quỷ hờn " của tui hiện ra, xin các bạn thông cảm ( tui sẽ hướng dẩn làm cái khâu tự giợi thiệu này trong bài sau : tạo menu dọc).
- Tiếp theo bên dưới là mục : lưu trữ, và mục : Nhãn.
-Các bạn nhấp chuột vào chữ Nhãn, thì nó sẽ hiện ra chữ sưu tầm bên dưới ( các bạn có nhớ không, khi các bạn viết bài xong, vào khung nhãn bên phải, và các bạn đã viết hai chử sưu tầm này ).
-Nhấn chuột phải vào chử sưu tầm, thì một khung nhỏ hiện ra, bạn nhấp chuột vào hàng chử : " Copy link address" để copy đường link này.
Trở lại blogger (nhấp vào ô nhỏ trên đầu trang phía góc trái đầu tiên có chử blogger Tìm tòi.. ) khung blogger quen thuộc hiện ra như sau :

C-
Bạn nhấp vào chử Bố cục,(1 ), khi trang bố cục hiện ra , bạn nhấp vào hình cây viết trong khung có chữ trang ( 2 ), một khung : " Định cấu hình danh sách trang " hiện ra :

- Nhấp đánh dấu vào cái ô nhỏ : hiển thị trang (1 ).
- Rồi nhấp vào " thêm liên kết ngoài " (2 ).
Một khung : Địa chỉ web hiện ra :

D-

̣ ( 1 ) - Trong khung tiêu đề , bạn đánh hai chử : sưu tầm ( đúng )với trong nhản bạn đã ghi lúc trước )
( 2) - Và các bạn còn nhớ không, ta đã copy đường link sưu tầm trong nhãn rồi đó, bây giờ bạn Paste vào khung địa chỉ web ( URL).
( 3) - Xong rồi các bạn nhấp vào : Lưu liên kết.
Khung " định cấu hình danh sách trang ", lại hiện ra

Các bạn bấm vào ô màu đỏ có chử Lưu bên dưới, để lưu liên kết . Sau đó bạn bấm vào : Xem blog, để xem thành quả :

Bây giờ dưới tên của blog đã xuất hiện thanh ngang, với 2 menu là : trang chủ, và sưu tầm.
Như đã nói ở trên, nếu các bạn dự định làm thanh ngang với các menu là : sưu tầm, nghiên cứu, học tập, và du lịch, thì làm cũng tương tự như vậy...̣( theo các mục A,B,C,D)
Có nghĩa là bạn viết một bài mới,đặt tiêu đề cho bài viết, sau khi viết xong,(hay sau khi paste bài viết từ nơi khác vào ), nhấp vào chử nhản và viết vào trong khung nhản hai chữ : nghiên cứu, rồi nhấp hoàn thành. ...
Nhớ là khi làm tới mục D, thì đánh chử nghiên cứu thay cho chử sưu tầm....
các menu học tập, du lịch...cũng làm như vậy, sau đó blog của bạn sẽ có menu ngang với tên : trang chủ, sưu tầm, nghiên cứu, học tập, và du lịch.
Và sau này khi viết bài cho menu nào, thì sau khi viết bài xong ta đánh nhản cho menu đó, thí dụ : sau này bạn viết thêm một bài là : "cách cai trị đàn ông ", nếu xếp vào dạng sưu tầm thì sau khi viết xong, vào trong nhản viết hai chử : sưu tầm, tức thì bài viết sẽ nằm trong menu sưu tầm....
( và có một điều nên nhớ, tui xin lưu ý đến các bạn rằng, đừng xóa các bài mà ban đầu mình dùng để tạo menu, nếu không thích thì mở ra xoá và viết lại trong trang và thay đổi tiêu đề bài viết mà thôi)

2 - Và sau đây là cách thứ hai làm menu ngang trong blog :

Trong cách thứ 2 này, vì để các bạn dể tìm thấy nơi để thanh ngang trong phần bố cục, tui xin lấy những giao diện bên dưới cho các bạn dể áp dụng, khi quen rồi thì thấy đơn giản thôi....
Cũng như trong phần thay đổi giao diện của những bài trước, các bạn vào blogger, bên cột tay phải các bạn chọn : chủ đề ( hay là mẫu ), khi các giao diện mẫu hiện ra, bạn có thể chọn bất kỳ giao diện nào bên dưới để làm bài tập cũng được, nhưng để tiện theo dõi các bạn nên chọn theo tui :
Các bạn kéo xuống dưới, tui chọn giao diện trong "đơn giản", chọn cái màu đen cho nó ngầu :

Giao diện hiện ra với khung hình như bên dưới, phía trên là tên của blog : Tìm tòi, cột bên tay phải , từ trên xuống dưới là : khung tìm kiếm, rồi giới thiệu bản thân, tiếp đến là " báo cáo lạm dụng " - Nhãn - và Lưu trử blog. ( xem hình)

Nhấp vào : Áp dụng cho blog, để chọn giao diện này, một khung thông báo nhỏ giới thiệu tiện ích hiện ra, bạn nhấp ok.
Sau đây các bạn copy phần code tui để dưới đây : ( nhấn và giử chuột trái, kéo rê xuống để tô đen tất cả, và bấm chuột phải, chọn copy)

<style>
/*------ CSS3 Menu By MBT (www.mybloggertricks.com)---------*/
#mbt-menu, {
margin: 0;
padding: 0;
list-style: none;
}
#mbt-menu {
width: 960px;
margin: 10px auto;
border: 0px solid #222;
background-color: #888;
background-image: -moz-linear-gradient(#666, #FAF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#FAF));
background-image: -webkit-linear-gradient(#666, #FAF);
background-image: -o-linear-gradient(#666, #FAF);
background-image: -ms-linear-gradient(#666, #FAF);
background-image: linear-gradient(#666, #FAF);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#mbt-menu a {
float: left;
padding: 12px 30px;
color: #FFF;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #222;
}
#mbt-menu li:hover > a {
color: #FC803D;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #FC803D;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul a:hover {
background-color: #FC803D;
background-image: -moz-linear-gradient(#07CDEF, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#07CDEF), to(#0295DG));
background-image: -webkit-linear-gradient(#07CDEF, #0295DG);
background-image: -o-linear-gradient(#07CDEF, #0295DG);
background-image: -ms-linear-gradient(#07CDEF, #0295DG);
background-image: linear-gradient(#07CDEF, #0295DG);
}
</style>
<ul id="mbt-menu">
<li><a href="LINK BLOG">TRANG CHỦ</a></li>
<li><a href="LINK NHÃN 1">TÊN NHÃN 1</a></li>
<li><a href="LINK NHÃN 2">TÊN NHÃN 2</a></li>
<li><a href="LINK NHÃN 3">TÊN NHÃN 3</a></li>
<li><a href="LINK NHÃN 4">TÊN NHÃN 4</a></li>
<li><a href="LINK NHÃN 5">TÊN NHÃN 5</a></li>
</ul>

Trở lại blogger, nhấp vào Bố cục ( 1 ), chọn khung có đề : " trên tất cả các cột " , nhấp vào " thêm tiện ích" ( 2 )

khi khung thêm tiện ích hiện ra, nhấp vào dấu cộng , trong dãy HTML/JavaScript .

Khung định cấu hình HTML/JavaScript hiện ra, trong phần tiêu đề ta để trống, không ghi gì hết, trong khung nội dung, bạn nhấp chuột phải và paste cái code mà ta vừa copy vào, bạn kéo code xuống dưới để hiện ra phần có menu như trong hình sau :

sau đó bạn thay tên nhãn 1,2,3,4,5 bằng các tên menu mà bạn tính chọn là : sưu tầm, nghiên cứu, học tập, du lịch và âm nhạc, sau khi xong chọn lưu.(xem trong hình là tui đang đổi được 2 me nu là sưu tầm , nghiên cứu...các bạn cứ từ từ cẩn thận làm theo)

sau khi thay hết 5 menu rồi, bạn nhấp vào lưu, rồi bạn bấm vào xem blog, để kiểm tra thành quả

và bây giờ bạn thấy khung menu đã hiện ra với 5 menu mà bạn chọn, cùng với menu trang chủ, đẹp quá phải không bạn ....Nhưng mà nhìn lại thì không thấy cột có chử nhãn , nó biến đâu mất rồi...đừng có lo, vì bạn chưa viết bài thì làm sao có ...nhãn, bây giờ Liên đăng bài vào để các bạn xem nhé.
Cũng như cách thứ nhất:
- Bạn nhấp vào bài đăng mới, viết tiêu đề bài đăng,
-Trong nội dung thì viết bài, ( hoặc copy nơi nào đó và paste vào,)
- Xong rồi nhấp vào chử Nhãn bên cột tay phải,
- Đánh vào hai chữ : sưu tầm, (1)
- Rồi nhấp vào ô : hoàn thành, (2)
- Cuối cùng nhấp vào xuất bản

Sau đó trang blog của bạn hiện ra đầy đủ thanh menu ngang, bài viết, và có cột Nhãn trong đó có chử : sưu tầm.( xem hình ) :

Bây giờ trong menu sưu tầm của bạn đã có bài viết với tựa đề "Viết đúng dấu hỏi, ngã trong tiếng Việt "rồi, nhưng sau này muốn đưa một bài viết cùng menu sưu tầm thì làm sao ?, bạn đừng lo, ta làm thêm một động tác nữa là everything ok....
Bạn nhấp chuột phải vào chử : sưu tầm, nhấp vào copy link address ( xem hình )

Sau đó vào lại blogger, nhấp Bố cục, rồi tới khung Trên tất cả các cột, nhấp vào chử chỉnh sửa ở góc dưới của khung tiện ích HTML/JavaScript, khi khung Định cấu hình HTML/JavaScript hiện ra, bạn kéo mã code trong khung nội dung xuống tận dưới cùng để hiện ra mã của menu
Trong phần Link nhãn 1 , ta thay bằng link nhãn sưu tầm ( mà ta vừa copy trong nhãn )

Sau khi thay xong ta sẽ được đường link của nhãn sưu tầm đứng trước chử sưu tầm trong mã code ( xem hình )

Cuối cùng ta bấm Lưu, và trở lại xem blog để kiểm tra kết quả ...và sau này khi viết bài đăng mới, khi viết xong, thì ta vào trong nhãn và đánh hai chữ : sưu tầm, thì bài viết đó sẽ nằm trong menu sưu tầm.
Còn 4 menu còn lại bạn cứ làm tương tự như vậy.
Có nghĩa là thí dụ với menu : nghiên cứu,
- Bạn viết một bài xong,
- Vào trong nhãn, đánh chử : nghiên cứu,
- Rồi nhấp ô : hoàn thành,
- Sau đó nhấp vào xuất bản,
- Rồi mở xem blog,
Khi bài đăng xuất hiện, vào trong nhãn, nhấp chuột phải vào chử : nghiên cứu, nhấp tiếp vào copy link address,
Xong rồi vào glogger, nhấp vào bố cục,
Vào chỉnh sửa HTML/JavaScript,
Paste đường link vào thay thế Link nhãn 2 ( bên trong ngoặc kép) trước chử nghiên cứu, xong nhấn lưu...

Các menu kia cũng làm tương tự.

Chúc các bạn thành công.

Kim Liên B Nguyễn

Được viết bởi : Kim Liên B Nguyễn

Kim Liên B Nguyễn rất vui khi các bạn đến xem trang blog của mình, chúc các bạn mọi sự như ý nhé.

Theo dõi Liên @ Twitter | Facebook | Google Plus

Tags: Tìm tòi-Khám phá