Hướng dẫn chia Header blog thành 2 cột
Thursday, 3 December 2009
Bạn hoàn toàn có thể chèn thêm các tiện ích vào header của Blogger chẳng hạn như Box search hoặc các quảng cáo sau khi bạn chia header của bạn thành 2 hay 3 cột khác nhau. Hướng dẫn dưới sẽ giúp bạn thực hiện điều này.
Dưới đây là hình ban đầu của template (khi chưa có chia cột)
Có nhiều cách khác nhau để chia cột cho header, ở đây mình giới thiệu với các bạn các thực hiện với template
Magazine template 1 theo thủ thuật của Fandung.
Có thể download template
Magazine template 1 tại đây.
Bạn có thể thực hiện tương tự cho các Template khác
Bây giờ ta bắt đầu:
1. Đăng nhập blog
2. Vào
Chỉnh sửa Code HTML
3. Tìm đọan code bên dưới
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
4. Thay thế chúng bằng đọan code sau:
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}
5. Xuống thấp hơn tìm đọan code sau
(hoặc tương tự):
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
6. Thay thế chúng bằng đọan code sau:
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
7. Save template.
Như vậy đã xong
xem hình kết quả bên dưới
,
Header - Navigation,
Khoi tao Blog
Ý kiến bạn đọc [ 3 ]
Chào giúp mình tạo phần banner thành 3 dòng với. Mình làm hoài mà không được.
Temp của mình đây:
nếu làm được thì gửi mail cho mình nhé: son.0977300246@gmail.com.
Chân thành cảm ơn.
#blog-pager{text-align:center;}
/*-- (Cabecera) --*/.center_wrapper{margin:0 auto;width:855px;}
#header-wrapper{background:#35322B url(http://2.bp.blogspot.com/_73i0fjAB_Hw/SUW944O_ClI/AAAAAAAAAo4/dXfH0dDRYvs/s1600/backgrounds.gif) repeat-x 0 0;padding-top:8px;}
#header-inner{padding:0 0 16px;}
#header-wrapper h1{color:$colortituloblog;}
#header-wrapper h1 a{color:$colortituloblog;text-decoration:none;}
#header-wrapper h1 a:hover{color:#FFB;}
#header-wrapper p{color:$descripcioncolor;}
#toplinks{background:#353530 url(http://3.bp.blogspot.com/_73i0fjAB_Hw/SUW95zqcjDI/AAAAAAAAApg/pNWpgxKRTAk/s1600/toplinks.gif) no-repeat left top;color:#554;float:right;font-size:.9em;height:27px;width:230px;}
#toplinks_inner{padding-top:3px;text-align:center;}
#toplinks a{color:#887;}
#toplinks a:hover{color:#DDC;}
/*-- (Menu) --*/#navigation ul,#navigation li{display:inline;}
#navigation li{display:inline;}
#navigation,#navigation a{background:#958573 url(http://2.bp.blogspot.com/_73i0fjAB_Hw/SUW944O_ClI/AAAAAAAAAo4/dXfH0dDRYvs/s1600/backgrounds.gif) repeat-x 0 -222px;}
#navigation a{border-right:1px solid #AFA69C;color:#654;float:left;font:bold 1em Georgia,Tahoma,sans-serif;margin-right:1px;padding:10px 12px;text-align:center;text-decoration:none;}
#navigation li:first-child a{border-left:1px solid #AFA69C;}
#navigation a:hover,#navigation li.current_page_item a{background-position:0 -294px;color:$colormenu;}
/*-- (Contenedor) --*/#main_wrapper_outer{background:url(http://3.bp.blogspot.com/_73i0fjAB_Hw/SUW95RwSauI/AAAAAAAAApA/5GUeLD8dOYU/s1600/grain.gif);}
#main_wrapper_inner{background:url(http://2.bp.blogspot.com/_73i0fjAB_Hw/SUW95xbfl2I/AAAAAAAAApY/A5K1xC8kSjQ/s1600/main_wrapper_inner.gif) repeat-x left top;line-height:1.4em;padding:24px 0;}
/*-- (Principal) --*/#main-wrapper{font:normal .9em Verdana,sans-serif;width:540px;}
#main ol,#main ul{margin:0 0 1.2em 1.6em;}
#main ul li{list-style:disc;}
#main ol li{list-style:decimal;}
#main li{padding:2px 0;}
.post{margin-bottom:24px;}
.post-title a,.post-header-line-1 a{text-decoration:none;}
.post-header-line-1 a:hover,.post-footer a:hover{text-decoration:underline;}
.post-header-line-1{color:$dateHeaderColor;margin-bottom:14px;}
.post-header-line-1 a{color:#444;}
.post-footer{background:url(http://3.bp.blogspot.com/_73i0fjAB_Hw/SUW951YkZyI/AAAAAAAAApQ/WTCfKOQtoyg/s1600/grain_light.gif);border:1px solid #E5E5D5;color:#776;font-size:.9em;padding:8px 10px;}
.post-footer a{color:#665;}
.post-footer a:hover{color:#001;}
/*-- (Lateral) --*/#sidebar-wrapper{color:#665;width:286px;border-left:1px solid #CCB;}
#sidebar{padding-left:25px;}
#sidebar a{color:$colortextolateral;}
#sidebar a:hover{color:#C40;}
#sidebar-wrapper li{border-top:1px solid #DDC;padding:4px 6px;}
#sidebar-wrapper li:first-child{border-top:none;}
#sidebar-wrapper h2{background:url(http://3.bp.blogspot.com/_73i0fjAB_Hw/SUW95q11aJI/AAAAAAAAApI/hl-yfnnb_yc/s1600/grain_dark.gif);color:$colortituloslateral;font-weight:700;padding:5px 8px;line-height:1.4em;font-size:100%;}
.sidebar .widget-content{padding:8px 0;}
.sidebar .widget{margin-bottom:1.5em;}
/*-- (Pie de pagina) --*/#footer-wrapper{color:#AA9;padding:12px 0;}
Chao Chinh,
blogger hinh nhu thay doi mau code, nen minh tim code theo huong dan k dc. ban co the cap nhat theo mau moi cua blogger k! tks
mình cũng không tìm thấy đoạn code để mà sửa.
Ý kiến của bạn