Home » Archives for 05/16/09
Hiển thị tên những người đã comment ngay bên dưới bài viết
18:08 |
Modify post footer - Show comment author in post footer[FD's BlOg] - Một thủ thuật cho phép bạn làm đẹp footer của bài viết. Thủ thuật sẽ hiển thị tên những người đã comment bài viết. Một cách để tạo nên sự sôi động cho bài viết cũng như là cho blog của bạn, nhất là những blog có nhiều người comment. Và việc hiện thị số lượng người comment này ta có thể điều chỉnh được.
Hình minh họa thủ thuật:
☼ Ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn "mở rộng mẫu tiện ích" (expand widget template)
5. Chèn đọan javascript này vào sau thẻ <head>
<script src='http://fandung.110mb.com/JS-files/fd-comments.js' type='text/javascript'/>
6. Tiếp tục xuống dưới tìm đọan code sau:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
7. Thêm đọan code màu đỏ vào như bên dưới:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<script expr:src='"http://www.blogger.com/feeds/4987055759836993091/" + data:post.id + "/comments/default?orderby=published&alt=json-in-script&max-results=500&callback=rp"' type='text/javascript'/>
<b:if cond='data:post.allowComments'>
<noscript>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</noscript>
</b:if>
</b:if>
</span>
- Chú ý : các dòng code màu xanh ở trên :
+ 4987055759836993091 : đây là mã ID của blog bạn, vào bảng điều khiển để xem mã số này (như hình bên dưới)
+ max-results=500& : dòng code này dùng để tùy chỉnh việc hiển thị tối đa số ngừoi comment, ví dụ bạn muốn cho hiển thị tối đa 20 người thì thay số 500 thành 20.
+ Ngòai ra code màu tím là để thiết lập không cho thủ thuật hiển thị ở bài viết, nếu bạn muốn nó chỉ hiển thị ở bài viết thì thay dấu " != " thành " == ", và nếu muốn nó hiển thị ở tất cả các trang thì xóa code màu tím đi.
- Nếu bạn muốn trang trí nó như ví dụ của mình thì thêm vào dòng code màu xanh như bên dưới:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<div style='padding: 5px 2px 2px 5px; border:2px dotted #FF0000; background:#C3FDB8;'>
<script expr:src='"http://www.blogger.com/feeds/4987055759836993091/" + data:post.id + "/comments/default?orderby=published&alt=json-in-script&max-results=500&callback=rp"' type='text/javascript'/>
<b:if cond='data:post.allowComments'>
<noscript>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</noscript>
</b:if>
</div>
</b:if>
</span>
- Và nếu muốn nó hiển thị ở dòng đầu tiên của post footer (như hình minh họa mình đưa) thì bạn di chuyển (copy và xóa) tòan bộ code ở trên và dán nó sau vào sau dòng code này : <div class='post-footer-line post-footer-line-1'>, và nó sẽ trông giống như bên dưới:
<div class='post-footer-line post-footer-line-1'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<div style='padding: 5px 2px 2px 5px; border:2px dotted #FF0000; background:#C3FDB8;'>
<script expr:src='"http://www.blogger.com/feeds/4987055759836993091/" + data:post.id + "/comments/default?orderby=published&alt=json-in-script&max-results=500&callback=rp"' type='text/javascript'/>
<b:if cond='data:post.allowComments'>
<noscript>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</noscript>
</b:if>
</div>
</b:if>
</span>
8. Cuối cùng là save template.
Chúc các bạn thành công.
Tạo hiệu ứng "Loading..." cho BlOg - cực kì đơn giản
09:39 |
[FD's BlOg] - Mình đã từng biết tới vài thủ thuật tạo hiệu ứng loading cho web(blog), với javascript, và nó hơi phức tạp một chút, có thể sẽ làm blog của bạn chậm. Nhưng với thủ thuật này bạn sẽ không lo về điều đó.
Xem hình mình họa:
Tuy thủ thuật có sử dụng javascript, nhưng nó chỉ gói gọn trong có 3 câu lệnh. Thủ thuật này ứng dụng hình động để tạo hiệu ứng. do đó để thực hiện thủ thuật nhỏ này bạn phải có một tấm hình động, có thể tham khảo các hình bên dưới:
Đầu tiên, bạn vào bảng điều khiển » vào bố cục » vào chỉnh sửa code HTML, và chèn đọan code javascript bên dưới vào lên trên dòng </head>
<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}
</script>
Save template lại.
Sau đó tạo một widget HTML/Javascript » rồi dán đọan code bên dưới vào:
<div id="imgLOAD" style="position:fixed;top:50px;right:200px" align="right">
Đang tải...<br/>
<img src="link ảnh"/></div>
- chú ý:
+ top:50px;right:200px : Hãy điều chỉnh 2 thông số này để ảnh có vị trí thích hợp trên blog của bạn.
+ link ảnh : link ảnh động, tương tự ảnh mình đưa. Ta nên chọn các hình động có nền trong suốt.
+ position:fixed; : lệnh này dùng để cố định vị trí của ảnh trên màn hình(di chuyển theo khi rê chuột lên hoặc xuống), nếu muốn ảnh nằm ở một vị trí nào đó trên blog của bạn (tức là không di chuyển theo chuột) thì bạn đổi lại thành lệnh : position:absolute;
Chúc các bạn thành công.
Thủ thuật cho bài viết : Thay đổi các kí tự đầu dòng của danh sác bằng hình ảnh
04:17 |
List icon[FD's BlOg] - Bài viết trước mình có giới thiệu thủ thuật thay thế các kí tự dầu dòng của danh sách bằng các kí tự khác (xem ở đây), bài viết này mình sẽ hướng dẫn thay đổi các kí tự này thành hình ảnh.
Xim hình minh họa:
trước khi thực hiện thủ thuật
sau khi thực hịên thủ thuật
Dưới đây là 10 hình, bạn có thể tham khảo:
Hoặc có thể download gói hình ảnh của 10 hình trên : FD-icon-list.rar
☼ Bây giờ ta bắt đầu thực hiện:
1.Đăng nhập blog
2. Vào Bố cục » Chỉnh sửa code HTML » tìm đọan code bên dưới, và thêm vào các dòng code màu đỏ:
}
.post li {
line-height:1.5em;
list-style:none;
background:url("link ảnh") no-repeat left;
vertical-align:top;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .6em;
padding-$startSide: 17px;
margin:0;
padding-left: 20px;
}
- Ta chỉ quan tâm tới việc thêm 2 dòng code màu đỏ thôi, còn đọan code của bạn có giống như mình code mình đưa hay không thì không quan trọng, do mỗi template có code khác nhau.
- Có thể có những blog có sẵn dòng background:url("link ảnh") no-repeat left;, khi đó bạn chỉ cần thay đổi link ảnh là ok.
3. Save template .
Chúc các bạn thành công.
Tạo khung profile nho nhỏ về thông tin của bạn ở sidebar
01:36 |
[FD's BlOg] - Với thủ thuật nhỏ này bạn có thể tạo một tab nhỏ để hiển thị các thông tin của bản thân.Hình minh họa:
Để thực hiện, bạn chỉ cần tạo một widget HTML/javascript rồi dán đọan code HTML bên dưới vào:
<a href="http://YOURBLOG.blogspot.com"><img alt="My photo" src="link ảnh của bạn" class="profile-img"width="54" height="48"/></a>
<dl class="profile-datablock">
<dt class="profile-data">YOURNAME</dt>
<dd class="profile-textblock">HCM city, Viet Nam</dd>
<dd class="profile-textblock">My site : <a href="http://YOURBLOG.blogspot.com">YOURBLOG Name</a></dd>
</dl>
<a class="profile-link" href="http://www.blogger.com/profile/08808753602484246084">Xem hồ sơ hòan chỉnh</a>
Chú ý :
- width="54;, height="48" : hãy điều chỉnh theo đúng khung hình của bạn, hoặc có thể điều chỉnh sao cho hợp lý là được.
- http://YOURBLOG.blogspot.com : địa chỉ blog của bạn
- 08808753602484246084 thay bằng số ID của bạn (vào trong bảng điều khiển của blog bạn để lấy thông tin này, xem hình minh họa)
Như vậy đã xong, quá đơn giản phải không!,
Chúc các bạn thành công.
Tiện ích lưu trữ BlOg dưới dạng lịch
00:18 |
Calendar archive[FD's BlOg] - Thủ thuật này mình thấy đầu tiên là ở trang Blog của bạn Ngân (ngankvn.tk), nhưng chưa có thời gian tìm hiểu, nay tình cờ tìm thấy trên các trang blog thủ thuật, nên mình tranh thủ post lên cho mọi người luôn.
Các bạn có thể xem demo tại ngankvn.tk không có cũng có thể xem hình bên dưới:
☼ Bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục(Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chèn đọan code bên dưới sau thẻ <head> (hoặc trước thẻ </head>)
<script src='http://data.fandung.com/blog/demo/calendar-archive/dom-event.js' type='text/javascript'/>
<script src='http://data.fandung.com/blog/demo/calendar-archive/calendar-min.js' type='text/javascript'/>
<link href='http://data.fandung.com/blog/demo/calendar-archive/calendar.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
var _yourBlogUrl = "http://YOURBLOG.blogspot.com"; //edit this
var _yourBlogTimeZone = "+01:00"; //edit this
_yourBlogTimeZone = encodeURIComponent(_yourBlogTimeZone);
var _dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
YAHOO.namespace("example.calendar");
function cal1Init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.addMonthRenderer(1, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(2, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(3, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(4, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(5, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(6, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(7, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(8, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(9, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(10, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(11, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(12, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.changePageEvent.subscribe(myChangePageHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.renderEvent.subscribe(syncMonthYear);
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
};
var myChangePageHandler = function(type,args,obj) {
var month = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth() + 1;
if (month.toString().length == 1) {
month = "0" + month;
}
var year = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear();
document.getElementById("cal1Titles").innerHTML = "";
_dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");
checkPostsForMonth(month, year);
};
function checkPostsForMonth(month,year) {
document.getElementById("cal1loadimg").style.display = "block";
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=checkPostsCallback&published-min=" + year + "-" + month + "-01T00%3A00%3A00" + _yourBlogTimeZone + "&published-max=" + year + "-" + month + "-31T23%3A59%3A59" + _yourBlogTimeZone + "&max-results=100";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function checkPostsCallback(json) {
if (json.feed.entry) {
for(i = 0; i < json.feed.entry.length; i++) {
var month = json.feed.entry[i].published.$t.substr(5,2);
var year = json.feed.entry[i].published.$t.substr(0,4);
var day = json.feed.entry[i].published.$t.substr(8,2);
var date = month + "/" + day + "/" + year;
var href = json.feed.entry[i].link[0].href;
var title = json.feed.entry[i].title.$t;
if (day.substr(0,1) == "0") {
day = day.substr(1);
}
document.getElementById("cal1Titles").innerHTML += "<li><a href='" + href + "'>" + title + "</a>";
_dayTitles[day] += "<li><a href='" + href + "'>" + title + "</a>";
YAHOO.example.calendar.cal1.addRenderer(date, myCustomRenderer);
}
YAHOO.example.calendar.cal1.render();
}
document.getElementById("cal1loadimg").style.display = "none";
};
function showDayTitles(day) {
document.getElementById("cal1Titles").innerHTML = _dayTitles[day];
}
var myCustomRenderer = function(workingDate, cell) {
var day = workingDate.toString().substr(8,2);
if (day.substr(0,1) == "0") {
day = day.substr(1);
}
cell.innerHTML = '<div onmouseover="showDayTitles(' + day + ');"><a href="javascript:void(null);" >' + YAHOO.example.calendar.cal1.buildDayLabel(workingDate) + "</a></div>";
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABLE);
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_HIGHLIGHT1);
return YAHOO.widget.Calendar.STOP_RENDER;
}
var mySelectHandler = function(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0];
var month = date[1];
if (month.toString().length == 1) {
month = "0" + month;
}
var day = date[2];
var element = YAHOO.util.Dom.getElementsByClassName("d" + day, "td", "cal1Container")[0];
if (day.toString().length == 1) {
day = "0" + day;
}
if (element.className.indexOf("highlight1") != -1) {
window.location = _yourBlogUrl + "/search?updated-min=" + year + "-" + month + "-" + day +
"T00%3A00%3A00" + _yourBlogTimeZone + "&updated-max=" + year + "-" + month + "-" + day +
"T23%3A59%3A59" + _yourBlogTimeZone;
}
};
var changeDate = function() {
YAHOO.example.calendar.cal1.setMonth(parseInt(YAHOO.util.Dom.get("cal1monthselect").value));
YAHOO.example.calendar.cal1.setYear(parseInt(YAHOO.util.Dom.get("cal1yearselect").value));
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
}
var syncMonthYear = function(type) {
YAHOO.util.Dom.get("cal1monthselect").value = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth());
var fullYear = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear());
var isYearFound = false;
var i = 0;
while(i < document.getElementById("cal1yearselect").options.length && !isYearFound) {
if (document.getElementById("cal1yearselect").options[i].value == fullYear) {
isYearFound = true;
}
i++;
}
if (!isYearFound) {
var option = document.createElement("option");
option.setAttribute("value", fullYear);
var text = document.createTextNode(fullYear);
option.appendChild(text);
document.getElementById("cal1yearselect").appendChild(option);
}
YAHOO.util.Dom.get("cal1yearselect").value = fullYear;
};
YAHOO.util.Event.addListener(window, "load", cal1Init);
YAHOO.util.Event.addListener("cal1dateselect", "click", changeDate);
//]]>
</script>
- Chú ý: hãy thay đổi dòng code màu đỏ theo đúng như cài đặt của blog bạn.
+ http://YOURBLOG.blogspot.com : địa chỉ blog của bạn.
+ +1:00 : múi giờ mà bạn đã cài đặt cho blog. Thông thừơng ở việt Nam bạn chon +7:00
5. Save template.
6. Tiếp đó bạn tạo một widget HTML/Javascript, rồi dán đọan code bên dưới vào:
<div id="cal1wrapper">
<div id="cal1select">
<select id="cal1monthselect" name="cal1monthselect">
<option value="0"/>Tháng 1
<option value="1"/>Tháng 2
<option value="2"/>Tháng 3
<option value="3"/>Tháng 4
<option value="4"/>Tháng 5
<option value="5"/>Tháng 6
<option value="6"/>Tháng 7
<option value="7"/>Tháng 8
<option value="8"/>Tháng 9
<option value="9"/>Tháng 10
<option value="10"/>Tháng 11
<option value="11"/>Tháng 12
</select>
<select id="cal1yearselect" name="cal1yearselect">
<option value="1995"/>1995
<option value="1996"/>1996
<option value="1997"/>1997
<option value="1998"/>1998
<option value="1999"/>1999
<option value="2000"/>2000
<option value="2001"/>2001
<option value="2002"/>2002
<option value="2003"/>2003
<option value="2004"/>2004
<option value="2005"/>2005
<option value="2006"/>2006
<option value="2007"/>2007
<option value="2008"/>2008
<option value="2009"/>2009
<option value="2010"/>2010
<option value="2011"/>2011
<option value="2012"/>2012
<option value="2013"/>2013
<option value="2014"/>2014
<option value="2015"/>2015
<option value="2016"/>2016
<option value="2017"/>2017
<option value="2018"/>2018
<option value="2019"/>2019
</select>
<input id="cal1dateselect" value="-->" type="button"/>
</div>
<div id="cal1Container"><img style="vertical-align:middle;
" src="http://img239.imageshack.us/img239/9057/40lf8.gif"/> Đang tải...</div>
<div style="clear:both;"></div>
<div id="calbackloadimg">
<pre id="cal1loadimg" style="display:none;"><img style="vertical-align:middle;" src="http://img239.imageshack.us/img239/9057/40lf8.gif"/> Đang tải...</pre>
<pre id="cal1Titles"></pre>
</div>
</div>
7. Save widget.
Nguồn elescaparatederosa
Chúc các bạn thành công.Top Hot
