Menu

Fashion Trendy
  • Drop Down

    • Abstract
    • Model
    • Techo
    • Options
  • Photography Pictures Product

    Drop Menu

    • Crystal
    • Digital
    • Graphs
    • Settings
  • Menu
    ClickGroup Blog I Chia se dam me ICT I Tin Tuc I Tin ICT I Thu Thuat I Code Blog
    • Home
    • Digital Art
      • Pics
        • SEO 1
        • SEO 2
      • CSS
        • CSS 1
        • CSS 2
        • CSS 3
        • CSS 4
        • CSS 5
      • Jquery
        • Jquery 1
        • Jquery 2
    • Fashion
      • Product 1
        • Sub Item
        • Sub Item
      • Product 2
        • Sub Item
        • Sub Item
    • Photography
    • Design
    Go
    Home » Thu Thuat » Thu Thuat it » Chia sidebar Blog thành 2 cột

    Chia sidebar Blog thành 2 cột





    Nếu Template của Blogger sidebar có 2 hay 3 cột thì có thể đặt thêm được nhiều tiện ích hơn. Tuy nhiên, blog của bạn sidebar chỉ có 1 cột. Để chia sidebar ra thành 2 cột con ngay trong template bạn đang sử dụng bạn chỉ cần thực hiện theo các bước sau đây:


    1. Đăng nhập vào tài khoản Blogger
    2. Chọn Mẫu >> chỉnh sửa HTML (Edit HTML)
    3. Tìm đến code như bên dưới hoặc tương tự

    #sidebar-wrapper {
    float:right;
    margin-top:10px;
    overflow:hidden;
    width:265px; /* độ rộng của cột sidebar trên blog của bạn*/
    word-wrap:break-word;
    }

    4. Thêm code bên dưới vào ngay sau code vừa tìm được ở trên

    #left-sidebar-wrapper { width:49%; /* độ rộng của cột sidebar con bên trái*/
    float:left; }
    #right-sidebar-wrapper { width:49%; /* độ rộng của cột sidebar con bên phải*/
    float:right; }


    Bạn có thể tùy chỉnh lại độ rộng (width) của các cột sidebar trên cho phù hợp. Lưu ý: width (sidebar-wrapper) >= width (left-sidebar-wrapper) + width (right-sidebar-wrapper).

    5. Tiếp theo bạn tìm đến code bên dưới hoặc tương tự


    <div id='rsidebar-wrapper'>
    <b:section class='sidebar' id='sidebarright' preferred='yes'>
    <b:widget id='HTML5' locked='false' title='' type='HTML'/>

    </b:section>
    </div>
    6. Bây giờ bạn hãy thêm vào code vừa tìm được đoạn code như bên dưới


    <div id='rsidebar-wrapper'>
    <b:section class='sidebar' id='sidebarright' preferred='yes'>
    <b:widget id='HTML5' locked='false' title='' type='HTML'/>

    </b:section>
    <div id='left-sidebar-wrapper'> 
    <b:section class='sidebar section' id='sidebar2' preferred='yes'>
    <b:widget id='HTML34' locked='false' title='' type='HTML'/>
    </b:section>
    </div> 

    <div id='right-sidebar-wrapper'>
    <b:section class='sidebar section' id='sidebar3' preferred='yes'>
    <b:widget id='HTML23' locked='false' title='' type='HTML'/>
    </b:section>
    </div> 

    </div>

    Nếu muốn tạo bên dưới 2 cột đã chia ở trên một khu vực để có thể chèn thêm tiện ích với độ rộng bằng sidebar (tức bằng tổng độ rộng 2 cột đã chia). Ta chỉ cần thay đoạn code trên thành co de bên dưới.

    <div id='rsidebar-wrapper'>
    <b:section class='sidebar' id='sidebarright' preferred='yes'>
    <b:widget id='HTML5' locked='false' title='' type='HTML'/>

    </b:section>
    <div id='left-sidebar-wrapper'> 
    <b:section class='sidebar section' id='sidebar2' preferred='yes'>
    <b:widget id='HTML34' locked='false' title='' type='HTML'/>
    </b:section>
    </div> 

    <div id='right-sidebar-wrapper'>
    <b:section class='sidebar section' id='sidebar3' preferred='yes'>
    <b:widget id='HTML23' locked='false' title='' type='HTML'/>
    </b:section>
    </div> 
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </div>

    7. Lưu template.
    Con Đường Thẳng
    Add Comment
    Thu Thuat Thu Thuat it
    Friday, May 17, 2013

    facebook

    twitter

    google+

    fb share

    About Con Đường Thẳng

    Related Posts
    < Previous Post Next Post >
    Post a Comment

    Social Share

    Introducing the Vacation Collection — Up to 50% Off

    Introducing the Vacation Collection — Up to 50% Off

    Weekly Posts

    • Banner trượt dọc hai bên blog hiển thị phụ thuộc vào chế độ màn hình
      Banner quảng cáo sẽ nằm ở 2 mép trái và phải của màn hình và trượt dọc, hiển thị phụ thuộc vào chế độ xem của màn hình. Đây là code, b...
    • AUDIO KHÓA HỌC HYPER-V & SYSTEM CENTER + CEH CỦA NHẤT NGHỆ [MULTI LINK]
      Tài liệu khóa học "Mây mưa" trị giá ngàn đô từ Nhatnghe! Mình sưu tầm từ topic của bạn Hai-KT ( Rất cám ơn bạn đã chia sẻ...
    • CloneDVD 2.9.3.1 Beta sao lưu DVD mạnh mẽ
      CloneDVD 2  tạo ra chất lượng hình ảnh tuyệt vời cho sao lưu DVD, cho dù đó là tiêu đề chính bạn đang sao chép hoặc DVD hoàn chỉnh...
    • Tạo Thanh trình đơn thả xuống (Drop-down)
      Có bao giờ bạn thấy Thanh trình đơn thả xuống của Blog Archive mà tự hỏi: "Nó được tạo ra như thế nào nhỉ?". Trong bài viết ...
    • Nút Share hình trái tim cho Blog
      Nhân dịp ngày Lễ tình yêu Valentine sắp đến, Karl giới thiệu cho các bạn thủ thuật tạo một Share Box hình trái tim. Share Box này giống ...

    Like us On Facebook

    Labels

    • 720p
    • anh dep
    • ảnh đẹp
    • aple
    • ClickGroup
    • Code comment Blogspot
    • Code Tag
    • Code Tag đám mây
    • Code Tag đám mây cho blogspot
    • Cong Nghe
    • Công nghệ
    • cong nghe 24h
    • Design
    • di dong
    • dien thoai
    • Download Film
    • ebook
    • ebook kinh te
    • Film
    • Film Online
    • Fireox
    • Get Link
    • Get Link 320kbps từ Zing Mp3
    • Get Link TaiLieu.Vn
    • GFX
    • Ghost Windows
    • Giai Tri
    • Girl xinh
    • Graphic
    • HD 1080p
    • HDD
    • hinh anh
    • hình ảnh
    • Hot Girl
    • Internet
    • iPad
    • iphone
    • kỹ năng
    • ky nang giao tiep
    • kỹ năng giao tiếp
    • Laptop
    • Lumia 999
    • Matxac 2012 Blogger Templates
    • may tinh bang
    • Media
    • Music
    • Nexus 5
    • Nexus 7.7
    • nhạc
    • nokia
    • Office
    • Operating System
    • phan mem
    • Phần mềm
    • phan mem nghe nhac
    • phim 720p
    • Pictures
    • Plugin Hỗ Trợ Nghe Nhạc
    • png
    • sam sung
    • san pham moi
    • Smart Phone
    • smartphone Lumia 999
    • Software
    • SP moi
    • System Tools
    • Tai Lieu
    • tài liệu
    • tai lieu kinh te
    • Tai Lieu KT
    • Tai Lieu NN
    • Tai Lieu XH
    • tho
    • thơ
    • tho van
    • Thu Thuat
    • thủ thuật
    • Thu Thuat it
    • Thu Thuat MT
    • Thu Thuat OF
    • tin cong nghe
    • tin công nghệ
    • tin tuc
    • Truyen
    • upload mọi định dạng
    • van tho
    • Vi Tinh
    • Video
    • Vien Thong
    • Virus
    • wifi
    • Windows
    • Windows 8

    Copyright ClickGroup Blog I Chia se dam me ICT I Tin Tuc I Tin ICT I Thu Thuat I Code Blog 2014 . Template Created by