Basic Rounded Border HTML Widgets Blog

The new Template Designer is mostly featured with rounded border. Rounded border obviously looks more beautiful than square border. But unfortunately it is not support by Internet Explorer as IE does not support Advance HTML code. It is nice view on Firefox browser. I had designed my Water Splash Template using this rounded corners. Use it with the new Transparent background image from template designer will get a fully beautiful 3D background. Besides it is simply applied to your template.
1) The basic rounded corner CSS is like this :

.examplewidget {
  margin:0 0 10px 0;
  padding:10px 5px;

border:1px solid #4E7597;

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 0px 10px;

}

2) moz-border-radius rule is : top left, top right, bottom right, bottom left.
Example 1

Use top 10px and bottom 20px
.examplewidget {
  margin:0 0 10px 0;
  padding:10px 5px;
border:1px solid #000000;
  -moz-border-radius: 10px 10px 20px 20px;
  -webkit-border-radius: 10px 10px 20px 20px;
 }

<div style="background-color: #cccccc; width:400px; height:50px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >
</div>
use : 5px

use : 10px

use : 15px

use : 20px

3) Example2
Top left 20px, Top Right 5px, Bottom right 20px and Bottom Left 10px
<div style="background-color: #6B6BFF; width:400px; height:50px; -moz-border-radius: 20px 5px 20px 10px; -webkit-border-radius: 20px 5px 20px 10px; border: 1px solid #000; padding: 10px;" >
</div>

<div style="-moz-border-radius: 10px 20px 10px 20px; -webkit-border-radius: 10px 20px 10px 20px; background-color: #6b6bff; border: 1px solid rgb(0, 0, 0); height: 50px; padding: 10px; width: 400px;">
</div>

Thats the basic way to add rounded border properties on square border. Next i would explain how to rounded the border of each widget on blogger template.

Move Blogger NavBar to Bottom Blog Autohide

Blogger and wordpress is known as the best free blogging platform. Currently blogger had increased their features step by step. It makes us more convenient and confident use blogger as a platform. It is free of charges either the domain or the bandwidth although we have some limitation but it is still acceptable. Blogger NavBar is one of the annoying feature that mostly avoid by senior or professional bloggers. It makes the page view poorly. So many bloggers remove or hide this navbar. The other solution to pay some respect to our free platform (blogger) is moving the NavBar from the top of page to bottom of page also hiding it and shown only when the mouse hover at the bottom page. This is the best solution i thought that will give us win-win situation. Thats my instinct. We don't know when will blogger change their TOS regarding the NavBar someday. The trick is quite simply.
The Blogger Navbar appears by default at the top of every Blogger-powered blog and the features include:
  * Takes you back to www.blogger.com.
  * Search Blog: results showed directly on the page.
  * Flag Blog: mark blog as objectionable.
  * Share: promote to Twitter, Facebook, Google Buzz & Google Reader
  * NextBlog: go to updated Blogger blog.
  * Email Address: if you are logged in.
  * Dashboard: a link to your own dashboard.
  * Sign In/Out

THE TRICK
1. Log in to your account and go to Layout => Edit HTML
2. Scroll down find "Variable Definitions" or Body {

3. Put this snippet code after Variable Definitions or before Body {

* html #navbar-iframe {
position: relative;
}
#navbar-iframe{
position: fixed;
bottom: 0px;
opacity:0.0;
filter:alpha(Opacity=0,FinishedOpacity=0)
}
#navbar-iframe:hover{
opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100)
}

4. You can change some variable i.e.:

* Your NavBar position from bottom page at : bottom:0px;
e.g.  bottom: 10px;

* Opacity when mouse hover at :
  opacity:1.0;filter:alpha(Opacity=100,
  FinishedOpacity=100)
e.g.
  opacity:0.7;filter:alpha(Opacity=70,
  FinishedOpacity=70)

Blogger made good effort to make sure the Navbar doesn't interfere with custom template designs by  provided several colors to suit your template. Hopefully uncle Google gives more love and more frequently  crawl your sites as you still put this navbar. Pray he will gives you more PR juice. lol.
The weakness is this tweak only support Mozilla Firefox browser and Opera. I.E still does not support advance HTML up till now. Luckily more than 50% bloggers or webmaster already use the famous firefox browser that kindly support advance HTML. Do you like this tricks or you prefer remove/hidden your navbar at all? Let me know your thoughts. Everyone has his own choice, you are a free bloggers.

Use Background Image from Template Designer

Since the template designer announced, there were quite a few cool images we could use. I would like to tell you how you could use the new template in your old blog without change all your template to the new template designer as i did. First you must create a new blog e.g. http://Trying-your-blogname.blogspot.com. Choose a new template designer you like the most then save it. Go to your Layout - Edit HTML without check the expand widget templates. Scroll down a bit and find any images under /* Variable definitions

(use CTRL + F) Hint : Png or Jpg.

For example :

<Variable name="body.background" description="Body Background" type="background" color="$(body.background.color)" default="#296695 url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center" value="#FFFFFF url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center"/>

Copy Paste the image URL in your Notepad editor. Try to open the image URL you just copy in a new tab and view that image.

If you satisfied with the image than apply that images url in your old template as usual in :

#Body or #Outer Wrapper

Do not forget to set CSS background properties effect for your background image.

    * background-color

    * background-image

    * background-repeat

    * background-attachment

    * background-position

Example :

body {

background:#FFFFFF url('Use-Background-Image-from-Template-Designer.PNG') no-repeat top center;

}

Now you will have a cool background image from new template designer without bandwidth limitation and fastest loading than any hotlink sites.

Blogger New Template Designer in Water Splash

This is my first post and i use based on well known Minima template then mixing it with the new Template Designer in blogger in draft, also add some codes and here you could seen it as Water Splash Template. Basically the idea is to make a new template with Transparent image background and use a rounded border as much as possible to make it more stylish. The design looks cool and does not make eye fatigue as it uses much soft blue color. This way will make me could explore all the images without loosing the SEO technique as it renders the Post first than the sidebar.

The worst thing is this template only works best (i mean views) on Firefox browser. IE still does not support many advanced CSS properties like border-radius. What do you think about my template here? Is it cool or not? Needs your comment. Next i will try to explain all the tweak to make your old template (based on Minima) to a new template designer easier. Just wait my post later on.