Friday, January 6, 2012

Create A Beautiful Advertisement Box

4 komentar
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"or "How to Change Blockquote Design On Blogger"

4 komentar:

  1. I've seen this being use on csstricks advertising space if I'm not mistaken. Interesting. Don't know if I'd ever apply that to my my blog, but still it's interesting.

    ReplyDelete
  2. Searching bankruptcy court document are often boring and time consuming to go through, especially when you need to go through the records to find details of many, it is ideal to undertake the help of paid service providers.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete