Download

Tin tức

Photoshop Tutorial

Hình ảnh

Tin mới trong ngày [ Xem tất cả ]

Latest Updates

Thứ Ba, 27 tháng 9, 2011

Tạo Dropdown Menu đơn giản

0 nhận xét

Tạo Dropdown Menu đơn giản

css3 dropdown menu
Lần trước có một bạn nào đó đã giới thiệu một Menu xổ dọc khá đẹp nhưng lại chưa biết cách áp dụng trên Blogger. Sau khi tìm hiểu thì mình thấy loại menu này bố cục khá phức tạp, hơi khó để viết hướng dẫn nên đã loại bớt một số thành phần và điều chỉnh lại CSS, được kết quả như thế này:




     Đầu tiên, bạn chèn đoạn sau ngay bên dưới thẻ <body> hoặc phía trên <div id='outer-wrapper'>
<link href='http://dl.dropbox.com/u/11103024/menu.css' media='screen' rel='stylesheet' type='text/css'/>
<b:section id='menu' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/>
</b:section>

Đoạn mã trên sẽ tạo một tiện ích Javascript/HTML mới trên blog của bạn, hãy quay lạiPhần tử trang rồi tiếp tục chèn vào tiện ích này:
<ul class="menu">
<li class="no_drop"><a href="#">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div></div></li>

<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">

<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
</ul>
</div>

<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
</ul>
</div>

<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
</ul>
</div>

<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
</ul>
</div></div></li></ul>

Lưu lại và kiểm tra kết quả. Do mã CSS của menu khá dài nên Noct đã chuyển chúng vào trong file menu.css để tiện đăng bài, bạn có thể chuyển ngược lại vào phía trên thẻ</b:skin> trong template để chỉnh sửa, và đừng quên xóa dòng màu xanh.

Thứ Hai, 26 tháng 9, 2011

Khung thông báo cho blog

1 nhận xét

Khung thông báo cho blog

Notification Box for Blogger
Đôi khi bạn muốn thông báo cho các độc giả của blog mình về một sự kiện nào đó (ví dụ như chuyển domain hoặc đăng kí nhận tin...) thì việc tạo một Notification Box là cần thiết. Có nhiều cách để làm điều này, ở đây mình giới thiệu một ứng dụng nhỏ của Jquery trong việc tạo khung thông báo. Điểm đặc biệt của khung này là người đọc có thể tắt nó đi nếu muốn, như vậy sẽ đảm bảo tính thẩm mỹ cho blog của bạn.

Chèn đoạn code sau phía trên </body> trong template:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}
.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wKQTHHWeMYpqznQPWuCzq7LMNL0xDTsJzfqP7L_jQ1i9PqOjurUqchyZviCcuJQFeGijzMfchcaoztagmIqENenJuoF3zTFt4PVqFXCeH94ryPMzV_haiD_PigRPw-5AdPuw9ZJZhVE/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}
.warning:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivobhFB3Grkyg5Pl1_6fqWMiNKkzuYRsI3T2tJPgLraKLQfSgMbDEKoFtVfQRnkInYjhQv6dXQ-6Fhs5M50uAeb3I19gDpquV5UNLh09y0UGTJnYUvvxF4CK4UYx09Bo0IZOPYrcOMUDo/);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Warning!</strong>Đây là một thông báo. Click vào button ở bên phải để tắt.</p></div></b:if>

Thứ Năm, 22 tháng 9, 2011

Ảnh giao diện WeLovePhotoshop.Com

1 nhận xét

Đây là bộ ảnh về một ngôi chùa ở Nhật Bản, cảnh vật vô cùng xanh tươi, mọi người có thể lấy về để phục vụ cho việc design ảnh nhé ♥ Mình up bộ ảnh này cũng xin cầu mong cho đất nước Nhật Bản mau chóng lấy lại vẻ thịnh vượng vốn có có nó, và cũng thanh bình như chính bộ ảnh này ♥ Pray for Japan !!!Click into picture to see full size :) Hãy...











Japanese Flower [Part I] ♥

0 nhận xét


Đây là bộ ảnh về một ngôi chùa ở Nhật Bản, cảnh vật vô cùng xanh tươi, mọi người có thể lấy về để phục vụ cho việc design ảnh nhé ♥ Mình up bộ ảnh này cũng xin cầu mong cho đất nước Nhật Bản mau chóng lấy lại vẻ thịnh vượng vốn có có nó, và cũng thanh bình như chính bộ ảnh này ♥ Pray for Japan !!!


Click into picture to see full size :)





































Hãy ấn Like hoặc +1 nếu bạn thấy bài viết này có ích nhé ♥

 



Bài đăng phổ biến