So Lets Create A Beautiful Advertisement Box
1. Login to blogger
2. Layout - Edit HTML
3. Paste this code below before </b:skin>
And then save your template#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;}
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'>8. And then save it.
Advertise here
</div>
"Advertise Here" Widget - Blog Yahyagan |
"Advertise Here" Widget Spice Up Your Blog |
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