Friday, January 6, 2012

Create A Beautiful Advertisement Box

I always visit Spice Up Your Blog blog, because i think i can get many information about web design, sometimes i can get an idea because spice up your blog. And today im very excited because i think the "Advertise Here" Widget on spice up your blog is very beautiful and great. If you like that but you dont know how to create a beautiful advertisement box like that, i will give you a tutorial about that.
So Lets Create A Beautiful Advertisement Box

1. Login to blogger
2. Layout - Edit HTML
3. Paste this code below before </b:skin>
#advertisement{background:#81acc7; padding-top:60px; padding-bottom:65px; width: 250px;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:15px;
font-family: 'Yanone Kaffeesatz', arial, serif;
text-align:center; color:#fff;font-size: 18px;}
#advertisement:hover{background:#81acc7;
-moz-border-radius-bottomleft:60px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:60px;}
#advertisement a:hover{color:#fff;}
55px; padding-bottom:57px; width: 125px; margin-bottom:10px; float:left;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:15px;
font-family: 'Yanone Kaffeesatz', arial, serif;
text-align:center; color:#fff;font-size: 18px;}
And then save your template
5. And now go to Layout - Page Element
6. Click add gadget - Add HTML/Javascript
7. And then paste this code below
<div id='advertisement'>
Advertise here
</div>
8. And then save it.
advertisement, advertise here, advertise here widget
"Advertise Here" Widget - Blog Yahyagan

advertisement, advertise here, advertise here widget
"Advertise Here" Widget Spice Up Your Blog
Try to place your mouse (cursor)  on the advertisement box, you'll see what happen. I thinks that's a really great hover effect.
Now you'll see how the code look like. I love the transtition effect. And remember i get this idea and inspired by SpiceUpYourBlog. Maybe sometime you can visit SpiceUpYourBlog, you'll find great blogger tutorial. So let's follow that blog.
Next time i will show you a tutorial, how to change blogger font.
Inspired By : SpiceUpYourBlog
Lets see next post, "3 Ways To Increase Your Visitor Massively"

No comments:

Post a Comment

My Ping in TotalPing.com
Feedage Grade D rated
Preview on Feedage: web-design Add to My Yahoo! Add to Google! Add to AOL! Add to MSN
Subscribe in NewsGator Online Add to Netvibes Subscribe in Pakeflakes Subscribe in Bloglines Add to Alesti RSS Reader
Add to Feedage.com Groups Add to Windows Live iPing-it Add to Feedage RSS Alerts Add To Fwicki
Ping your blog, website, or RSS feed for Free