BREAKING NEWS
» Sitemap» Gặp nhau cuối năm Táo Quân 2012» Nhạc Xuân» Tổng hợp Hài Xuân» Tết Văn Lang, Cả Làng Nói Phét» Nhạc xuân

Category 5

Category 6

  • Blog phim nhạc

  • Dương Ngọc Thái

  • Quang Lê

  • Long Nhật

  • Đông Đào

  • Tuấn Vũ

  • Category 7

    Thứ Sáu, 1 tháng 4, 2011

    Tiện ích mở rộng (enlarge) hay thu hẹp (narrow) phần main của Blogspot

    Hôm nay mình chia sẻ cùng các bạn một thủ thuật khá tiện ích cho Blogspot, thủ thuật này cung cấp cho người dùng một tiện ích có thể mở rộng phần nội dung chính của blog khi xem bài viết. Thủ thuật sẽ cho phép bạn tăng độ rộng của nội dung bài viết bạn đang xem hay thu nhỏ lại kích thước ban đầu, và các sidebar sẽ bị ẩn đi khi mở rộng nội dung và khôi phục lại khi thu hẹp lại. Tiện ích này rất hiệu quả đối với các bài viết có nội dung quá dài, nó sẽ giảm được độ dài cho bài viết của bạn. Để hiểu rỏ tính năng của thủ thuật này bạn có thể xem demo bên dưới.

    » Bắt đầu thủ thuật

    1. Đăng nhập vào tài khoản Blogger
    2. Vào phần thiết kế (Design)
    3. Chọn chỉnh sửa HTML (Edit HTML)
    4. Chọn mở rộng tiện ích (Expand Widget Templates)
    5. Chèn code bên dưới vào sau thẻ <head>
    <script type='text/javascript'>
    function enlarge(){
    div = document.getElementById(&quot;sidebar-wrapper&quot;); // ID phần sidebar trong blog của bạn
    div.style.display=&quot;none&quot;;
    div = document.getElementById(&quot;main-wrapper&quot;); // ID phần main trong blog của bạn
    div.style.width=&quot;100%&quot;; // độ rộng tối đa của phần main khi mở rộng
    div.style.fontSize=&quot;18px&quot;; // cở chữ khi mở rộng
    }function narrow(){
    div = document.getElementById(&quot;sidebar-wrapper&quot;); // ID phần sidebar trong blog của bạn
    div.style.display=&quot;&quot;;
    div = document.getElementById(&quot;main-wrapper&quot;); // ID phần main trong blog của bạn
    div.style.width=&quot;600px&quot;; // độ rộng ban đầu của blog bạn
    div.style.fontSize=&quot;16px&quot;; // cở chữ ban đầu của blog bạn
    }</script>
    Tùy theo mỗi template mà bạn hãy xác định đúng các ID ở trên và có thể tùy chỉnh các thuộc tính ở trên cho phù hợp.

    6. Tiếp theo chèn code CSS vào trước thẻ ]]></b:skin>
    .expandcontent {float:right;margin:0px 0 5px 0px;}
    7. Tìm đến code bên dưới
    <div class='post-header-line-1'/>
    8. Chèn code bên dưới vào ngay sau code vừa tìm được
    <div class='expandcontent' id='expandcontent'>
    Xem bài:<a href='javascript:narrow();'><img alt='Thu hẹp' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggEappb9zWkYr5zUSP4AwN8DIFqyfx6OlsMJGjKTosSDMs4RUYh4367Zkp197PVsToJa9DVytw0S5xtKdR261AVv6BvvVIZd1Bt4BAWzDYkblaGsDFL_QJ59ryxYAGggE32p8T4oqKNp9g/s1600/giam.png' title='Thu hẹp'/></a>
    <a href='javascript:enlarge();'><img alt='Mở rộng' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxLQc5hC-z4Hsfdj0bM6pMMFhQHOg0KAEEITbrGIP_yCmdPKljMA5A4RL6efE6l3TZ9YHXFSoMUJdRWb7TTmk6rWBOq1uYX0fhLGBmucJgGEmVq7O7mPqpf9ABUpteuOPHMCot6gdh3uBF/s1600/tang.png' title='Mở rộng'/></a>
    </div>9. Save template lại
    » Mở rộng thêm
    Ở trên mình hướng dẫn đối với template chỉ có 1 cột sidebar, như vậy đối với template có 2 cột sidebar thì sao? Khi muốn mở rộng toàn bộ nội dung và ẩn đi cả 2 cột sidebar đối với template này thì bạn thay code Script ở bước 5 thành code bên dưới
    <script type='text/javascript'>
    function enlarge(){
    div = document.getElementById("sidebar-wrapper"); // ID phần cột sidebar thứ nhất trong blog của bạn
    div.style.display="none";
    div = document.getElementById("rightsidebar"); // ID phần cột sidebar thứ 2 trong blog của bạn
    div.style.display="none";
    div = document.getElementById("main-wrapper"); // ID phần main trong blog của bạn
    div.style.width="800px"; // độ rộng tối đa của phần main khi mở rộng
    div.style.fontSize="16px"; // cở chữ khi mở rộng
    }
    function narrow(){
    div = document.getElementById("sidebar-wrapper"); // ID phần cột sidebar thứ nhất trong blog của bạn
    div.style.display="";
    div = document.getElementById("rightsidebar"); // ID phần cột sidebar thứ 2 trong blog của bạn
    div.style.display="";
    div = document.getElementById("main-wrapper"); // ID phần main trong blog của bạn
    div.style.width="500px"; // độ rộng ban đầu của blog bạn
    div.style.fontSize="12px"; // cở chữ ban đầu của blog bạn
    }
    </script>
    Bạn chỉnh sửa lại các ID cho phù hợp với template của blog bạn và save lại
    Chúc bạn thành công

    Nguồn: TRAIDATMUI.com

    1 nhận xét :

     
    Copyright © 2013 Blog's Trần Phúc Minh
    Share on Blogger Template Free Download. Powered byBlogger