Bạn Kira [ http://freejapanesemovies.blogspot.com/] có hỏi mình cách làm menu mini và copyright như phía cuối blog của mình, bữa giờ bận thi nhiều quá nên bây giờ mình mới có bài viết này. Mình cũng chỉ là tay ngang mới bước chân vào thế giới Blogspot, tập tành làm blog nên biết gì thì mình chỉ cái đó thôi.
Mã bài viết này mình lấy từ blog của mình và đem lên đây chia sẻ với các bạn thôi chứ ko phải do mình viết đâu, mã cũng tương đối đơn giản và dễ thao tác.
Đầu tiên là khi lấy một theme nào trên mạng đều có hiển thị bản quyền tác giả phía cuối blog, điều này có hơi hạn chế một xíu, có nhiều bạn sẽ ko thích, nên bước đầu tiên là cần phải ẩn hoặc xóa nó đi để blog để blog đẹp hơn một xíu và mang tính riêng của mình hơn. Nó sẽ có dạng như sau:
Vào Thiết kế -> Chỉnh sửa HTML, ko cần chọn Mở rộng tiện ích. Bấm Ctrl + F để tìm dòng chữ Attribution, sau đó bạn sẽ nhìn thấy đoạn mã sau:
<b:widget id='attribution1' locked='true' title='' type='attribution'/> </b:widget>
Xóa nó đi là Ok, hoặc ẩn nó bằng cách làm như sau:
<!--
<b:widget id='attribution1' locked='true' title='' type='attribution'/>
</b:widget>-->
Cuối cùng lưu lại và xem thử blog của bạn nha!
Tiếp theo là tạo menu mini cuối blog.
Vào Thiết kế -> Chỉnh sửa HTML, chèn đoạn mã sau vào trước thẻ ]]></b:skin>
#credits{
width:840px;/*độ rộng tiện ích*/
padding:10px 0px 5px 0px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQgH4yNMWL1k6scdCFYiTBJPGFk3yKvPLvVyYEQqJLtBjNgXbmZAXV1r0YPKK4XpoX8I3F2D3JWuyTAgwFwMKlDKTKjI1HfDPmPmxHrmGrj677_11caK3Ut-N3TmM9Msh5Nc17EH2oLCg/s1600/80percentblack.png") repeat scroll 0 0 transparent;/*link màu nền tiện ích, ở đây là màu đen*/
position:relative;
font-size:13px;
border:1px solid #404040;/*màu chữ hiển thị ko có link liên kết*/
margin-left:180px;/*khoảng cách so với lề trái*/
height:30px;/*chiều cao tiện ích*/
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-moz-box-shadow:1px 1px 5px #000000;
}
#credits_left {
float:left;
padding-left:40px;
}
#credits_right {
float:right;
padding-right:20px;
}
#credits a {
color:#D54E21;/*màu chữ hiển thị khi có liên kết link*/
}
#credits a:hover {
font-color:#AA0000;/*màu chữ hiển thị khi click chuột*/
text-decoration:underline;
}
Tiếp tục thêm đoạn mã sau vào trước thẻ </body>
<div id='credits'>
<div id='credits_left'>
Copyright 2010 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
<div id='credits_right'>
<p>
<a expr:href='data:blog.homepageUrl' title='Home'>Home</a> | <a href='Link_lien_ket_1'><span>Ten_link_1</span></a> | <a href='Link_lien_ket_2'><span>Ten_link_2</span></a> | <a href='Link_lien_ket_3'><span>Ten_link_3</span></a> | <a href='Link_lien_ket_4'><span>Ten_link_4</span></a> |
</p>
</div>
</div>
Save lại là xong rồi đó.
Note: các bạn chú ý khi điều chỉnh khoảng cách so với lề trái thì phải điều chỉnh luôn cả chiều rộng của tiện ích để có được khoảng cách đẹp nhất trên blog. Nếu thấy hay đừng quên để lại comment nha!
Thanks For Reading
