Tuyệt vời khi bạn tùy biến được tất cả. Đối với Template của một Blogger, Google chỉ cung cấp cho chúng ta những thiết kế chuẩn, thật là chán mỗi khi chỉ nhìn thấy ở cuối chân trang những hàng chữ: nhỏ xíu, không có nét, không có hồn, không có tên, không có tuổi luôn...
Mình tình cờ tìm thấy được những Source code nầy mà thôi, và...còn thấy chúng nhiều ở vô số nơi trên mạng. Chỉ việc chép về ...và ngâm cứu mãi cho đến hôm nay mới thực hành và chia sẽ lại cùng bạn bè.
Tiến trình rất đơn giản, gồm các bước:
Bước 1: Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>.
/*################ Show Next & Previous Post Titles in Blogger with jQuery Navigation ##########################*/
.bogger-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;}
.bogger-pager li.next { float: right; padding:0px; background:none; margin:0px;}
.bogger-pager li.next a { padding-left: 24px; }
.bogger-pager li.previous { margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px; background:none;
}
.bogger-pager li.previous a { padding-right: 24px; }
.bogger-pager li.next:hover, .bogger-pager li.previous:hover {background:#333333; }
.bogger-pager li { width: 50%; display: inline; float: left; text-align: center; }
.bogger-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.bogger-pager li i { color: #ccc; font-size: 18px; }
.bogger-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.bogger-pager li a span {<span style="box-sizing: border-box; color: red;">font-size: 18px</span><b style="box-sizing: border-box;">;</b> <span style="box-sizing: border-box; color: purple;"><b style="box-sizing: border-box;">color: #666</b></span>;<span style="box-sizing: border-box; color: orange;"><b style="box-sizing: border-box;">font-family:Arial, Tahoma, sans-serif</b></span>; margin:0px}
.bogger-pager li a:hover span,
.bogger-pager li a:hover i { color: #ffffff; }
.bogger-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.bogger-pager li.next i { float: right; margin-top: 15%; margin-right: 5%; }
.bogger-pager li.next i, .bogger-pager li.previous i ,
.bogger-pager li.next, .bogger-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}
Tùy biến CSS:
- font-size: 18px là font chữ tiêu đề bài viết
- color: #666 là màu chữ tiêu đề bài viết
- font-family:Arial, Tahoma, sans-serif là loại font chữ của tiêu đề bài viết
Bước 2: Tiếp tục thêm Jquery và một số font chức năng mới mà Google ưa thích gọi là Oswald. Bằng cách dán đoạn code bên dưới sau thẻ <head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Chú ý:
- Nếu blog của bạn đã có file Jquery rồi thì hãy bỏ đoạn code màu xanh đi.
- Đoạn font màu vàng chỉ dành cho blog chuyên viết tiếng anh.
- Nếu bạn viết blog bằng tiếng việt thì xóa nó đi hoặc vào đây để chọn font chữ tiếng việt mà bạn muốn trong Google Fonts.
Như trong hình trên, sau khi bạn Click vào link trên bạn sẽ mở ra ứng dụng Google Fonts. Bạn chỉ việc kéo thanh cuộn bên phải để chọn lựa Fonts như ý. Để chọn lựa, trên góc phải trên của từng khuôn Fonts có một dấu + (cộng), bạn chỉ việc Click chuột vào chọn để Add và chép lấy Source Code bên trong nhé.
Bước 3: Chúng ta sẽ tìm vị trí cố định để thêm tiện ích này. Như đã nói ở trên chúng ta thêm nó vào ngay sau nội dung của bài đăng nên các bạn tìm đoạn code bên dưới:
<data:post.body/>
- Dán vào sau nó đoạn code sau:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='bogger-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>Bạn đang xem bài đăng mới nhất trên blog này</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>Bạn đang xem bài đăng cũ nhất trên blog này</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>
Tùy biến XML:
- Bạn có thể thay đổi phần màu đỏ theo ý của bạn.
- Phần màu tím là thông báo khi bạn đang xem bài đăng mới nhất và bài đăng cũ nhất trên blog đó.
Bước 4: Thực hiện thao tác ẩn đi các liên kết bài đăng cũ hơn và mới hơn mặc định của blogger. Trong trình chỉnh sữa Html của Template, nhấn Ctrl+ F tìm đoạn code có dạng:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
Sau khi tìm được (chỉ cần tìm được 1 hàng màu vàng thôi) bạn hãy làm tiếp 2 bước bên dưới:
1- Thêm vào sau đoạn màu vàng phía đầu source code 2 đoạn mã bên dưới
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
2- Thêm vào trước đoạn màu xanh ở cuối source code đoạn mã bên dưới:
</b:if></b:if>
Tuy nhiên, đế cho biến mất hẳn những nút Next Home Preview cuối mỗi bài đăng, là một mặc
định của trình thiết kế Blogger, bạn cần tìm các đoạn mã sau trong Template nhé:
#blog-pager-newer-link{float:left;display: none;}
#blog-pager-older-link{float:right;display: none;}
#blog-pager{text-align:center;display: none;}
|
Trong từng hàng Code trên, chỉ cần tìm cho đúng các mã màu xanh bên trái và thêm vào đó phía
sau các thuộc tính mã Code display: none;Xong chưa? Giờ thì bạn lưu mẫu lại và kiểm tra thử hoạt động của Blogspot nhé. Chúc các bạn
thành công.thành công.
Người viết: Nguyễn Đạt Khánh
