22:42
Asif Qureshi
<div dir="ltr" style="text-align: left;" trbidi="on">
This can be quite important feature, if you care about it....Changing the width of your Blogger Blog will gain you some <span style="font-weight: bold;">extra space</span> (to place more gadgets, pics, ads...), or it will make your <span style="font-weight: bold;">Post section wider</span> (meaning: larger pictures, wider paragraphs), you can also add a <span style="font-weight: bold;">third column</span>, if you want.....
<span style="color: #ffcc00; font-weight: bold;">
CURRENT SITUATION (What's out there?)</span>
There's a thousands of templates out there...you have <span style="font-weight: bold;">Blogger default templates</span> + <span style="font-weight: bold;">Dozens of other sites</span> that provide a free Blogger Templates...
All right, you knew that....but here's another thing you should consider:
There are 2 kinds of templates (layouts) you can use:
► <span style="font-weight: bold;">FLUID</span> width or <span style="font-weight: bold;">STRETCH</span> templates - template that resizes to fit any computer monitor. It stretches corresponding to the monitor resolution.
Advantage is obvious, and a big disadvantage is DESIGN. It's quite restraining when it comes to this. Of course, it depends what you like. For a professional looking template, it's great....But for a personal one, it can be a bit dull.....
► <span style="font-weight: bold;">FIXED WIDTH</span> templates - they have a fixed width, regardless of monitor resolution....They are ideal for designing and customizing, but, the <span style="font-style: italic;">width</span> part can sometimes be a real pain in the....:]
...Why? Because:
<span style="font-weight: bold;">-</span> people have different Monitor (screen) sizes,
<span style="font-weight: bold;">-</span> and they use different resolutions on them...
...the final result is: <span style="font-weight: bold;">Blog appears different in each combination</span>!
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbRYViSbvqNG8sFJlSK_tf4_G17lh3GkIznfvTpDSjHSLKZluMEDujXA8diFevRFHfcPJAVm5VQk8vDAc87swL3ERydy41HG2c1SoLHsJ_H7ZaDwdjunOvrCvmeuYko3nrN8u1KTNUu0F/s1600-h/screensize.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5287115442909712834" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbRYViSbvqNG8sFJlSK_tf4_G17lh3GkIznfvTpDSjHSLKZluMEDujXA8diFevRFHfcPJAVm5VQk8vDAc87swL3ERydy41HG2c1SoLHsJ_H7ZaDwdjunOvrCvmeuYko3nrN8u1KTNUu0F/s400/screensize.gif" style="cursor: pointer; display: block; height: 131px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>Read more about <a href="http://www.thescreamonline.com/technology/monitor/monitor_res.html" target="_blank">Monitor sizes and resolution, and how to change the resolution...</a>
<span style="font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic;">◄<span style="font-size: 85%;">Imagine lying down in the grass with your nose pressed deep into the thatch. Your field of vision would not be very large, and all you would see are a few big blades of grass, some grains of dirt, and maybe an ant or two. This is a 14-inch 640 x 480 monitor. Now, get up on your hands and knees, and your field of vision will improve considerably: you'll see a lot more grass. This is a 15-inch 800 x 640 monitor. For a 1280 x 1024 perspective (on a 19-inch monitor), stand up and look at the ground. Some monitors can handle higher resolutions such as 1600 x 1200 or even 1920 x 1440—somewhat akin to a view from up in a tree...►</span></span><span style="font-size: 180%;">
</span><span style="color: #ffcc00; font-weight: bold;">SHOULD I CHANGE THE WIDTH OF MY BLOG?</span>
Well, it depends. If you already have a wide template, or you're using Stretch (fluid) layout, there's no need of doing this...
<span style="font-style: italic;">
Resolution friendly</span> means that your Blog doesn't exceed the width of 750px. Why 750? Because statistics tells us that lots of people are still using a 800x600 px resolution. And if you make your Blog wider than 750, these group of people will have to scroll <span style="font-weight: bold;">left-right</span> on your page....which is quite irritating. And you can lose those visitors....
But, there's also a saying, and it goes like this:
Lie ► A Bigger Lie ► Statistics.
If you surf a bit, and pay attention to web pages width, you'll notice that lots of web sites (even popular ones), are way over the 750 px!
So, it's really up to you....
<span style="color: #ffcc00; font-weight: bold;">LET'S CHANGE THAT WIDTH ALREADY.....</span>
The only problem here will be the <span style="font-weight: bold;">identification</span> of the CSS style in your template (Layout). This is the part in the code section that defines styling, including width of elements.
There's so many different templates around, and it's a different story for each one...
But don't worry....there's a pattern. A backbone. A Layout constitution. A certain way of organizing (naming) elements. It's basically the same thing, under the different name.....
For this example, we'll take a default Blogger template ► <span style="font-style: italic;">Minima</span>. Let's do it.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFHAR9nYMJaBTWcaaEDGxzbfytu4NAHZjoobtiUYSsGsKNIg1TFL7HzNKrnG8XXOc0xyM_SX9vQZzXOZI35Z-e_MWYiZlsRmmKuafuTTY0-sTC0xuMX7C_UPXZUPVLBEZbc3B5OIyUbTMO/s1600-h/elementi+copy.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5287118526691868210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFHAR9nYMJaBTWcaaEDGxzbfytu4NAHZjoobtiUYSsGsKNIg1TFL7HzNKrnG8XXOc0xyM_SX9vQZzXOZI35Z-e_MWYiZlsRmmKuafuTTY0-sTC0xuMX7C_UPXZUPVLBEZbc3B5OIyUbTMO/s400/elementi+copy.gif" style="cursor: pointer; display: block; height: 400px; margin: 0px auto 10px; text-align: center; width: 392px;" /></a><span style="color: #ffcc00; font-size: 180%;">1.</span> First thing is identification. Go to: LAYOUT ► EDIT HTML, and find the parts that defines the width of the <span style="font-weight: bold;">Main section</span>, <span style="font-weight: bold;">Post sections</span>, <span style="font-weight: bold;">Sidebar</span>, <span style="font-weight: bold;">Header</span> <span style="font-weight: bold;">Section</span> and <span style="font-weight: bold;">Footer</span>.
For <span style="font-style: italic;">Minima</span>, we have this situation:
<div class="codeview">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-Y2KiVxM3cON_FSBpvhoeEs2mKJwKvbbtw7XRzTrUdEc2vI82npA4gY7HgVyqBCzhnAcxpCFfP3ATMPYCNCfL9bx-3WO_oqjQg5qFAVl2cYsFgdXOuPAUapyMJE9kHPh2MHev4x6cG8/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="561" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-Y2KiVxM3cON_FSBpvhoeEs2mKJwKvbbtw7XRzTrUdEc2vI82npA4gY7HgVyqBCzhnAcxpCFfP3ATMPYCNCfL9bx-3WO_oqjQg5qFAVl2cYsFgdXOuPAUapyMJE9kHPh2MHev4x6cG8/s640/2.jpg" width="640" /></a></div>
<span class="Apple-style-span" style="color: #ffcc00;">
</span>#footer {
width:660px;
clear:both;</div>
...in <span style="font-style: italic;">Minima</span> (and lots of other templates) elements are categorized by these names:
► <span style="color: #ffcc00;">header-wrapper</span> is Header
► <span style="color: #ff99ff;">outer-wrapper</span> is our Main section, other elements are wrapped inside of it..
► <span style="color: #33cc00;">main-wrapper</span> represents Post Section
► <span style="color: #33ccff;">sidebar-wrapper</span> stands for Sidebar
► footer is Footer :]
...this means that our <span style="color: #ffcc00;">header-wrapper</span> is 660px wide, <span style="color: #ff99ff;">outer-wrapper</span> width (<span style="color: #33cc00;">Post section</span> + <span style="color: #33ccff;">Sidebar</span>+ margins) is also 660px, and footer 660 px.
<span style="color: #ffcc00; font-size: 180%;">2.</span> Let's change the width:
<div class="codeview">
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
......................................................................
#outer-wrapper {
width: <span style="font-weight: bold;">750px</span>;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
.......................................................................
#main-wrapper {
width: <span style="font-weight: bold;">500px</span>;
float: $startSide;
........................................................................
#sidebar-wrapper {
width: <span style="font-weight: bold;">220px</span>;
float: $endSide;
........................................................................
#footer {
width:<span style="font-weight: bold;">750</span>px;
clear:both;</div>
...I've decided to make my Post section (<span style="color: #33cc00;">main-wrapper</span>) wider. In order to do this, I have to increase my <span style="color: #ff99ff;">outer-wrapper</span>. Now, here's the RULE:
<span style="color: #ff6600;">◄</span> <span style="font-weight: bold;">If you want to increase the width of your Posts section or Sidebar, you HAVE to increase your Main section width (outer-wrapper) for the same value!</span> <span style="color: #ff6600;">►</span>
<span style="color: #ff6600;">◄</span> <span style="font-weight: bold;">500px + 220px + margins = 750px</span> <span style="color: #ff6600;">►</span>
In this example, I've increased my Post section (<span style="color: #33cc00;">main-wrapper</span>) for 90px, so I've changed 410px into 500px. I did the same for the Main section (<span style="color: #ff99ff;">outer-wrapper</span>), changed 660px into 750px....I've left the Sidebar the same width, 220px.
I've also changed the width for my <span style="color: #ffcc00;">header-wrapper</span> and footer....into 750px. Note that this is not necessary, but better do it...for the sake of symmetry in your Layout...
That's about it. Remember, when you're changing the width of your (custom) Blogger template, certain elements will be (can be) under different name....Do not let it confuse you! You know how the elements are organized inside of it....and in the end, its a 5 minutes job...some simple mathematics + patience.....
If you need any help, ask.....
Smile!</div>
This can be quite important feature, if you care about it....Changing the width of your Blogger Blog will gain you some <span style="font-weight: bold;">extra space</span> (to place more gadgets, pics, ads...), or it will make your <span style="font-weight: bold;">Post section wider</span> (meaning: larger pictures, wider paragraphs), you can also add a <span style="font-weight: bold;">third column</span>, if you want.....
<span style="color: #ffcc00; font-weight: bold;">
CURRENT SITUATION (What's out there?)</span>
There's a thousands of templates out there...you have <span style="font-weight: bold;">Blogger default templates</span> + <span style="font-weight: bold;">Dozens of other sites</span> that provide a free Blogger Templates...
All right, you knew that....but here's another thing you should consider:
There are 2 kinds of templates (layouts) you can use:
► <span style="font-weight: bold;">FLUID</span> width or <span style="font-weight: bold;">STRETCH</span> templates - template that resizes to fit any computer monitor. It stretches corresponding to the monitor resolution.
Advantage is obvious, and a big disadvantage is DESIGN. It's quite restraining when it comes to this. Of course, it depends what you like. For a professional looking template, it's great....But for a personal one, it can be a bit dull.....
► <span style="font-weight: bold;">FIXED WIDTH</span> templates - they have a fixed width, regardless of monitor resolution....They are ideal for designing and customizing, but, the <span style="font-style: italic;">width</span> part can sometimes be a real pain in the....:]
...Why? Because:
<span style="font-weight: bold;">-</span> people have different Monitor (screen) sizes,
<span style="font-weight: bold;">-</span> and they use different resolutions on them...
...the final result is: <span style="font-weight: bold;">Blog appears different in each combination</span>!
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbRYViSbvqNG8sFJlSK_tf4_G17lh3GkIznfvTpDSjHSLKZluMEDujXA8diFevRFHfcPJAVm5VQk8vDAc87swL3ERydy41HG2c1SoLHsJ_H7ZaDwdjunOvrCvmeuYko3nrN8u1KTNUu0F/s1600-h/screensize.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5287115442909712834" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbRYViSbvqNG8sFJlSK_tf4_G17lh3GkIznfvTpDSjHSLKZluMEDujXA8diFevRFHfcPJAVm5VQk8vDAc87swL3ERydy41HG2c1SoLHsJ_H7ZaDwdjunOvrCvmeuYko3nrN8u1KTNUu0F/s400/screensize.gif" style="cursor: pointer; display: block; height: 131px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>Read more about <a href="http://www.thescreamonline.com/technology/monitor/monitor_res.html" target="_blank">Monitor sizes and resolution, and how to change the resolution...</a>
<span style="font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic;">◄<span style="font-size: 85%;">Imagine lying down in the grass with your nose pressed deep into the thatch. Your field of vision would not be very large, and all you would see are a few big blades of grass, some grains of dirt, and maybe an ant or two. This is a 14-inch 640 x 480 monitor. Now, get up on your hands and knees, and your field of vision will improve considerably: you'll see a lot more grass. This is a 15-inch 800 x 640 monitor. For a 1280 x 1024 perspective (on a 19-inch monitor), stand up and look at the ground. Some monitors can handle higher resolutions such as 1600 x 1200 or even 1920 x 1440—somewhat akin to a view from up in a tree...►</span></span><span style="font-size: 180%;">
</span><span style="color: #ffcc00; font-weight: bold;">SHOULD I CHANGE THE WIDTH OF MY BLOG?</span>
Well, it depends. If you already have a wide template, or you're using Stretch (fluid) layout, there's no need of doing this...
<span style="font-style: italic;">
Resolution friendly</span> means that your Blog doesn't exceed the width of 750px. Why 750? Because statistics tells us that lots of people are still using a 800x600 px resolution. And if you make your Blog wider than 750, these group of people will have to scroll <span style="font-weight: bold;">left-right</span> on your page....which is quite irritating. And you can lose those visitors....
But, there's also a saying, and it goes like this:
Lie ► A Bigger Lie ► Statistics.
If you surf a bit, and pay attention to web pages width, you'll notice that lots of web sites (even popular ones), are way over the 750 px!
So, it's really up to you....
<span style="color: #ffcc00; font-weight: bold;">LET'S CHANGE THAT WIDTH ALREADY.....</span>
The only problem here will be the <span style="font-weight: bold;">identification</span> of the CSS style in your template (Layout). This is the part in the code section that defines styling, including width of elements.
There's so many different templates around, and it's a different story for each one...
But don't worry....there's a pattern. A backbone. A Layout constitution. A certain way of organizing (naming) elements. It's basically the same thing, under the different name.....
For this example, we'll take a default Blogger template ► <span style="font-style: italic;">Minima</span>. Let's do it.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFHAR9nYMJaBTWcaaEDGxzbfytu4NAHZjoobtiUYSsGsKNIg1TFL7HzNKrnG8XXOc0xyM_SX9vQZzXOZI35Z-e_MWYiZlsRmmKuafuTTY0-sTC0xuMX7C_UPXZUPVLBEZbc3B5OIyUbTMO/s1600-h/elementi+copy.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5287118526691868210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFHAR9nYMJaBTWcaaEDGxzbfytu4NAHZjoobtiUYSsGsKNIg1TFL7HzNKrnG8XXOc0xyM_SX9vQZzXOZI35Z-e_MWYiZlsRmmKuafuTTY0-sTC0xuMX7C_UPXZUPVLBEZbc3B5OIyUbTMO/s400/elementi+copy.gif" style="cursor: pointer; display: block; height: 400px; margin: 0px auto 10px; text-align: center; width: 392px;" /></a><span style="color: #ffcc00; font-size: 180%;">1.</span> First thing is identification. Go to: LAYOUT ► EDIT HTML, and find the parts that defines the width of the <span style="font-weight: bold;">Main section</span>, <span style="font-weight: bold;">Post sections</span>, <span style="font-weight: bold;">Sidebar</span>, <span style="font-weight: bold;">Header</span> <span style="font-weight: bold;">Section</span> and <span style="font-weight: bold;">Footer</span>.
For <span style="font-style: italic;">Minima</span>, we have this situation:
<div class="codeview">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-Y2KiVxM3cON_FSBpvhoeEs2mKJwKvbbtw7XRzTrUdEc2vI82npA4gY7HgVyqBCzhnAcxpCFfP3ATMPYCNCfL9bx-3WO_oqjQg5qFAVl2cYsFgdXOuPAUapyMJE9kHPh2MHev4x6cG8/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="561" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-Y2KiVxM3cON_FSBpvhoeEs2mKJwKvbbtw7XRzTrUdEc2vI82npA4gY7HgVyqBCzhnAcxpCFfP3ATMPYCNCfL9bx-3WO_oqjQg5qFAVl2cYsFgdXOuPAUapyMJE9kHPh2MHev4x6cG8/s640/2.jpg" width="640" /></a></div>
<span class="Apple-style-span" style="color: #ffcc00;">
</span>#footer {
width:660px;
clear:both;</div>
...in <span style="font-style: italic;">Minima</span> (and lots of other templates) elements are categorized by these names:
► <span style="color: #ffcc00;">header-wrapper</span> is Header
► <span style="color: #ff99ff;">outer-wrapper</span> is our Main section, other elements are wrapped inside of it..
► <span style="color: #33cc00;">main-wrapper</span> represents Post Section
► <span style="color: #33ccff;">sidebar-wrapper</span> stands for Sidebar
► footer is Footer :]
...this means that our <span style="color: #ffcc00;">header-wrapper</span> is 660px wide, <span style="color: #ff99ff;">outer-wrapper</span> width (<span style="color: #33cc00;">Post section</span> + <span style="color: #33ccff;">Sidebar</span>+ margins) is also 660px, and footer 660 px.
<span style="color: #ffcc00; font-size: 180%;">2.</span> Let's change the width:
<div class="codeview">
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
......................................................................
#outer-wrapper {
width: <span style="font-weight: bold;">750px</span>;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
.......................................................................
#main-wrapper {
width: <span style="font-weight: bold;">500px</span>;
float: $startSide;
........................................................................
#sidebar-wrapper {
width: <span style="font-weight: bold;">220px</span>;
float: $endSide;
........................................................................
#footer {
width:<span style="font-weight: bold;">750</span>px;
clear:both;</div>
...I've decided to make my Post section (<span style="color: #33cc00;">main-wrapper</span>) wider. In order to do this, I have to increase my <span style="color: #ff99ff;">outer-wrapper</span>. Now, here's the RULE:
<span style="color: #ff6600;">◄</span> <span style="font-weight: bold;">If you want to increase the width of your Posts section or Sidebar, you HAVE to increase your Main section width (outer-wrapper) for the same value!</span> <span style="color: #ff6600;">►</span>
<span style="color: #ff6600;">◄</span> <span style="font-weight: bold;">500px + 220px + margins = 750px</span> <span style="color: #ff6600;">►</span>
In this example, I've increased my Post section (<span style="color: #33cc00;">main-wrapper</span>) for 90px, so I've changed 410px into 500px. I did the same for the Main section (<span style="color: #ff99ff;">outer-wrapper</span>), changed 660px into 750px....I've left the Sidebar the same width, 220px.
I've also changed the width for my <span style="color: #ffcc00;">header-wrapper</span> and footer....into 750px. Note that this is not necessary, but better do it...for the sake of symmetry in your Layout...
That's about it. Remember, when you're changing the width of your (custom) Blogger template, certain elements will be (can be) under different name....Do not let it confuse you! You know how the elements are organized inside of it....and in the end, its a 5 minutes job...some simple mathematics + patience.....
If you need any help, ask.....
Smile!</div>
Posted in: Change the Width of Your Blog
0 comments:
Post a Comment