CÁCH TẠO BLOGGER ĐÁP ỨNG TRÊN THIẾT BỊ DI ĐỘNG
Bạn có thể tạo menu điều hướng đáp ứng thanh trên cùng cho chủ đề Blogger như bạn đã thực hiện trên mẫu HTML thô. Sử dụng menu Điều hướng tĩnh trong Blogger là cách tốt nhất để tránh nhiều vấn đề. Mặc dù bạn có thể sử dụng tiện ích 'Trang', 'Danh sách liên kết' để chèn liên kết động vào menu của mình, nhưng sẽ rất khó để trình đơn thả xuống.
Vì vậy, bạn không cần phải tạo dữ liệu động như bạn đã làm và sẽ làm cho bố cục của người khác trên Blogger. Nếu bạn sử dụng Bootstrap Framework, thì bạn có thể sử dụng navebar từ đây Hoặc bạn có thể kiểm tra bài viết hành động về menu phản hồi từ w3schools .
Đặt mã vào chủ đề XML của bạn, nơi bạn muốn hiển thị thanh menu điều hướng. Sau khi tạo menu đáp ứng di động, chỉ cần dán URL nhắm mục tiêu vào thẻ neo. Thí dụ:
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
Nhưng bạn có thể động URL trang chủ thành <li></li>thẻ như<li><a expr:href='data:blog.homepageUrl >Homepage</a></li>
TẠO BLOGGER ĐỘNG
Vì cấu trúc cơ bản của Chủ đề Blogger là:
1. Tiêu đề
2. Blog
3. Thanh bên
4. Chân trang,
chúng ta nên tạo động này để chúng ta không cần mã lại.
1. Tạo tiêu đề động:
Đặt mã sau vào div tiêu đề.
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
2. Tạo bài đăng trên blog động:
Đặt đoạn mã sau vào bài div.
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'/>
</b:section>
3. Tạo Sidebar động:
Đặt mã sau vào div sidebar.
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
</b:section>
4. Tạo một Footer động:
Đặt mã sau vào div footer.
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
</b:section>
SỬ DỤNG DỮ LIỆU MẶC ĐỊNH ĐỘNG TRONG BLOGGER
Blogger cung cấp một số thẻ dữ liệu mặc định mà chúng tôi có thể gọi dữ liệu cụ thể để hiển thị. Ví dụ: Nếu chúng tôi muốn tên tác giả của bài đăng được xuất bản trong mỗi bài đăng, thì chúng tôi có thể sử dụng <data:post.author/>.
Sử dụng này sau các thẻ sau.
<div class='post-footer-line post-footer-line-1'>
Tương tự, có nhiều thẻ dữ liệu Blogger để hiển thị dữ liệu cụ thể trong Blog được xuất bản. Thẻ dữ liệu Blogger này sẽ chỉ hoạt động trong tiện ích Blog.
[sly fa-apple] THẺ DỮ LIỆU BLOGGER
| Tên thẻ | Mô tả |
|---|---|
| <data:post.dateHeader/> | Ngày của bài viết là tiêu đề. |
| <data:title/> | Tiêu đề của blog. |
| <data:description/> | Mô tả của blog. |
| <data:olderPageTitle/> | Tiêu đề của trang cũ của bài viết. |
| <data:newerPageTitle/> | Tiêu đề của trang mới hơn của bài viết. |
| <data:commentLabel/> | Số lượng bình luận. |
| <data:authorLabel/> | Nó sẽ hiển thị "được đăng bởi". |
| <data:post.title /> | Tiêu đề của bài viết. |
| <data:post.body/> | Nội dung của bài viết. |
| <data:post.author/> | Tên tác giả của bài viết. |
| <data:post.url/> | Liên kết url của bài đăng. |
| <data:post.timestamp/> | Ngày và thời gian của bài viết. |
| <data:label.name/> | Nhãn của bài viết. |
Bạn có thể nhận thêm Thẻ dữ liệu Blogger từ Hỗ trợ Blogger .
THẺ NEO ĐỘNG TRONG BLOGGER LÀ GÌ?
Dynamic Anchor In Blogger được chuyển đổi thành văn bản neo chung với URL. Ví dụ: Nếu URL của trang chủ là http://www.compromath.comthì thẻ sau sẽ được chuyển đổi <a expr:href='data:blog.homepageUrl >Homepage</a>thành
<a href="http://www.compromath.com">Homepage</a>
Một số thẻ neo động cho Chủ đề Blogger
URL NEO ĐỘNG
| Biểu thức | Giải thích |
|---|---|
| <a expr:href='data:blog.homepageUrl >Homepage</a> | Một văn bản có URL của trang chủ |
| <a expr:href='data:post.url'>Read More</a> | Đọc thêm văn bản với URL của bài |
| <a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a> | Tên nhãn với URL của nhãn |
| <a expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> | Văn bản bài đăng mới hơn với URL bài đăng mới hơn |
| <a expr:href='data:post.olderLinkUrl'><data:post.newerLinkText/></a> | Bài viết cũ hơn với URL bài cũ hơn |
| <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> | Tên tác giả có URL |
| <a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a> | Bình luận Văn bản để bình luận với URL |
HOẠT ĐỘNG NĂNG ĐỘNG HƠN
Hiển thị / Ẩn, Thiết kế tùy chỉnh, Trang đích tùy thuộc vào loại trang và URL
Nếu chúng tôi muốn ẩn thanh bên trong Trang chủ nhưng muốn hiển thị trong bài đăng, trang chúng tôi đã xuất bản hoặc nếu chúng tôi muốn hiển thị thiết kế cơ thể riêng biệt và mới khi URL của blog là http:www.compromath.com/p/contact.html, sau đó nó có quyền truy cập để làm điều đó với việc sử dụng các thẻ có điều kiện. Sử dụng các thẻ có điều kiện, chúng tôi có thể sử dụng HTML, CSS, JavaScript bổ sung theo ý muốn và điều này làm cho Blogger năng động hơn.
TẠO TRANG ĐÍCH TRONG BLOGGER
Bạn có thể đặt mã trước </head>thẻ hoặc sau <body>thẻ.
<b:if cond='data:blog.pageType == "index"'>
<style>
.sidebar{display:none;}
.post-wrapper{width:100%}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static"'>
<style>
.sidebar{display:block;}
</style>
</b:if>
</b:if>
Tìm hiểu thêm các thẻ điều kiện năng động cho Blogger. Bằng các thẻ có điều kiện này, bạn có thể nhắm mục tiêu URL cụ thể, Trang, v.v ...
#Tạo Thẻ tiêu đề động
Bây giờ hãy đi để tạo thẻ tiêu đề Blog của bạn. Nó là tổ hợp của Thẻ dữ liệu Blogger và Thẻ có điều kiện.
Thay thế <title></title>thẻ của bạn với các mã sau đây.
<b:if cond='data:blog.pageType == "index"'>
<title>Blogger, Code and Ubuntu Platform - <data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
Thay thế Blogger, Code và Ubuntu Platform bằng tên tiêu đề bạn muốn cho blog của bạn.
#Custom Design Blogger Blogger với CSS
Chúng tôi đã hoàn thành 80% Phát triển chủ đề Blogger. 20% còn lại là về thiết kế tùy chỉnh với CSS.
Trước khi chỉnh sửa thiết kế, bạn nên tìm hiểu cách chỉnh sửa mẫu Blogger .
Tìm tất cả các lớp & id của div, phần, điều hướng vv là rất khó khăn, nhàm chán, lãng phí thời gian bằng tay. Nhưng tôi sẽ cho bạn biết các thủ thuật để thu thập tất cả các lớp và id với CSS mặc định trong vòng vài giây.
1. Sao chép tất cả mã CSS miễn phí cho Blogger từ liên kết .
2. Dán vào để xác thực hoặc định dạng.
3. Sau khi định dạng, sao chép tất cả CSS và dán vào bất kỳ trình soạn thảo HTML / CSS nào.
4. Sửa đổi lớp CSS và id nếu có định dạng xấu.
5. Dán vào Chủ đề Blogger của bạn trong vòng <b:skin> [[ /******CSS ******/ ]]></b:skin>.
6. Lưu chủ đề của bạn.
7. Tiếp theo tùy chỉnh CSS của bạn với các công cụ kiểm tra từ trình duyệt.
[sly fa fa-lightbulb-o] Mẹo cho Bootstrap: Bạn có thể chèn lớp CSS vào thành phần HTML cụ thể. Giả sử nếu bạn muốn chèn nhãn Bootstrap vào <data:post.author/>, sau đó bọc các phần tử này bằng span và chèn lớp nhãn như bên dưới:
<span class='label label-success'><data:post.author/></span>
Mẹo cho Font-Awesome: Bạn có thể chèn biểu tượng Font Awesome như bên dưới.
<span class='label label-success'><i class='fa fa-user'/><data:post.author/></span>
TÙY CHỈNH CHỦ ĐỀ BLOGGER KHÁC
LÀM CÁCH NÀO ĐỂ SẮP XẾP TÁC GIẢ, NHÃN, NGÀY LÊN VÀ XUỐNG TỪ THÂN BÀI?
1. Trước tiên, hãy truy cập Bảng điều khiển Blogger → Bố cục → Bài đăng trên blog → Chỉnh sửa và bạn sẽ thấy một cửa sổ bật lên.
2. Từ ' Tùy chọn trang bài ' kiểm tra nút bạn muốn hiển thị và bỏ chọn tùy chọn bạn muốn ẩn.
3. Sau khi cuộn xuống, bạn sẽ nhận được ' Sắp xếp các mục '. Kéo mục đã chọn của bạn lên và xuống để đặt.
4. Lưu lại.
Nếu nó không hoạt động thì hãy chuyển mã liên quan từ Blogger Editor bằng tay.
CÁCH THÊM BƯỚC NHẢY TRONG BÀI VIẾT TRÊN BLOGGER
Xem bài viết này về cách thêm nút nhảy break / nút đọc thêm trên Blogger .
CÁCH TÙY CHỈNH TIÊU ĐỀ NGÀY BLOGGER
Thêm CSS sau vào Chủ đề Blogger theo tùy chỉnh của bạn.
.date-header{}
CÁCH HIỂN THỊ / ẨN NHÃN TRÊN BLOGGER
Thêm CSS sau vào Chủ đề Blogger
.post-labels{display:none;visibility:hidden}để ẩn và
.post-labels{display:block;}hiển thị.
CÁCH XÓA NGÀY VÀ GIỜ KHỎI BÀI VIẾT TRÊN BLOGGER
Đặt CSS vào chủ đề Blogger của bạn.
.post-timestamp{display:none;visibility:hidden}
CÁCH THÊM NGÀY GIỜ TRONG BLOGGER
Chuyển đến Bảng điều khiển Blogger → Bố cục → Bài đăng trên blog → Chỉnh sửa → Tùy chọn trang bài s
Kiểm tra tùy chọn ngày bạn muốn hiển thị.
Hoặc
Sử dụng mã sau đây trong chủ đề Blogger của bạn sau<div class='post-footer-line post-footer-line-1'>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
CÁCH THAY ĐỔI TÊN TÁC GIẢ TRONG BLOGGER
Tìm kiếm <data:post.author/>từ trình soạn thảo HTML Blogger của bạn và thay thế bằng tên bạn muốn bằng thẻ p. Thí dụ:<p>Elliyas</p>
CÁCH XÓA TÊN TÁC GIẢ KHỎI CÁC BÀI ĐĂNG TRÊN BLOGGER
Đặt CSS vào chủ đề Blogger của bạn.
.post-author vcard {display:none;visibility:hidden}
TẠO FULLWIDTH CHO TRANG
Chỉ cần làm theo các bước đơn giản dưới đây để ẩn thanh bên (sidebar) trong trang blogger hoặc bài đăng nhất định của bạn:
1. Truy cập Blogger.com >> Thêm trang / bài đăng mới
2. Bây giờ chọn Chỉnh sửa tab HTML của Mẫu Blogger.
3. Dán CSS sau:
<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:99%!important;} .post { width:99%!important; }
</style>
4. Thay thế chiều rộng: 99% theo nhu cầu của bạn, thậm chí bạn có thể sử dụng pixel thay vì tỷ lệ phần trăm tức là 960px.
Bổ sung: Nếu bạn cũng muốn ẩn Tiêu đề khỏi một trang nhất định, thì chỉ cần dán mã sau đây trước </ style> trong mã ở trên. (nó sẽ không ảnh hưởng đến việc thu thập thông tin vì các bot có thể dễ dàng nhìn thấy những thứ này)
.post-title, .post-nhãn, post-icon, post-Author {display: none!important;}
5. Bây giờ xuất bản nó và sau đó truy cập trang web của bạn để kiểm tra các trang blog của bạn với cái nhìn hoàn hảo.
Xem hướng dẫn cụ thể
Đăng nhận xét