Friday, January 06, 2012

Lets Create A Great Advertisement Widget On Your Site

1 komentar
Sometimes i 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
Source : Blog Yahyagan

1 comment:

  1. It is the best technology of chips. The computer chip is the best quality of chips and they worked for long time. I like it.

    ReplyDelete

 
My photo
15 years old blogger from Indonesia. Yahya Ayyash. Born on 4th March 1996. Started blogging since 2011, part time blogger. Just an amateur web designer, graphic designer and blogger. Student at SMAN 9 Bandung, at Ten Three Class. Please follow my twitter and like my facebook fan page.