Vì files flash nhiều sẽ làm cho Blog load chậm, do đó mỗi bài tôi chỉ giới thiệu 10 files (chia thành nhiều bài), mong các bạn thông cảm.
FLASH ĐẸP CHO BLOG (PHẦN 11)
Người đăng: kiemdaigia on Chủ Nhật, 13 tháng 11, 2011
BLOGGER.TUBE THEMES
Người đăng: kiemdaigia on Thứ Bảy, 12 tháng 11, 2011
THEMES BLOGGER TUBE
* Cách Add video:
Khi "post" vide các bạn làm các bước sau:
Đăng nhập vào Blog > Chọn Đăng bài mới, một ô để đăng bài hiện ra, các bạn bấm vào thẻ HTML.
Tiếp tục tại ô đăng bài bạn copy đoạn code này dán vào:
http://www.youtube.com/watch?v=CacWHKlSru0endofvid
Bây giờ bạn thay đổi đường link video (màu xanh) bằng đường link mình muốn nha. Cuối cùng bấm Xuất bản.
Chúc bạn thành công.
Nguồn: dantearaujo
HIỂN THỊ BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 3)
Người đăng: kiemdaigia on Thứ Năm, 10 tháng 11, 2011
Mời các bạn xem thử hình phía dưới sẽ thấy rõ hơn.
 |
| Hiển thị một bài mới nhất có hình phía trên, các bài còn lại hiển thị dạng List |
 |
| Hiển thị 2 bài mới nhất có hình phía trên, các bài còn lại hiển thị dạng List |
Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.
<style type="text/css">
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}
.itechplus-rc ul{list-style:none;margin:0;padding:0}
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3saVlrqoveI9o1dy2aDQ6pj9g9jS0KNCNA8gPQKX-r6U5gVWhxZmYYwD4SwIgy_KI9sqRMI5E4qJ2tzwdz_7T3FbIovDZ02lXSCWWvj8to0jXdMC-44lWu0weVvcNhtQ9JGLdOGhsL0qL/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}
</style>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://www.dungheineken.blogspot.com/search/label/WIN 7">Thủ thuật Windows7</a></h2>
<script type='text/javascript'>
numposts = 5; list1 = 1; sumPosts = 168;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a, b) {
var s = a.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)
}
}
s = s.join("");
s = s.substring(0, b - 1);
return s
}
function showrecentposts(e) {
img = new Array();
for (var i = 0; i < numposts; 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 j = f.content.$t
} else if ("summary" in f) {
var j = f.summary.$t
} else
var j = "";
s = j;
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;
var l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
var m = '<li><a href="' + h + '">' + g + '</a></li>';
if ((i >= 0) && (i < list1)) {
var n = l
}
if (i == list1) {
var n = '<div class="itechplus-rc"><ul>' + m
}
if ((i > list1) && (i < numposts - 1)) {
var n = m
}
if (i == numposts - 1) {
var n = m + '</ul></div>'
}
document.write(n)
}
}
document.write("<script src=\"http://www.dungheineken.blogspot.com/feeds/posts/default/-/WIN 7?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}
.itechplus-rc ul{list-style:none;margin:0;padding:0}
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3saVlrqoveI9o1dy2aDQ6pj9g9jS0KNCNA8gPQKX-r6U5gVWhxZmYYwD4SwIgy_KI9sqRMI5E4qJ2tzwdz_7T3FbIovDZ02lXSCWWvj8to0jXdMC-44lWu0weVvcNhtQ9JGLdOGhsL0qL/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}
</style>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://www.dungheineken.blogspot.com/search/label/WIN 7">Thủ thuật Windows7</a></h2>
<script type='text/javascript'>
numposts = 5; list1 = 1; sumPosts = 168;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a, b) {
var s = a.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)
}
}
s = s.join("");
s = s.substring(0, b - 1);
return s
}
function showrecentposts(e) {
img = new Array();
for (var i = 0; i < numposts; 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 j = f.content.$t
} else if ("summary" in f) {
var j = f.summary.$t
} else
var j = "";
s = j;
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;
var l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
var m = '<li><a href="' + h + '">' + g + '</a></li>';
if ((i >= 0) && (i < list1)) {
var n = l
}
if (i == list1) {
var n = '<div class="itechplus-rc"><ul>' + m
}
if ((i > list1) && (i < numposts - 1)) {
var n = m
}
if (i == numposts - 1) {
var n = m + '</ul></div>'
}
document.write(n)
}
}
document.write("<script src=\"http://www.dungheineken.blogspot.com/feeds/posts/default/-/WIN 7?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>
Bây giờ, bạn thay đổi các đường link màu đỏ (http://www.dungheineken.blogspot.com/feeds/posts/default/-/WIN 7) là địa chỉ nhãn mà bạn muốn hiển thị, thay đổi các số màu xanh theo ý muốn của bạn:
* Numposts (Số bài hiển thị kể cả có hình hoặc không có hình).
* List1 (Số bài hiển thị có hình)
* SumPots (Số chữ giới thiệu ở bài có hình)
* Width (độ rộng của khung tiện ích)
và bấm LƯU lại là xong
LƯU Ý: Các bạn phải điền thật chính xác địa chỉ nhãn của bạn ở các dòng màu đỏ, nếu không nó sẽ bị lỗi và không hiển thị được.
Chúc các bạn thành công
Nguồn: Itech Plus
TẠO TAB CHO BLOG (MẪU 3)
Người đăng: kiemdaigia
Để tiết kiệm không gian Blog, bạn có thể gom các tiện ích vào một tiện ích HTML chung, các tiện ích này sẽ có các TAB riêng, khi cần xem tiện ích nào đó bất kỳ chúng ta chỉ việc bấm vào tiện ích đó, TAB tiện ích hiện hành sẽ đổi màu khác biệt so với các TAB khác...Thủ thuật này cũng khá đơn giản.
Mời các bạn xem thử (bấm vào XEM THỬ phía dưới để trải nghiệm nha)
Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > chọn Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh </head> và dán tất cả code phía dưới vào trên thẻ đóng </head> này và bấm Lưu mẫu.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script><script>
$(document).ready(function() {
$("#tabs").tabs();
});</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/hot-sneaks/jquery-ui.css" type="text/css" />
Tiếp theo, bạn thêm tiện ích HTML/Javacript rồi dán đoạn code phía dưới vào.
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tiêu đề tiện ích 1</a></li>
<li><a href="#tabs-2">Tiêu đề tiện ích 2</a></li>
<li><a href="#tabs-3">Tiêu đề tiện ích 3</a></li>
</ul>
<div id="tabs-1">Nhập nội dung tiện ích 1 vào đây</div>
<div id="tabs-2">Nhập nội dung tiện ích 2 vào đây</div>
<div id="tabs-3">Nhập nội dung tiện ích 3 vào đây</div>
<span style="font-size:10px;float:right;margin:5px;font-style:italic;"><a targer="_blank" href="http://www.dungheineken.blogspot.com/">+ dungheineken</a></span>
<noscript><span style="font-size:10px;float:right;margin:5px;font-style:italic;"><a targer="_blank" href="http://www.dungheineken.blogspot.com/">dungheineken</a></span></noscript>
</div>
Bây giờ, bạn có thể thay tên hiển thị và dán nội dung của bạn vào code trên và bấm lưu mẫu, quay trở lại blog xem kết quả.
FOLIOPRESS THEMES
Người đăng: kiemdaigia on Thứ Ba, 8 tháng 11, 2011
Đây là Theme không có side nào, khung bài đăng được phân thành nhiều ô nhỏ (thuận tiện cho các bạn đăng hình ảnh), có 3 cột sidebar phía dưới chân Blog, bạn bấm xem trước phía dưới, nếu thích thì bấm Download để tải theme này về và cài đặt cho Blog của mình. Các bạn có thể xem bài "THAY ĐỔI GIAO DIỆN CHO BLOGGER" để biết cách cài đặt cho BlogTHEMES FOLIOPRESS
Nguồn: Btemplate box
TẠO BẢNG THÔNG BÁO CHO BLOG (KIỂU 1)
Người đăng: kiemdaigia on Thứ Hai, 7 tháng 11, 2011
Với đoạn code đơn giản dưới đây, bạn sẽ dễ dàng tạo một bảng thông báo để truyền đạt lại thông tin mình muốn đến với khách tham quan.
Bạn click thử bảng thông báo phía dưới để thử nghiệm nha.
Để làm được điều này, bạn chỉ cần đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML/Javacript rồi dán tất cả code này vào.
Bây giờ, bạn nhập nội dung của mình muốn truyền đạt lại với khách tham quan thay thế đoạn "NHẬP NỘI DUNG VÀO ĐÂY", sau cùng bấm Lưu lại và quay vào blog xem kết quả.
Tiện ích tài liệu tham khảo cho bài đang đọc
Người đăng: kiemdaigia on Chủ Nhật, 6 tháng 11, 2011
DEMO.
Để thực hiện thủ thuật này, bạn hãy làm theo các bước như sau:
Bước 1. Trước tiên khi đăng bài, ở cuối bài viết bạn hãy đặt các liên kết tài liệu tham khảo theo cấu trúc HTML như thế này:
Bước 2. Vào Design >> Edit HTML. Chọn Expand Widget Templates.
Kế đến chúng ta cần ẩn các liên kết tài liệu tham khảo ở cuối bài viết (vì mục đích chính là hiển thị các liên kết này trên Sidebar) bằng cách đặt dòng code sau đây vào trước dòng ]]></b:skin>.
- .linkonsidebar {display:none}
Sau đó, viết một kịch bản giúp các liên kết ẩn trong bài viết được hiển thị trên Sidebar. Vì mỗi bài viết có một ID riêng nên các liên kết này cũng được gán theo ID của bài viết. Đặt đoạn code bên dưới vào trước thẻ </head>.
- <script type="text/javascript">
- //<![CDATA[
- // Script to Display Reference Links on Sidebar by www.thuthuatblogger.info
- // giúp các liên kết ẩn trong bài viết được hiển thị
- var linkonsidebarHREF=new Array();
- var linkonsidebarTXT=new Array();
- // chức năng hiển thị link theo ID của bài viết
- function displayLinks(idPOST) {
- var thePOST = document.getElementById("post-" + idPOST);
- // tìm tất cả các link
- var thelist = thePOST.getElementsByTagName("a");
- if(thelist.length>0){
- // nếu có thì tìm tất cả các link có lớp linkonsidebar
- var offset;
- for(var i=0; i<thelist.length; ++i) {
- if(thelist[i].className=="linkonsidebar") {
- // nếu tìm ra thì thêm vào danh sách hiển thị
- offset = linkonsidebarHREF.length;
- linkonsidebarHREF[offset] = thelist[i].href;
- linkonsidebarTXT[offset] = thelist[i].innerHTML;
- }
- }
- }
- }
- //]]>
- </script>
Bước 3. Tiếp theo, chúng ta cần phải gắn ID cho bài viết. Tìm đến đoạn code như sau:
- <b:includable id='post' var='post'>
- <div class='post hentry'>
Thẻ <div class='post hentry'> (hoặc <div class='post'>) tạo lớp CSS chung cho toàn bộ bài viết, vậy để chuyên biệt hóa cho từng bài viết thì chúng ta cần gắn ID vào như sau:
- <div class='post' expr:id='"post-" + data:post.id'>
Sau đó tìm đến đoạn code tương tự như bên dưới và thêm vào phần được đánh dấu màu đỏ.
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div><script type='text/javascript'>displayLinks('<data:post.id/>');</script>
Lưu Template.
Bước 4. Vào Page Elements. Thêm một tiện ích HTML/Javascript và đặt vào nội dung tiện ích bằng đoạn code bên dưới. Có thể đặt tên cho tiện ích là Tham khảo cho bài đang đọc.
<style>
#reflinks { /* thêm thuộc tính CSS cho nội dung thẻ div */ }
#reflinks a {
/* thuộc tính cho link */
display: block;
list-style-type:decimal
}
#reflinks a:hover { /* hiệu ứng hover cho link */ }
</style>
<div id="reflinks">
<script type="text/javascript">
var strout = "";
// nếu có link hiển thị
if(linkonsidebarHREF.length>0){
// thì đọc danh sách
for(var i=0; i<linkonsidebarHREF.length; ++i) {
// và đặt cùng nhau trong mã HTML
strout += "<a href='" + linkonsidebarHREF[i] + "' target='_blank'>" + linkonsidebarTXT[i] + "</a>";
}
document.write(strout);
}
// nếu không có link hiển thị thì hiện thông báo chưa có tài liệu tham khảo
else {document.write('<b>Chưa có tài liệu nào</b>');
}
</script>
</div>
<div class='clear'></div>
Bước 5. Vào Edit HTML. Thao tác cuối cùng là chỉ hiển thị tiện ích HTML/Javascript vừa thêm ở các trang bài viết (item). Chọn Expand Widget Templates. Tìm đến ID của tiện ích HTML/Javascript nói trên (ví dụ ở đây có ID là HTML100) và thêm vào lệnh điều kiện (ở dòng 3 và dòng 11) như sau:
- <b:widget id='HTML100' locked='false' title='Tham khảo cho bài đang đọc' type='HTML'>
- <b:includable id='main'>
- <b:if cond='data:blog.pageType == "item"'>
- <!-- only display title if it's non-empty -->
- <b:if cond='data:title != ""'>
- <h2 class='title'><data:title/></h2>
- </b:if>
- <div class='widget-content'>
- <data:content/>
- </div>
- </b:if>
- </b:includable>
- </b:widget>
Lưu Template.
Gắn ID cho các thành phần bài viết
