Microsoft Surface... Code name Milan.

Technology has been a part of our life, ever since we are born. Scientists, researchers, inventions and theories explaining an existence of something are already there. The eagerness of human to know something new and to discover new things lead us to a high technology that we have now. Things that we have now which are products of technology indeed helped us a lot in so many different ways. Computers are just one of the inventions that are widely utilized now all over the world. Who do not know Bill Gates? Well I guess all of us know who he really is but let me give brief information about him for those who just know him by name. Bill Gates is the head of the software company Microsoft and is one of the world's wealthiest men. Together with Paul Allen they founded Microsoft in the 1970s, though Allen left the company in 1983. Gates oversaw the invention and marketing of the MS-DOS operating system, the Windows operating interface, the Internet Explorer browser, and a multitude of other popular computer products. Along the way he gained a reputation for fierce competitiveness and aggressive business savvy and had been famous on the whole wide world for his biggest contribution on technology. During the 1990s rising Microsoft stock prices made Gates the world's wealthiest man; his wealth has at times exceeded $75 billion, making Gates a popular symbol of the ascendant computer geek of the late 20th century. In June of 2006, Gates announced that he would step down from day-to-day involvement in Microsoft by July of 2008. He said he would then remain chairman of the Microsoft board while focusing on his charitable foundation, the Bill and Melinda Gates Foundation. Speaking of Bill Gates and Microsoft, we all know that Microsoft and Gates is the biggest contributor on the rapid development of technology. Starting 2001 Stevie Bathiche of Microsoft Hardware and Andy Wilson of Microsoft Research formulated ideas and conceptualized an interactive table wherein they can mix the physical and virtual worlds that will surely bring an exciting interactive experience.

Microsoft Surface preview.



Now Microsoft launches a new product category the Microsoft Surface. What is it? Imagine a table wherein you can do different stuffs by merely just touching it without the need of any keyboard or mouse, just using your bare hands will enable you to interact with the virtual world. That’s the beauty of the Microsoft Surface. Surface turns an ordinary tabletop into a vibrant, dynamic surface that provides effortless interaction with all forms of digital content through natural gestures, touch and physical objects. The intuitive user interface works without a traditional mouse or keyboard, allowing people to interact with content and information on their own or in collaborative interaction that will allow the people to perform multi tasking on just one table. Surface is a 30-inch display in a table-like form factor that small groups can use at the same time. From digital finger painting to a virtual concierge, Surface brings natural interaction to the digital world in a new and exciting way. Microsoft Surface puts people in control in letting them feel the entertainment and enjoyment that the technology offers.





It will also help the people to perform their tasks fast and efficient, imagine ordering a beverage with one tap of a finger, during your meal without finding it hard for you to call or wait for a waiter to be available to take your order. Imagine having your favorite songs in your i-pods by just dragging the song of your choice and moving it into your i-pod with just the use of your finger. Surface also enables you to know a content of something, it also allows you to browse your pictures and adjust it size as well as with the videos, and simply copy it to another cell phone again by merely using your finger. It even allows you to look at recommended hotels and plan a trip without leaving the table. Because of its incredible features it motivated different companies to purchase Microsoft Surface, and use it to improve the quality of their services. Harrah’s Entertainment Inc., Starwood Hotels & Resorts Worldwide Inc., and T-Mobile USA Inc. will be some of the first companies to provide unique Surface experiences for their customers. These first partners are exploring a variety of avenues for Surface.

3 Column Minima Templates for blogger part 2

Now let's get started this will be the part 2 of my post on how to edit your template If you read my first post on how to add another "Sidebar" on the left of the post or probably you know it as a " 3 column template " this post is the continuation of the tutorial, but if you don't see my first tutorial yet here is the link on my first post 3 column minima template, This continuation is all about editing your " Page element ", Now saying that you already follow the instruction and already have a " left sidebar " the picture will look like this on your " Page element " .

But if you already have a 3 column template that you downloaded in different site and it doesn't look like that when you go to " Page element " that's fine you could still use this tutorial on how to add another " Add a Page Element " on your page element section, just scroll down to Adding Add a Page Element. Now back to our tutorial first let's fix the expanded view of the layout and also remove the scroll section on the bottom of the editor. Go to " Edit HTML " again, and remember to save a copy of your template on your computer, always do that if you want to edit something on your HTML so that if something goes wrong you can just upload it back. just click on the " Download Full Template ". see picture below for sample.





Fixing the expanded view of the Page element.


there are 3 basic highlighted color on this post.

"Blue color is the HTML you copy"...

"Green highlighted color is the one you paste"...

"Yellow color is the one you change or replace"...

When your done saving your template scroll down and search for this below.


/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout #sidebar-wrapper,
body#layout #leftsidebar-wrapper {
width: 150px;
}


Copy the blue highlighted color and paste it after " margin-right: 0px;} " then save it. If you copy it right and paste it correctly you'll see the picture like this on your Page element.

Adding " Add a Page Element ".

Now let's add a Page element above the " Header " putting a page element above the header will help you a lot if you want to put a link to your home page or another blog link like gallery, downloads, movie etc. any link you want to put. Or adding a Google AdSense image above the header will increase the chance of clicking the AdSense. Go to Edit HTML and scroll down or press " Ctrl+F " then search for the HTML code like this.


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>



change the yellow highlighted number to 2 and change no to yes like you see above, and you'll probably see the page element that i circle above the headers. See the sample picture below.






Adding "Add a Page element" above the " Blog Post ".

Scroll down and search for this code.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>


Change the yellow highlighted color after doing that you'll see the page element just like this.







Last is Adding " Add a Page Element " after the headers.


Scroll down again and search for the code below.


<div id='content-wrapper'>


<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>


<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Change the yellow highlighted color to yes, But if you don't have the green highlighted color and you can't find it just copy all the green highlighted color and paste it after this " <div id='content-wrapper'> " , Now see picture below it will look like this.

Now your done adding 3 " page element ", you have now 6 Page elements.

see picture below.

3 Column Minima Templates for blogger.

As a new blogger we always wanted to improve our site and to make our readers more interested, convenient and comfortable in reading the blogs. Below I will give you some techniques on how you can improve your site or your blogger. Just read it with comprehension and pay more attention to it. And you will definitely learn and use all the techniques written below, that will somehow help you in improving your blog. But if you don't want to go on to this tutorial, just want the 3 column minima template there's the easy way on doing it just download the 3 column minima templates that i made there are 4 colors to select just right click on the title and then save.

3 Column Minima White



3 Column Minima Black



3 Column Minima Blue



3 Column Minma Ochre

First let us see the picture below, as you can see in the picture you can notice that it is the normal template for blogger blog which you can probably find in Pick New Templates.you could pick any color you want, There are four type of colors in Minima templates and you could easily change the color of your background and fonts in "Fonts and Colors"section.



I use the Minima white template for my sample. See picture below, you can see a circle which I place around the the side bar on the right and the post on the left, That's the normal template it doesn't have any side bar on the left, Now let us try to do it a little more interesting let's put another side bar on the left, as a 3 column template and stretch it or Expand the wrapper the header just follow the instruction below...

Ok first pick any type of color on minima template then click save when your done, go to "Edit HTML"you'll see it after the Fonts and colors or before Pick new template. but if you already have the minima template and just want to expand your template or just want to put side bar on the left you could also use this tutorial. Now before you edit your template always save a backup of your template in your computer so if something goes wrong you could just upload it back when you need too, Click on "Download full template" then save it. see the picture sample below.



Adding a New Sidebar

Now let's start putting another side bar first you need to scroll down and search for the highlighted text.
"TIP" the easy way to search for HTML or words just " hold Ctrl and press F " you will see a box like this...


If your using "Mozilla Firefox" the box is on the bottom of the page shown like this..


If you go on to this tutorial you will notice that i put a highlighted color on the text so that you will recognize which one will you copy, paste and replace just follow the three steps.

"Blue color is the HTML you copy"...

"Green highlighted color is the one you paste"...

"Yellow color is the one you change or replace"...

Understanding on what your doing can make your job easier in template there are 3 basic wrapper namely is the...

"#outer-wrapper" – referring to the entire blog

"#main-wrapper" – referring to the main Blog Posts

"#sidebar-wrapper" – referring to the right sidebar.

Putting the left Sidebar.

Scroll down and search for “ #sidebar-wrapper ” Copy the blue highlighted HTML code and paste it immediately after it, but don't forget to rename the second one. Replace the yellow highlighted color to " #leftsidebar-wrapper { " also the " right " to " left " as shown below.


#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#leftsidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}




Editing and Expanding wrapper

After that adjust the width settings of all the wrappers.

For the outer-wrapper 960px, for main-wrapper 470px.
You can of course change these values, as long as the total widths of both sidebar-wrappers and the main-wrapper do not exceed the width of the outer-wrapper.


Now put a margin on the left of the " main-wrapper " to allow some space to the leftsidebar put this HTML code " margin-left: 25px; " below of " width: 470px; ", it shown like this...




#outer-wrapper {
width:960px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 470px;
margin-left: 25px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#leftsidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Adjust the width of "Header" and "Footer".

Now you have to widen your " header-wrapper " and your " footer " to align it to your layout. the normal side of the header and the footer is " 660 " for my sample it is 960, but if you want to change these value that's fine if you want a smaller header-wrapper and footer or bigger it's ok. scroll down and find this...



#header-wrapper {
width:660px;


#footer {
width:660px;

change it to this...

#header-wrapper {
width:950px;

#footer {
width:950px;



Where to place the New Sidebar

When your done, scroll down again and search for this HTML code, " <div id='main-wrapper'> " you have to add the highlighted green color above this code <div id='main-wrapper'> if you put it right it will probably show on the leftsidebar, but if you want your post to be on the left and the two sidebar on the right do the sample below also...

Left Sidebar = Post = Right Sidebar
<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>




Post = Left Sidebar = Right Side bar

<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Click preview and when your satisfy save it. Where done putting the left Sidebar or making it as a 3 column template, Now let's edit the " Page elements " we have to align it so that it will not exceed on the box editor and let's add more " Add a Page element " you can see the picture below.

Here's the picture sample of how the Page element will look like if your done editing it, see picture below I put some circle on how many is the " Add a Page Element " and the layout is fix inside the box already.

Refer to my next post on 3 Column Minima Templates for blogger part2".