Phân banner 4 quảng cáo 125×125 vào Web, Blogspot

Viết Blog hoặc xây dựng 1 Website hầu hết đều có mục đích kiếm tiền. Và việc đặt quảng cáo là 1 hình thức kiếm tiền được nhiều Blogger hướng tới. Việc tối ưu hóa quảng cáo sao cho bắt mắt, nổi bật nhưng không chiếm quá nhiều diện tích cũng là điều Webmasters quan tâm.
- Bài viết này ITViet360 chia sẻ với bạn đọc 1 đoạn code CSS + HTML giúp bạn phân chia 4 quảng cáo với kích thước 125×125. Đây là mẫu quảng cáo giúp bạn đặt được nhiều banner mà không tốn quá nhiều diện tích. Thêm và đó là hiệu ứng thay đổi khi rê chuột cũng khá ngon.

DEMO TẠI ĐÂY

Đây là đoạn code:

<style>
#MD-ads img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:70px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}
#MD-ads img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
}
</style>
<div id="MD-ads" align="left">
<table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#fff"><tbody>
<tr>
<td>
<center>
<a href="http://www.itviet360.com" rel="nofollow">
<img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPOWDarz_9or7jN8PNs-EiFH5WdCOQWbOorTl-nlTShBDVk-t0I_5TXXOboIJLBITgvoOgvHcpab324K-07dxnfu3u8xoJtoqBOyPmUfGlxaBHcNsR6lOdDxYkeKO3A2GdCORCpeNncY/s1600/ad-here.png" height="125"/></a>
</center>
</td>
<td>
<center>
<a href="Advertiser URL 2" rel="nofollow">
<img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPOWDarz_9or7jN8PNs-EiFH5WdCOQWbOorTl-nlTShBDVk-t0I_5TXXOboIJLBITgvoOgvHcpab324K-07dxnfu3u8xoJtoqBOyPmUfGlxaBHcNsR6lOdDxYkeKO3A2GdCORCpeNncY/s1600/ad-here.png" height="125"/></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="ADVERTISER URL 3" rel="nofollow">
<img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPOWDarz_9or7jN8PNs-EiFH5WdCOQWbOorTl-nlTShBDVk-t0I_5TXXOboIJLBITgvoOgvHcpab324K-07dxnfu3u8xoJtoqBOyPmUfGlxaBHcNsR6lOdDxYkeKO3A2GdCORCpeNncY/s1600/ad-here.png" height="125"/></a>
</center>
</td>
<td>
<center>
<a href="ADVERTISER URL 4" rel="nofollow">
<img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPOWDarz_9or7jN8PNs-EiFH5WdCOQWbOorTl-nlTShBDVk-t0I_5TXXOboIJLBITgvoOgvHcpab324K-07dxnfu3u8xoJtoqBOyPmUfGlxaBHcNsR6lOdDxYkeKO3A2GdCORCpeNncY/s1600/ad-here.png" height="125"/></a>
</center>
</td>
</tr>
</tbody>
</table>
</div>
<table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#fff"><tbody>
<tr>
<td>
<center>
<a href="Advertiser URL" rel="nofollow">
<img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPOWDarz_9or7jN8PNs-EiFH5WdCOQWbOorTl-nlTShBDVk-t0I_5TXXOboIJLBITgvoOgvHcpab324K-07dxnfu3u8xoJtoqBOyPmUfGlxaBHcNsR6lOdDxYkeKO3A2GdCORCpeNncY/s1600/ad-here.png" height="125"/></a>
</center>
</td>
<td>
<center>
<a href="Advertiser URL 2" rel="nofollow">
<img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPOWDarz_9or7jN8PNs-EiFH5WdCOQWbOorTl-nlTShBDVk-t0I_5TXXOboIJLBITgvoOgvHcpab324K-07dxnfu3u8xoJtoqBOyPmUfGlxaBHcNsR6lOdDxYkeKO3A2GdCORCpeNncY/s1600/ad-here.png" height="125"/></a>
</center>
</td>
</tr>
<tr>
<td>
<center>
<a href="ADVERTISER URL 3" rel="nofollow">
<img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPOWDarz_9or7jN8PNs-EiFH5WdCOQWbOorTl-nlTShBDVk-t0I_5TXXOboIJLBITgvoOgvHcpab324K-07dxnfu3u8xoJtoqBOyPmUfGlxaBHcNsR6lOdDxYkeKO3A2GdCORCpeNncY/s1600/ad-here.png" height="125"/></a>
</center>
</td>
<td>
<center>
<a href="ADVERTISER URL 4" rel="nofollow">
<img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPOWDarz_9or7jN8PNs-EiFH5WdCOQWbOorTl-nlTShBDVk-t0I_5TXXOboIJLBITgvoOgvHcpab324K-07dxnfu3u8xoJtoqBOyPmUfGlxaBHcNsR6lOdDxYkeKO3A2GdCORCpeNncY/s1600/ad-here.png" height="125"/></a>
</center>
</td>
</tr>
</tbody>
</table>

Trong đó các bạn có thể tùy chỉnh CSS và những giá trị banner, liên kết quảng cáo.
Đối với Blogger bạn thêm trực tiếp vào 1 tiện ích
Bảng điều khiển Blogger -> Bốc cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/CSS
Chúc các bạn vui vẻ! Chuyên mục: html-css, Source code, Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger