Simple CSS3 powered Ad Banner

Tạo 1 banner quảng cáo đơn giản với hiệu ứng CSS3, làm đẹp thêm cho phần quảng cáo của bạn...

Demo


Để thêm Widget, bạn click vào add Widget banner

Hoặc tạo 1 Widget HTML mới và thêm vào đoạn code sau:

01

<style>

02

.squarebanner ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 0px 0px;width:300px;overflow:hidden;}.squarebanner ul li{list-style-type:none;margin: 0px 1px 0px 3px;float:left;display:inline;background:orange;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;}.squarebanner ul li:hover {-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-o-border-radius:15%;-webkit-border-radius:15%;-moz-border-radius:15%;border-radius:15%;}.squarebanner ul li:active {-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;-o-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}.squarebanner ul li a img{-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px;}

03

</style>

04	<div class="squarebanner ">

05

<ul>

06	<li style="background: blue !important;">

07	<a href="URL">

08	<img height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYQYQ_04GsZdwPcGPBaTA9yB2q-KDzyZYEZ5Np5TY2EedAprRJtIceM77WBq5MG251aXqskKqo82y4sa3jswg3LFBcWuOF9w0LXxj_2rLqImr3IfjPO2Sqs88_pYJBrGYwMYOsu3VSf08/s1600/Advertise+Here.png"width="120" /></a></li>

09

</ul>

10

</div>

Bạn nhớ thêm link vào dòng 07 nhé!
Chúc bạn thành công