Ngadamel Templet Tilu Kolom
Catetan: Skrip ieu tos diujikeun kana Templet Minima. Intina, sadaya templet tiasa ngangge skrip ieu.
Anu kahiji, salira kedah lebet ka ‘Edit HTML’ teras milarian skrip ieu:
#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 */
}
Skrip eta teh kanggo sidebar. Ayeuna urang ngadamel deui sidebar anu sejen. Contohna urang ngaranan (sidebar-anyar). Kopi skrip ieu:
#newsidebar-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 */
}
Ayeuna tos aya tilu kolom, tapi aya masalah. #outer-wrapperna (sidebar kenca + main + sidebar katuhu) teu cukup lebar! Kukituna, urang tambihan wae lebarna. Anu asalna 660 px, ayeuna #outer wrapperna butuh 220px+220px+410px=850px (sidebar kenca + sidebar katuhu + main).
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
parantos kitu, urang tinggal skrip ieu:
< id="’sidebar-wrapper’">
< class="’sidebar’" id="’sidebar’" preferred="’yes’">
< id="’BlogArchive1′" locked="’false’" title="’Blog" type="’BlogArchive’/">
< id="’Profile1′" locked="’false’" title="’About" type="’Profile’/">
< /b:section >
< /div >
Nah, sidebar anyar oge butuh, teras urang kopi wae skrip ieu:
< id="’newsidebar-wrapper’">
< class="’sidebar’" id="’newsidebar’" preferred="’yes’">
< id="’Text1′" locked="’false’" title="”" type="’Text’/">
< /b:section >
< /div >
Tong hilap, yen skrip eta teh kedah disimpen di luhur < id="’main-wrapper’">. Upami atos, kantun di save wae, teras di klik “view blog”.
Creating A Three Column Template
Note: These instructions apply to the existing Minima Templates in Blogger Beta yet the same principles apply to all templates.
The first thing you want to do is enter the ‘Edit HTML’ section for your blog through the Blogger admin area.
Next, find this portion of the HTML
#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 */
}
This bit of code defines the format of the sidebar for your blog which in the Minima Template is on the right. What we want to do is make a new sidebar with a new name (eg ‘new-sidebar’) and put it on the left hand side of the blog. Copy the code below and place it directly below the above code in your blog:
#newsidebar-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 */
}
The next part is a bit tricky. We’ve added a new column, but we haven’t changed the width of your blog. Look just above the code we just inserted in your blog to the #outer-wrapper section. Notice that the width is 660px. Yet what we have at this point is (left sidebar + main + right sidebar). Or (220px +410px +220px = 850px). Therefore, we need to change the width of the outer-wrapper so that it can fit our blog. You can vary the widths depending on the design of your blog, but in this example we’ll change the width to 850px so that the outer-wrapper section looks like this:
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
Now we’ve defined the columns in our blog but we still need to put them into the blog. Next, we want to find the
id="’sidebar-wrapper">
< class="’sidebar’" id="’sidebar’" preferred="’yes’">
< id="’BlogArchive1′" locked="’false’" title="’Blog" type="’BlogArchive’/">
< id="’Profile1′" locked="’false’" title="’About" type="’Profile’/">
< /b:section >
< /div >
This section adds the existing sidebar to the blog. We want to change it a little so that we are adding the newsidebar on the left. Also, Blogger won’t let us have the same two elements in both sidebars, so we want to remove the ‘BlogArchive1′ and ‘Profile1′ part of the code. Add the following newsidebar code directly above the
< id="’newsidebar-wrapper’">
< class="’sidebar’" id="’newsidebar’" preferred="’yes’">
< id="’Text1′" locked="’false’" title="”" type="’Text’/">
< /b:section >
Save it and that’s it!! Go to the ‘Page Elements’ tab and you should see three columns in your blog ready to be edited!
Sumber: Cash-Quest
Sign up here with your email