Tạo bảng điều khiển chỉ hiện với Admin

Ngày Chủ Nhật, 1 tháng 4, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Tạo bảng điều khiển chỉ hiện với Admin
Chúc bạn xem tin tức vui vẻ !!

Hiện nay đa số các blogger chuyên nghiệp đều ẩn hoặc xóa thanh navbar trên đầu blog. Do vậy khi thao tác chỉnh sửa là tương đối khó khăn. Để tiện cho việc chỉnh sửa template và post bài, hôm nay mình xin giới thiệu cho các bạn 1 thủ thuật tạo một bảng "Admin Control Panel" vào ngay trong blog. Việc tạo bảng này sẽ giúp cho bạn khỏi phải chuyển qua lại giữa 2 trang : trang blog của bạn và trang chủ Blogger khi mình cần chỉnh sửa, đăng bài và xem mẫu.

Để làm được một tiện ích như vậy bạn càn phải đặt nó trong một class có dạng: class='item-control blog-admin'

» 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 Phần tử trang 
4. Chọn Thêm tiện ích => Chọn Thêm tiện ích HTML/Javar Scrip .

5. Thêm đoạn code bên dưới vào.

<span class='item-control blog-admin'>
<h2>Bảng điều khiển</h2>
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#editor'>Đăng bài</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#allposts'>Sửa bài đăng</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#basicsettings'>Cài đặt</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#pageelements'>Bố cục</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#template'>Sửa HTML</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#publishedcomments'>Nhận xét</a>
|
<a href='http://www.blogger.com/logout.g'>Thoát</a>
</span>

- Trong đó bạn thay BlogIdNumber thành số ID của blog bạn vào nha. Phần này mình hướng dẫn với các bạn đang dùng giao diện mới của blogspot.

- Mở rộng: Các bạn có thể thay đổi nội dung bên trong bằng các thay đổi phần nằm giữa 2 thẻ:

<span class='item-control blog-admin'>
Nội dung bạn muốn hiển thị.</span>

- Nếu chỉ áp dụng đến đây thì đoạn code trên sẽ nằm cố định một vị trí. Về căn bản tiện ích này chỉ có chủ nhân blog mới nhìn thấy nên không cần phải trang bị quá nhiều. Tuy nhiên các bạn có thể sử dụng CSS để làm đẹp và tăng tính năng động bằng cách thêm các class như only-amin

<span class='item-control blog-admin'>
<span class='only-amin'>
Nội dung bạn muốn hiển thị.</span></span>

- Khi đó bạn sẽ phải khai báo CSS cho class đó như sau:

<style>
.only-amin{position:fixed; top:100px;//thuộc tính của CSS}
</style>
<span class='item-control blog-admin'>
<span class='only-amin'>
Nội dung bạn muốn hiển thị.</span></span>

- Trong phần thuộc tính CSS mình thêm position:fixed; top:100px; để cho tiện ích này luôn luôn xuất hiện trên một vị trí cách đầu blog 100 px cho dù bạn đang xem ở bất kỳ vị trí nào. (tất nhiên bạn có thể thay đổi 100px theo ý bạn rùi). Và đừng quyên thêm các thuộc tính khác như widht (chiều rộng), height (chiều cao- Cái này thường không cần thiết vì nếu bạn cho chiều cao nhỏ quá sẽ xuất hiện thanh quận) ringht:..px để quyết định xem nó nằm bên phải hay bên trái

- Tóm lại bạn có một đoạn code mới dạng như sau:

<style>
.only-amin{width:200px; position:fixed; top:100px;right:10px; background: #E0FCB9;box-shadow: 2px 2px 2px #666}
</style>
<span class='item-control blog-admin'>
<span class='only-amin'>
<h2>Bảng điều khiển</h2>
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#editor'>Đăng bài</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#allposts'>Sửa bài đăng</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#basicsettings'>Cài đặt</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#pageelements'>Bố cục</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#template'>Sửa HTML</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#publishedcomments'>Nhận xét</a>
|
<a href='http://www.blogger.com/logout.g'>Thoát</a>
</span>
</span>

- Bạn hãy tự thể hiện khả năng sáng tạo của bạn nha.

Chúc các bạn thành công!!!