Hướng dẫn Chia Header Blogger Thành 2 Cột

Với giao diện gốc của blogger mặc định sẽ chỉ có 1 cột header duy nhất. Với hưỡng dẫn đơn giản bên dưới đây các bạn có thể dễ dàng chia thành phần header (đầu) thành hai phần khác nhau, giúp bạn có thể đặt chỗ cho một logo bên trái và treo thêm một banner bên phải.


Cách chia header với những mẫu THÚ VỊ:




1: Vào mẫu ( Template ) => chọn chỉnh sửa HTML ( Edit HTML ) bấm ctrl+f tìm <header> và thay thế từ<header> đến </header> đoạn code bên dưới đây.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Namkna blog (Tiêu đề)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'>
</b:section>
<div style='clear:both;'/>
</div>
2: Bạn thêm đoạn code sau vào trước thẻ : ]]></b:skin>

/* Headerby http://duongtroc.com/ */
#header-wrapper{width:1050px;border:0 solid #dcd9d9;margin:0 auto;height:150px}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{float:left;width:310px;border:0 solid #dcd9d9;text-align:left;color:#333333;margin:0}
#header2{float:left;width:428px;margin-left:10px;text-align:left;color:#555}
.header .widget,.header2 .widget{margin:0 auto;padding:10px 0}
#header h1{line-height:1.2em;text-transform:uppercase;letter-spacing:.1em;font:normal normal 26px Georgia, Serif;margin:0 auto;padding:10px 5px .15em}
#header .description{max-width:100%;text-transform:uppercase;letter-spacing:.01em;line-height:1.2em;font:normal normal 16px Lucida Sans, Tahoma, Helvetica, FreeSans, sans-serif;color:#666666;margin:0 auto;padding:0 5px 5px}
#header img{margin-startside:auto;margin-endside:auto}Tùy chỉnh:
width:1050px; là dộ rộng của blog của bạn.
width:310px; là dộ rộng của header 1 tức là header bên tay trái
width:428px; là dộ rộng của header 2 tức là header bên tay phải
height:150px là chiều cao của header

2: Cách chia header với những mẫu ĐƠN GIẢN.




Cách này thực hiện cũng cực kỳ đơn gian thôi :) Chúng ta bắt đầu thực hiện nhé.

Bước 1: Vào mẫu ( Template ) => chọn chỉnh sửa HTML ( edit HTML ) bấm Ctrl+F tìm đoạn code sau
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Thủ Thuật Blog (Header)' type='Header'/> </b:section>

Rồi thay nó thành

<b:section class='header' id='header-left' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Dương Trọc Blog (Header)' type='Header'/> </b:section> <b:section class='header' id='header-right' maxwidgets='1' showaddelement='yes'/>

Bước 2: Bạn bấm Ctrl+F tìm header-outer bạn sẽ thấy đoạn code như sau

.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; }

Và bây giờ thay nó thành
.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; height: 100px; overflow: hidden; } #header-left{ width: 350px; float: $startSide; overflow: hidden; } #header-right{ width: 468px; float: $endSide; overflow: hidden; } .tabs-outer{ clear: both; }
Lưu lại mẫu
Như bạn thấy trong đoạn CSS trên tôi đã đề nghị kích thước ngang header-left và header-right lần lượt là 350pxvà 468px. Tổng kích thước này không được vượt quá chiều ngang của template.

sưu tầm

Related Posts

Hướng dẫn Chia Header Blogger Thành 2 Cột

4/ 5

Oleh hải quế

Pada 21:16:00 Komentar