Selasa, 16 Agustus 2011

HOW TO DRAW NARUTO FACE


Naruto is a young ninja from the village of Konoha. His primary motivation throughout the series is to become the village leader of Konoha. During the series, Naruto evolves from simple-minded prankster who wishes for acceptance in the group to a much mature character, although he still retains some of his childhood traits. He is part of the Team 7, along with Sakura Haruno, Sasuke Uchiha, and their sensei, Kakashi Hatake.

How to draw Naruto in 9 steps.

Step 1


Step 2


Step 3


Step 4


Step 5


Step 6


Step 7


Step 8


Step 9






Read More

HOW TO DRAW SAKURA FACE


We are going to learn how to draw Sakura. We’ll have a drawing guide in steps.

If you want to find out more about Sakura, then just go have a look at this list of Naruto characters. Cause we’re going straight to business… aaa drawing.

Step 1


Step 2


Step 3


Step 4


Step 5


Step 6







Read More

HOW TO DRAW SASUKE FACE


We’re going to see how to draw Sasuke Uchiha. For those of you not knowing who Sasuke Uchiha is, i added these extra lines: Sasuke is a member of the Uchiha clan, whom he joined in order to revenge the destruction of his clan. He is cold and very quite, and has the habit of making Naruto the object of his ridicule and insults. That’s why Naruto is often annoyed with him and considers him his rival. With a struggling past, Sasuke is a very interesting character. His special techniques are “Barrage of Lions” and “Fire Styles” jutsu.

How to draw Sasuke Uchiha in 9 steps

Step 1


Step 2


Step 3


Step 4


Step 5


Step 6


Step 7


Step 8


Step 9





Read More

HOW TO DRAW KYUBI CUTE


We are going to learn how to draw Kyubi Cute. It won’t be so hard, as our lesson contains only 9 steps.

How to draw Kyubi Cute in 9 steps

Step 1


Step 2


Step 3


Step 4


Step 5


Step 6


Step 7


Step 8


Step 9


That wasn’t so hard, was it?





Read More

Jumat, 15 Juli 2011

Create Vertical Menu


We have learned how to create horizontal menu before. Now we will try to make a vertical menu. We will make a vertical menu like the image. Ok let's do it

1. Login to blogger then choose "Layout-->Edit HTML"
2. Put the script below before this code ]]></b:skin> or put it in CSS code area.


.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }



You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. For example, if you want to choose red color, then the code would be like this :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;


dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');



Vertical Menu Color :

blue1.gif

blue2.gif

green1.gif

green2.gif

red1.gif

red2.gif

pink1.gif

pink2.gif

black1.gif

black2.gif



3. Save your template.
4. Then go to "Page Elements" menu
5. choose "Add a Gadget -->HTML/JavaScript" the insert the code below.

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>



Note :
- The red code is the links.
- The Blue code is anchor text.
- If you want to add menu, just copy the blink code and paste it.

6. Then click "Save"



Read More

Kamis, 14 Juli 2011

Introduction to Family Governance

The family aspect is what differentiates family companies from their counterparts. As a consequence, the family plays a crucial role in the governance of its business. When the family is still at its initial founder(s) stage, very few family governance issues may be apparent as most decisions are taken by the founder(s) and the family voice is still unified. Overtime, as the family goes through the next stages of its lifecycle, newer generations and more members join the family business. This implies different ideas and opinions on how the business should be run and its strategy set. It becomes mandatory then to establish a clear family governance structure that will bring discipline among family members, prevent potential conflicts, and ensure the continuity of the business. A well functioning family governance structure will mainly aim at:
  • Communicating the family values, mission, and long term vision to all family members.
  • Keeping family members (especially those who are not involved in the
    business) informed about major business accomplishments, challenges,
    and strategic directions.
  • Communicating the rules and decisions that might affect family
    members’ employment, dividends, and other benefits they usually get from
    the business.
  • Establishing formal communication channels that allow family members to share their ideas, aspirations and issues.
  • Allowing the family to come together and make any necessary decisions.

Developing such a governance structure will help build trust among
family members (especially between those inside and outside of the
business), and unify the family thus increasing the viability chances of
the business. The major constituents of a family governance structure
are:

  • A family constitution that clearly states the family vision, mission, values, and policies regulating family members’ relationship with the business.
  • Family institutions, which can have different forms and purposes, e.g. family assembly, family council, and other family committees.





Read More

Corporate Governance Definition

“Corporate governance refers to the structures and processes for the direction and control of companies. Corporate governance concerns the relationships among the management, board of directors, controlling shareholders, minority shareholders and other stakeholders. Good corporate governance contributes to sustainable economic development by enhancing the performance of companies and increasing their access to outside capital”.[1]

This definition focuses on three key elements:

- Direction refers to all the decisions that relate to setting the overall strategic direction of the company such as: (i) long-term strategic decisions; (ii) large-scale investment decisions; (iii) mergers and acquisitions; and (iv) succession planning and appointment of key senior managers, such as the CEO of the company.

- Control refers to all the actions necessary to oversee the management’s performance and follow up on the implementation of the strategic decisions set above.

- Relationship among the main governing bodies of the firm refers to the interactions among the shareholders, the directors of the board, and the managers. An important element of any good corporate governance structure is the clear definition of the role, duties, rights, and expectations of each of these governing bodies.


Read More

Family Member Roles in the Governance of Their Business

In a typical non-family business, any involved individual can be an employee, a manager, an owner, a director, or some combination of these roles. In a family-owned business however, matters become more complex as an individual can have multiple roles and responsibilities. These multiple roles are usually associated with different incentives, which increase the challenges that family businesses face as opposed to their non-family counterparts.[1]

1- Owners (Shareholders)

Owners in a family business have several roles and motivations that can sometimes lead to conflicting opinions. For example, a decision to reinvest profits in the company instead of distributing them as dividends can be differently seen by the various owners depending on their other roles in the business. An owner who works in the family business might not object to such a decision since he/she is already receiving a salary from the company. On the other hand, this situation would look different from the perspective of an owner who does not work in the business and relies on dividends as a main source of income. This owner would actually be interested in receiving higher and more frequent dividends.

Matters usually get more complex as the family business grows and its owners hold different roles, with different incentives. Some of the roles that an owner in a family business can have are:

- Owner only.

- Owner/manager.

- Owner/family member.

- Owner/family member/manager.

- Owner/director.

- Owner/family member/director.

- Owner/family member/director/manager.

2- Managers (Senior Management)

Managers in a family business will also have different motivations depending on their other roles within the business. A common issue in this area is the unequal treatment of family and non-family managers. In many family businesses, part or all of the senior management positions are strictly reserved for family members. This could negatively impact the motivation and performance of non-family managers who know for a fact that no matter how hard they work, they will never be part of the senior management of the company. As a consequence, many family businesses find it very hard to attract and retain talented non-family managers. Setting up a clear and fair employment policy (for both family and non-family employees) will make it easier for family businesses to keep their very best employees motivated and interested in the growth of the company. Such policy would align the employees’ incentives to their performance regardless of whether they are part of the family or not.

3- Directors (Board of Directors)

When it comes to board membership, most family businesses reserve this right to members of the family and in a few cases to some well trusted non-family managers. This practice is generally used as a way of keeping the family control over the direction of its business. Indeed, most decisions are usually taken by the family-member directors. In the previous example of dividend distribution, family directors who are also managers in the business would naturally encourage reinvesting profits in the company so as to increase its growth potential. On the contrary, family directors who do not work in the business would rather make the decision of distributing the profits as dividends to family shareholders. These contradicting views can lead to major conflicts in the board and negatively impact its way of functioning.

4- Family Members (the Family and its Institutions)

As previously mentioned, family members can have different responsibilities, rights, and expectations from their business. This situation can sometimes lead to conflicts and issues that might jeopardize the continuity of the family business. One issue that can increase conflicts among family members is the level of access to information about the company and its activities. This can be problematic as the members who work in the business usually have access to such information in a timely manner while those outside of the business can’t access it in the same way.[2] Family businesses should establish the necessary communication channels and institutions to keep all family members informed about the business, strategy, challenges, and the overall direction where the company is heading.




Read More

Stages of Growth in a Family Business

Several models have been developed to describe and analyze the different stages that family businesses go through during their existence. In this Handbook, we will use the basic three-stage model that summarizes the family business lifecycle as: (i) the Founder(s) Stage; (ii) the Sibling Partnership Stage; and (iii) the Cousin Confederation Stage.[1] Although this model allows for a good analysis of the three basic steps of evolution of the family business, it does not mandate that all family-owned companies will necessarily go through all three stages of development. For example, some companies will disappear during the early stages of their lifecycle because of bankruptcy or getting acquired by another firm.

The evolution of ownership and management within most family businesses goes through the following stages:

Stage 1: The Founder(s) (Controlling Owner(s))

This is the initial step of the family business’ existence. The business is entirely owned and managed by the founder(s). Most founders might seek advice from a small number of outside advisors and/or business associates but they will make the majority of the key decisions themselves. This stage is usually characterized by a strong commitment of the founder(s) to the success of their company and a relatively simple governance structure. Overall, this stage contains limited corporate governance issues compared to the next two stages since both the control and ownership of the company are still in the hands of the same person(s): the founder(s). Perhaps the most important issue that will need to be addressed during the life of the founder(s) is succession planning. For the family business to survive into its next stage, the founder(s) should make the necessary efforts to plan for their succession and start grooming the next leader(s) of the company.

Stage 2: The Sibling Partnership

This is the stage where management and ownership have been transferred to the children of the founder(s). As more family members are now involved in the company, governance issues tend to become relatively more complex than those observed during the initial stage of the business’ existence. Some of the common challenges of the sibling partnership stage are: maintaining siblings’ harmony, formalizing business processes and procedures, establishing efficient communication channels between family members, and ensuring succession planning for key management positions.

Stage 3: The Cousin Confederation (Cousin Consortium or Family Dynasty)

At this stage, the business’ governance becomes more complex as more family members are directly or indirectly involved in the business, including children of the siblings, cousins, and in-laws. Since many of these members belong to different generations and different branches of the family, they might have diverse ideas on how the company should be run and how the overall strategy should be set. In addition, any conflicts that existed among the siblings in the previous stage would most likely be carried to the cousin generation as well. As a consequence, this stage involves most family governance issues. Some of the most common issues that family businesses face at this stage are: family member employment; family shareholding rights; shareholding liquidity; dividend policy; family member role in the business; family conflict resolution; and family vision and mission.

Key Corporate Governance Issues – During the Development Cycle of Family Businesses


Ownership Stage


Dominant Shareholder Issues

 


Stage 1: The Founder(s)


- Leadership transition

- Succession

- Estate planning

 


Stage 2: The Sibling Partnership


- Maintaining teamwork and harmony

- Sustaining family ownership

- Succession

 


Stage 3: The Cousin Confederation


- Allocation of corporate capital: dividends, debt, and profit levels

- Shareholder liquidity

- Family conflict resolution

- Family participation and role

- Family vision and mission

- Family linkage with the business

 


Each stage presents different challenges and issues that if properly managed can ensure the continuity of the family business. Most family-owned companies are successful during their infancy stage thanks to the tremendous efforts made by the founder(s) as they are implicated in all aspects of the business. In the longer term though, it becomes necessary to set up the right governance structures and mechanisms that will allow for efficient communication channels and a clear definition of the roles and expectations of every person involved in the family business.




Read More

Family Business Definition and Characteristics – Strengths and Weaknesses

Definition: In this Handbook, a family business refers to a company where the voting majority is in the hands of the controlling family; including the founder(s) who intend to pass the business on to their descendants. The terms “family business”, “family firm”, “family company”, “family-owned business”, “family-owned company”, and “family-controlled company” will be used interchangeably throughout the Handbook to refer to family businesses.

Strengths: Several studies have shown that family-owned companies outperform their non-family counterparts in terms of sales, profits, and other growth measures.[1] A Thomson Financial study for Newsweek compared family firms to rivals on the six major indexes in Europe and showed that family companies outperformed their rivals on all of these indexes, from London's FTSE to Madrid's IBEX. Thomson Financial created a unique index for both family and non-family firms in each country, and tracked them over 10 years through December 2003. In Germany, the family index climbed 206 percent, while the non-family stocks increased just 47 percent. In France, the family index surged 203 percent, while its counterpart rose only 76 percent. Family businesses also outperformed their counterparts in Switzerland, Spain, Britain and Italy.[2]

This high performance is the result of the inherent strengths that family businesses have compared to their counterparts. Some of these strengths include:[3]

- Commitment. The family –as the business owner– shows the highest dedication in seeing its business grow, prosper, and get passed on to the next generations. As a result, many family members identify with the company and are usually willing to work harder and reinvest part of their profits into the business to allow it to grow in the long term. In dealing with its family business clients, IFC highly values having a committed set of shareholders at the core of the company.

- Knowledge Continuity. Families in business make it a priority to pass their accumulated knowledge, experience, and skills to the next generations. Many family members get immersed into their family business from a very young age. This increases their level of commitment and provides them with the necessary tools to run their family business.

- Reliability and Pride. Because family businesses have their name and reputation associated with their products and/or services, they strive to increase the quality of their output and to maintain a good relationship with their partners (customers, suppliers, employees, community, etc.).

Weaknesses: Perhaps the most often cited characteristic of family businesses is that many of them fail to be sustainable in the long term. Indeed about two-thirds to three-quarters of family businesses either collapse or are sold by the founder(s) during their own tenure. Only 5 to 15 percent continue into the third generation in the hands of the descendents of the founder(s).[4]

This high rate of failure among family businesses is attributed to a multitude of reasons. Some of these reasons are the same ones that could make any other business fail such as poor management, insufficient cash to fund growth, inadequate control of costs, industry and other macro conditions. However, family businesses also show some weaknesses that are especially relevant to their nature. Some of these weaknesses are:

- Complexity. Family businesses are usually more complex in terms of governance than their counterparts due to the addition of a new variable: the family. Adding the family emotions and issues to the business increases the complexity of issues that these businesses have to deal with. Unlike in other types of businesses, family members play different roles within their business, which can sometimes lead to a non-alignment of incentives among all family members. This point will be discussed in more detail in Section I of the Handbook.

- Informality. Because most families run their businesses themselves (at least during the first and second generations), there is usually very little interest in setting clearly articulated business practices and procedures. As the family and its business grow larger, this situation can lead to many inefficiencies and internal conflicts that could threaten the continuity of the business.

- Lack of Discipline. Many family businesses do not pay sufficient attention to key strategic areas such as: CEO and other key management positions’ succession planning, family member employment in the company, and attracting and retaining skilled outside managers. Delaying or ignoring such important strategic decisions could lead to business failure in any family business.





Read More

Introduction: Family Business Governance

Family businesses constitute the world’s oldest and most dominant form of business organizations. In many countries, family businesses represent more than 70 percent of the overall businesses and play a key role in the economy growth and workforce employment. In Spain, for example, about 75 percent of the businesses are family-owned and contribute to 65 percent of the country’s GNP on average.[1] Similarly, family businesses contribute to about 60 percent of the aggregate GNP in Latin America.[2]

Family businesses range from small and medium-sized companies to large conglomerates that operate in multiple industries and countries. Some of the well-known family businesses include: Salvatore Ferragamo, Benetton, and Fiat Group in Italy; L’Oreal, Carrefour Group, LVMH, and Michelin in France; Samsung, Hyundai Motor, and LG Group in South Korea; BMW, and Siemens in Germany; Kikkoman, and Ito-Yokado in Japan; and finally Ford Motors Co, and Wal-Mart Stores in the United States.

It is also a fact that most family businesses have a very short life span beyond their founder’s stage and that some 95 percent of family businesses do not survive the third generation of ownership.[3] This is often the consequence of a lack of preparation of the subsequent generations to handle the demands of a growing business and a much larger family. Family businesses can improve their odds of survival by setting the right governance structures in place and by starting the educational process of the subsequent generations in this area as soon as possible.

This Handbook will focus on the unique corporate governance challenges that family businesses face and propose structures and practices that can mitigate these challenges and ensure the viability of the business. The Handbook gives an international perspective since it focuses on characteristics of family businesses that can be observed across countries. The suggested governance structures of the Handbook will need to be adapted to the local requirements and regulations of family businesses before being applied in a specific country.



Read More

Selasa, 12 Juli 2011

How to Increase the Width of Comment Form in Blogger

In many Blogger blogs you may have found that the default comment
form’s width is much smaller than rest of the post body width. When you
are customizing the design of your blog then you must be also thinking
to increase the width of the Blogger’s comment form. In this simple tutorial I will tell how to expand it.


Normally, the default width for the comment form of blogger is fixed to 425 pixels. So we just need to override this with a CSS definition.

Step 1: Go to Dashboard > Design > Edit HTML tab.

Step 2: Find ]]></b:skin> and before it add:

.comment-form{

min-width: 100% !important;

}


As you can see that a minimum width has been set to let browsers know that the minimum width of the form should match with the width of the post body.

Step 3: Save your template and view your blog. After going inside of any of the post you will find that the size of the Blogger’s comment form has increased in size (width).

Normally this should work with any template.



Read More

Add Two Sidebar Columns Below Posts in Blogger

Today I will tell you how to add two extra widget sections / sidebar columns below Blogger post sections within main wrapper.

Step 1: Go to Design > Edit HTML tab and find for:

<div id='main-wrapper'>

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

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

</div>

Step 2: Add the following snippet before the closing DIV. It is </div> marked in bold in step 1.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='col-left' showaddelement='yes' />

<b:section class='sidebar' id='col-right' showaddelement='yes'/>

<div style='clear: both;'/>

</b:if>

I have used the conditional tags highlighted in red to show these sidebar sections only in homepage of your blog. If you want these widget sections to be shown also on post pages then delete the conditional tags.

Step 3: Find ]]></b:skin> and before this add:

#col-left {

width: 48%;

float: left;

}

#col-right {

width: 48%;

float: right;

}

Step 4: Save you template and go to Blogger “Page Elements” tab.
You will find that there are two widget sections added just below the
post body. Now add some widgets to these and view your blog.

One more thing you will notice that the sidebar columns will be visible after the blog pager and blog feed links. Blog-pager links are “Older Post”, “Home” and “Newer Post” links and blog-feed
links are “Subscribe to: Posts (Atom)” and “Subscribe to: Post Comments
(Atom)” links that are visible in Blogger homepage and in item pages
below every posts.

If you think that it looks bad then you can hide or remove these links so that the two sidebar widget sections will appear only after the post body. So let’s do another step.

Step 5 (Optional): Go to Design > Edit HTML tab and find for “]]></b:skin>”. Immediately below it add the following styling properties:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

#blog-pager {

display:none;

}

.feed-links {

display:none;

}

</style>

</b:if>

Again note that here also I have used the conditional tags for homepage only. At last save you template

It’s done.



Read More

Add Two Sidebar Columns below Main Sidebar in Blogger

I have told you about creating three columns in Blogger template. Many of us try to avoid this as it may sometimes look clumsy but we need widget sections to add some blogger gadgets. Now if you want to add two small sidebar columns below main sidebar in your blogger template, then I will tell you how to do it.


So let's start!

First go to Design > Edit HTML and backup your template.

1. Find the below section:

#sidebar-wrapper {

width:220px;

float:right;

word-wrap:break-word;

overflow:hidden;

}


2. And just below it add the following codes:

#right-col {

width:48%;

float:right;

word-wrap:break-word;

overflow:hidden;

}

#left-col {

width:48%;

float:left;

word-wrap:break-word;

overflow:hidden;

}


3. Now find:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'/>

</div>


4. And add the bold codes or replace the whole code with:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'/>

<b:section class='sidebar' id='left-col' preferred='yes'/>

<b:section class='sidebar' id='right-col' preferred='yes'/>

</div>


These bold snippets are added which would actually add two widget sections below the main sidebar.

Preview your template for any errors and save it.

Update:
Some of you are having trouble adding the two small sidebar columns in
their templates and may be getting an XML error. So, here's the
solution:

You must be having widgets in your sidebar like:

<div id='sidebar-wrapper'>

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

< ..widgets here.. >

</b:section>

</div>


Put the bold codes below as shown below:

<div id='sidebar-wrapper'>

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

< ..widgets here.. >

</b:section>

<b:section class='sidebar' id='left-col' preferred='yes'/>

<b:section class='sidebar' id='right-col' preferred='yes'/>

</div>


Now go to Design > Page Elements and check for your newly added two small sidebars below you main sidebar.

To be Noted:
This works only with layout templates.


Read More

How to Make Footer Increase in Width in Blogger

In previous tutorial I have told you how to expand Blogger Header the width of the Browser. Now apply this same rule to increase the Blogger footer section the width of the browser.

Let's have a tutorial.

1. Go to Layout > Edit HTML. Backup your template.

2. The footer has 660px in width and may be different for other
templates, so we need to increase this width. Find this section of code
in your template:

#footer {

border: 1px solid #000000;

width: 660px;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Replace it with:

#footer-wrapper {

border: 1px solid #000000;

width: 950px;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

letter-spacing:.1em;

text-align: center;

word-wrap: break-word;

overflow: hidden;

}

The changes are high-lighted in bold.

2. Add a new property just before #footer-wrapper section:

#footer-expand {

background: #333333;

}

3. Find this section on your template and delete it:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

4. Find the ending of the outer-wrapper. In an example of Minima template, it will be:

</div></div> <!-- end outer-wrapper -->

And just bellow it add the following codes:

<div id='footer-expand'>

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

</div>

You can change the background color of the header and footer sections by changing the hex value #333333 according to your chosen hex value. And you can also add images to it, like:

#footer-expand {

background: #333333 url(your hosted image);

}

Now preview your template and save it.

So you got your footer customized and styled and increase the width of the Blogger template footer section across the browser also. Now style it accordingly.

To be Noted:
This works only with layout templates.



Read More

How to Make Blogger Header Expand the Width of the Browser

So in this segment, we will customize and expand the blogger's header section to the width of browser.


1. Go to Layout > Edit HTML, backup your template.

2. Find this section in your template code:

#header-wrapper {

width: 660px;

border: 1px solid #ffffff;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

The bold code can be different in different templates.

And increase 660px to 950px. This will look like:

#header-wrapper {

width: 950px;

border: 1px solid #ffffff;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Also change the outer-wrapper and footer width to 950px.

3. Preview for errors and save it when it's done.

Advance Way to Increase Blogger Header's Width Across the Browser


If you want to expand the background color of blogger header section across the width of the browser, then apply this tutorial.

#header-expand {

background: #333333;

}

2. Find this section in your template code:

#header-expand {

background: #333333;

}

2. Find this section in your template code:

<div id='header-wrapper'>

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

<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>

</b:section>

</div>

And delete this.

Find:

<div id='outer-wrapper'>

And paste the following code just before it:

<div id='header-expand'>

<div id='header-wrapper'>

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

<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>

</b:section>

</div>

</div>

3. Now Preview your template for confirmation and save it.

You can change the background color of the header section by substituting #333333 for your chosen hex value or even by your image in the style of outer-header.
Like For example:

#header-expand {

background: #ffcc66 url(Your hosted image URL);

}

So you got your style and increased the width of your Blogger template header section with the width of the browser. Now all you have customize it accordingly to match your style.

To be Noted:
This works only with layout templates.



Read More

Add Three Columns in Footer to Blogger

Keeping you sidebars clean makes your blog look good. This is where the role of the columns in footer section comes in. Also it will give your blog a new style. For example, see at the bottom of my blog. This simple tutorial will explain how to do create and add three sidebar columns to footer section in Blogger templates.


1. Go to Design > Edit HTML and first backup your template.

2. Move your gadgets/widgets (if any) from the footer section to your sidebar.

3. Find the closing "]]></b:skin>" tag and immediately before this line, add the following styling definitions and properties:

#footer-left {

width: 33%;

float: left;

margin:5px;

text-align: left;

}

#footer-center {

width: 34%;

float: left;

margin:5px;

text-align: center;

}

#footer-right {

width: 33%;

float: right;

margin:5px;

text-align: right;

}

#footer-column-container {

clear:both;

}

.footer-column {

padding:5px;

}

3. Find the codes:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

And replace this section with the below codes to add three widget sections to blogger footer:

<div id='footer-wrapper'>

<div id='footer-column-container'>

<div id='footer-left'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer-center'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer-right'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

5. Preview for any error and save it. Go to Design > Page Elements, you will find out that you have added three columns in Blogger footer section.

Now move and add some of the widgets there and see how it looks.

To be Noted:
This works only with layout templates.


Read More

Download 3 Sidebar Columns Minima Blogger Template

Blogger Layout templates, especially Minima, are still famous among the designers and developers as it can be highly customized. But Blogger don't have default three column layout Minima templates. So I have made two Minima Blogger templates with three sidebar columns for tutorial purpose and for those who want to make their own templates from the scratch.

Download Minima Template with Sidebar to Left



Download Blogger Minima Template with Sidebar to Right



Also don't forget to have a look at three column blogger template tutorial for Layout (XML) tempaltes.


Read More

How to Create Three Column Blogger Template

You must have seen many blogs having three columns. You may also want to make your own three column Blogger Layout Template and give your blog a new level in style. So let's do it with a simple tutorial.

You can see in Design > Page elements that you already have two column, one for the main body and the other is the sidebar. So you need to create and add an extra sidebar column.



Adding the Third Sidebar Column in Blogger Template


1. Go to Design > Edit Template and backup your template.

2. Find:

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

And change float to:

float: right;

3. Bellow it add:


#left-sidebar-wrap {

width: 220px;

float: left;

word-wrap: break-word;

overflow: hidden;

}

This "float: left" will make the sidebar float to left. Thus you will be having a sidebar to the left of your blogger template.

4. Find and change the width of the outer-wrapper to 900px or more to avoid overlapping of sidebar over the main-wrapper.

5. Find #main-wrapper and replace it with:


#main-wrapper {

width: 410px;

float: left;

margin:0 20px;

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 */

}

Here a margin to left and right of 20px is
added to avoid overlapping of sidebars with the main wrapper. You can
change it accordingly to overcome the issue of overlapping of sidebars.

>

7. Find the section:


<div id='main-wrapper'>

And just before this add:

<div id='left-sidebar-wrap'>

<b:section class='sidebar' id='left-sidebar' preferred='yes'/>

</div>

8. Save your template and "Wallah", its done. You have created an extra sidebar for your Blogger template.


Now you have to do some adjustments yourselves. Adjust the widths by altering the pixels (px) of the "outer-wrapper", "main-wrapper", "sidebar-wrapper" and "left-sidebar-wrap". Adjust the margins, paddings and width by same way to "header-wrapper" and "footer-wrapper" to match the style.

See an example by downloading 3 sidebar columns Minima Blogger Template.


Read More

Diberdayakan oleh Blogger.