Hiển thị các bài đăng có nhãn Widgets. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Widgets. Hiển thị tất cả bài đăng

Ẩn nội dung widget bằng password (Update)

Người đăng: buonkhongem on Thứ Bảy, 10 tháng 9, 2011

Thỉnh thoảng có những nội dung trên widget (tiện ích) mà bạn chỉ muốn một vài người xem và bạn muốn đặt mặt khẩu cho widget đó. Có cách nào để hiện thực hóa vấn đề này không? Câu trả lời là có. Xem DEMO. Password: password

Các bạn chỉ cần làm theo hướng dẫn nho nhỏ dưới đây:

1. Đầu tiên các bạn vào trang này.



2. Nhập mật mã vào khung Key.

3. Chép nội dung bạn muốn ẩn vào khung Plain Text.

4. Bấm vào nút Encrypt và copy code trong khung HTML Code được tạo ra.

5. Bây giờ bạn chỉ cần vào Blogger thêm một tiện ích và paste code bạn đã copy.

6. Bạn tìm thẻ </head> và đặt trước nó đoạn code sau:

<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>

Như vậy là bạn đã hoàn thành thủ thuật này.

Vậy thủ thuật này có thể áp dụng cho bài đăng trên blog hay không? Câu trả lời là có. Bạn chỉ cần copy nội dung của bài đăng rồi làm theo các bước hướng dẫn tương tự như trong widget.

Hy vọng thủ thuật này sẽ giúp các bạn được phần nào trong quá trình viết blog.
More about

Thêm tiện ích Add to circles vào blog

Người đăng: buonkhongem on Thứ Sáu, 12 tháng 8, 2011

Bạn đã có một tài khoản Google+1 cho riêng mình và muốn kết nối với tất cả mọi người trên đó. Thủ thuật sau sẽ giúp bạn tạo ra tiện ích "Add to circles" để đưa vào blog của mình.

Các bạn có thể xem DEMO tại đây.

Chúng ta sẽ từng bước để tạo ra tiện ích này:

- Bước 1: Các bạn hãy truy cập vào trang này.

- Bước 2: Bấm vào nút:


Bước 3: Các bạn điền thông tin vào hình bên dưới:


Bước 4: Làm sao các bạn có được Google+ID, bạn chỉ cần đăng nhập vào trang profile của mình tại đây.

- Bước 5: Các bạn bấm vào hình hiển thị theo chỉ dẫn bên dưới:


- Bước 6: Các bạn copy ID theo chỉ dẫn của hình bên dưới để điền thông tin ở bước 3:


- Bước 7: Các bạn bấm vào nút Get Code:


- Bước 8: Copy code vừa được tạo ra và dán vào một tiện ích trong blog của bạn là xong.

Bây giờ bạn có thể vào trang của mình để tận hưởng thành quả.
More about

Tiện ích Blogroll tiết kiệm không gian web

Người đăng: buonkhongem on Thứ Ba, 5 tháng 7, 2011

Tiện ích Blogroll đối với blogspot dùng để liệt kê danh sách các liên kết blogspot, đó là một phần trong việc trao đổi liên kết giúp kết nối cộng đồng blogspot đồng thời tăng lượng truy cập cho blogspot của bạn. Blogger vốn đã có sẵn tiện ích này nhưng ở dạng cơ bản. Qua bài viết này mình giới thiệu một kiểu Blogroll theo dạng menu đóng mở giúp tiết kiệm không gian web, đặt các liên kết blogpsot phân loại theo chủ đề, như bạn có thể thấy trên phần sidebar của Bloggerism vậy. Ưu điểm của tiện ích này là dễ cài đặt, dễ tùy biến, gọn nhẹ, load nhanh, dễ quản lý các nhóm liên kết, có thể áp dụng cho blogspot, wordpress, nền tảng web khác.

Hướng dẫn cài đặt:

Bước 1. Đăng nhập Blogger >> Design >> Edit HTML. Đặt code CSS vào trước thẻ ]]></b:skin>.

#downmenu{padding-left:3px}
#downmenu ul li {list-style: disc url(…/iconslist.gif) inside; vertical-align: top; padding-left: 20px;margin: 0;}
#downmenu ul li:hover {list-style: disc url(…/iconslisthover.png) inside; vertical-align: top;padding-left: 20px;margin: 0;}
a.levelmenu{line-height:20px;color:#111;background:url(…/vista.gif) left center;background-repeat:no-repeat;padding-left:10px;font-weight:normal;font-size:110%}
a.levelmenu:hover{line-height:20px;color:#111;background:url(…/plus.png) left center;background-repeat:no-repeat;padding-left:47px;z-index:100;font-weight:normal;font-size:110%}

Tải các file ảnh bên dưới về rồi upload lên Blogspot của bạn, lấy URL rồi đặt đúng thứ tự vào cấu trúc CSS ở trên. Sau đó lưu Template.

iconlist
iconlisthover
vista
plus

Bước 2. Vào Page Elements. Thêm một tiện ích HTML/Javascript và đặt đoạn code bên dưới vào phần nội dung tiện ích.

<script type="text/javascript">
var desplegable = 0

function menudesplegable(id)
{
if (desplegable != 0 && desplegable != id) document.getElementById(desplegable).style.display = 'none'
if (document.getElementById(id).style.display == 'none')
document.getElementById(id).style.display = 'block'
else
document.getElementById(id).style.display = 'none'
desplegable = id
}
</script>
<div id="downmenu" style=" width: 100%;">
<a href="#" class="levelmenu" onclick="menudesplegable('topic1');return false">Chủ đề 1:</a><br />
<ul id="topic1" style="display:block">
<li><a href="#" target="_blank">Topic1 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic1 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic2');return false">Chủ đề 2:</a><br />
<ul id="topic2" style="display:block">
<li><a href="#" target="_blank"> Topic2 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic2 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic3');return false">Chủ đề 3:</a><br />
<ul id="topic3" style="display:block">
<li><a href="#" target="_blank"> Topic3 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic3 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic4');return false">Chủ đề 4:</a><br />

<ul id="topic4" style="display:none">
<li><a href="#" target="_blank"> Topic4 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 2</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 3</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 4</a></li>
</ul>

</div>

Công việc của bạn là liệt kê các liên kết blogspot của bạn rồi phân loại theo chủ đề để dễ quản lý, sau đó tùy biến theo cấu trúc HTML ở trên sao cho phù hợp.
More about

Tiện ích Tìm bài viết theo ngày

Người đăng: buonkhongem on Thứ Ba, 12 tháng 4, 2011

Có nhiều cách để tìm bài viết trên một blogspot, chẳng hạn như tìm bằng từ khóa trên công cụ tìm kiếm, tìm bài viết tại trang lưu trữ, tìm theo nhãn, tìm bài viết theo ngày tháng. Bài viết này sẽ hướng dẫn bạn cách tạo tiện ích Tìm bài viết theo ngày, một tiện ích cũng rất cần thiết cho blogspot. Bạn có thể xem Demo bên dưới.



Tìm bài viết theo ngày

Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước thẻ </head>.

<style type="text/css">
#findXdate {
background-color: #243240;
border: 1px solid #4D5B68;
margin: 0 auto;
padding: 5px 0 10px;
text-align: center;
width: 250px;
}
#findXdate span {
color: #FFFFFF;
display:block;
margin-bottom: 5px;
}
#findXdate select {
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
font-size: 11px;
width: 60px;
}
#findXdate input {
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
cursor: pointer;
font-size: 10px;
font-weight: bold;
}
</style>

<script type="text/javascript">
home_page = "http://huynh-nhat-ha.blogspot.com/";
timezone = "+07:00";
function submitdate(){
year = document.selectdate.year.options[document.selectdate.year.selectedIndex].value;month = document.selectdate.month.options[document.selectdate.month.selectedIndex].value;day = document.selectdate.day.options[document.selectdate.day.selectedIndex].value;tmax = year+"-"+month+"-"+day+"T23:59:59"+timezone;
tmin = year+"-"+month+"-"+day+"T00:00:00"+timezone;
tlink = home_page+"search?updated-max="+encodeURIComponent(tmax)+"&updated-min="+encodeURIComponent(tmin)+"&max-results=20";
if(year=="" || month=="" || day=="") {
alert("Vui lòng chọn ngày chính xác!"); return false;
} else {
self.location.href=tlink;
}
}
</script>

Trong đoạn code trên, bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn, lưu ý timezone tại Việt Nam chọn là +07:00.

Lưu Template.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/Javascript và đặt đoạn code sau đây vào phần nội dung tiện ích.

<form id="findXdate" name="selectdate"><span>Tìm bài viết theo ngày</span>
<select name="day"><option value="" selected="selected">Ngày</option><option value="01">1</option><option value="02">2</option><option value="03">3</option><option value="04">4</option><option value="05">5</option><option value="06">6</option><option value="07">7</option><option value="08">8</option><option value="09">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select> <select name="month"><option value="" selected="selected">Tháng</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> <select name="year"><option value="" selected="selected">Năm</option><option value="2010">2010</option><option value="2011">2011</option></select> <input type="button" onclick="submitdate()" value="TÌM"/></form>

Tip Package Download:
searchpostbydate.txt
More about

Ẩn tiện ích và thành phần tại trang chủ hoặc trang riêng biệt

Người đăng: buonkhongem on Thứ Bảy, 15 tháng 1, 2011

Chúng ta đã biết cách ẩn bài viết ở trang chủchỉ hiển thị tiện ích ở trang chủ hoặc trang riêng biệt. Đôi khi chúng ta cần ẩn một hay nhiều tiện ích hoặc một thành phần nào đó tại trang chủ hoặc trang riêng biệt nào đó để giúp dễ dàng hơn trong việc bố trí thiết kế trang chủ blogspot theo ý thích của người tạo blog. Hôm nay tôi sẽ hướng dẫn cách ẩn tiện ích và thành phần ở một phần riêng biệt nào đó của blog.

Muốn ẩn một tiện ích hoặc một thành phần nào đó thì ta phải xác định được id hoặc class của nó. Các id thông thường trong blogspot như là: HTML1, HTML2, HTML3, …, Label1, Label2, Label3, …, BlogList1, Followers1, Blog1, BlogArchive1, Profile1, header-wrapper, sidebar, main-wrapper, footer-wrapper, comments, comments-block, … Các id khi đưa vào CSS có dấu # ở phía trước, ví dụ: #HTML1. Các class thường gặp trong blogspot như: header-outer, main-outer, footer-outer, post-body, post-footer, … Các class khi đưa vào CSS có dấu . (dấu chấm) ở phía trước, ví dụ: .header-outer.

Lấy ví dụ muốn ẩn tiện ích có id là HTML1 ở trang chủ thì đặt đoạn code sau đây vào sau dòng ]]></b:skin> trong Template.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn nhiều tiện ích ở trang chủ, ví dụ các tiện ích có id lần lượt là HTML1, Label1, Followers1 thì sử dụng đoạn code sau.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#HTML1, #Label1, #Followers1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang bài viết thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang chính gồm trang chủ, trang nhãn, trang lưu trữ thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang lưu trữ thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang tĩnh thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở một trang riêng biệt nào đó thì sử dụng đoạn code sau.

<b:if cond='data:blog.url == &quot;URL của trang riêng biệt&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Trong trường hợp muốn ẩn tiện ích có id là HTML1 ở trang chủ, các trang nhãn, các trang lưu trữ mà không ẩn ở các trang bài viết thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Như vậy muốn ẩn một cái gì đó thì nó phải có id hoặc class.
More about

Thuộc tính CSS cho tiện ích Người theo dõi

Người đăng: buonkhongem on Thứ Tư, 22 tháng 12, 2010

Tiện ích Người theo dõi (Followers) là một tiện ích rất cần thiết cho blogspot, giúp kết nối bạn bè trong cộng đồng Blogger. Khi cài đặt tiện ích này, chúng ta thường sử dụng các thuộc tính mặc định sẵn có trong quá trình cài đặt.

Tuy nhiên chúng ta có thể điều chỉnh thuộc tính cho tiện ích này bằng cách sử dụng CSS. Bạn hãy đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

#Followers1 h2 {/* Thay đổi style tiêu đề */
}
#Followers1-wrapper {/* Chứa các thành phần */
}
.follow-this { margin: 0 5px 5px 0; text-align: right;}
.follow-this a { /* Liên kết Theo dõi */
color: #7E92A6; font-weight: normal; font-size: 11px;
}
.follow-this a:hover {color: #9EB2C6; font-weight: bold;}
.followers-canvas {/* Số người theo dõi */
background: transparent url(URL_hình ảnh) no-repeat scroll left top; color: #778899; float: right; font-size: 11px; font-weight: normal; margin: 5px 5px 0 0; padding-left: 15px; text-align: right;}
.following-not-admin a { /* Liên kết "Xem tất cả" */
color: #7E92A6; display: block; font-size: 11px; font-weight: normal; text-align: right;}
.following-not-admin a:hover {color: #9EB2C6; font-weight: bold;}
.blog-admin a { /* Liên kết "Quản lý" */
color: #7E92A6; font-weight: normal; font-size: 11px;}
.blog-admin a:hover {color: #9EB2C6; font-weight: bold;}
.followers-grid { /* Vị trí không gian hiển thị Avatar */
margin: 0 auto; padding: 0;}
.follower-img {float: left; margin: 0; padding: 0;}
.follower { /* style cho avatar người theo dõi */ float: left; height: 70px; margin: 0px; width: 70px}

Nếu bạn biết về CSS thì có thể tùy ý điều chỉnh đoạn CSS trên theo ý tưởng của bạn. :4)
More about

Tiện ích Dịch website/webblog tự động qua 10 ngôn ngữ

Người đăng: buonkhongem on Thứ Ba, 7 tháng 12, 2010

Tiện ích Dịch Blog (Translate this Blog) giúp cho người đọc không phải là người Việt Nam có thể sử dụng để chuyển blog tiếng Việt sang ngôn ngữ của người đọc. Cho đến thời điểm này, cộng đồng Blogger có một số thủ thuật tạo tiện ích kiểu này, nhưng chủ yếu là dùng công cụ dịch ngôn ngữ của Google, mỗi khi kích chuột vào một biểu tượng quốc kỳ của một quốc gia nào đó thì trang web sẽ chuyển đến trang dịch tự động của Google, như thế nhìn chung sẽ không chuyên nghiệp cho lắm.

Nghe nói bên trang code1k.com có tiện ích Switch Language nên tôi tìm xem và có test thử nhưng nhìn chung cũng không ổn cho lắm vì gặp sự cố xung đột code với trang web được dịch, hơn nữa code cũng hơi nặng nên tốc độ load rất chậm.

Sau một thời gian tìm tòi và thử nghiệm, cuối cùng tôi cũng cho ra đời tiện ích Dịch website/webblog tự động qua 10 ngôn ngữ với tiếng Việt là ngôn ngữ nguồn, hoạt động tốt trên mọi website/webblog và không hề có sự xung đột code.

Bạn có thể thử nghiệm demo trên blog của tôi. Sau đây là các bước cài đặt tiện ích.

1. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type="text/javascript" src="http://hacodeproject.googlecode.com/files/jquery.js"></script>
<script type="text/javascript" src="http://hacodeproject.googlecode.com/files/jquery-translate.js"></script>

2. Đặt đoạn code sau đây vào vị trí trang web muốn đặt tiện ích, giữa 2 thẻ <body>, </body>, đối với Blogger thì đặt toàn bộ code vào một tiện ích HTML/JavaScript.

<!—Translate Widget (c) 2010 www.huynh-nhat-ha.blogspot.com-->
<script type="text/javascript">
//<![CDATA[
if(jQuery.cookie('glang') && jQuery.cookie('glang') != 'vi') jQuery(function($){$('body').translate('vi', $.cookie('glang'), {toggle:true});});
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
function doTranslate(lang_pair) {if(lang_pair.value)lang_pair=lang_pair.value;var lang=lang_pair.split('|')[1];if(lang=='pt')lang='pt-PT';jQuery.cookie('glang', lang);jQuery(function($){$('body').translate('vi', lang, {toggle:true});});}
//]]>
</script>
<a href="javascript:doTranslate('vi|vi')" title="Vietnamese"><img src="http://img834.imageshack.us/img834/945/vietnamvnflag.png" height="18" width="24" style="border:0;vertical-align:top;" alt="Vietnamese" /></a>
<a href="javascript:doTranslate('vi|en')" title="English"><img src="http://img63.imageshack.us/img63/6618/englishflag.png" height="18" width="24" style="border:0;vertical-align:top;" alt="English" /></a>
<a href="javascript:doTranslate('vi|ar')" title="Arabic"><img src="http://img838.imageshack.us/img838/6618/arabicflag.png" height="18" width="24" style="border:0;vertical-align:top;" alt="Arabic" /></a>
<a href="javascript:doTranslate('vi|zh-CN')" title="Chinese (Simplified)"><img src="http://img132.imageshack.us/img132/5194/chineseflag.png" height="18" width="24" style="border:0;vertical-align:top;" alt="Chinese (Simplified)" /></a>
<a href="javascript:doTranslate('vi|ja')" title="Japanese"><img src="http://img836.imageshack.us/img836/7841/japaneseflag.png" height="18" width="24" style="border:0;vertical-align:top;" alt="Japanese" /></a>
<a href="javascript:doTranslate('vi|ko')" title="Korean"><img src="http://img257.imageshack.us/img257/6923/koreanflag.png" height="18" width="24" style="border:0;vertical-align:top;" alt="Korean" /></a>
<a href="javascript:doTranslate('vi|fr')" title="French"><img src="http://img840.imageshack.us/img840/8866/frenchflag.png" height="18" width="24" style="border:0;vertical-align:top;" alt="French" /></a>
<a href="javascript:doTranslate('vi|de')" title="German"><img src="http://img834.imageshack.us/img834/6708/germanflag.png" height="18" width="24" style="border:0;vertical-align:top;" alt="German" /></a>
<a href="javascript:doTranslate('vi|pt')" title="Portuguese"><img src="http://img524.imageshack.us/img524/6102/portugueseflag.png" height="18" width="24" style="border:0;vertical-align:top;" alt="Portuguese" /></a>
<a href="javascript:doTranslate('vi|es')" title="Spanish"><img src="http://img716.imageshack.us/img716/2487/spanishflag.png" height="18" width="24" style="border:0;vertical-align:top;" alt="Spanish" /></a>

Hy vọng bạn sẽ thấy thích tiện ích này và cài đặt ngay cho website/webblog của bạn. Và đừng quên cho một bình luận chân thành về kỳ công của tác giả. :ha
More about

Tiện ích Danh ngôn trong ngày sử dụng Javascript độc lập

Người đăng: buonkhongem on Thứ Bảy, 4 tháng 12, 2010

Tiện ích Danh ngôn trong ngày (Quote of the Day) là một trong những tiện ích cơ bản đối với blog. Hiện nay có một số website/webblog có dịch vụ tiện ích này. Tuy nhiên để cài đặt tiện ích này vào blogspot của bạn thì phải dùng code javascript hoặc php từ các site đó. Trong trường hợp site cung cấp dịch vụ này bị sự cố thì tiện ích trên blogspot của bạn sẽ không hoạt động được nữa.

Có một cách đơn giản hơn là dùng javascript để tạo tiện ích Danh ngôn trong ngày độc lập cho blogspot của bạn. Đặc tính của tiện ích này là hiển thị một câu danh ngôn cho mỗi ngày, ở đây thiết lập 30 câu danh ngôn chuẩn tượng trưng cho 1 tháng chuẩn và thứ tự luân phiên thay đổi theo chu kỳ 30.

Xem Demo dưới đây.

Danh ngôn trong ngày

Để cài đặt tiện ích này cho blogspot của bạn, chỉ cần đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/Javascript.

<script type="text/javascript">
var today= new Date();
var first = new Date(today.getFullYear(), 0, 1);
var day = Math.round(((today - first) / 86400000), 0);
var numquotes = 30;
quotes = new Array(numquotes+1);
authors = new Array(numquotes+1);
quotes[1] = "Ông chủ làm vẻ vang cho ngôi nhà chứ không phải ngôi nhà làm vẻ vang cho ông chủ.";
quotes[2] = "Mỗi ngày ta biết thêm những điều ta chưa biết. Mỗi tháng không quên những điều ta đã biết. Như vậy là người hiếu học.";
quotes[3] = "Phẩm chất chân chính của một người ở trong cách họ sống chứ không ở trong cái họ có.";
quotes[4] = "Dù nó thật tồi tàn đi nữa, chẳng nơi nào sánh được với mái ấm gia đình.";
quotes[5] = "Biết lo toan chu đáo công việc nhỏ với tầm mắt xa rộng. Đó là bí quyết để mưu đồ đại sự.";
quotes[6] = "Thời gian không đo lường bằng năm tháng mà bằng những gì chúng ta làm được.";
quotes[7] = "Đừng lo cho mình không có chức vị, chỉ lo không đủ tài để nhận chức vị mà thôi.";
quotes[8] = "Tình bạn đòi hỏi sự thông cảm sâu xa giữa những người bạn. Nếu không, tình bạn không thể nảy sinh hoặc tồn tại.";
quotes[9] = "Không phải tất cả những người cười với ta đều là bạn cũng không phải tất cả những người làm ta bực mình đều là kẻ thù của ta.";
quotes[10] = "Hạnh phúc nằm ngay trong nhà mình, không nên đi tìm trong vườn người khác.";
quotes[11] = "Bạn sẽ biết thế nào là niềm vui sướng khi bạn hiểu được giá trị của mồ hôi và nước mắt.";
quotes[12] = "Đừng để ai phiền trách bạn. Trong mọi việc nếu bạn không thành công thì hãy cho là lỗi tại bạn. Đừng đổ lỗi cho ai.";
quotes[13] = "Kẻ lấy thân thế chơi với nhau, thân thế đổ là bạn hết. Kẻ lấy của cải chơi với nhau, của cải hết là mất bạn.";
quotes[14] = "Bạn hãy cười và thế gian sẽ cười với bạn. Bạn hãy khóc và bạn khóc cô đơn.";
quotes[15] = "Khi bạn thấy khó chịu về lỗi của người khác, bạn hãy xét mình lại và coi xem bạn có làm như họ vậy không.";
quotes[16] = "Không có cái gì dễ, nhưng cái gì rồi cũng sẽ trở nên dễ nếu chúng ta biết trì chí kiên tâm.";
quotes[17] = "Bạn hãy hiền dịu bao dung với hết tất cả mọi người trừ chính mình.";
quotes[18] = "Mỗi người có trong đời mình những trang sách mà mình không biết và được viết bởi công trạng của người khác.";
quotes[19] = "Bạn đừng làm một điểm trên vòng tròn mà phải làm một trung tâm điểm.";
quotes[20] = "Làm cho người khác tốt hơn đó là cách duy nhất làm cho người ta hạnh phúc hơn.";
quotes[21] = "Một ông thầy mà không dạy cho học trò được việc ham muốn học tập thì chỉ là đập búa trên sắt nguội mà thôi.";
quotes[22] = "Học tập là hạt giống của kiến thức, kiến thức là hạt giống của hạnh phúc.";
quotes[23] = "Ngủ dậy muộn thì phí mất cả ngày, ở tuổi thanh niên mà không học tập thì phí mất cả cuộc đời.";
quotes[24] = "Phải tôn kính thầy dạy mình, bởi lẽ nếu cha mẹ cho ta sự sống thì chính các thầy giáo cho ta phương cách sống đàng hoàng tử tế.";
quotes[25] = "Ðọc sách cũng giống như xem tranh; ta phải không nghi ngờ, không do dự, mà mạnh dạn chiêm ngưỡng cái đẹp.";
quotes[26] = "Thích đọc sách tức là biết đánh đổi những giờ phút buồn tẻ không thể tránh được trong cuộc đời lấy những giờ phút lý thú.";
quotes[27] = "Nếu quy luật đầu tiên của tình bạn là phải vun đắp nó thì quy luật thứ hai là phải độ lượng khi quy luật thứ nhất bị sao nhãng.";
quotes[28] = "Dám và thử thách là những trận chiến. Nếu bạn thua một lần, hai lần hoặc nhiều lần nữa, bạn hãy giao chiến lại rồi sẽ được lúc bạn toàn thắng.";
quotes[29] = "Nếu đẹp, bạn hãy đáng với nhan sắc của mình, nếu xấu bạn hãy làm cho người ta quên cái xấu của bạn bằng kiến thức của bạn.";
quotes[30] = "Muốn được hạnh phúc đến mức độ nào, ta phải có đau khổ đến mức độ đó.";
authors[1] = "Xi-xê-rông";
authors[2] = "Sách luận ngữ";
authors[3] = "Blackie";
authors[4] = "J. Payner";
authors[5] = "Lã Đông Lai";
authors[6] = "H. Cason";
authors[7] = "Khổng Tử";
authors[8] = "Ghersen";
authors[9] = "Phoebe Vary";
authors[10] = "Danh ngôn Anh";
authors[11] = "Gia-bơ-ri-ơ Pa-lan";
authors[12] = "Earvin";
authors[13] = "Vân Trung Tư";
authors[14] = "E. W. Wilcox";
authors[15] = "Marc-Aurele";
authors[16] = "Andre Moroi";
authors[17] = "Joubert";
authors[18] = "G. Guyau";
authors[19] = "Luc Miriam";
authors[20] = "Ampere";
authors[21] = "Horaceman";
authors[22] = "Ngạn ngữ Gruzia";
authors[23] = "Ngạn ngữ Trung Quốc";
authors[24] = "Philoxêne De Cythêrê";
authors[25] = "Vincent Van Gogh";
authors[26] = "Mông-tex-kiơ";
authors[27] = "Vontaire";
authors[28] = "Epictete";
authors[29] = "Nicole";
authors[30] = "Edgar Poe";
var ran = (day % numquotes) + 1;
document.write(quotes[ran] + '<p style="text-align: right;text-case:sentence"><i>' + authors[ran] + '</i></p>');
</script>
<div class='clear'></div>

Trong đoạn javascript ở trên, có thể thấy 2 phần chính là quotes (danh ngôn) và authors (tác giả). Bạn có thể thay đổi câu danh ngôn tương ứng với tên tác giả theo sưu tầm danh ngôn của bạn.
More about

Tiện ích thống kê blog bản hoàn thiện

Người đăng: buonkhongem on Thứ Ba, 23 tháng 11, 2010

Tiện ích thống kê blog giúp người đọc và admin nắm được thông tin cơ bản về blog như tổng số bài viết, nhận xét, người đăng ký nhận bài viết qua email, hay thậm chí cả người theo dõi trên Twitter.

Để cài đặt tiện ích này, bạn chỉ cần dán toàn bộ phần mã dưới đây vào một tiện ích HTML/Javascript.

<script language='javascript' type='text/javascript'>
function snfbc(json){
document.write(parseInt(json.value.items[0].feed.entry.circulation));
}
function xfeedburner(uri){
if(uri){
document.write('<sc'+'ript src="http://pipes.yahoo.com/pipes/pipe.run?_id=e61a81bcdb1660ebf8bc1a7c130f1f7b&_render=json&uri='+uri+'&_callback=snfbc" type="text/javascript"></s'+'cript>');
} else{
return false;
}
}

function sntwitter(json){
document.write(parseInt(json.followers_count));
}
function xtwitter(user){
if(user){
document.write('<scr'+'ipt src="http://twitter.com/users/show/'+user+'.json?callback=sntwitter" type="text/javascript"></scr'+'ipt>');
} else{
return false;
}
}

</script>
<div style='float:left;padding:8px;'>
<img src="http://img72.imageshack.us/img72/5376/twittery.png" style="margin-right: 8px; float:left;" />
<a href="http://twitter.com/huynhatha" target="_blank" ><span style="float: left; margin-top:2px;padding:0;font-size:18px;color:#000;font-family:Arial,Helvetica,sans-serif;">
<script type="text/javascript"> xtwitter("huynhatha") </script> Người theo dõi</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size: 12px;color:#000;font-family:Arial,Helvetica,sans-serif;">Theo dõi trên Twitter</span></a>
</div><div style='clear:both;'/>

<div style='float:left;padding:8px;'>
<img src="http://img638.imageshack.us/img638/3243/rsss.png" style="margin-right:8px;float:left;" />
<a href="http://feeds.feedburner.com/huynh-nhat-ha" target="_blank" ><span style="float:left;margin-top:2px;padding:0;font-size: 18px; color:#000;font-family:Arial,Helvetica,sans-serif;">
<script type="text/javascript"> xfeedburner("huynh-nhat-ha") </script> Người đăng ký</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size:12px; color:#000;font-family:Arial,Helvetica,sans-serif;">Đăng ký!</span></a>
</div><div style='clear:both;'/>

<div style='float:left;padding:8px;'>
<img src="http://img684.imageshack.us/img684/6793/usersh.png" style="margin-right:8px;float:left;" />
<span style="float:left;margin-top:2px;padding:0;font-size:18px;color:#000;font-family:Arial,Helvetica,sans-serif;">
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> Nhận xét</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size: 12px;color:#000;font-family:Arial, Helvetica, sans-serif;"></span>
</div><div style='clear:both;'/>

<div style='float:left;padding:8px;'>
<img src="http://img707.imageshack.us/img707/3875/bloggerf.png" style="margin-right:8px;float:left;" />
<a href="http://huynh-nhat-ha.blogspot.com/search/label/?max-results=999" target="_blank"><span style="float:left;margin-top:2px;padding:0;font-size: 18px; color:#000;font-family:Arial,Helvetica,sans-serif;">
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> Bài viết</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size:12px; color:#000;font-family:Arial,Helvetica,sans-serif;">Xem tất cả!</span></a>
</div><div style='clear:both;'/>
Bạn cần thay đổi những phần được đánh dấu mảu đỏ lần lượt thành username trên Twitter, tên tài khoản Feedburner và tên địa chỉ blogspot của bạn.
More about

Hiển thị tổng số bài viết và nhận xét trên Blogger

Người đăng: buonkhongem on Chủ Nhật, 17 tháng 10, 2010

Tạo widget hiển thị tổng số bài viết và tổng số nhận xét trên Blogger là cách cho phép bạn thống kê số lượng bài viết và nhận xét để tiện cho việc quản lý blog của mình.

Chỉ cần đăng nhập Blogger rồi đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/JavaScript là có thể thực hiện công việc đơn giản này.

<div style="float:left;"><img src="URL hình thống kê"/></div><br/><script style="text/javascript">
function numberOfPosts(json) {
document.write('<span style="font-weight: bold; ">Tổng số bài viết:</span> <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('<span style="font-weight: bold; ">Tổng số nhận xét:</span><b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

Chú ý nếu bạn thích có hình thống kê thì phải đặt liên kết (URL) hình thống kê vào đoạn code trên, nếu không thích thì xóa tất cả phần code màu đỏ. Ngoài ra bạn có thể chỉnh sửa các thuộc tính CSS tùy thích. Tất nhiên bạn phải đổi địa chỉ blogspot trong đoạn code trên bằng địa chỉ blogspot của bạn.
More about

Tạo widget danh ngôn trong ngày bằng Javascript

Người đăng: buonkhongem on Thứ Năm, 14 tháng 10, 2010

Tạo widget danh ngôn trong ngày để đặt lên blog cũng là một trong những đề tài của cộng đồng Blogger. Một số trang web cung cấp widget danh ngôn ngẫu nhiên, danh ngôn trong ngày. Nếu bạn sử dụng các widget này thì chỉ việc gắn các đoạn code được cung cấp vào blog của bạn, tuy nhiên có một điều là bạn không thể tự ý chỉnh sửa nội dung danh ngôn theo ý mình.

Có một cách khắc phục điều này là sử dụng ngôn ngữ Javascript để tạo một widget độc lập cho blog của bạn mà không cần nhờ đến website thứ 3.

Đối với Blogger, bạn chỉ cần đặt đoạn code dưới đây vào trong một tiện ích HTML/JavaScript là có thể thành công. Lưu ý ở đây sử dụng thủ thuật hiển thị mỗi ngày một câu danh ngôn (quote) kèm theo tác giả (author) tương ứng. Trong đoạn code mẫu là những câu danh ngôn bằng tiếng Anh. Bạn nên thay thế bằng những câu danh ngôn tiếng Việt mà bạn thích kèm theo tác giả của câu danh ngôn đó.

<table border="1" bordercolor="#ADD8E6" cellpadding="20" width="200" bgcolor="#dff6ff" title="Danh ngôn chọn lọc"><tr><td><a target="_blank" href="http://huynh-nhat-ha.blogspot.com/2010/10/tao-widget-danh-ngon-trong-ngay-bang.html">Danh ngôn trong ngày</a><p></p><p></p>
<script language="javascript" type="text/javascript">
var d=new Date();
var quotes=new Array(31);
var authors=new Array(31);
quotes[0]="If a man watches three football games in a row, he should be declared legally dead.";
quotes[1]="Friendship is far more tragic than love. It lasts longer.";
quotes[2]="Advice is like castor oil, easy enough to give but dreadful uneasy to take.";
quotes[3]="Never trust men with short legs. Brains too near their bottoms.";
quotes[4]="Fame is failure disguised as money.";
quotes[5]="I always wait for The Times each morning. I look at the obituary column, and if I'm not in it, I go to work.";
quotes[6]="I just came from a pleasure trip: I took my mother-in-law to the airport.";
quotes[7]="Too bad that all the people who know how to run the country are busy driving taxicabs and cutting hair.";
quotes[8]="The success of the marriage comes after the failure of the honeymoon.";
quotes[9]="Husbands are like fires. They go out when unattended.";
quotes[10]="If one hears bad music, it is one's duty to drown it in conversation.";
quotes[11]="Being right half the time beats being half-right all the time.";
quotes[12]="If you do not know where you are going, every road will get you nowhere.";
quotes[13]="My wife is a light eater. As soon as it's light, she starts eating.";
quotes[14]="A door is what a dog is perpetually on the wrong side of.";
quotes[15]="Never trust a husband too far or a bachelor too near.";
quotes[16]="I can resist everything except temptation.";
quotes[17]="Education is not the filling of a pail, but the lighting of a fire.";
quotes[18]="Every one is a moon, and has a dark side which he never shows anybody.";
quotes[19]="Man is born free; and everywhere he is in chains.";
quotes[20]="Anger is never without an argument, but seldom with a good one.";
quotes[21]="Most folks are about as happy as they make up their minds to be.";
quotes[22]="Love and scandal are the best sweeteners of tea.";
quotes[23]="To find a friend one must close one eye. To keep him - two.";
quotes[24]="I've made it a rule never to drink by daylight and never to refuse a drink after dark.";
quotes[25]="When I read about the evils of drinking, I gave up reading.";
quotes[26]="When work is a pleasure, life is a joy! When work is duty, life is slavery.";
quotes[27]="She used to diet on any kind of food she could lay her hands on.";
quotes[28]="An uneasy conscience is a hair in the mouth.";
quotes[29]="Bigamy is having one wife too many. Monogamy is the same.";
quotes[30]="My idea of an agreeable person is a person who agrees with me.";

authors[0]="Erma Bombeck";
authors[1]="Oscar Wilde";
authors[2]="Josh Billings";
authors[3]="Noel Coward";
authors[4]="Brendan Behan";
authors[5]="A. E. Matthews";
authors[6]="Henny Youngman";
authors[7]="George Burns";
authors[8]="G. K. Chesterton";
authors[9]="Zsa Zsa Gabor";
authors[10]="Oscar Wilde";
authors[11]="Malcolm Forbes";
authors[12]="Henry Kissinger";
authors[13]="Henny Youngman";
authors[14]="Ogden Nash";
authors[15]="Helen Rowland";
authors[16]="Oscar Wilde";
authors[17]="William Butler Yeats";
authors[18]="Mark Twain";
authors[19]="Jean-Jacques Rousseau";
authors[20]="Lord Halifax";
authors[21]="Abraham Lincoln";
authors[22]="Henry Fielding";
authors[23]="Norman Douglas";
authors[24]="H. L. Mencken";
authors[25]="Henny Youngman";
authors[26]="Maxim Gorky";
authors[27]="Arthur 'Bugs' Baer";
authors[28]="Mark Twain";
authors[29]="Oscar Wilde";
authors[30]="Benjamin Disraeli";
document.write(quotes[d.getDate()-1] + '<p style="text-align: right"><i>' + authors[d.getDate()-1] + '</i></p>');</script><noscript>You need to enable JavaScript to read this.</noscript></td></tr></table>

Nếu bạn biết chút ít về CSS thì có thể tùy chỉnh màu nền và trang trí widget túy ý và tất nhiên là cần phải chỉnh độ rộng (width) cho phù hợp với độ rộng của sidebar trên blog của bạn.

Chúc bạn thành công!
More about

Tạo thanh cuộn scrollbar

Người đăng: buonkhongem

Khi bạn thiết kế blog trên nền Blogger, đôi khi bạn gặp tình huống nội dung một trang quá dài hoặc các tiêu đề trên widget quá nhiều. Biện pháp tạo thanh cuộn (scrollbar) là một cách để rút ngắn không gian trình bày trang web giúp cho trang nhà của bạn thêm chuyên nghiệp hơn.
Chúng tôi sẽ giới thiệu cách tạo scrollbar trong một số tình huống khi thiết kế blog với Blogger.

1. Trường hợp 1: Scrollbar cho tất cả các widget:
Đăng nhập vào bảng điều khiển Blogger rồi vào chỉnh sửa HTML, chèn đoạn mã dưới đây vào bên dưới phần /* Sidebar Content */.

.sidebar .widget{
height:200px;
overflow:auto;
}

2. Trường hợp 2: Scrollbar cho các widget của một thanh bên (sidebar):
Đối với trường hợp này thì cách thực hiện tương tự Trường hợp 1 song ở phần đoạn mã chỉ cần thay sidebar thành newsidebar hoặc leftsidebar sao cho tương ứng với tên thanh bên mà bạn đã đặt trong phần Thiết kế Template cho Blogger.
3. Trường hợp 3: Scrollbar cho một widget:
Muốn tạo scrollbar cho một hoặc một vài widget riêng biệt thì cần phải biết ID của widget đó (muốn tìm ID của một widget thì vào phần chỉnh sửa HTML mà tìm, ví dụ với widget id='Label1' thì ID của widget này là Label1) sau đó thêm thuộc tính thanh cuộn như các trường hợp 1 và 2 bằng cách thay đổi đoạn mã như sau:

#Label1{
height:200px;
overflow:auto;
}

Nếu widget là các liên kết thì đoạn mã có dạng như sau:

#LinkList1 ul{
height:200px;
overflow:auto;
}

4. Trường hợp 4: Scrollbar cho đoạn văn bản dài:
Đối với đoạn văn bản dài thì đoạn mã có dạng như sau:

.scrollingtext {
height:200px;
width:500px;
border:0;
overflow:auto;
}

Đoạn mã trên được đặt trước phần ]]></b:skin>. Người dùng có thể điều chỉnh chiều cao (height) và chiều rộng (width) tùy ý. Mỗi khi đăng bài thì bạn nhập văn bản vào giữa 2 phần cú pháp định dạng (lưu ý đăng bài ở dạng Chỉnh sửa HTML) như sau: <div class="scrollingtext">Văn bản của bạn</div>
Ví dụ: Dưới đây là kết quả sau khi điều chỉnh thuộc tính thanh cuộn cho đoạn văn bản dài.

Việt Nam (tên chính thức: Cộng hòa xã hội chủ nghĩa Việt Nam) là một quốc gia nằm ở phía đông bán đảo Đông Dương, thuộc khu vực Đông Nam Á. Việt Nam phía bắc giáp Trung Quốc, phía tây giáp Lào và Campuchia, phía tây nam giáp vịnh Thái Lan và phía đông và phía nam giáp biển Đông và có hơn 4.000 hòn đảo, bãi đá ngầm lớn nhỏ, gần và xa bờ, có vùng nội thủy, lãnh hải, vùng đặc quyền kinh tế và thềm lục địa được Chính phủ Việt Nam xác định gần gấp ba lần diện tích đất liền (khoảng trên 1 triệu km²). Trên biển Đông có quần đảo Trường Sa và Hoàng Sa đã được Việt Nam khẳng định chủ quyền cũng như bác bỏ mọi ý kiến của các quốc gia khác như Trung Quốc.

Sau khi Việt Nam Dân chủ Cộng hòa ở miền Bắc và Mặt trận dân tộc giải phóng miền Nam Việt Nam giành chiến thắng trước Việt Nam Cộng hòa ở miền Nam ngày 30 tháng 4 năm 1975, hai miền Bắc-Nam được thống nhất. Ngày 2 tháng 7 năm 1976 nước Việt Nam được đặt quốc hiệu là Cộng hòa Xã hội Chủ nghĩa Việt Nam.

5. Trường hợp 5: Scrollbar cho tất cả các bài đăng:
Nếu bạn muốn tất cả các bài đăng đều có thuộc tính thanh cuộn thì trong phần Chỉnh sửa HTML cho Template, bạn tìm đoạn mã có dạng .post { rồi thêm thuộc tính scroll vào. Kết quả sau khi thêm như sau:

.post {
height:200px;
overflow:auto;
}
More about

Hiển thị widget chỉ ở trang chủ hoặc trang riêng biệt

Người đăng: buonkhongem

Một khi bạn tạo một widget trên blog thì nó sẽ được hiển thị ở tất cả các trang theo mặc định, bao gồm cả trang chủ. Đôi khi bạn chỉ cần hiển thị một vài widget ở trang chủ hoặc chỉ ở một số trang hoặc thậm chí ở một trang riêng biệt nào đó. Thủ thuật này cũng khá đơn giản. Điều quan trọng là bạn phải nắm được id của widget mà bạn tạo ra.

Lấy ví dụ widget mà bạn tạo có id là HTML10 và bạn đặt tiêu đề cho widget đó là BLOGGER TIPS. Vào Bố cục (Layout) rồi chỉnh sửa HTML ở chế độ mở rộng mẫu tiện ích.

Trường hợp 1: Hiển thị widget chỉ ở trang chủ: Tìm và thêm đoạn code được đánh dấu màu đỏ và màu xanh như bên dưới.

<b:widget id='HTML10' locked='false' title='BLOGGER TIPS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Trường hợp 2: Hiển thị widget ở tất cả các bài viết, trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType == "item"'>

Trường hợp 3: Chỉ hiển thị widget ở một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url == "URL của trang riêng biệt"'>

Trường hợp 4: Chỉ hiển thị widget ở các trang chính gồm trang chủ, các trang Label và Archive: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType == "index"'>

Trường hợp 5: Chỉ hiển thị widget ở các trang lưu trữ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType == "archive"'>

Trường hợp 6: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang lưu trữ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType ! == "archive"'>

Trường hợp 7: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang bài viết: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType ! == "item"'>

Trường hợp 8: Chỉ hiển thị widget ở tất cả các trường hợp trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == data:blog.homepageUrl'>

Trường hợp 9: Chỉ hiển thị widget ở tất cả các trang trừ một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == "Url của trang đặc biệt"'>

Trường hợp 10: Chỉ hiển thị widget ở tất cả các trang trừ hai trang riêng biệt nào đó trở lên: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == "Url của trang đặc biệt 1"'>
<b:if cond='data:blog.url ! == "Url của trang đặc biệt 2"'>

Trường hợp 11: Nếu bạn muốn hiển thị một thứ gì đó ở trang chủ và một thứ gì đó khác ở tất cả các trang: Bạn sử dụng lệnh điều kiện như thế này:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Đây là điều cần hiển thị ở trang chủ
<b:else/>
Đây là điều không hiển thị ở trang chủ
</b:if>

Trường hợp 12: Chỉ hiển thị widget ở một trang nhãn: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url == "http://yourblogname.blogspot.com/search/label/Tennhan"'>

Trường hợp này chỉ hoạt động với tên nhãn không dấu như Blogger, CSS, Thuthuat, Thuvien (không dùng cho nhãn tiếng Việt). Đối với các nhãn có khoảng cách như Recent Posts thì phải đặt là Recent%20Posts (tức là thay khoảng cách bằng %20).

Các liên kết trang nhãn trong trường hợp này cũng không hoạt động được khi có đuôi ?max-results=

Những thủ thuật nhỏ này rất có ích trong việc xây dựng trang chủ cho blog của bạn.
More about

Ẩn biểu tượng chỉnh sửa nhanh widget

Người đăng: buonkhongem

Biểu tượng chỉnh sửa nhanh cho widget là một tiện ích mà blogger cung cấp, rất hữu ích cho chúng ta có thể chỉnh sửa widget trực tiếp trên blog mà không phải vào bố cục để chỉnh sửa, và biểu tượng này chỉ hiển thị với admin của blog và khi đăng xuất thì không thấy nó, tuy nhiên trong quá trình thiết kế blog nếu bạn chọn chế độ xem blog (View blog) khi đang đăng nhập Blogger thì cho dù sau đó bạn đăng xuất thì vẫn nhìn thấy hiển thị biểu tượng này, và đó là lý do khiến nhiều người cảm thấy phiền toái với nó.


Việc ẩn biểu tượng này cũng khá đơn giản. Thông thường ở chế độ chỉnh sửa Template mở rộng mẫu tiện ích, trong mỗi widget đều có dòng code: <b:include name='quickedit'/> để thể hiện biểu tượng chỉnh sửa nhanh widget. Việc phải làm là ẩn đi thuộc tính này. Vậy thì chỉ cần can thiệp bằng CSS. Hãy dán đoạn code sau vào trước thẻ đóng </b:skin> khi bạn chỉnh sửa Template.

.quickedit {display:none;}
Như vậy lúc này bạn sẽ không còn thấy biểu tượng chỉnh sửa nhanh widget nữa. Nếu muốn hiển thị lại thì chỉ cần xóa bỏ đoạn code ở trên.
More about

Ẩn tiêu đề widget Người theo dõi trên Blogger

Người đăng: buonkhongem

Nếu bạn để ý trên một widget Người theo dõi đối với Blogger thì có sự trùng lặp cụm từ Người theo dõi (Follower) đến 2 lần, ở phần tiêu đề và phần thân widget.


Khi bạn thêm widget Người theo dõi mặc dù phần tiêu đề bạn để trống nhưng khi mở blog của bạn thì Blogger vẫn mặc định hiển thị tiêu đề “Người theo dõi”. Điều này khác với các widget thông thường khác, nếu để trống phần tiêu đề thì vẫn không hiển thị khi mở blog.

Để khắc phục điều này, bạn có thể sử dụng thủ thuật ẩn tiêu đề widget. Chỉ cần đặt đoạn code dưới đây trước dòng ]]></b:skin> là xong.

.widget h2 {
display:none;
visibility:hidden;
}

Tuy nhiên thủ thuật này có một điểm yếu là nó sẽ ẩn tất cả các tiêu đề widget trên blog của bạn, và có thể ẩn luôn một số tiêu đề bài viết nào đó (do ảnh hưởng đến thẻ h2).

Như vậy thủ thuật tối ưu nhất là ẩn tiêu đề của một widget riêng biệt nào đó mà thôi. Lấy ví dụ với một widget có id là HTML5, bạn chỉ cần đặt đoạn code bên dưới nằm ở phía sau dòng ]]></b:skin>.

<style>
#HTML5 .title {
display:none;
visibility:hidden;
}
</style>

Từ cách trên có thể tùy biến ẩn tiêu đề của widget Người theo dõi. Nếu tìm trong Template thì bạn sẽ thấy rằng id của widget Người theo dõi thường có dạng Followers1.

Vậy bạn cần sử dụng đoạn code sau:

<style>
#Followers1 .title {
display:none;
visibility:hidden;
}
</style>
More about

Ẩn bài viết ở trang chủ Blogger

Người đăng: buonkhongem

(Huynh Nhat Ha's Blog) -- Trong một số trường hợp khi thiết kế Blogger, bạn cần đến việc ẩn các bài viết ở trang chủ. Trường hợp này có thể thực hiện bằng việc kết hợp CSS với câu lệnh điều kiện.

Trước hết bạn cần xác định id của widget "Bài đăng trên Blog", thông thường nó đều có id là "Blog1". Tìm nó bằng cách vào chỉnh sửa HTML của Template ở trạng thái mở rộng mẫu tiện ích.

Sau khi xác định được id này, ta thực hiện các bước sau:

1. Vào Bố cục (Layout).
2. Vào Chỉnh sửa HTML (HTML) của Template.
3. Chèn đoạn code bên dưới vào sau dòng ]]></b:skin>.

<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

#Blog1 {
display:none;
visibility:hidden;
}

</b:if>
</style>
More about

Hiển thị danh ngôn ngẫu nhiên sử dụng JavaScript

Người đăng: buonkhongem

Khi thiết kế website hoặc webblog, đôi khi chúng ta cần hiển thị một chuỗi câu trích dẫn hay chuỗi câu danh ngôn nổi tiếng theo kiểu ngẫu nhiên để tạo sự nổi bật cho trang web. Trong trường hợp này có thể sử dụng ngôn ngữ JavaScript khá đơn giản để có được kết quả mong muốn.

Xem DEMO

Cấu trúc HTML cho website có dạng như sau:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hiển thị danh ngôn ngẫu nhiên</title>
<meta content="Huynh Nhat Ha" name="author" />
</head>
<body>

<div> >>>Đối với Blogger dùng từ dòng này
<p id="quoteWrapper"></p>
</div>


<script type="text/javascript">

var Quotes =
{
getRandomQuote: function()
{
var quote = [];
quote[0] = "When you have given nothing, ask for nothing.";
quote[1] = "Good habits result from resisting temptation.";
quote[2] = "If you bow at all, bow low.";
quote[3] = "Examine what is said, not him who speaks.";
quote[4] = "Make your bargain before beginning to plow.";
quote[5] = "Don't make use of another's mouth unless it has been lent to you.";
quote[6] = "Seize opportunity by the beard, for it is bald behind.";
quote[7] = "Be not afraid of growing slowly, be afraid only of standing still.";
quote[8] = "Do not employ handsome servants.";
quote[9] = "Do not remove a fly from your friend's forehead with a hatchet.";

var maxLength = quote.length;
var position = Math.floor(Math.random() * maxLength);
return Quotes.displayQuote("quoteWrapper", quote[position]);
},
displayQuote: function(ctl, quote)
{
ctl = document.getElementById(ctl);
ctl.innerHTML = quote;
}
};

Quotes.getRandomQuote();

</script> >>>Đối với Blogger kết thúc tại dòng này</body>
</html>

Chúng ta có thể thay đổi câu danh ngôn hay trích dẫn tùy ý, có thể tăng số lượng hiển thị ngẫu nhiên lên 10, 11, 12, ... n,...

Đối với Blogger, bạn chỉ cần dán đoạn code giữa 2 phần đánh dấu màu đỏ vào một tiện ích (widget) tại nơi bạn muốn hiển thị trên blog của bạn là xong.

Sau đây là một cách khác cũng khá giống với cách trên.

Chèn đoạn code dưới đây trước thẻ </head>.

<script language="JavaScript">

function rotateEvery(sec)
{
var Quotation=new Array()

// QUOTATIONS
Quotation[0] = 'First quotation';
Quotation[1] = 'Second quotation';
Quotation[2] = 'Third quotation';
Quotation[3] = 'Fourth quotation';
Quotation[4] = 'Fifth quotation';
Quotation[5] = 'Sixth quotation';
Quotation[6] = 'You can add as many quotations as you like';

var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];

setTimeout('rotateEvery('+sec+')', sec*1000);
}
</script>

Lưu ý bạn phải thay các quotation bằng câu danh ngôn bạn lựa chọn để hiển thị.
Thay thế thẻ <body> bằng thẻ: <body onload="rotateEvery(1)">.
Sau đó chèn đoạn code dưới đây vào vị trí bạn muốn hiển thị trên web hay blog của bạn.

<div id="textrotator"><!--Quotations will be displayed here--></div>
Chúc bạn thành công!
More about

Tạo Widget Truyện cười Ngẫu nhiên

Người đăng: buonkhongem

Tại trang Luudiachiweb, có một nguồn dữ liệu chuyện cười sưu tầm rất lớn. Với widget truyện cười ngẫu nhiên được đặt trên một webblog, người đang truy cập có thể giành những giây phút thư giãn đọc truyện cười cũng thật bổ ích và thú vị, trang webblog của bạn cũng trở nên phong phú hơn.

Bạn có thể cài đặt Widget Truyện cười Ngẫu nhiên bằng vài thao tác đơn giản sau đây:
- Chỉ cần cho đoạn mã dưới đây vào một tiện ích (widget) dạng HTML/JavaScript tại vị trí mà bạn muốn hiển thị trên blog của bạn.

<iframe frameborder="1" width="98%" src="http://www.luudiachiweb.com/truyencuoi.htm" height="200"></iframe>

Bạn có thể điều chỉnh thông số tùy ý mình:
200 là chiều cao của widget, có thể điều chỉnh thành 150, 170, 250,…
1 Là bề dày của khung bao quanh widget.
98% là mức độ hiển thị bề ngang của thân widget so với khung widget.


Mỗi khi trang được hạ tải, chuyển sang bài viết khác hay khi bạn click vào dòng "xem truyện khác" thì một truyện cười khác sẽ xuất hiện một cách ngẫu nhiên.

Dưới đây là kết quả ví dụ của Widget Truyện cười Ngẫu nhiên.

More about