Thủ thuật Code: Tự động ẩn hiện thanh Navbar của Blogger

Trước khi vào bài viết, nếu chưa hiểu gì về Blogger, bạn có thể vào đây để tham khảo thêm tài liệu hướng dẫn nhé. 

• Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
• Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot

Những tác giả của các bài viết nầy tuy không phải do mình viết, nhưng đều là các bậc lão tiền bối đi trước, có nhiều kinh nghiệm. Nghề của mình tuy là IT Networking Computer - trình độ Trung cấp thôi, nhưng lĩnh vực nầy mình vẫn phải học hỏi, phải tôn  trọng.

Khi thiết kế Blog, Blogger mặc định có một thanh Navbar trên cùng của blog bao gồm các menu như: Biểu tượng truy cập Blogger, khung tìm kiếm, nút chia sẽ Google+ và các liên kết chia sẽ khác, nút chuyển qua Blog tiếp theo ,các điều khiển đăng nhập và đăng xuất Blogger Dashboard, … .
Để dấu nó đi bạn chỉ cần đặt đoạn code dưới đây vào trước thẻ </head>.

<style type="text/css">
#navbar-iframe {height:0px; visibility:hidden; display:none; }
</style>

Tuy nhiên bạn có thể làm cho thanh Navbar ẩn hiện bằng một nút Ẩn/Hiện Navbar bởi vì về một phương diện nào đó, thanh Navbar của Blogger cũng có ích đấy.
Trong hình dưới đây, có các bước trình tự như sau:

• Đăng nhập vào Blogger Dashboard/ Chọn tiếp vào Chủ đề (Template) ở hướng mũi tên đầu bên trái hình, trỏ qua trái.
• Chọn tiếp chỉnh sữa Html (Edit Html).
• Nhấn Ctrl+F mở khung Search (vị trí hiện ra ở con trỏ chỉ về bên phải)
• Nhập vào khung Search dòng chữ </head> và nhấn phím Enter.
• Chép code trên khung Code phía trên vào phía trên vệt tô màu vàng trên hàng chữ </head> vừa tìm được, giống như khung chữ nhật viền trên hình.

Một điều thú vị hơn, nếu như các bạn muốn cho hiển thị nút Ẩn/Hiện Navbar, bạn hãy làm theo các bước sau:

Để làm được điều này, trước tiên bạn cần đặt thêm đoạn code dưới đây vào trước thẻ </head>.

Có thể giữ lại đoạn Code ở đầu bài hay không, đều có động thái của nó mỗi khi ứng dụng Blogger được Loading. Việc đó là tùy ở các bạn bố trí.

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{nav.style.visibility="visible";
nav.style.display="block";}
else
{nav.style.visibility="hidden";
nav.style.display="none";}
}
</script>
<style type="text/css">
#navbar-iframe {visibility: hidden; display: none;}
</style>

Tiếp theo bạn đặt đoạn code dưới đây vào vị trí cần hiển thị nút Ẩn/Hiện Navbar, có thể đặt trong một tiện ích HTML/JavaScript hoặc ở thanh Menu trên cùng của Blog.

<span style="cursor:pointer;" onclick="ShowHideNav();">
Ẩn / Hiện Navbar
<a style="visibility:hidden;">
</a></span>

Bạn có thể thay dòng Ẩn / Hiện Navbar bằng một liên kết hình ảnh với cú pháp như sau:

<img src="URL_hình ảnh"/>.

Để biết thêm chi tiết về cách thiết kế cú pháp thẻ <img>, bạn có thể xem thêm bài: Những Code Thông Dụng Cho Blogspot

DEMO trên trang địa chỉ sau mà bạn có thể vào xem:

http://ketbancungkhanhnguyen4.blogspot.com/

Trên đây chỉ là thủ thuật nhỏ mà mình tìm được. Bình thường thì các bạn vào Blogger Layout để tắt hiển thị Navbar hoặc vào Blogger Template,  tìm đoạn code trỏ về Navbar để xóa luôn hẳn cả. 

Ở trên Blog Dx - https://dxoan.blogspot.cfffom- còn có một cách nầy nữa: cho phép ẩn hiện khi rê trỏ chuột vào vùng vị trí của nó.
Source Code như sau:(Bạn chép nó vào trước thẻ đóng: </b:skin>)

#navbar-iframe {
height:5px;
}
/* IE7, IE8, IE6 */
#navbar-iframe {  height/*\**/: 30px\9; }
#navbar-iframe:hover {height:40px; !important;}

Mời các bạn thử qua công việc Hướng dẫn thiết kế Template Blogger nếu chưa biết, để làm cho bằng được một Web site ưng ý. Đây là một công việc kỹ thuật giúp các bạn có thể tự tin để tạo dựng cho mình một Web/Blog vào đời.

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

Người viết: Nguyễn Đạt Khánh

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..