Thực hiện
Bước 1: Bạn thêm đoạn code sau trước thẻ ]]></b:skin> trong template của mìnhul#navigation { position:fixed; margin:0px; padding:0px; top:0px; right:10px; list-style:none; z-index:999999; width:735px; font:normal 11px Arial,Sans-Serif; -webkit-animation:2s fxhompinav ease-in-out; -moz-animation:2s fxhompinav ease-in-out; -ms-animation:2s fxhompinav ease-in-out; animation:2s fxhompinav ease-in-out; } ul#navigation li { width:103px; display:inline; float:left; margin:0 0 0 2px; } ul#navigation li a { display:block; float:left; margin-top:-78px; width:100px; height:22px; background-color:#111; background-repeat:no-repeat; background-position:50% 150px; border:2px solid #e6e6e6; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -khtml-border-bottom-right-radius:10px; -khtml-border-bottom-left-radius:10px; border-radius:0px 0px 10px 10px; color:#ccc; text-decoration:none; text-align:center; text-shadow:0 1px 1px #000; padding-top:85px; -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; } ul#navigation li a:hover { margin-top:-3px; background-position:50% 10px; color:#fff; position:relative; } ul#navigation li a:hover:after { content:""; width:0px; height:0px; position:absolute; top:100%; left:45%; margin-top:-10px; border-width:5px; border-style:solid; border-color:transparent transparent #e6e6e6 transparent; } ul#navigation li:nth-child(1) a { background-image:url(http://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png); } ul#navigation li:nth-child(2) a { background-image:url(http://2.bp.blogspot.com/-2OSziw4y00Y/TtLybmgNpbI/AAAAAAAABZA/CfXysrknh5k/s1600/user.png); } ul#navigation li:nth-child(3) a { background-image:url(http://4.bp.blogspot.com/-PafE8z-wPaE/TtLya7QCLRI/AAAAAAAABY0/2ggfAcDdL4c/s1600/search.png); } ul#navigation li:nth-child(4) a { background-image:url(http://4.bp.blogspot.com/-70Y4BlTmU2k/TtLyY5xd4wI/AAAAAAAABYo/3f2DFCIXHSY/s1600/photo_camera.png); } ul#navigation li:nth-child(5) a { background-image:url(http://3.bp.blogspot.com/-5gyngAu_azs/TtLyaHMRCpI/AAAAAAAABYs/njvXEAaM4AM/s1600/rss_feed.png); } ul#navigation li:nth-child(6) a { background-image:url(http://1.bp.blogspot.com/-B6GMO8E3wCQ/TtLyXVvr9lI/AAAAAAAABYY/s5EbibQXFGE/s1600/ipod.png); } ul#navigation li:nth-child(7) a { background-image:url(http://3.bp.blogspot.com/-m9LeNCW7A4s/TtLyYIsDygI/AAAAAAAABYc/TBmNRPoQZ3s/s1600/mail.png); } @-webkit-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-moz-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} }
Bước 2: Tìm thẻ </body> và thêm trước nó đoạn code sau rồi lưu lại template
<ul id='navigation'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Search</a></li> <li><a href='#'>Photos</a></li> <li><a href='#'>Rss Feed</a></li> <li><a href='#'>Podcasts</a></li> <li><a href='#'>Contact</a></li> </ul>Chúc bạn thành công và blog ngày một đẹp hơn!
Nguồn DTE
13 comments
Bạn đặt liên kết với blog mình nhé:
Địa chỉ Blog:http://tienganhgioi123.blogspot.com
Tên hiển thị : tienganhgioi123
Favico : http://img547.imageshack.us/img547/7521/xvys.jpg
Nội dung blog:
tienganhgioi123 - Blog Học Anh Văn| Nơi Chia Sẽ Những Bí Quyết Và Kinh Nghiệm Để Học Tốt Tiếng Anh|Phương Pháp Luyện Listening-Speaking-Reading-Writing Mới Nhất|Bài Test: Mini Test-Skill Test-Full Test|
Mình đã add blog bạn, bạn có thể kiểm tra...chúc vui :P
À, đường dẫn link đến trang liên kết nằng ở icon thứ 2 từ trái sang và ở phía trên thanh menu bạn ạ :cuoi
http://2.bp.blogspot.com/-wJ1FfEHoqwA/Ubcdv8lagEI/AAAAAAAALjc/c1WT9DQ1QS4/s1600/sprite.png
ul#navigation {
position:fixed;
margin:0px;
padding:0px;
top:0px;
left:10px;
list-style:none;
z-index:999999;
width:735px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s fxhompinav ease-in-out;
-moz-animation:2s fxhompinav ease-in-out;
-ms-animation:2s fxhompinav ease-in-out;
animation:2s fxhompinav ease-in-out;
}
Mình làm theo hướng dẫn chia bài viết dạng Grid nhưng không làm sao bung tấm hình trong khung ra toàn khung được. Bạn dành ít thời gian chỉ mình với.
bài hướng dẫn ở đây: http://www.trollvl.com/2013/09/hien-thi-bai-viet-duoi-dang-grid-hoac.html?showComment=1381569236021#c3327370533801763444
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&
Convert
'
Convert
"
Convert
<
Convert
>