Berbekal keisengan mempelajari struktur template nyoba buatan mas isnaini, juga ilmu-ilmu yang gw dapet dari blognya Kang Rohman. Alhamdullilah banget gw jadi bisa menambah beberapa kolom lagi pada template magazine style buatan kang rohman, seperti blog gw ini. Pada bagian sidebar ada tambahan kolom label, dan archive. Nah kalo lo pengguna template magazine style dan pengen nambah kolom lagi pada bagian sidebarnya, silahkan ikutin langkah-langkah berikut.
Pertama, perhatikan kode yang ada disekitar Outer-Wrapper :
/* Outer-Wrapper
======================================= */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:15px;
text-align:$startSide;
font: $bodyfont;
border:4px double $bordercolor;
background:$bgoutercolor;
}#main-wrapper {
width: 575px;
float: $startSide;
background:$bgoutercolor;
margin:0px;
padding:10px 15px 5px 5px;
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: 300px;
float: $endSide;
text-align: justify;
margin:0px;
padding:5px 5px 5px 0px;
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_1 {
width: 280px;
float: $startSide;
margin:0px;
padding:0px;
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_2 {
width: 275px;
float: $startSide;
margin-$startSide:18px;
padding:0px;
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
*/
}
Trus tambahkan kode :
#leftsidebar_3 {
width: 135px;
float: $startSide;
margin:0px;
padding:0px;
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_4 {
width: 145px;
float: $endSide;
margin-$startSide:18px;
padding:0px;
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
*/
}.clear{
clear:both;
}
Hasilnya akan seperti ini :
/* Outer-Wrapper
======================================= */
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:15px;
text-align:$startSide;
font: $bodyfont;
border:4px double $bordercolor;
background:$bgoutercolor;
}#main-wrapper {
width: 575px;
float: $startSide;
background:$bgoutercolor;
margin:0px;
padding:10px 15px 5px 5px;
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: 300px;
float: $endSide;
text-align: justify;
margin:0px;
padding:5px 5px 5px 0px;
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_1 {
width: 280px;
float: $startSide;
margin:0px;
padding:0px;
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_2 {
width: 275px;
float: $startSide;
margin-$startSide:18px;
padding:0px;
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_3 {
width: 135px;
float: $startSide;
margin:0px;
padding:0px;
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_4 {
width: 145px;
float: $endSide;
margin-$startSide:18px;
padding:0px;
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
*/
}.clear{
clear:both;
}
Nah kalo udah sekarang liat bagian
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> <!-- team blog profile
-->
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>
</b:loop>
</ul><b:else/> <!-- normal blog profile -->
<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt'
expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if><dl class='profile-datablock'>
<dt class='profile-data'><data:displayname/></dt><b:if cond='data:showlocation == "true"'>
<dd class='profile-data'><data:location/></dd>
</b:if><b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if><b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul><b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div><!-- end sidebar-wrapper -->
Tambahkan kode :
tepat diatas kode<!-- left sidebar -->
<b:section class='sidebar' id='leftsidebar_3' preferred='yes'><!-- right sidebar -->
<b:section class='sidebar' id='leftsidebar_4' preferred='yes'><div class='clear'/>
<!-- kontent bawah -->
<b:section class='sidebar' id='sidebar7' preferred='yes'>
</div><!-- end sidebar-wrapper -->
Hasilnya seperti ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> <!-- team blog profile
-->
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>
</b:loop>
</ul><b:else/> <!-- normal blog profile -->
<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt'
expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if><dl class='profile-datablock'>
<dt class='profile-data'><data:displayname/></dt><b:if cond='data:showlocation == "true"'>
<dd class='profile-data'><data:location/></dd>
</b:if><b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if><b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul><b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section><!-- left sidebar -->
<b:section class='sidebar' id='leftsidebar_3' preferred='yes'><!-- right sidebar -->
<b:section class='sidebar' id='leftsidebar_4' preferred='yes'><div class='clear'/>
<!-- kontent bawah -->
<b:section class='sidebar' id='sidebar7' preferred='yes'></div><!-- end sidebar-wrapper -->
Beres deh. Tampilan magazine style lo bakal kaya tampilan blog gw ini pada bagian sidebarnya hehehe....
1 comments:
wah keduluan nih, padahal aku mau posting ini lho pada tutorial berikutnya... sip..sip dah pokoknya.. biar orang indonesia makin pada pinter desain template...
Post a Comment