Thẻ b:include và b:includable trong Blogger XML

Trong Blogger XML một trong những thẻ được xuất hiện với tần xuất khá nhiều đặc biệt là trong widget Blog mặc định đó chính là b:include và b:includable. Chắc chắn rằng rất nhiều người không biết đây là thẻ gì và sử dụng chúng ra sao, và bài viết này mình sẽ chia sẻ với mọi người nó là gì và cách thức sử dụng chúng như thế nào.

Tìm hiểu b:include và b:includable

Thẻ b:include và b:includable là gì?

Khi mà bạn muốn sử dụng nhiều lần một đoạn mã (HTML hay JS) nhiều lần trong một widgetbất kỳ, nhưng đoạn mã đó quá dài, hai thẻ này chính là giải pháp dành cho bạn.

Các thực hiện rất đơn giản, đầu tiên bạn tạo ra một thẻ b:includable gắn cho nó một cái id và ghi toàn bộ nội dung của đoạn mã mà bạn muốn sử dụng nhiều lần vào trong đó. Sau đó khi cần lấy ra sử dụng ở đâu bạn đơn giản chỉ cần sử dụng thẻ b:include để lấy dữ liệu trong đoạn mã đó ra để sử dụng.

Cú pháp sử dụng

<b:includable id='ten-id' var='ten-gia-tri'>
  [ĐOẠN MÃ HOẶC NỘI DUNG BẤT KỲ]
</b:includable>

Các thuộc tính cho thẻ b:includable

• id (bắt buộc): Bạn có đặt với chữ số không dấu bất kì, viết liền và không dấu. Mỗi widget phải có tối thiểu một thẻ includable vời id='main' là thẻ đầu tiên mà widget thực thi.
• var (không bắt buộc) Bạn có thể đặt với chữ và số, đây là biến tạo ra để sử dụng tham chiếu dữ liệu.

Một lưu ý là khi bạn tạo ra thẻ b:includable thì nó hoàn toàn không xuất hiện cho đến khi bạn gọi nó ra bằng the b:include. Các gọi như sau, nếu bạn đặt thẻ b:includable với id='ksl', thì khi đó bạn gọi nó ra bằng thẻ <b:include name='ksl' />, thuộc tính name chính là tên của id của thẻ includable.

Các thuộc tính cho thẻ b:include

• name (bắt buộc): Phải trùng với ID của thẻ b:includable đã tạo ra trước đó.
• data (không bắt buộc): Là dữ liệu bạn muốn truyền vào thẻ b:includable bạn đã tạo trước đó. Có nghĩa là giá trị của thằng này sẽ chuyển vào cho cái biến mà bạn đã đặt chovar cho thằng kia.
• cond (không bắt buộc) Điều kiện thực thi thẻ include. Tương tự không khác gì thẻ b:if.

Ví dụ

Dưới đây là ví dụ cho thấy làm thế nào để sử dụng b:includable và b:include.

Đây là ví dụ mình tạo ra thẻ includable để gọi ra tiêu đề bài viết của 10 bài mới nhất, tại widget blog mình sẽ có đoạn mã như sau.

<b:includable id='main'>
  <b:loop var='bv' index='index' values='data:posts'>
    <b:include name='baiviet' data='bv' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='baiviet' var='baiviet'>
  Tiêu đề: <data:baiviet.title/>
</b:includable>

Video hướng dẫn

CẬP NHẬT SAU

Tạm kết

Bạn nào thường xuyên tham khảo blog của mình sẽ thấy mình có một bài viết về cặp thẻ này rồi, bài này mình muốn viết lại đơn giản hơn và cập nhật thêm đầy đủ cũng như viết lại tiêu đề cho chính xác để phù hợp hơn với mọi người. Và như mọi người thấy thì cũng hoàn tất rồi, bạn nào có thắc mắc gì hãy để lại ở dưới khung nhận xét mình sẽ giải đáp. Sắp tới mình sẽ viết lại nhiều bài nữa về Blogger XML mọi người đón xem nhé.

Read More

Các phím tắt trên Facebook cho người dùng Computer

Một kiến thức hay trên hướng dẫn của facebook, nó có thể giúp ích được rất nhiều cho các bạn nè.
Bạn có thể nhấn những nút sau trên bàn phím của mình để sử dụng Facebook nhanh hơn.

j , k — Cuộn giữa các tin trong Bảng tin p — Đăng trạng thái mới l — Thích hoặc bỏ thích tin đã chọn c — Bình luận về tin đã chọn s — Chia sẻ tin đã chọn o — Mở tệp đính kèm của tin đã chọn enter — Xem thêm nội dung của tin đã chọn / — Tìm kiếm q — Tìm kiếm liên hệ trò chuyện ? — Hiển thị hộp thoại trợ giúp này Tổ hợp phím: Alt + 0 — Trợ giúp Alt + 1 — Trang chủ Alt + 2 — Dòng thời gian Alt + 3 — Bạn bè Alt + 4 — Hộp thư Alt + 5 — Thông báo Alt + 6 — Cài đặt Alt + 7 — Nhật ký Hoạt động Alt + 8 — Giới thiệu Alt + 9 — Điều khoản Alt + m — Tin nhắn mới Alt + /     - Mở tính năng trợ giúp thú vị trên facebook

Bạn có thể xem thêm ở bài: Tính năng trợ giúp thú vị của FaceBook trên Computer

Lưu ý: Trong bài nầy, các hướng dẫn chỉ sử dụng cho máy Computer.

Người viết: Nguyễn Đạt Khánh

Read More

Hiệu ứng phóng to ảnh khi dê chuột vào

Đầu tiên các bạn tìm một bức ảnh mà các bạn muốn taoh hiệu ứng bóng mờ:
Tiếp theo vào  Thiết kế  ->  Chỉnh sửa HTML .

- Các bạn có 2 cách để làm
- Bước 1: Thêm đoạn Code sau trước thẻ: </head>

Code:

<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>

Code khi chèn ảnh:

<div class="hovergallery">
<img src="coconut.jpg" />
<img src="sunbreakthrough.jpg" />
<img src="desert.jpg" />
<img src="sunflower.jpg" />
<img src="forest.jpg" />
<img src="duck.jpg" />
</div>

Chúc thành công!

Nguồn http://hawhisky.blogspot.com/

Read More

Chèn biểu tượng mặt cười (emoticons) cho phần nhận xét của blogspot

Bước 1: Mở template và chèn đoạn mã dưới đây trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("emocomments");
theText = bodyText.innerHTML;
theText = theText.replace(/:\)\)/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>");
theText = theText.replace(/:d/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>");
theText = theText.replace(/:p/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>");
theText = theText.replace(/\[\-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>");
theText = theText.replace(/:-t/gi, "<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Bước 2: Tìm đến thẻ <b:loop values='data:post.comments' var='comment'> và thêm trước nó thẻ <div id='emocomments'>. Tìm thẻ đóng </b:loop> và thêm sau nó thẻ </div>.

Bước 3: Bước này là hiển thị những ký tự tắt và emoticons tương ứng với nó cho người đọc có thể biết được để chèn vào khung Nhận xét.

Tìm đến thẻ <data:blogTeamBlogMessage/> thứ 2 và chèn đoạn mã dưới đây vào sau nó:

<script type="text/javascript"> 
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">&#8592;</a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">&#8594;</a>';
}
//]]>
</script>
<div class='emoticons'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>:) 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>:( 
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>:)) 
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>:(( 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>=)) 
<span id='smiley-more' style='display: none;'>
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>=D&gt; 
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>:D 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>:P 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>:-O 
<img src='http://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>:-? 
<img src='http://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>:-SS 
<img src='http://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>:-t 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>[-( 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>@-) 
<img src='http://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>b-(
</span>
<span id='smiley-toggle'><a href="javascript:moreSmilies()">&#8594;</a></span>
</div>

Thêm một class emoticons. Chèn đoạn mã dưới vào trước thẻ ]]></b:skin>

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;}
.emoticons a, .emoticons a:hover {font-size: 28px;margin-left: 20px;text-decoration:none;}

Mở rộng:

Các bước trên là chèn 15 emoticons của Zing với ký tự tắt theo phong cách Yahoo. Bạn hoàn toàn có thể thêm emoticons mới nữa và tự đặt ký tự tắt theo ý mình bằng cách chỉnh sửa code javascript ở bước 1.

Ký tự tắt nằm giữa 2 ký tự /

• Với ký tự đặc biệt như [ ] { } \ / ( ) . ? + * ^ $ thì phải thêm \ trước nó.
• Với ký tự < phải đổi thành <
• Với ký tự > phải đổi thành >
• Với ký tự & phải đổi thành &

Hình ảnh emoticons nằm trong thẻ img, thay đường dẫn đến ảnh tương ứng với ký tự tắt mà bạn đặt.

Lưu ý là với những ký tự tắt bao gồm của nhau như :)) và :) thì bạn phải đặt :)) lên trước :)nếu không chỉ ký tự ít hơn được hiện lên.

Nếu không muốn hiển thị những Nhận xét dung tục ta khai báo những ký tự đó và thay tương ứng không phải là thẻ img nữa mà là ký tự *** chẳng hạn.

Sau khi đã thành công với việc chèn emoticons vào khung Nhận xét bạn hoàn toàn có thể chèn emoticons vào khung Bài đăng hay khung Nhận xét mới bằng cách tạo một ID mới bao quanh khung Bài đăng hay khung Nhận xét mới và khai báo ID này trong javascript ở bước 1 tương tự như khai báo ID emocomments (tên ID phải khác nhau).

Vì không thể chèn emoticons theo kiểu click do đó chúng ta chỉ nên sử dụng những ký tự tắt thông dụng để không gây khó khăn cho người đọc.

Cũng đừng nên tham lam chèn nhiều emoticons dẫn đến trình duyệt phải xử lý nhiều thông tin khiến blog tải chậm hơn.

Giờ thì khách thăm blog của bạn thoải mái Nhận xét với những emoticon ngộ nghĩnh cho dù họ có đang dùng trình duyệt bị giới web development ghét nhất mang tên IE 6.

Cảm ơn Noct đã giúp sửa lỗi không hiển thị avatar của tài khoản Blogger.
Tác giả: Duy Pham
Nguồn Blog DX - dxoan.com

Read More

Chèn ảnh, video, nhạc vào phần nhận xét của blogspot

Điểm mạnh của blog là tính tương tác giữa người viết và người đọc. Những dẫn chứng dạng chữ chưa đủ tính thuyết phục thì người đọc còn muốn chèn thêm ảnh, video hoặc nhạc. Ở diễn đàn thì việc chèn ảnh, video hay nhạc được thực hiện dễ dàng với BB code, còn Blogger chỉ hỗ trợ 3 thẻ HTML là <b>, <i> và <a> - điều đó chưa đủ làm thỏa mãn bạn? Bài viết này sẽ giúp bạn làm việc đó dễ dàng cho khung comment của Blogger.

Ảnh được chèn từ link direct còn video và nhạc thì từ Youtube và Nhaccuatui dựa vào link trên thanh địa chỉ. Code để chèn cụ thể:

• Chèn ảnh:
  
  Link ảnh là http://domain.com/image.png thì code chèn sẽ là

  [img]http://domain.com/image.png[/img]

• Chèn video từ Youtube:
  
  Link video là http://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related thì code chèn sẽ là

  [youtube]http://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related[/youtube]

  Link video là http://youtu.be/0nbY7Mg_vMI thì code chèn sẽ là

  [youtube]http://youtu.be/0nbY7Mg_vMI[/youtube]

• Chèn nhạc từ Nhaccuatui:
  
  Link nhạc là http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt thì code chèn sẽ là

  [nct]http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt[/nct]

  Link nhạc là http://www.nhaccuatui.com/nghe?M=B_6M7IcZTz thì code chèn sẽ là

  [nct]http://www.nhaccuatui.com/nghe?M=B_6M7IcZTz[/nct]

Bước 1: Mở template và chèn đoạn mã dưới đây trước thẻ </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:590px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?L=/gi, "<div style='overflow:hidden'><embed style='margin-top:-250px;width:300px;height:400px' src='http://www.nhaccuatui.com/l/");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?M=/gi, "<div style='overflow:hidden'><embed style='margin-top:-350px;width:300px;height:400px' src='http://www.nhaccuatui.com/m/");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed></div>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Bước 2: Tìm thẻ <b:loop values='data:post.comments' var='comment'> và thêm trước nó thẻ <div id='multimedia'>. Tìm thẻ đóng </b:loop> và thêm sau nó thẻ </div>.

Có thể bạn muốn thêm bước 3 là hướng dẫn cho người đọc biết được cách để chèn ảnh, video và nhạc vào nhận xét? Mình để mọi người tự làm bước này.

Dễ nhận thấy thủ thuật này tương tự như bài Chèn biểu tượng mặt cười (emoticons) cho phần nhận xét của blogspot. Nếu bạn đã áp dụng thủ thuật đó cho blog rồi thì chỉ cần thêm đoạn mã mình đánh dấu bằng màu tím ở bước 1 vào trước bodyText.innerHTML = theText; trong template và bỏ qua bước 2.

Blog mình không có nhu cầu chèn ảnh hay video ở comment nên không áp dụng thủ thuật này, các bạn có thể test thoải mái ở blog demo.

Đã cập nhật phiên bản mới sửa lỗi người dùng tự động thêm style, class, id làm phá vỡ bố cục của blog. Các bạn sử dụng đoạn mã mới ở bước 1.
Tác giả: Duy Pham
Nguồn Blog DX

http://www.dxoan.com/

Read More

Thêm code tắt mở đèn cho blog

LIVE DEMO

Bước 1: Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm đoạn code trước thẻ </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Tắt đèn").removeClass("turnedOff");
else
$(this).html("Bật đèn").addClass("turnedOff");
});
});
//]]>
</script>

Bước 2: Thêm đoạn css vào trước thẻ ]]></b:skin>

 /* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9XuwOwX56iTTjb8w7aQ60ZYYQsZHoPpGRnDxALi7pWBYQlnw_IpK_pqkgzbwSilj6180s0SFDgOH4TdBJJ_q1V2442d9w2LyH7ZOLMHnhsQP-TsEOfeXlzLYjZcqqHSnCwWEt6jhFwkZd/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important; 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6rSYgq7IDvDveN5opk9sohPl6AeMQdRpASuP5LjZ3sX3VFeLpH70dnLw9-E6Z7ge3_MGEyhYUA1k0q9bHun4zSsjMBeor_oeQIA2R0DXMDAE5Rity3dnFvjIFdA-BC_h5H3fp3w6G-t_x/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Bước 3: Tìm đến thẻ </body> và thêm trước nó code

<div id='lightsoff'/>

Lưu mẫu lại.

Bước 4: Khi đăng bài thì bạn dùng code sau

<center>
<div id="lightsVideo">
...Thêm code video vào đây...
</div>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Tắt đèn</a></div>
</center>

MỞ RỘNG

* Với blog là trang tivi thì ta thêm đoạn code dưới vào ngay sau thẻ <data:post.body/> trong mẫu

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Tắt đèn</a></div>
</b:if>

Và khi đăng bài thì dùng đoạn code

<div id="lightsVideo">Đặt code tivi vào đây</div>

* Với blog là trang phim dùng ancmedia thì ta tìm <div id="anc_pl"/> và sửa thành

<div id="lightsVideo">
<div id="anc_pl"/>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Tắt đèn</a></div>
</div>

Rồi lưu mẫu lại

Nguồn Blog DX - http://www.dxoan.com/

Read More

Phân trang tự động tải thêm bài viết (Auto Load More) cho Blogger

Đăng nhập Blogger ~> Mẫu ~> Chỉnh sửa HTML
Dán đoạn code này trước thẻ </head> rồi Lưu Mẫu lại
( Hoặc vào Bố cục ~> Thêm tiện ích HTML/Javascript ngay dưới phần bài đăng rồi dán đoạn code vào)

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();150>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=a('<a href="javascript:;">Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMnmbzDURhf6wvpPrjzn_CUTEHQTdWqqkIUbLD2yPyTDBoPrNISN6U_aXKSRw9Yk6Cp7Mdgqm9FYExS6-mENL7fNcOtn73XLQRMqW1q14MRxaPk0l3-qdK5qrLMATpx9F1KbLVzPjIzMVW/s32/ajax-loader.gif" style="display: none;">');f.scroll(k);b=a('<div style="text-align: center; font-size: 150%;"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
//]]>
</script>

Nếu ai không muốn hiện chữ Load more posts thì xóa nó đi là xong.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMnmbzDURhf6wvpPrjzn_CUTEHQTdWqqkIUbLD2yPyTDBoPrNISN6U_aXKSRw9Yk6Cp7Mdgqm9FYExS6-mENL7fNcOtn73XLQRMqW1q14MRxaPk0l3-qdK5qrLMATpx9F1KbLVzPjIzMVW/s32/ajax-loader.gif là link ảnh hiện ra khi load, dưới đây là một số ảnh khác tùy bạn lựa chọn

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOUdd4MJRt3hQLFQpfg2adw0xsYG6czJ2zB3XT0jbiNdC9D8cvZPiRn_jZjcMJ4tHoOgzZwivuNyo0TyqQ0ey0nZ3eg7nsVfgwwYD9vlEnWV-fKdee5nhjdhJvMntsavyx_0sBbpaTd2xN/s1600/border+loader.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRahBwKVe_wtid36BrI8nIyY89LODUpijV92FYrsgM8yUVf2sFFm-dmDgF7xNB_xC9JePJLbd64VfIY9sImGn2IB1i8XaThmGnooMngkCb3_wLjIY94hfjOJcYoXGJMuLusnxbvJhLFuXa/s1600/Round+Loader.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuSrGB_EdYtYBayjRCxjxjBRR1oTF9Pr7lNQtWOqALckSLXXPL94ynuzg0MzGwqhfWTIFr8F5yu24GyUq2aFGrf8zB4oEUe1reAQobNwIqE4F9sGjUFkvft-fSy14RWp47Wj9v-VJUmAeY/s1600/arrow+loader.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7_DNxc3SRUOMisr0AUrtP4WRhchsD9kSAhZt5bH-6ICfCAatbAv4lxKwVrQO49s0K2xpw9xYNVn5RhHsQ0ARVJW-9Tc8KSkpKfcSm6LA-3nmLCWq43DFCeB9RUm9tLB2rYFPzc_M19KZR/s1600/silver+arrows+circle.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0nfSOOSTNWN8MvppB-PrReKWrZk_I5DZrg4xMDe_ZGZYIrd1p1fk2IWhNCtNNjvgzf1oG85gX4BKyAf-Jj4IrVh1BVhq0hh01jpqulpLUKR4nBoDRWeflDZRSClEjIlSYtRtwKt4wMTYH/s1600/blue.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4eP0MRs_Y3z2rWXdY9A5UEzDrK22jFaA-Q5LMZHQEIpkCcEKxLx8jS87g048uPGw1aOF8LRORJjFHqgg9IUotrhMfPXrt059RROyaBNoND7mg34JMrbR7zy31I62qgDNLoGQJxxCbM68C/s1600/red+loader.gif

Nguồn Blog DX - http://www.dxoan.com/

Read More

Tạo form đăng nhập cho Blogger (Blogspot)

DEMO

Thực tế thì Blogger không hề có phần đăng nhập hay đăng kí cho khách truy cập. Form đăng nhập này chỉ là đăng nhập qua tài khoản Google, tuy nhiên nó sẽ giúp blog của bạn có cái nhìn chuyên nghiệp hơn.

Cách làm:
Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm đoạn css này vào trước thẻ ]]></b:skin>

#slide-panel{background-color:#000;border-bottom:2px solid #838383;display:none;height:80px;margin:auto;padding-top:20px}
.slide{width:auto;margin:auto}
.btn-slide:link,.btn-slide:visited{color:#fff;float:right;display:block;font-size:14px;text-transform:uppercase;font-weight:bold;height:28px;padding:3px 0 3px 0;line-height:28px;text-align:center;text-decoration:none;width:80px;font-family:Arial;background:#000;margin-top:-2px}
.loginform{width:auto;margin:0 auto;color:#999;font-family:Arial,Helvetica,sans-serif}
.formdetails{color:#FFF;font-size:12px;padding:5px}
.formdetails input{border:none;padding:2px 5px;background-color:#EFEFEF}
.loginregister{color:#999;padding:5px}
.loginregister a:link,.loginregister a:visited{color:#90fff6;font-size:12px}
.loginregister a:hover{color:#fff}
.loginform h2{padding:10px 10px 10px 0;font-size:18px;font-weight:normal;text-transform:uppercase}
.loginform ul li{display:inline}
.loginform ul li a:link,.loginform ul li a:visited{color:#FFF;font-size:12px;text-decoration:underline}
input#signIn{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_TrEDcK7CxuV0wH98z34FhwaOFLU1_KXyD9MLwYAzhfz-08inOzldK_DdQmD0QnLcAX34QBzsy5spkPb4-tXtsXxUI0CwfjGsRGOjWiX__EPjfq4fiRPkaT85ZWbLOhJ24QrA2t4lzo/) no-repeat;width:94px;height:25px;cursor:pointer;padding-bottom:5px}
input#Email,input#Passwd{background:#414141;color:#fff}
input:focus#Email,input:focus#Passwd{background:#545454}

Tiếp theo, chèn đoạn code sau vào bên dưới thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.btn-slide&quot;).click(function(){$(&quot;#slide-panel&quot;).slideToggle(&quot;slow&quot;);});});
</script>

<div id='slide-panel'><div class='loginform'><div class='formdetails'>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&amp;continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;ltmpl=start&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8#s01' method='post'>

<label for='log'>Username : </label><input id='Email' name='Email' size='20' type='text'/>

<label for='pwd'>Password : </label><input id='Passwd' name='Passwd' size='20' type='password'/>

<input id='signIn' name='signIn' type='submit' value='Đăng nhập'/>

<label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Ghi nhớ</label>
</form></div>

<div class='loginregister'>
<a href='https://www.blogger.com/signup.g' target='_blank'>Đăng kí­</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Quên mật khẩu ?</a>
</div></div></div>

<div class='slide'><a class='btn-slide' href='#'>Login </a></div>

Lưu mẫu lại và xem thành quả nhé.

Tác giả: Noct
Nguồn: http://noct-land.blogspot.com/2011/03/form-ang-nhap-cho-blogspot.html

Read More