Thứ Năm, 26 tháng 4, 2012
Bài viết liên Quan gồm danh sách ảnh và bài viết
08:05 |
Chạy với cả nhãn tiếng việt và nhãn tiếng anh, Các bạn có thể xem Demo tại bài viết thuộc các nhãn khác nhau.
Bố cục phần header
07:57 |Headr là phần trên cùng của blog.
Mặc định là có 1 phàn bên trái, nhưng trong mẫu này mình chí thành 2 phan bằng nhau
Bố cục phần header gồm 2 phần các bạn có thể tháy trong phần bố cục.
Mặc định là có 1 phàn bên trái, nhưng trong mẫu này mình chí thành 2 phan bằng nhau
Six million namkna fast free template
07:52 |
Cái
tên nói lên tất cả, với những bạn tham gia namkna từ lâu thì sẽ hiểu
nhưng với những bạn mới chắc chắn sẽ không hiểu cái tên này có ý nghĩa
gì, Six million namkna free template namkna dịch nôm na là "Template kỷ
niệm mốc 6 triệu độc giả".
Phân trang (Paginator) cuộn đẹp cho Blogspot trên 3000 bài viết
07:42 |
Abu Farhan có nhiều code phân trang cho
blogspot khá đẹp. Một trong số đó là kiểu phân trang dạng cuộn sử dụng
plugin cho Wordpress có tên Paginator 3000 dựa theo ý tưởng của Ecto.ru và code của Karaboz.ru.
Thứ Tư, 25 tháng 4, 2012
Tùy biến nút Read More của Blogspot
03:07 |
Những ai đang dùng chức năng Read More (đọc thêm) mặc định của Blogger sẽ nhận ra là nó không được đẹp cho lắm, Trước đây mình đã hướng dẫn các bạn Xóa bỏ dòng chữ read more (đọc thêm bài viết) tuy nhiên nhiều người vẫn thích để lại dòng chữ này nhưng cần thay đổi cho đẹp hơn, vì vậy trong bài này Namkna sẽ hướng dẫn cách tùy biến sao cho trông bắt mắt hơn.
Tạo Auto readmore không sử dụng javascript cho Blogger
02:52 |
Blogger đã có readmore tuy nhiên nó khá
thủ công, với blog đã có nhiều bài viết thì việc tạo readmore cho từng
bài là rất vất vả và blogger thường tìm đến với auto readmore javascript.
Auto readmore javascript thực ra chỉ hiển thị một phần bài viết qua hàm
document.write, nội dung cả bài viết vẫn được trình duyệt tải về. Nhược
điểm của nó là không thân thiện với các bộ máy tìm kiếm và các công cụ
dịch trực tuyến, ngoài ra với bài viết dài nếu không dùng thêm readmore
của Blogger thì sẽ gặp lỗi phân trang do Blogger tự ngắt trang. Thủ
thuật auto readmore mình giới thiệu sau đây hoàn toàn mới, không sử dụng
javascript mà dùng các câu lệnh do chính Blogger cung cấp. Nó sẽ cải thiện tốc độ blog của bạn khi duyệt các trang kiểu index, archive do chỉ tải về trích đoạn nội dung của bài viết.
Xem cách làm Tại đây
Menu ngang sổ dọc nhiều cấp sử dụng CSS3
01:51 |
Nếu
trước đây các bạn phải than phiền về tốc độ blog bị giảm đi ít nhiều
khi áp dụng các thanh menu xổ dọc nhiều cấp kết hợp JQuery. Thì hôm nay
mẫu menu namkna giới thiệu này sẽ đem đến cho các bạn một trải nghiệm
tuyệt vời với CSS3.
Thứ Sáu, 2 tháng 3, 2012
Recent post
19:45 |Ở bài viết trước, Namkna đã giới thiệu đến các bạn tiện ích Recent Posts mang phong cách Báo trí. Nhận thấy đây là một style Recent post rất hay với một số tùy chỉnh nâng cao được rất nhiều bạn đọc yêu thích. Và cũng theo yêu cầu của một số bạn là làm sao cho tiện ích gọn hơn, sử dụng chung một file javascipts , nên hôm nay namkna sẽ chia sẻ đến các bạn một tùy biến nâng cao và cập nhật của style này.
Những cập nhật nâng cao mới :
- Thêm ảnh thunbile cho những bài viết không có ảnh minh họa
- Sử dụng chung một file Javarscipt chèn thẳng vào template. Tất cả trong 1 với Recent post tất cả các bài viết và recent post theo nhãn.
- Giao diện : bắt hơn so với style cũ....
- Khả năng SEO : thân thiện hơn với các SE) do chèn thêm thuộc tính Alternate cho Images
- Cài đặt đơn giản hơn: Tiết kiệm thời gian và dung lượng của template
- Thêm liên kết “xem thêm” kèm hình ảnh nhỏ xinh He...he...he...
Cách tiến hành!
1- Đăng nhập vào blog2- CHọn Mẫu (Template)
3- CHọn chỉnh sửa HTML (Edit HTML)
4- Thêm đoạn code bên dưới trước thẻ ]]></b:skin>
/*----------------------------------
Recent post Magazine for homepage blogger
Edit by: http://namkna.blogspot.com/
------------------------------------*/
.fl{float:left}
.fr{float:right}
.folder{width:516px; margin-bottom:8px; overflow:hidden; line-height:1.5em;font:normal 12px arial;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.folder-title{height:26px; border-bottom:1px solid #eee; overflow:hidden; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHhxmNWzEm3DWkLVUpwFPej3Okui7wuP7feJi2qX5ia3daFI5lduZ55DzAR68eFuwcHFF13SrewbIci0sSn8yaR9IwtqVPEzaLBYNK1mZQVYf4rsrudrTfmnm2AQ97RxhCl87mHF_9LGvY/h120/catalog_header_bg-namkna-blogspot-com.gif) repeat-x}
.folder-active{height:24px; padding:4px 10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8d1siLwlQlySdHmX4sV4EJ33n9dz4GNw_Xuo-NCnl3l4ABOq92tHoExfTctMfTgixyOql93k947wjfYamjjTtuAnpGMB-6PyrmlHF7DR30KdjO6tDHmb4NlAllS7dfJ5F3u5awPpxdPYG/h120/parent_bg-namkna-blogspot-com.gif) repeat-x; font-weight:bold}
.link-folder:link, .link-folder:visited{color:#fff}
.subfolder{height:24px; padding:5px 5px 0 15px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcGVL97a6HA2Uf_HXIQsBVMAfpLKfbeiHW7DtpTdgFWMlmpXomkAkiIOotYLL2bj-wKGa5aza0kLtqtRARz0s5opa-IPklOKMwVMzM4Vk3LvzKzgfQm-ivt7za3r99G__4QjFzQJscZ4N/h120/parent_child_spc-namkna-blogspot-com.gif) no-repeat}
.folder-content{width:500px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE-GAAQ56rJaA2SaZ__ciDFqOkA3uJwggfkRFnjo-VR6UKKonjwmwFJbstbB92iOz9lm_-2DDr-1ucNg5BwBQxZrfvekszRxyo7PiJ0sRlzh_70AkOQdANlZXALihCjfywj_lmIP8SydRL/h120/red-box-content-namkna-blogspot-com.png) repeat-x left bottom; padding:10px 6px 2px 10px; overflow:hidden}
.folder-content p{margin:0}
.folder-content ul{list-style:none; margin:0; padding:0}
.folder-content li{padding:0 0 4px 6px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmVcqDEI2TiM8xOJsdvvr0lTSBUCTYUuoYDF-JclKliHELglijGlJEb6CooG6QZ-Jyb000Gl15MhadjTbYJPl9QmHiVWEhwXV0reDOqRVgQjjUG2yOEw0oYecwq1X39IIqEZLhl3IaKbe/h120/icon-namkna-blogspot-com.gif) no-repeat 0 8px}
.folder-topnews{width:312px; padding-right:10px}
.folder-othernews{width:168px}
.other-folder{margin:0}
.img-subject{height:85px; width:110px; border:1px solid #a5a5a5; margin-right:8px}
.img-other{width:60px; height:50px; border:1px solid #a5a5a5; margin:0 5px 4px 0}
.xemthem{float:right; display:block; margin:0; padding:5px}5- Thêm đoạn code dưới trước thẻ </head><script type='text/javascript'>
//<![CDATA[
imgr = new Array();
showRandomImg = true;
summaryPost = 230;
numposts2 = 5;
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOLzi8DBCtn42C_mjrACACHpoUeakNXYLKqKx2vu8iiOqhPVsyEV9QZix9xt18PMcsiSCBvUoY5dA1XDARfn6o9KW6BCM3AJZhMI_cZ02vfTu1sQtIraPwqzmFNk3U2G_Gb6p1f4HGh4Ia/s1600/noimage-namkna-blogspot-com.png";
aBold = true;
function removeHtmlTag(strx, chop) {
if (strx.indexOf("<") != -1) {
var s = strx.split("<");
for (var i = 0; i < s.length; i++) {
if (s[i].indexOf(">") != -1) {
s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)
}
}
strx = s.join("")
}
chop = (chop < strx.length - 1) ? chop : strx.length - 2;
while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
strx = strx.substring(0, chop - 1);
return strx + ' [...]'
}
function showrecentposts2(e) {
j = (showRandomImg) ? Math.floor((imgr.length + 1) * Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts2; i++) {
var f = e.feed.entry[i];
var g = f.title.$t;
var h;
if (i == e.feed.entry.length) break;
for (var k = 0; k < f.link.length; k++) {
if (f.link[k].rel == 'alternate') {
h = f.link[k].href;
break
}
}
if ("content" in f) {
var l = f.content.$t
} else if ("summary" in f) {
var l = f.summary.$t
} else var l = "";
if (j > imgr.length - 1) j = 0;
img[i] = imgr[j];
s = l;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) img[i] = d;
if (i == 0) {
var m = '<div class="folder-topnews fl"><img src="' + img[i] + '" title="' + g + '" class="img-subject fl"><p style="padding-bottom:5px"><a href="' + h + '"><b>' + g + '</b></a></p><p>' + removeHtmlTag(l, summaryPost) + '</p><a href="' + h + '" class="xemthem">Xem thêm <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-POmpOTqZhLSkbLOkbuGvzbP5vrsaq_w4qwBh7B4GUm1dsIzlsGA7qRg_2nMLufweQFNkbIhZaMVkCTN3_cT7u-1M0O1WRmcBD1r4fknbY7-K3oSFB39nY9BxD_p0B7YVgn1mdYlA2T4/" alt="' + g + '"/></a></div>';
document.write(m)
}
if (i == 1) {
var m = '<div class="folder-othernews fl"><div class="other-folder fl"><img alt="" class="img-other fl" src="' + img[i] + '" alt="' + g + '"><a href="' + h + '">' + g + '</a></div>';
document.write(m)
}
if (i == 2) {
var m = '<div class="fl"><ul><li><a href="' + h + '">' + g + '</a></li>';
document.write(m)
}
if ((i > 2) && (i < numposts2 - 1)) {
var m = '<li><a href="' + h + '">' + g + '</a></li>';
document.write(m)
}
if (i == numposts2 - 1) {
var m = '<li><a href="' + h + '">' + g + '</a></li></ul></div></div>';
document.write(m)
}
j++
}
}
//]]>
</script>6- Tìm đoạn mã sau:<b:if cond='data:blog.url == data:blog.homepageUrl'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/> </b:section>
- Thêm đoạn code dưới vào sau nó (Bạn cũng có thể thêm vào tiện ích HTML/Javarscip bên dưới bài đăng):
<!-- Recnet post all -->
<div class='folder'><div class='folder-title'><div class='folder-active fl'>
<a class='link-folder' href='http://namkna.blogspot.com/search/label/Blogspot%20Recent post?&max-results=5'>Recent post</a></div>
<div class='subfolder fl'>
<a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Menu?&max-results=5'>Menu</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Navigation?&max-results=5'>Navigation</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Comments?&max-results=5'>Comments</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Popular posts?&max-results=5'>Popular posts</a></div></div><div class='folder-content' id='tdHomeFolder2'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>
</div>
<!-- Nhãn 2 -->
<div class='folder'><div class='folder-title'><div class='folder-active fl'>
<a class='link-folder' href='http://namkna.blogspot.com/search/label/Blogspot%20Recent post?&max-results=5'>Recent post</a></div>
<div class='subfolder fl'>
<a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Menu?&max-results=5'>Menu</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Navigation?&max-results=5'>Navigation</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Comments?&max-results=5'>Comments</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Popular posts?&max-results=5'>Popular posts</a></div></div><div class='folder-content' id='tdHomeFolder2'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Tên nhan 1?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>
</div>
<!-- nhãn 1 -->
<div class='folder'><div class='folder-title'><div class='folder-active fl'>
<a class='link-folder' href='http://namkna.blogspot.com/search/label/Blogspot%20Recent post?&max-results=5'>Recent post</a></div>
<div class='subfolder fl'>
<a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Menu?&max-results=5'>Menu</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Navigation?&max-results=5'>Navigation</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Comments?&max-results=5'>Comments</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Popular posts?&max-results=5'>Popular posts</a></div></div><div class='folder-content' id='tdHomeFolder2'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Tên nhan 2?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>
</div>
</b:if>7- Lưu mẫu lại:
Đăng ký:
Bài đăng (Atom)
Translate
Tải Template về này Dùng
