Sự Khởi Đầu Mới: 09/10/12

Thứ Hai, 10 tháng 9, 2012

Tạo Khung Quick Comments Cho Blog

Trước đây khi viết blog trên hệ thống blog360 của yahoo có một tiện ích mình rất thích đó là khung quick comments. Nhưng về sau này dường như mình không còn nhìn thấy sự hiện diện của tiện ích đó nữa. Hiện tại thì có rất nhiều cách để tạo được khung quick comments này. Và mình xin hướng dẫn 1 cách theo mình là khá đơn giản và rất nhanh.

Đầu tiên bạn truy cập vào TRANG NÀY điền đầy đủ thông tin để đăng ký cho mình 1 tài khoản. Nhớ tick vào mục "I have read and do agree to ..." trước khi chọn Create my Cbox!

Sau đó bạn login vào bằng tài khoản vừa đăng nhập. Chọn mục Puplish! ở phía trên trang web.

Bạn copy toàn bộ đoạn code trong khung trên cho vào 1 tiện ích trên blog rồi lưu lại là xong.

PS:Nhớ thay đổi chiều rộng (width) và chiều cao (height) cho phù hợp với blog của bạn.

Tạo dòng văn bản hiển thị kiểu gỏ văn bản

Thông thường khi không muốn cho 1 đoạn văn bản nào đó chỉ hiển thị trên 1 dòng hoặc 1 khu vực nhỏ nào đó, ta thường dùng hiệu ứng chạy chữ để hiển thị nó.Với việc này các đoạn văn bản đó sẽ không chiếm nhiều không gian trong blog của bạn.

Tương tự như thế nhưng với thủ thuật nầy văn bản hiện ra tương tự như khi ta đánh văn bản.
code

hahuyhoanglong

Tạo phân trang cho Blogspot kiểu Google

Bạn đã xem bài viết về cách tạo phân trang kiểu 1, kiểu 2 thì với thủ thuật nầy cũng tương tự như thế nhưng với kiểu phân trang nầy có giao diện giống giống của Google vì không thể "giống y như trong kinh được" mà phải có sự khác biệt để phân biệt đâu là hàng chính hiệu đâu là hàng nhái chứ.

Xem trước tại đây

Bước 1. Đăng nhập Blogger, vào chỉnh sửa Template.
Đặt đoạn code css dưới đây vào trước dòng ]]></b:skin>

var home_page_url = location.href;

var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

htmlMap[htmlMap.length]='/';
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
	timestamp = encodeURIComponent(timestamp1);
	var title = post.title.$t;
			if(thisUrl.indexOf(timestamp)!=-1 ){
					thisNum = postNum;
			}
	
			postNum++;
			htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
	
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
	var banyaknomer = htmlMap.length -1 ;
	postNum=postNum-1;
};

for(var p =0;p< banyaknomer;p++){
	if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
		if(fFlag ==0 && p == thisNum-2){
			if(thisNum==2){
				upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">
'+ upPageWord +'</a></td>';
			}else{
				upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">
'+ upPageWord +'</a></td>';
			}
	
			fFlag++;
		}
	
		if(p==(thisNum-1)){
			if(p==0){
				html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
			}else{
				html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
			}
		}else{
			if(p==0){
					html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';

}else{
				html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
			}
		}
	
		if(eFlag ==0 && p == thisNum){
			downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
			eFlag++;
		}
	}
}
	
if(thisNum>1){
	html = ''+upPageHtml+' '+html +' ';
}
html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody>
<tr valign="top"><td class="b">Page  ('+(postNum-1)+')   </td><td class="b">';
html3 = '</tr>
</tbody></table>
';
html = html2+html;
	
if(thisNum<(postNum-1)){
	html += downPageHtml;	
}else{
	html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}

if(postNum==1) postNum++;
html += html3+ '</div>
';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
	html ='';
}

for(var p =0;p< pageArea.length;p++){
	pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
	html ='';
}

if(blogPager){
	blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
	var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
	timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
				thisNum = postNum;
			}
	
			if(title!='') postNum++;
			htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
				
	itemCount++;
}

if(eFlag ==0 && p == thisNum){
			downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
			eFlag++;
		}
	}
}

if(thisNum>1){
	if(!isLablePage){
		html = ''+upPageHtml+' '+html +' ';
	}else{
		html = ''+upPageHtml+' '+html +' ';
	}
}
	
html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody>
<tr valign="top"><td class="b">Page  ('+(postNum-1)+')   </td><td class="b">';
html3 = '</tr>
</tbody></table>
';
html = html2+html;
	
if(thisNum<(postNum-1)){
	html += downPageHtml;	
}else{
	html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}
	
if(postNum==1) postNum++;
html += html3+ '</div>
';
	
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
	html ='';
}

for(var p =0;p< pageArea.length;p++){
	pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
	html ='';
}

if(blogPager){
	blogPager.innerHTML = html;
}

}

</script>

var home_page = "/";
	if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){	
		if (thisUrl.indexOf("/search/label/")==-1){			
			document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
		}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
		}
	}
</script>

Bạn chú ý các code sau:
var pageCount=10; (Số bài viết muốn hiển thị)
var displayPageNum=4; (Số phân trang)
var upPageWord ='« Trở về'; (Có thể thay đổi chử Trở về thành chử Prev...)
var downPageWord ='Trang tiếp »'; (Có thể thay đổi chử Next..)

Tiếp theo bạn cần định cấu hình bài đăng trên trang chính là 10 bài đăng. Vào Phần tử trang (Page Elements) >> Chỉnh sửa Bài đăng trên Blog (Edit Blog Posts) chọn Số bài đăng trên trang chính là 10.

Bạn có thể xem code góc tai đây.

Chúc thành công!.

Ảnh rõ hơn khi rê chuột vào

Chèn khung chứa code có thẻ "Select all" (Không cần mã hóa code)

<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/>
<textarea cols="59" name="MyTextBox" rows="18" wrap="on"style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">NỘI_DUNG_CODE</textarea> </form>

    cols="59" // Bề rộng khung chứa code
    rows="18" // Số dòng trong khung chứa code
    wrap="on" // Trong một dòng, chữ dài quá khung sẽ hiện thanh trượt kéo ngang qua
    wrap="off" // Nhiều dòng chữ quá số dòng khung quy định sẽ hiện thanh trượt kéo xuống
vidu

Hướng dẫn thành viên viết bài trên blogspot

Hướng dẫn thành viên viết bài trên blogspot

Bước 1: Gửi tài khoảng (địa chỉ gmail) cho chúng tôi qua nick yahoo hahuyhoanglong (lưu ý có thể mất vài giờ nếu chúng tôi không online)

Bước 2: Mở hộp thư gmail và click vào đường link như hình bên dưới để kích hoạt tài khoảng.

Bước 3: Viết bài
- Sau khi click vào link kích hoạt (ở bước 2) bạn đăng nhập tài khoảng gmail của mình, hoặc vào địa chỉhttp://blogspot.com để đăng nhập tài khoảng.

- Click vào "Bài đăng mới" như hình bên dưới để bắt đầu viết bài.

Giải thích các ký hiệu và thuật ngữ trong khung "Bài đăng mới"

0. Chỉnh sửa bài đăng: Sau khi đã đăng bài nhưng bạn muốn chỉnh sửa lại thì vào mục này và tìm bài viết của mình để sửa lại.
1. Tiêu đề bài viết
2. phong chữ: yêu cầu để mặc đinh.
3. Cỡ chữ
4. Chữ in đậm
5. Chữ in nghiên
6. Tô màu cho chữ
7. Chèn liên kết vào chữ
8. Canh chữ (trái, giữa, phải, đều): yêu cầu đê mặc định
9. Chèn hình ảnh vào bài viết.
nếu bạn muốn chèn hình ảnh vào bài viết thì click vào biểu tượng này sau đó chọn ảnh trên máy tính, nhu hình bên dưới.

Lưu y: khi bạn tải ảnh lên, ảnh của bạn sẽ nằm trên cùng của bài viết, bạn phải di chuyển ảnh xuống dòng thứ 4 hoặc 5, hoặc các vị trí khác cho phù hợp với nội dung.
Đê di chuyển các bạn click chọn "Chế độ chỉnh sửa Html" lúc này bài viết sẽ ở dạng code
như hình bên dưới, bạn copy đoạn code ảnh rồi dán vào vị trí phù hợp

10. Chế độ xem trước bài viết
11. Xuất bản bài viết (sau khi đã hoàn tất)
12. Lưu vào nháp (để bữa sau viết tiếp)
13. Chọn nhãn cho bài viết ( ví dụ: thể thao, làm dẹp, tin học ...)
14. Click vào đây để hiển thị tất cả các nhãn để chọn cho bài viết của mình.

Nếu còn chỗ nào chưa rõ vui lòng liên hệ nick yahoo: hahuyhoanglong để được hỗ trợ