Truyện Cười BlogTaPhiet KC

Chat Box


--------------:Search

Hiển thị các bài đăng có nhãn Thủ Thuật Blog. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Thủ Thuật Blog. Hiển thị tất cả bài đăng

Thứ Năm, 29 tháng 12, 2011

[Thủ Thuật] Làm thế nào để hiển thị và ẩn các phần tử HTML bằng cách sử dụng Javascript

- Bài viết ngắn này cung cấp cho giải thích làm thế nào để hiện / ẩn các phần tử HTML bằng cách sử dụng jscript. Để xem kỷ hơn về nội dung xin mời xem thêm nguồn bài đăng ở cuối bài.
- Các bạn có thể xem demo bằng cách copy code vào Notepad.exe và lưu lại với tên.html !

<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
This text was hidden
</div>

<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>


NGUỒN:
http://interestingwebs.blogspot.com/2009/01/how-to-show-and-hide-html-elements.html
Sitemap:
http://choiblog-lienketlogo.blogspot.com/2011/12/sitemap-interestingwebsblogspotcom.html
[Click here to Read More]

[Thủ Thuật] javascript: Thay đổi văn bản

- Với 1 chút từ khóa theo phong cách chơi blog, mình tìm được blogger có bài đăng những mã javascript khá hay. Nhưng mình chỉ đăng code, còn việc thực thi và áp dụng thủ thuật tuỳ thuộc ở người ứng dụng. Các bạn có thể tự tìm hiểu theo link nguồn ở cuối bài đăng:
- Các bạn có thể xem demo bằng cách copy code vào Notepad.exe và lưu lại với tên.html !

1.Changing text with javascript after clicking a link
<script language="javascript">
function changeTextToAAA()
{
document.getElementById("divA").innerHTML = 'Text changed to AAA';
}

function changeTextToBBB()
{
document.getElementById("divA").innerHTML = 'Text changed to BBB';
}
</script>

<a href="javascript:changeTextToAAA();">Change text to AAA</a>
<a href="javascript:changeTextToBBB();">Change text to BBB</a>

<div id="divA"><h4>This text will be changed</h4></div>


2.Changing text with only one jscript function called from two links
<script language="javascript">
function changeText(newText)
{
document.getElementById("divB").innerHTML = newText;
}
</script>

<a href="javascript:changeText('First');">Change text to First</a>
<a href="javascript:changeText('Second');">Change text to Second</a>

<div id="divB"><h4>This text will be changed</h4></div>

3.One link changing text to pressed or unpressed
<script language="javascript">
function changeTextOfLink()
{
var link = document.getElementById("linkClick");

if (link.innerHTML == "Unpressed")
{
link.innerHTML = 'Pressed';
}
else
{
link.innerHTML = 'Unpressed';
}
}
</script>

<a href="javascript:changeTextOfLink();" id="linkClick">Unpressed</a>

4.Hide or show text in div and changing link text to "Hide" or "Show"
<script language="javascript">
function divToHide(divToHideOrShow) {
var link = document.getElementById("linkId1");
var div = document.getElementById(divToHideOrShow);

if (div.style.display == "block")
{
div.style.display = "none";
link.innerHTML = 'Show'
}
else
{
div.style.display = "block";
link.innerHTML = 'Hide';
}
}
</script>

<a href="javascript:divToHide('divShowHide');" id="linkId1">Hide</a>
<div id="divShowHide" style="position:absolute; display: block"><h4>This div will be hidden</h4></div>
NGUỒN:
http://interestingwebs.blogspot.com/2011/05/javascript-changing-text.html
sitemap:
http://choiblog-lienketlogo.blogspot.com/2011/12/sitemap-interestingwebsblogspotcom.html
[Click here to Read More]

Thứ Ba, 27 tháng 12, 2011

[Thủ Thuật] Bài viết liên Quan gồm danh sách ảnh và bài viết

- Ghé thăm blogger http://namkna.blogspot.com
- Mình có yêu cầu thủ thuật bài viết liên quan có ảnh đại diện và bài viết.
- Mình chỉ thay đổi phần css cho hợp với màu nền blog mình.
- Để hiểu rõ hơn bạn có thể xem hình minh họa hoặc xem ngay trên blogger namkana tại link nguồn bên dưới bài đăng !


- Cách thực hiện như sau:
Bước 1: Các bạn vào Thiết Kế, Chỉnh sửa HTML, sau đó dán đoạn Code bên dưới lên trên thẻ </head>

<style type='text/css'>
/* CSS THÊM: Bài viết liên Quan gồm danh sách ảnh và bài viết
----------------------------------------------- */
.baivietlienquan {
margin : 5px 5px 5px 5px;
padding : 1px;
clear : both;
list-style-type : none;
background : #adc7de url(http://www.vn520.org/@forum/gif/ok/201112182141001.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
color:#000;
font-weight: bold;
}
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0;margin:10px 0 5px 0;}
#related-posts h2{margin:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhycyRo93dq6-0tq8fqtXS6Fzzndnp2pafl3ggJle137y_Khg28mCO1E1EDWPquEvfA-vAbak7pxc7rkjhZjv1Ut4Xz9RCXU0tUB9frduUHVryFT_gCkKV4KBVizSCl4_ql5rqWSzi-eq4/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;}
#related-posts a:hover {background-color:#d4eaf2}
.lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 173px;margin:1px;overflow:hidden;line-height:1.4em}
.related-posts {margin: 0;padding: 0}
.related-posts ul {margin: 0;padding-top: 5px}
.related-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21HdNBYmydIt-PxF2A7nQwIVzZLJElgiEUCOZHkG-3UvNb0HnhbQzvlID_52vCOhyZznlQFk8MZ6Tk8SmrtLNgNYm-TyzDTyaQeRpisa9gBm1IMLZshi_MO5K1uqm2_MxqKbhbnZyrE2A/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word}
</style>

<!-- Start Related posts by namkna.blogspot.com -->
<script src='http://namknablog.googlecode.com/files/related-img-by-namkna-nt.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài vi?t liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>

</script>
</b:if>
<!-- End Related posts by namkna.blogspot.com -->

Lưu Template lại.
Bước 2: Chọn Mở rộng tiện ích mẫu và dán Code sau bên dưới dòng:

<div class='post-footer-line post-footer-line-2'/>
hoặc code sau:
<div class='post-footer-line post-footer-line-1'/>

<!-- Related posts by namkna.blogspot.com --> 
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=9&quot;' type='text/javascript'/>

</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=9;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div style='margin-bottom:5px;clear:both'/>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilwPnqKJ1il-Gj0ef7-IwClUT5dUAguXxfC9PL1oD7iq6X2MfguPGnUKgWB_g8h3rAh6N-deSIgku8Ky6haJG1U0RvlqRMAi2WVSXxyb-dT6idmawe6fBvNpzCqUfJ85kan76UaZAu8OA/s1600/cac-tin-khac-namkna-blogspot-com-ngoctra.jpg'/>
<div class='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=12;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>

</div>
<div class='clear'/>
<!-- Related posts by namkna.blogspot.com -->

Trong đó các bạn chú ý:
- max-results=9&quot là số bài ở dạng thumbnail
- var maxresults=12 là số bài ở dạng list.
Các bạn có thể xem hình ngay dưới sẽ thấy rõ hơn.

DOWNLOAD file js:
http://namknablog.googlecode.com/files/related-img-by-namkna-nt.js
or
http://www.4shared.com/rar/kPfAsMbv/related-img-by-namkna-nt.html
or
http://choiblogs-related-img-by.googlecode.com/files/related-img-by-namkna-nt.js
NGUỒN:
http://namkna.blogspot.com/2011/12/bai-viet-lien-quan-gom-danh-sach-anh-va.html?showComment=1325010021158#c2113074943228154446
[Click here to Read More]

Thứ Bảy, 17 tháng 12, 2011

[Thủ Thuật] Tiện ích Recent Posts 3 cột cho Blogspot


- Tiện ích này rất thích hợp cho các trang giới thiệu phần mềm, ebook, quảng cáo sản phẩm,…kết hợp sử dụng tiện ích Multi Tabbed Widget For Blogger sẽ càng làm cho Blog của bạn trông ngăn nắp và chuyên nghiệp hơn.
- Hướng dẫn cách tạo widget Recent Posts with 3 columns for Blogger qua 2 bước đơn giản.

Thực hiện:
1. Vào Thiết kế > Phần tử trang
2. Tạo một widget HTML/JavaScript và dán code bên dưới vào :

<style type="text/css">
#itechplus-rc-3cot {width:350px;}
table#itechplus-rc-3cot {border:1px solid #ccc;}
#rc-3cot {padding:0 8px;width:30%;}
#rc-3cot p{padding:0;margin:0 0 5px 0;}
#rc-3cot img {margin:8px 0 2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-3cot a:link {font:normal 12px arial;}
#itechplus-rc-3cot h2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3wl1FnUuFr8AdBWsq2fumPzmM2JgJ_gtUZnUNwJBgeYQ6WAwYu7T82mmz6lKLu0jP-QebqLCihRVZnqPWnwp7e_dlUZEliMTrJECRDWUuKhJLHJLVn1up7dKPqb7Madyx2LtEinCYP14/) no-repeat top left;
padding:5px 0 14px 15px;
font:bold 13px Verdana;
margin:0px;
color:#fff;
}
</style>
<script type="text/javascript">
home_page = "http://choiblogs.blogspot.com/";
label = "Software";
numposts = 9;
sumTitle = 24;
colortitle = "#333";
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRPMyoiKcJL1dj6y-C2m_8l7j1UVPfa9fRa-sqjUSu9kRiZqExNqoZR_82wLtlxLo-SKruC8LGKOuN-OxjOhkFFkPln06We0_etfrSnxqPjK-7G9blQHYXIDmqZiOwdUNjutnEwTiUgk/";
showRandomImg = true;
</script>
<div id="itechplus-rc-3cot">
<h2>Phần Mềm Mới</h2>
<script src="http://cuncon1202.googlecode.com/files/itechplus-rc-3cot.js" type="text/javascript"></script>
<p style="float:right;margin:0;padding:3px">Xem thêm về<a href="http://choiblogs.blogspot.com/search/label/Software?&max-results=20"> New soft &#187;</a></p>
</div>


Trong đoạn code trên:
* width:350px; : chiều rộng của widget
* height:50px; width:50px; : chiều rộng và chiều cao của ảnh đại diện
* home_page = "http://choiblogs.blogspot.com/"; : địa chỉ blog của bạn
* label = "Tin Giao Thông"; : tên trương mục muốn hiển thị
* numposts = 9; : số bài viết sẽ hiển thị
* sumTitle = 24; : số ký tự dòng tiêu đề bài đăng
* colortitle = "#333"; : màu tiêu đề bài đăng
* imgr[0] = “…”; : hình đại diện cho bài viết không có ảnh

LƯU FILE .JS
http://www.4shared.com/file/nD93gdBI/thu-thuat-tien-ich-recent-post.html
or
http://cuncon1202.googlecode.com/files/itechplus-rc-3cot.js
NGUỒN:
http://www.cuncon1202.net/2011/12/tien-ich-recent-posts-3-cot-cho.html
[Click here to Read More]

Thứ Bảy, 10 tháng 12, 2011

[Thủ Thuật] Chèn banner quảng cáo cấu trúc 4 ô hình ảnh

- Tôi thường ghé thăm các blogger khác để học, hỏi và hành. Tôi thấy những banner có 4 ô nhỏ nằm ở thẻ tiện ích HTML/Javascript. Nên nghĩ là cần phải đem về làm một tiện ích cho mình và sẵn chia sẻ nó lên blog như một thủ thuật.

- Chỉ việc chém mã vào thẻ tiện ích HTML/Javascript, và chỉnh sửa một số link nữa là xong.

<style>
.banner {padding:5px 0;margin:0 auto;float:center;text-align:center}
.banner img{width:150px;height:150px;padding:3px;list-style:none;display:block;overflow:hidden;float:left;background:#B88A00 ;border:1px dashed #707070;margin:2px 2px 2px;}
.banner img:hover {width:195px;padding:3px;list-style:none;display:block;
overflow:hidden;float:left;background:#FFCC33;border:1px dashed #707070;margin:2px 2px 2px;}
</style>

<div style="text-align: center;">
<div class="banner">
<a href="http://choiblogs.blogspot.com/2011/11/rao-ban-ban-auto-cay-kinh-nghiem-tien.html" target="_blank" title="[Rao Bán] Bán auto cày kinh nghiệm + tiền + nguyên liệu (Gaw2) "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJx06xnW-vKOXQbYTFD01axDLq-Ep4qPx6gt1TObGFgFzaiOru8zRpKQm3BiHG2tM310D89BvTRqHjjhnTw4kuPMGbO9JxQkCLWi-HAKJGDScEGUpmTAYwH1h113f8_YqCQHHYOcrsh8/s400/auto+gaw+2.gif" title="[Rao Bán] Bán auto cày kinh nghiệm + tiền + nguyên liệu (Gaw2) " /></a>

<a href="http://choiblogs.blogspot.com/2011/08/rao-ban-gaw-2-tai-khoan-game-1-trang-bi.html" target="_blank" rel="nofollow" title="[Rao Bán] Gaw 2 - Tài khoản game + 1 trang bị VIP "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIggvDp4zJYq1pn6zuJIW1k0MIm5D2tP9upcQPk0RngzY12RIdR0K1oKAmjsRBdpC7vuQXPkD8bFsEjkog0FXh5_peVzQ8n4HZF-sjROQBoJUjb26vfX10mtdqO8NSMaPTvnfQE7Iwbxo/s1600/otrung.jpg" title="[Rao Bán] Gaw 2 - Tài khoản game + 1 trang bị VIP" /></a>

<a href="http://choiblogs.blogspot.com/2011/11/rao-ban-ban-vang-sll-trong-gaw-2.html" target="_blank" rel="nofollow" title="[Rao Bán] Bán Vàng SLL trong gaw 2 "><img alt="Hosting Para Blogs" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvYqEup6Wr7laCF3cbXYX17EbnCPHalhqkW6orGJ9BXbjBN3GKSoZNvZHdPFEwONEjuOl_c52Kl_JqcK95d20dD8Q-B0dT7eWyCDWIl9YJ71j4pw14omjCx7nbKo15-QGmDjsarN_3k8/s1600/ban-vang-gaw.gif" title="[Rao Bán] Bán Vàng SLL trong gaw 2 " />
</a>

<a href="http://choiblogs.blogspot.com/2011/12/rao-ban-ban-cho-con-200-ngancon-ban-het.html" target="_blank" rel="nofollow" title="[Rao Bán] Bán chó con 200 ngàn/con "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ3ljH0uD84F8I5_fLX6BA-UcyM9y8i9-alhmt8hwA8GqbZ3kPsLLCnRlrqcF1spORTdf6yo8NCSl2EFHBpYk-uY129a0pmJ8OzopRqV3mHGnBM6cXL-67TG2pXKGNgJPjqirytSBEA_k/s400/choiblogs-banchocon.jpeg" title="[Rao Bán] Bán chó con 200 ngàn/con " /></a>
</div></div>

- Phân tích css:

Nguồn:
http://truyen-bay68-com.blogspot.com
[Click here to Read More]

Thứ Sáu, 9 tháng 12, 2011

[Thủ Thuật] Cách thêm nút Reply đẹp cho Comment của Blogger/Blogspot

Chắc hẳn ai sử dụng blog Wordpress đã quá quen thuộc với nút Reply. Nút Reply hay Trả lời xuất hiện trong trong mục Comment của Blog giúp bạn đọc dễ dàng theo dõi Comment của từng người. Hiện tại nút Reply tại hướng dẫn này chỉ có tác dụng thêm ký tự @ vào tên người mà nhận trả lời kèm theo link đến comment đó. Bài viết này mình sẽ hướng dẫn các bạn thêm nút Reply đẹp vào Blogger cho các bạn.

1. Đăng nhập vào tài khoản Blogger >> Chọn Blog cần quản lý:
2. Vào Mẫu >> Chỉnh sửa HTML
3. Check phần Mở rộng Mẫu Tiện ích
4. Tìm đoạn mã ( Ctrl + F để tìm) như sau:

<data:commentPostedByMsg/>

và thêm vào ngay sau nó đoạn mã :

<span><a class='cm_reply' expr:href='&quot;https://www.blogger.com/comment.g?blogID=7403020410772635599&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>Reply</a></span>

Lưu ý: Thay chuỗi số màu đỏ đậm (7403020410772635599) thành BlogID của bạn.

Xác định BlogID bằng cách nhìn lên thanh địa chỉ và copy blogID của bạn vào đó. Xem hình:


5. Thêm CSS làm đẹp:

Tìm ]]></b:skin> và thêm vào trên nó đoạn mã :

.cm_reply {border-bottom-color:#DDDDDD;
border-bottom-left-radius:4px 4px;
border-bottom-right-radius:4px 4px;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:#DDDDDD;
border-left-style:solid;
border-left-width:1px;
border-right-color:#DDDDDD;
border-right-style:solid;
border-right-width:1px;
border-top-color:#DDDDDD;
border-top-left-radius:4px 4px;
border-top-right-radius:4px 4px;
border-top-style:solid;
border-top-width:1px;
color:#999999;
float: right;
font-size:10px;
line-height:1em;
margin-right:-6px;
margin-top:30px;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
padding-top:3px;
text-transform:uppercase;
}
.cm_reply:hover {
background: #eb7d1d;
text-decoration: none;
}

Lưu ý : CSS mình chỉ tìm hiểu trên mạng, nếu có thể tối giản mong bạn tối giản hộ mình nhé ^^!
Tính năng:
- Khi bấm vào Reply sẽ hiện ra 1 cửa sổ mới cho bạn viết nhận xét.
- Các nhận xét sẽ không được hiển thị theo level như bên WordPress.
- Tự động thêm ký tự @ vào tên người mà nhận trả lời kèm theo link đến comment đó.
- Thủ thuật không có hiệu lực trên Disqus.

NGUỒN:
http://www.buitruonganh.tk/2011/12/cach-them-nut-reply-dep-cho-comment.html?showComment=1323453125881#c1674943273443103078
[Click here to Read More]

[Thủ Thuật] Cách vào trang blogspot.com với mạng VNPT

Hiện tại các bạn sử dụng mạng VNPT không thể truy cập được vào trang blogspot.com được. Các xử lý đơn giản như sau.

Vào phần cấu hình mạng đổi DNS thành
4.2.2.3
4.2.2.4


Nhân đây mình dành vài dòng để giới thiệu qua về blogspot - một trong những dịch vụ cho phép tạo blog miễn phí được cung cấp bởi Google:

Chúng tôi đã tạo Blogger nhằm cung cấp cho bạn một cách đơn giản để chia sẻ suy nghĩ của mình về các sự kiện hiện thời, những gì đang diễn ra trong cuộc sống của bạn, hoặc bất kỳ điều gì khác mà bạn muốn thảo luận — với mọi người. Chúng tôi đã phát triển rất nhiều tính năng để giúp cho việc viết blog càng đơn giản và hiệu quả càng tốt.

Trình thiết kế mẫu cho blogger cung cấp nhiều mẫu, giúp bạn dễ dàng tạo nên một blog có giao diện chuyên nghiệp. Ngoài ra, Trình thiết kế Mẫu cho phép bạn tùy chỉnh mẫu của mình. Chọn từ hàng trăm hình nền, hàng chục bố cục linh hoạt và sắp xếp lại các phần tử trang thông qua giao diện kéo và thả. Thêm các tiện ích như trình chiếu, thăm dò ý kiến người dùng hoặc thậm chí các quảng cáo AdSense. Cũng thật dễ dàng thay đổi màu sắc và phông chữ. Và nếu mức độ kiểm soát như vậy vẫn chưa đủ, bạn thậm chí còn có thể chỉnh sửa CSS và HTML của blog của mình.

http://www.blogger.com/features


NGUỒN:
http://www.vnpressnet.com/2011/12/cach-vao-trang-blogspotcom-voi-mang.html
[Click here to Read More]

Thứ Năm, 8 tháng 12, 2011

[Thủ Thuật] Tạo thông báo chỉ hiển thị với người nhận xét đầu tiên

Thủ thuật này hướng dẫn bạn tạo thông báo chúc mừng tới người nhận xét đầu tiên trong bài viết và chỉ hiển thị cho người đó xem. Thông báo này được hiển thị ngay dưới nội dung nhận xét của người đó.


Thêm đoạn mã dưới đây vào sau thẻ <data:comment.body/> thứ 2 trong template của bạn.

<b:if cond='data:post.numComments == 1'>
<div expr:class='&quot;item-control &quot; + data:comment.adminClass' style='margin-top:10px;border:1px solid #116420;background:#237f33;padding:5px;color:#FFF'>Chúc mừng <b><data:comment.author/></b> bóc tem bài <i><data:post.title/></i></div>

</b:if>


NGUỒN:
http://blog.duypham.info/2011/12/thong-bao-voi-nguoi-nhan-xet-dau-tien.html
[Click here to Read More]

Thứ Sáu, 11 tháng 11, 2011

[Thủ Thuật] Bài viết liên quan cho Blogger - Related posts


Trước đây thủ thuật "Tạo bài viết liên quan theo nhãn" thường có nhược điểm là lỗi hiển thị với tên nhãn Tiếng Việt và vẫn hiển thị tên bài đang xem ở danh sách bài viết liên quan.
Thủ thuật mình giới thiệu sau đây sẽ khắc phục 2 nhược điểm đó. Thủ thuật này được phát triển bởi một blogger người Ấn Độ tại địa chỉ Way2Blogging và mình có thêm tính năng hiển thị ngày tháng đăng bài khi đưa chuột vào tên bài viết.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài viết liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>

</script>
</b:if>


Bước 2: Bài viết liên quan thường được hiển thị bên dưới mỗi bài viết. Trong template của Blogger thì những tiện ích đặt bên dưới mỗi bài viết thường nằm trong cặp thẻ <div class='post-footer'></div>. Thêm đoạn mã dưới đây vào bên trong cặp thẻ <div class='post-footer'></div> ở template của bạn.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
        <b>Bài viết liên quan:</b>
        <b:loop values='data:post.labels' var='label'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
        </b:loop>
        <script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>

    </div>
</b:if>
NGUỒN:
http://blog.duypham.info/2011/01/bai-viet-lien-quan-cho-blogger.html
[Click here to Read More]

Thứ Năm, 3 tháng 11, 2011

[Thủ Thuật] Code phóng to ảnh khi rê chuột đến (dành cho blog)


- Chèn đọan code CSS bên dưới vào trước dòng code </head>

<style type='text/css'>
.img-thumbnail{position: relative;z-index: 0;}

.img-thumbnail:hover{background-color: transparent;z-index: 50;}

.img-thumbnail span{position: absolute;background-color: #ffffff;padding: 5px;left: -1000px;border: 1px solid #000;visibility: hidden;color: black;text-decoration: none;}

.img-thumbnail span img{border-width: 0;padding: 2px;}

.img-thumbnail:hover span{visibility: visible;top: -100px;left:100px;}
</style>

Dòng TOP ,LEFT là vị trí popup. Hãy điều chỉnh 2 giá trị này để có được vị trí thích hợp.

Cuối cùng là thêm code HTML

<class="img-thumbnail" href="#">
<
img src="link ảnh1" border="0" height="98" width="130"/>
<
span>
<
img src="link ảnh1"/>
</
span>
</
a>
NGUỒN:
http://sinhvienit.net/@forum/showthread.php?t=30041
[Click here to Read More]

Thứ Sáu, 28 tháng 10, 2011

[Thủ Thuật] Tạo trang chuyển tiếp để tăng PageRank

ChoiBlogs

Tác dụng của thủ thuật này là giúp các bạn track (theo dõi bằng Google Analytics) được tỉ lệ click vào các liên kết bên ngoài blog của mình. Rất bổ ích cho việc đo lường tính hiệu quả của các chương trình đặt banner quảng cáo, cũng như tỉ lệ click affiliate link trên blogspot của bạn.

Kế tiếp, bạn hãy mở template lên (chọn tab design/edit HTML trong dashboard) tìm đoạn code sau:

<b:skin><![CDATA[

Rồi copy đoạn code sau dán lên phía trên đoạn code vừa tìm được:

<script type='text/javascript'>
var url_index = window.location.href.indexOf('url=');
if (url_index != -1)
{
url_go = window.location.href;
url_go = url_go.substring(url_index + 4);
//document.write(url_go);
window.location.href = url_go;
}
</script>

Như vậy là đã xong, mọi việc đơn giản chỉ có thế!

url_go là trang bạn muốn chuyển đến.

NGUỒN:
http://namkna.blogspot.com/2011/10/tao-trang-chuyen-tiep-e-tang-pagerank.html
[Click here to Read More]

Thứ Năm, 20 tháng 10, 2011

[Thủ Thuật] Chú thích riêng cho nhận xét của chủ blog

Một thủ thuật khá hay giúp tạo sự khác biệt cho comment của chủ blog. Ta có thể thêm chú thích vào sau tên chủ blog là admin chẳng hạn. Giống như việc chú thích chức vụ của mod trong forum vậy.

CÁCH THỰC HIỆN
1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)
4. Chèn script

Bước 1: Tìm dòng code
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

- Thêm vào sau nó đoạn code sau:
<!-- Thêm chú thích cho nhận xét của tác giả bài viết (1)-->
<b:if cond='data:comment.adminClass == data:post.adminClass'>
<span class='admin-comment'>(Admin)</span>
</b:if>

Thay “Admin” thành Chủ blog, Tác giả bài viết,… hay bất cứ gì bạn muốn gán.

Bước 2: Nếu blog có nhiều người viết bài, có lẽ bạn muốn thêm ghi chú khác nhau sau mỗi tên.
Ví dụ như: Cộng tác viên, khách mời,.v.v
- Trong đoạn code ở bước 1, tìm thẻ đóng </b:if>

- Thêm vào trước nó đoạn code sau:
<b:else/>
<b:if cond='data:comment.authorClass == "blog-author"'>
<b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/04825632223752574790"'>
<span class='author-comment'>(Cộng tác viên)</span>
</b:if>
</b:if>

Thay  http://www.blogger.com/profile/04825632223752574790  thành link profile của bạn muốn đưa vào.


- Nếu muốn thêm nhiều chú thích tác giả nữa thì cứ lặp lại code trên.

- Hoặc chú thích chung cho các tác giả được mời cùng viết blog, ta dùng code sau:
<b:else/>
<b:if cond='data:comment.authorClass == "blog-author"'>
<span class='author-comment'>(Cộng tác viên)</span>
</b:if>

Bước 3: Tìm dòng
]]></b:skin>

- Thêm vào trước nó đoạn code sau:

/* Thêm chú thích cho nhận xét của tác giả bài viết (2)*/
/*Admin*/
.admin-comment{
background:#FCFCE5; /*Màu nền*/
color:#339966; /*Màu chữ*/
}

/*Cộng tác viên*/
.author-comment{
background:#fff; /*Màu nền*/
color:#3366ff; /*Màu chữ*/
}

Bạn có thể thêm các thuộc tính khác như: đường viền, font chữ, cỡ chữ,v.v

Bước 4: Save template. (Lưu mẫu)
NGUỒN:
http://www.blogger.vnabout.com/2011/10/chu-thich-rieng-cho-nhan-xet-cua-chu.html
[Click here to Read More]

Thứ Tư, 19 tháng 10, 2011

[Thủ Thuật] Emoticons for Blogspot (work in IE) - Biểu tượng mặt cười cho Blogspot

Blogspot luôn bị so sánh với Wordpress bởi đây là 2 nền tảng blog hàng đầu hiện nay. Ngoài khả năng SEO như mình đề cập đến trong bài trước thì hệ thống Nhận xét của blogspot cũng bị chê bai rất nhiều và điều nhận thấy rõ nhất là hiện nay một số blogger đã chuyển sang dùng Nhận xét bên ngoài như của Disqus, IntenseDebate... Lý do có lẽ là việc reply lại Nhận xét trên blogspot khó khăn và không trực quan như Wordpress, đến giờ cũng chỉ hiển thị được avatar cho tài khoản Google, không chỉnh sửa được khung Đăng Nhận xét...

Khung Đăng Nhận xét của blogspot là một trang riêng được chèn vào blog thông qua thẻ iframe và Google không cho ta quyền can thiệp vào khung Đăng Nhận xét này. Đó là lý do mà không đưa được bộ gõ riêng cũng như emoticons vào khung Đăng Nhận xét. Với bộ gõ thì dường như không thể cho đến khi nào Google tích hợp thêm vào. Còn với emoticons thì thật may là có hàm replace, sử dụng hàm này để thay đổi ký tự thành hình ảnh và blogspot đã có emoticons cho dù việc nhập emoticons không thể theo kiểu click.

Emoticons cho blogspot đã được giới thiệu khá lâu rồi, trong bài này mình sẽ hướng dẫn các bạn tạo emoticons cho khung Nhận xét sao cho hiển thị được cả trên các phiên bản trình duyệt Internet Explorer (IE).

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/> hoặc <data:blogCommentMessage/> 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 &lt;
  • Với ký tự > phải đổi thành &gt;
  • Với ký tự & phải đổi thành &amp;
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ư :)):) 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).


NGUỒN:
http://blog.duypham.info/2010/11/emoticons-for-blogspot-work-in-ie.html
[Click here to Read More]

[Thủ Thuật] Bài viết ngẫu nhiên tốc độ cao cho Blogger

Một trong những tiện ích mình kiêng kỵ nhất là Random Posts, bởi tiện ích này tải toàn bộ dữ liệu từ feed về, không những làm chậm tốc độ cho blog mà còn không chính xác với blog có trên 500 bài viết - đây là con số bài viết tối đa được feed tải về. Trong tiện ích mình giới thiệu sau đây thay vì 1 lần tải toàn bộ feed thì mình tải lần lượt theo số bài viết muốn hiển thị và chỉ lấy duy nhất 1 bài trong 1 lần tải. Trước đó sẽ có 1 lần tải dữ liệu đầu tiên từ feed để xác định tổng số bài viết hiện có, 1 hàm lấy ngẫu nhiên 5 số khác nhau từ 1 đến tổng số bài viết. Ví dụ muốn hiển thị 5 bài viết ngẫu nhiên thì sẽ có 6 lần tải feed, mặc dù số lần lấy nhiều nhưng dung lượng 1 lần lấy lại nhỏ. Khối lượng chỉ tương đương với blog bạn có tổng số bài viết là 6, so sánh vậy để thấy nếu blog càng nhiều bài viết thì tiện ích này có tốc độ nhanh hơn kiểu tải toàn bộ feed rất nhiều lần.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Random Posts. Hiệu chỉnh Tiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_info='yes';
var rdp_comment='Nhận xét';
var rdp_disable='Tắt Nhận xét';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};

</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPwb8-PyTAw60HpsqyXiLyRgkWEhezBaWwLgMJG8u9U2lk8g86dMdkEnr8zElSOJVlaWVPiZRgvqondP-1y1bFMpkAis9kzay87B7sIHLmgEAuDD9aZBNzZuRKxVU9F8z3S72NeQjdDtkQ/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};

</script>
</ul>

*Thay 5 bằng số bài viết bạn muốn hiển thị. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.

NGUỒN:
http://blog.duypham.info/2011/10/random-posts-for-blogger-high-speed.html
[Click here to Read More]

Thứ Sáu, 16 tháng 9, 2011

[Thủ Thuật] Tự động chèn video Youtube chỉ bằng ID vào bài viết

Đối với các blogspot chuyên đăng video clip lấy từ Youtube thì công việc chèn video cần được tự động hóa, giúp người quản trị đỡ phần mệt nhọc. Ngoài cách chèn tự động trước đây mình đã giới thiệu, hôm nay mình giới thiệu tiếp một cách khác. Trước tiên bạn cần đặt một đoạn script tạo chức năng chèn video tự động trước thẻ </head> trong Template.

<script type='text/javascript'>
//<![CDATA[
// // [Thủ Thuật] Tự động chèn video Youtube chỉ bằng ID vào bài viết www.thuthuatblogger.info
function insert_YouTube(IDyoutube) {
var width = 534; // có thể chỉnh chiều rộng khung video
var height = 302; // có thể chỉnh chiều cao khung video
var output = "<div style=\"text-align:center;\">";
output = '<iframe width="'+width+'" height="'+height+'" src="http://www.youtube.com/embed/'+IDyoutube+'?rel=0" frameborder="0" allowfullscreen>'; // rel=0 giúp vô hiệu hóa chức năng video liên quan
output += "</iframe>";
output += "</div>";
document.write (output);
}
//]]>
</script>

Đến đây, mỗi khi đăng bài viết, ở chế độ Edit HTML trong công cụ đăng bài, bạn chỉ việc đặt code như sau:

<!-- more -->
<script>insert_YouTube("XXXXXXXXXXX");</script>


Trong đó XXXXXXXXXXX chính là ID của video trên Youtube.
Ưu điểm của cách này so với cách cũ là khi đang play video, click vào màn hình video thì sẽ không xuất hiện tab dẫn đến trang video Youtube (trong khi cách cũ vẫn bị tình trạng này).

Nguồn:
http://www.thuthuatblogger.info/2011/09/tu-dong-chen-video-youtube.html
[Click here to Read More]

Thứ Tư, 10 tháng 8, 2011

[Thủ thuật] Tiện ích bài viết ngẫu nhiên hiệu ứng Slide Out bằng JQuery


– Thủ thuật này sẽ tạo một tiện ích Random Posts với hiệu ứng Slide Out, tiện ích này sẽ được ẩn phía bên phải và hiện ra khi bạn rê chuột vào ảnh thumb. Hơn nữa còn có một tiện ích giúp bạn có thể trao đổi qua lại giữa các bài viết trong list có sẵn. Có thể nói bạn hơi khó hình dung ra đươc, để thấy rỏ tiện ích này bạn có thể copy code và dán vào Notepad và save lại với name.html

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<script src="http://traidatmui-tips.googlecode.com/files/jquery.min.v1.4.1.js"
type="text/javascript"></script>
<style type='text/css'>
.re_slideout {
font-family:arial;
position:fixed;
right:-336px;
top:100px;
margin:0;
padding:0;
}

.randtitle{
font-family:times;
background:#eee;
margin:0px 0px 5px -52px;
padding:4px;
font-size:10px;
color:#fb4201;
text-shadow:1px 1px 1px #666;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;}

.rp_shuffle{
background:#222
url(https://lh5.googleusercontent.com/-dAn_9NVANm4/Tj4p-IE6gNI/AAAAAAAAAeM/9mC4ER8Fz-Q/shuffle.png
) no-repeat 10px 50%;
width:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursor:pointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}

.re_slideout ul{
margin:0;
padding:0;
list-style:none;
}

.re_slideout ul li{
width: 370px;
margin-bottom:3px;
display:none;
}

.re_slideout ul li div{
display: block;
line-height:15px;
width: 370px;
height: 82px;
background:#eee;
border:1px solid #333;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}

.re_slideout ul li div img{
width:70px;
padding:2px;
float:left;
margin:4px 5px 0px 4px;
border:1px solid #ccc;
}

.re_slideout h2 {
font-size:15px;
height:46px;
margin:4px 0px 0px 20px;
display:block;
text-shadow:1px 1px 1px #000;
padding-top:1px;
background:transparent;
}

.re_slideout a{color:#000;}
.re_slideout a:hover{color:#666;}
</style>


<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHnbygJUCVN2ckRAGXK0kPs2g4511_NE8e3d-znm5cgTnqJRM8NljuMsUPFm-eATvFIaJGm5PQimBQypuDekYcM_yiZFo-pe8mzlDKxGxkpUoOz18QnbtNV60i-AT7egcoFBDShQ-EgbQ/";
showRandomImg = true;
imgwidth = 70; //độ rộng ảnh thumb
imgheight = 68; //chiều cao của ảnh thumb
aBold = true;
text = "nhận xét";
showPostDate = true;
numposts = 15; //số bài viết hiển thị
home_page = "http://www.CHOIBLOG-HOME.BLOGSOPT.COM/"; //thay thành địa chỉ blog
của bạn

</script>
<div id="re_slideout" class="re_slideout">
<div class="randtitle"><b>RANDOM
POST
S</b></div>
<script src="http://traidatmui-tips.googlecode.com/files/slideout_rand_post.js"
type="text/javascript"></script>
<span id="rp_shuffle" class="rp_shuffle"></span>
</div>
Bạn chỉnh sửa theo hướng dẫn trên cho phù hợp, lưu ý là số bài viết hiển thị mình đã mặc định trong file script là 5 bài viết, nếu muốn chỉnh sửa lại số bài hiển thị có thể mở file JS lên và mặc định lại

4. Save tiện ích lại là xong

ST:
Địa chỉ bài viết: http://www.traidatmui.com/2011/08/tien-ich-bai-viet-ngau-nhien-hieu-ung.html

[Click here to Read More]

Thứ Tư, 20 tháng 7, 2011

[Thủ Thuật] Tạo hộp thoại thông báo với hiệu ứng trượt

Một hộp thoại thông báo rất cần thiết cho bất kỳ website hay webblog, có tác dụng đặt một đoạn text với nội dung chào mừng bạn đọc hoặc gửi lời nhắn đến bạn đọc về một vấn đề gì đó. Có nhiều cách để tạo một thông báo như vậy, trong số đó nổi bật nhất có sử dụng thư viện jQuery để tạo hiệu ứng trượt.

Nếu bạn muốn tạo một hộp thoại thông báo như vậ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>
#slidebox{
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #E28409;
position:fixed;
bottom:0px;
right:-430px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;
}
</style>


Bước 2. Đặt đoạn code bên dưới vào trước thẻ </body>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js ' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
//]]>
</script>

Bước 3. Đặt đoạn code bên dưới vào trước thẻ <div id='footer'>.

<p id='last'/>
<div id="slidebox">
<a class="close">[×]</a>
<p>Nội dung thông báo.</p>
</div>

Lưu Template.

Hy vọng bạn sẽ hài lòng với thủ thuật nhỏ này và mong nhận ý kiến góp ý của bạn đọc để có thêm ý tưởng mới.

ST:
http://www.bloggerism.tk/2011/07/tao-hop-thoai-thong-bao-voi-hieu-ung.html#footer
[Click here to Read More]

Thứ Bảy, 9 tháng 7, 2011

[Thủ Thuật] Tạo banner quảng cáo hiển thị luân phiên

Nói đến quảng cáo trên trang web, thông thường tại một không gian web cố định bạn chỉ có thể đặt 1 banner, lấy ví dụ trên phần Header về bên phải bạn chỉ có thể đặt 1 banner có kích thước 468x60. Script sau đây sẽ giúp tạo hiệu ứng chạy luân phiên các banner, từ đó trang web của bạn sẽ trở nên sinh động hơn.

ChoiBlog.TK

Để thực hiện thủ thuật này, bạn hãy sử dụng code như bên dưới (đặt trong một tiện ích HTML/Javascript đối với Blogger).

<script type="text/javascript">
// Banner Rotation Script by Bloggerism
var ban = new Array();
var link = new Array();
var index = 0;

ban[0] = new Image();
ban[0].src = "URL_banner_0";
link[0] = "URL_link_0";

ban[1] = new Image();
ban[1].src = "URL_banner_1";
link[1] = "URL_link_1";

ban[2] = new Image();
ban[2].src = "URL_banner_2";
link[2] = "URL_link_2";
index = Math.random() * (ban.length);
index = Math.floor(index);

function rotator()
{if (index == ban.length) index = 0;
if (document.images) {
document.images.rotation.src = ban[index].src;
}

else {
document.getElementById('rotation').src=ban[index].src;
}

index++;
setTimeout('rotator()',3000);
}

function go() {window.open(link[index-1]);}
</script>

<img id="rotation" style="cursor:pointer;" src="" onclick="go();"/>
<script type="text/javascript">rotator();</script>

Trong đoạn code trên bạn lần lượt thay thế URL_banner tương ứng với URL_link.

Chú ý số 3000 ám chỉ 3000 mili giây, tương đương 3 giây chỉ khoảng cách giữa các lần chuyển banner. Bạn có thể điều chỉnh con số này tùy ý.

ST:
http://www.bloggerism.tk/2011/07/tao-banner-quang-cao-hien-thi-luan.html
[Click here to Read More]

Thứ Ba, 5 tháng 7, 2011

[Thủ Thuật] Để bài viết tìm thấy từ Google.

Cách đăng kí blog lên google, tức là đăng kí URL đường dẫn blog của bạn lên google, khi bạn viết bài thì những thông tin hay gì đó trong blog của các bạn sẽ được cập nhật ngay trong vòng mấy tiếng đồng hồ sau đó.

Bạn muốn đưa blog của mình lên các công cụ tìm kiếm như Google.com để có thêm nhiều người vào tham quan. Vậy bạn hãy vào website

http://www.google.com/addurl/

Sau khi vào trang trên, bạn kéo thanh trượt xuống phía dưới, đến ô URL. Bạn nhập địa chỉ blog cần đăng lên vào ô Add URL. Ghi tiêu đề cho phần bạn đăng lên trong ô Comments. Nhập đoạn mã màu xanh vào ô bên dưới. Sau đó click vào Add URL.

ChoiBlog.TK

Chúc các bạn sẽ có thêm nhiều bạn mới qua trang blog của bạn nhé !!!

ST:
http://baoqtt.blogspot.com/2010/12/e-bai-viet-tim-thay-tu-google.html
[Click here to Read More]

Thứ Sáu, 1 tháng 7, 2011

[Thủ Thuật] Hình ảnh của bạn trên máy chủ Blogger miễn phí với băng thông không giới hạn

ChoiBlog.TK

- Thủ thuật giúp bạn tận dụng tối đa băng thông miễn phí một cách tốt nhất.
- Hình ảnh của bạn đăng trên máy chủ Blogger miễn phí với băng thông không giới hạn. Hiện có rất nhiều các trang web lưu trữ hình ảnh miễn phí online. Một số các trang web phổ biến nhất bao gồm ImageShack, Photobucket, Tinypic, rung, Picasa, vv... Nhưng tất cả đều có tính năng giới hạn, giống như một số giới hạn của tải lên, hình ảnh giới hạn kích thước, tốc độ ít và giới hạn băng thông đặc biệt. Ở đây, chúng ta đang trên nền tảng blogger, Blogger cho hình ảnh lưu trữ miễn phí với băng thông không giới hạn. Tất cả chúng ta cần biết là làm thế nào để tải lên các hình ảnh để blogger.

- Nâng cao thủ thuật:
+ Các bạn tạo blog mới, và đặt tên là ( host pic blogger ) từ giờ trở đi bạn đăng ảnh tại đây để lấy link và dán vào bài viết tại blog chính.

Host your Image on Blogger for Free with Unlimited Bandwidth
http://www.way2blogging.org/2011/06/host-images-blogger-free-unlimited.html
[Click here to Read More]
/
Top