Nhiều Header trong một Blog

Bạn có muốn blog của mình sẽ có nhiều hơn một Header? Bạn muốn "show" với mọi người những banner tuyệt đẹp do mình tự làm trên Header? Với Blog hiện tại, bạn chỉ có một Header , vậy giải quyết vấn đề này thế nào? Dưới đây là một cách giúp bạn có thể thấy được nhiều Header trong blog chỉ với thao tác đơn giản là di con trỏ...

Tôi đã tìm thấy được thứ này tại đây. Ứng dụng này có thể dùng với Layout Template cũng như Classic Template. Trong trang web trên, chỉ cần bạn di chuột tới 3 ô Blue, Red, Green, bạn sẽ thấy trên Header của họ xuất hiện ba bức hình khác nhau. Với rất nhiều người rành về Flash, họ có thể tạo cho mình một bức hình có thể thay đổi liên tục. Nhưng đi với nó là tốc độ load trang của bạn sẽ rất chậm. Còn với cách này bạn sẽ không phải lo lắng điều đó. Ngoài ra bạn có thể thêm bao nhiêu Header cũng được, đó có thể là một bất ngờ thú vị với người đọc của bạn!

1) Tạo Banner:
Viếc đầu tiên là bạn cần có bốn bức tranh với kích thước bằng với kích thước Header của Blog. Nếu bạn không tự tạo những bức tranh đó, tại sao bạn không thử sử dụng các dịch vụ tạo Logo/Banner miễn phí trên mạng. Bạn có thể đọc bài viết hướng dẫn tạo Logo/Banner, bạn sẽ tìm được thứ mình muốn trong bài viết này.

2) Upload:
Bước tiếp theo là bạn cần upload những bức tranh đó lên một free Host như Google Page chẳng hạn và copy URL của những bức tranh đó.

3) Thay đổi CSS
Bạn cần thay đổi những đoạn mã CSS trong Blog của mình. Đầu tiên bạn hãy đăng nhập vào Dashboard --> Layout --> Edit Template. Bạn hãy lưu lại Template cuả mình lại, sau đó thêm vào phía dưới thẻ </title> đoạn code sau:

<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="http://www.andyrutledge.com/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->

Đây là Patch để sửa những lỗi trong các trình duyệt của Microsoft.
Bây giờ bạn hãy paste đoạn code sau đây vào dưới thẻ .

/*-------------- Code của các Haeder------------------*/

#picture {
margin: 5px auto 0;
width: 600px;
height: 150px;
background: url("URL Header 1") no-repeat top left;
clear: both;
}

#nav {
margin: 0 auto;
margin-left:-10px;
width: 660px;
height: 40px;
background: #fff;
clear: both;
}

#nav ul {
list-style: none;
line-height: 40px;
font-weight: bold;
font-size: 12px;
}

#nav li {
float: left;
background: transparent;
}

#nav li a {
width:200px;
line-height: 40px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}

#nav ul li a:hover {
color: #fff;
background: #000;
}

#nav li ul {
position: absolute;
background: #fff;
left: -5000px;
top: 50px;
}

#nav li li {
width: 600px;
}

li#blue a {
background: #09f;
}

li#red a {
background: #c00;
}

li#green a {
background: #390;
}

li#blue:hover ul {
left: auto;
margin-left: -40px;
width: 350px;
height: 150px;
}

li#red:hover ul {
margin-left: -240px;
left: auto;
width: 600px;
height: 150px;
}

li#green:hover ul {
margin-left: -440px;
left: auto;
width: 600px;
height: 150px;
}

Chọn 1 trong 4 các bức tranh để làm Header đầu tiên ( header này sẽ luôn xuất hiện nếu như bạn không di chuyển con trỏ tới các ô Red, Green hay Blue). Copy và paste URL của bức tranh đó vào
URL Header 1.

4) Thay đổi HTML:
Các bạn tìm đến đoạn code sau:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>
<b:widget id='HTML13' locked='false' title='' type='HTML'/>
</b:section>
</div><!-- end header-wrapper -->

Bạn thay đoạn code trên bằng đoạn code dưới đây:

<div id='picture'> </div>
<div class='clearfix' id='nav'>
<ul>
<li id='blue'><a href='#' title='blue'>Second Header</a><ul><li><img alt='Blue' src='URL bức hình 2'/></li></ul></li>
<li id='red'><a href='#' title='red'>Third Header</a><ul><li><img alt='Red' src='URL bức hình 3'/></li></ul></li>
<li id='green'><a href='#' title='green'>Four Header</a><ul><li><img alt='Green' src='URL bức hình 4'/></li></ul></li>
</ul></div>

Bây giờ bạn chỉ còn việc save lại và...... xem thành quả thôi!!
Bạn có thể xem bản Demo


Cám ơn các bạn đã theo dõi bài viết. Mong sẽ nhận được nhiều ý kiến đóng góp từ các bạn để giúp hoàn thiện nội dung bài viết hơn..
Chúc các bạn có 1 ngày vui vẻ!

AdSense Earning = Impression-count x Click-though-rate x Cost-per-click x smart-pricing-factor.impression count is basically referring to increase your traffic. It means the number of times AdSense secret block is displayed.Click-through-rate (CTR) is ratio of clicks per impressions. It can range from 0.1% to 30%, but most commonly around 1% to 10%.Cost-per-click (CPC) is the earning money you get per click. While traditionally it refers to the amount advertisers pay for each click, it can also mean the amount publishers get for each click.Smart-pricing is AdSense method to determine how valuable clicks from your site is worth. If clicks on your site doesn’t provide good value to advertisers, e.g. from visitors’ geo-location that seldom translate to sales, you will only get a fraction of the supposed CPC.Don’t encourage your visitors to click on ads. The only acceptable text is “Sponsored Links” and “Advertisements”.When in doubt don’t hesitate to contact the AdSense team. They are very helpful.Use Overture Bid Tool and Search Engine Keyword Tool to find suitable keyword.Submit your URL to search engines for crawling.Google is not the only search engine. Optimize for different engines as well. You are very likely to face less competition than in Google.Search engines are where most of your new visitors come from. Learn a bit about Search Engine Optimization, or pay people to do it. Doing it yourself will save yourself from troubles created by not-so-honorable SEO (Search Engine Optimizer).Try 300×250 medium rectangle, 336×280 large rectangle, or 160×600 wide skyscraper ad formats. These are the best performing AdSense ad formats.Wrap the AdSense block around your content.AdSense have both CPM (cost per thousand impressions) and CPC (cost per click) ads, and will choose the one it thinks can perform better.Adsense tips have in here.Search “AdSense Tips” on Google. Most webmasters continuously try to optimize their AdSense and many are more than willing to share their result.You can get help of other AdSense pulishers at AdSense Help Group.Remove the “Advertise on this site” from your AdSense block until your site is big enough to attract real advertisers. This will help to clear off many MFA (made-for-adsense) sites. You can disable it from AdSense account setting.Use AdSense Competitive Ads Filter to remove irrelevant ads.Try variations of AdSense colors, format, position on different pages to make it more unpredictable for your visitors.Watch your AdSense tips earning. Notify AdSense hack Team if you find anything suspicious. Your competitors might try to sabotage your account, or your well-meaning friend keep on clicking on the ads thinking they are helping you.Use Google AdSense section targeting to help AdSense deliver more relevant ads.Let earning money!money!