Cách cài đặt Breadcrumb trong Blog Blogger




Breadcrumb là một phần quan trọng của blog blogger, Đầu tiên, nó giúp điều hướng dễ dàng và sau đó nó cũng giúp trong trường hợp SEO. tiện ích này rất sạch sẽ và dễ sử dụng, ở trạng thái rất tối thiểu với vẻ ngoài thanh lịch, nó giúp tăng cường vẻ ngoài blog của bạn. Lợi ích của tiện ích Breadcrumb này là nó chỉ hiển thị một nhãn ở giữa, về mặt seo google chỉ hiển thị một nhãn trong kết quả tìm kiếm, vì vậy chúng tôi đã duy trì nó theo cùng một cách, Chúng tôi đã quản lý số lượng nhãn được hiển thị trên Breadcrumbs chỉ có một. Cho dù có bao nhiêu nhãn được thêm vào mỗi bài đăng trên blog, vẫn chỉ có một nhãn sẽ xuất hiện trên mẩu bánh mì. Bạn có thể kiểm tra bản demo ngay trên tiêu đề của bài viết này.

Cách cài đặt tiện ích này: -

Các bước này rất đơn giản và dễ dàng đến nỗi bất kỳ blogger mới nào cũng sẽ không gặp phải bất kỳ vấn đề nào để cài đặt nó trong blog của họ. 
Truy cập Blogger.com >> Blog của bạn >> Mẫu 
ngay Sao lưu mẫu của bạn. 
Sau đó chọn Chỉnh sửa HTML >> Tiếp tục 
Đừng quên Nhấp / Đánh dấu vào ô Mở rộng tiện ích mẫu. 
Tìm kiếm <div class = 'post-header'>  và ngay bên dưới nó dán mã CSS sau.

<div class = 'Breadcrumbs' xmlns: v = 'http: //rdf.data-vocellect.org/#'> <span typeof = 'v: Breadcrumb'> <a class = 'bhome' expr: href = 'data : blog.homepageUrl 'property =' v: title 'rel =' v: url '> Trang chủ </a> </ span> <brc> / </ brc> <b: if cond =' data: post.labels ' > <b: loop value = 'data: post.labels' var = 'nhãn'> <b: if cond = 'data: nhãn.isLast == & quot; true & quot;'> <span typeof = 'v: Breadcrumb'> <a expr:href='data:label.url' rel='tag'> <data: nhãn.name/> </a> </ span> </ b: if> </ b: loop> <b: khác /> Không ghi nhãn </ b: if><brc> / </ brc> <span> <data: post.title /> </ span> </ div>


Bây giờ, hãy thêm kiểu dáng và phần quan trọng của tiện ích, Tìm kiếm ]]></b:skin>   và ngay bên dưới / sau khi dán mã sau đây


 .breadcrumbs {lề: 0; cỡ chữ: 13px; phần đệm: 5px; kích thước hộp: hộp viền; nền: # f2f2f2; bán kính đường viền: 2px; } .breadcrumbs span a.bhome {color: red} .breadcrumbs span, .breadcrumbs span a {color: # 010101} .breadcrumbs span a: hover {color: red}


Tất cả đã hoàn thành: Bây giờ mọi thứ đã hoàn tất chỉ cần Lưu Mẫu của bạn bằng cách nhấn nút Lưu mẫu. 

Lưu ý: Bạn có thể thay đổi văn bản và các nút cho phù hợp.

Đăng Nhận Xét

0 Nhận xét