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

Thứ Sáu, 10 tháng 5, 2013

Hướng Dẫn Thiết Kế Template Blogger

1. Cấu trúc cơ bản template của 1 blog có dạng như sau:

<?xml version="1.0" encoding="UTF-8" ?><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head><b:skin><![CDATA[]]></b:skin></head><body><b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'><b:widget id='Navbar1' locked='true' title='Thanh điều hướng' type='Navbar'/></b:section></body></html>
Việc bạn cần làm là vào Thiết kế → Chỉnh sửa HTML xóa toàn bộ đoạn code bên trong đó và paste đoạn code trên vào rồi save lại. Khi save lại sẽ xuất hiện 1 mục cảnh báo dạng như hình bên dưới. Bạn chọn vào mục xóa tiện ích.

Đọc thêm »

Hướng dẫn bảo vệ dữ liệu Blog

Hôm nay tình cờ đọc được bài viết trên trang của Genk.Eus.vn cũng khá ấn tượng đó là lấy toàn bộ thông tin từ blogger khác. Mình cũng là một người rất xem trọng chuyện bản quyền nên dĩ nhiên là không khuyến khích việc lấy bài của người khác làm của riêng. Với lại bạn cũng nên tìm hiểu cách bảo vệ tài liệu, công sức của mình thôn qua bài hướng dẫn này. 

Điều kiện để hack data từ blog khác là blog đó phải để Cho phép nguồn cấp dữ liệu blog ở dạng Đầy đủ thì mới hack data theo cách này được.

Hình Minh họa



Đọc thêm »

Thứ Bảy, 20 tháng 4, 2013

Chèn song song cả 2 form comment của Blogspot và Facebook

Form comment facebook đã có từ lâu nhưng thường hay bị chặn bởi các nhà mạng lên thường làm chậm tộc đọ load của blog , website của bạn. Nhưng giờ việc chặn Facebook đã được khắc phục lên việc thêm Form Comment Facebook sẽ làm tăng tính tương tác cho website, blog của bạn. Vì ai cũng có thể biết được là Facebook là một cộng đồng vô cùng lớn, là mảnh đất màu mỡ để các bạn có thể chia sẻ những bài viết hay.



Đọc thêm »

Thứ Sáu, 19 tháng 4, 2013

Tăng tương tác Blog bằng form comment Facebook

Form comment facebook đã có từ lâu nhưng thường hay bị chặn bởi các nhà mạng lên thường làm chậm tộc đọ load của blog , website của bạn. Nhưng giờ việc chặn Facebook đã được khắc phục lên việc thêm Form Comment Facebook sẽ làm tăng tính tương tác cho website, blog của bạn. Vì ai cũng có thể biết được là Facebook là một cộng đồng vô cùng lớn, là mảnh đất màu mỡ để các bạn có thể chia sẻ những bài viết hay.


Đọc thêm »

Thứ Sáu, 18 tháng 1, 2013

CSS3 animated buttons

Big Button Big Button Big Button Big Button

Medium Button Medium Button Medium Button Medium Button


Đọc thêm »

Thiết kế trang báo lỗi 404 cho Blogger

Hôm nay Blogger cập nhật thêm rất nhiều tính năng về SEO vô cùng mạnh mẽ. Đầu tiên là Meta Description tag (trước đây muốn thêm nó chúng ta phải khai báo trong template), câu lệnh tương ứng là data:blog.metaDescription. Điều mình đánh giá cao nhất là có thể đặt Meta Description tag tương ứng trong từng bài viết, tính năng này mới giới thiệu chứ chưa thấy xuất hiện trong phần cài đặt bài viết. Tính năng thứ 2 là dễ dàng thêm rel="nofollow",target="_blank" cho thẻ liên kết. Tính năng thứ 3 là dễ dàng thêm alt, title cho ảnh. Và cuối cùng, tính năng được mong đợi từ lâu: Tạo trang báo lỗi 404.

Để báo lỗi hiển thị thì template của bạn phải có hàm <b:include data='top' name='status-message'/> và hàm này phải được gọi ra. Theo mình biết thì phần lớn template hiện nay được chỉnh sửa đã xóa bỏ hàm này. Trong bài viết này mình sẽ hướng dẫn các bạn tùy chỉnh để có thể hiển thị được dòng thông báo khi không tìm thấy bài viết trong kết quả tìm kiếm và lỗi trang không tìm thấy (404). Dòng thông báo sẽ không xuất hiện khi truy cập Nhãn, Bài đăng Cũ hơn...


Thêm đoạn mã dưới đây vào sau thẻ <b:includable id='main' var='top'> trong template của bạn.
<b:if cond='data:numPosts == 0'> <data:navMessage/>
</b:if>

Về cơ bản đến đây là xong. Dòng thông báo chỉ xuất hiện khi số lượng bài viết trên blog bạn ở trang hiện tại là 0. Tức là khi tìm kiếm không thấy kết quả hoặc khi trang truy cập không tồn tại (404).

Để thiết kế cho trang 404 bạn vào Cài đặt → Tùy chọn tìm kiếm. Ở mục Lỗi và chuyển hướng chọn Chỉnh sửa và viết dòng thông báo bạn muốn hiển thị (hỗ trợ cả mã HTML) hoặc sử dụng đoạn mã dưới đây để hiển thị giống blog demo.
<div class="" style="clear: both; text-align: center;">&nbsp;<img alt="404 page of brandstack" border="0" height="250" src="http://www.404notfound.fr/assets/images/pages/img/brandstackdotcom.jpg" width="400" /></div><h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Không tìm thấy trang web</h2><div><br /></div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Chúng tôi thành thật xin lỗi về sự bất tiện này, nguyên nhân có thể là:</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - Trang này không tồn tại.<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - Trang này đã bị xóa/thay đổi.<br /><span style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Xin vui lòng quay lại </span><a href="http://blogduykhanh.blogspot.com/" style="text-align: center;">Trang chủ</a><span style="text-align: center;"> Blog Duy Khánh h</span><span style="text-align: right;">oặc bạn có thể </span><a href="http://blogduykhanh.blogspot.com/2012/12/tim-kiem.html" style="text-align: right;">tìm kiếm</a><span style="text-align: right;"> các bài viết liên quan.</span>

Thiết kế trên đây chỉ mang tính gợi mở, hãy thể hiện sự sáng tạo của bạn trong việc thiết kế trang báo lỗi 404!

Thứ Ba, 8 tháng 1, 2013

Những giới hạn của Blogger Account

Bên dưới là một số thông tin về những giới hạn của một tài khoản Google Blogger để bạn tham khảo. Hy vọng những thông tin này một lúc nào đó sẽ hữu ích đối với bạn.

Đọc thêm »

Chủ Nhật, 6 tháng 1, 2013

SEO là gì?

Theo định nghĩa của chính Google

Chúng tôi trích đăng nguyên văn

"SEO is an acronym for "search engine optimization" or "search engine optimizer." Deciding to hire an SEO is a big decision that can potentially improve your site and save time, but you can also risk damage to your site and reputation. Make sure to research the potential advantages as well as the damage that an irresponsible SEO can do to your site."
Đọc thêm »

Thứ Bảy, 5 tháng 1, 2013

Mẹo vặt trong thiết kế Template Blogspot

Đối với các Blogger ưa “táy máy” thì việc “vọc” code không những là thú vui mà còn là sự đam mê, là nơi cho những ý tưởng đầy sáng tạo thỏa sức bay bổng.

Không những vậy, nó thậm chí còn có thể mang lại lợi nhuận không nhỏ một khi bạn đã trở thành một Pro Blogger Designer, bằng việc bán Template, bán back-link,…

Tuy nhiên, để trở thành một Pro Blogger Designer không phải một sớm một chiều mà được. Và trong bài viết bên dưới, iTechPlus sẽ giới thiệu đến các bạn mới gia nhập Blogspot, một số mẹo nhỏ cơ bản trong quá trình thiết kế Template cho riêng mình.

1. Xóa thanh Navbar :

Thanh Navbar là thanh chứa các công cụ như Tìm kiếm, theo dõi, chia sẻ, báo cáo lạm dụng,…xuất hiện phía trên cùng của Blog.


Cách loại bỏ : chèn dòng code bên dưới trước thẻ đóng </b:skin>
#navbar{display:none !important}

2. Xóa đường bao quanh liên kết :

Khi click vào link nào nó trên blog, có thể bạn sẽ gặp trường hợp sẽ xuất hiện một đường bao quanh liên kết này nhìn rất không thẩm mỹ tí nào.


Cách loại bỏ : chèn dòng code sau trước thẻ đóng </b:skin>
a {outline:none}

3. Xóa dấu gạch chân dưới liên kết :

Một số template khi rê chuột vào link bất kỳ bạn sẽ thấy xuất hiện một đường gạch chân bên dưới link đó.


Các loại bỏ: tìm trong template đoạn code bên dưới hoặc tương tự (thuộc tính a:hover) :
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
và thay thế thành :
a:hover {
  color:$titlecolor;
  text-decoration:none;
}

4. Giới hạn kích thước cho hình ảnh :

Việc giới hạn hoặc qui định kích thước cụ thể cho hình ảnh không những giúp trình duyệt đỡ mất thời gian tính toán kích thước thật của ảnh (sẽ làm chậm thời gian tải trang) mà còn giúp blog bạn tránh được trường hợp hình ảnh quá lớn, sẽ hiển thị tràn cả trang bài viết (Main-wrapper) hoặc bị Sidebar che mất một phần gây mất thẩm mĩ cho Blog.
Cách khắc phục: tìm trong template class “.post img” và chèn đoạn code in đậm như bên dưới :
.post img {
  max-width:538px;  // chiều rộng tối đa
  max-height:468px;  //chiều cao tối đa
  padding:4px;
  border:1px solid $bordercolor;
}

5. Ẩn liên kết “Đăng ký: Các Bài đăng (Atom)”

Liên kết này nhằm giúp người đọc nhanh chóng Bookmark lại trang của bạn để xem lại sau. Tuy nhiên, với các tiện ích như Bookmark and Share Homepage hay Đưa bài viết trên Blog lên các mạng xã hội thì tính năng này không còn mấy Blogger sử dụng nữa.


Thực hiện: tìm trong template class “.feed-links” và chèn vào đoạn code in đậm như bên dưới
.feed-links {
  clear: both;
  line-height: 2.5em;
  display:none;
}

6. Ẩn Status Message Bar

Status Message Bar là thanh trạng thái hiển thị phía trên bài viết khi click vào “Nhãn” hoặc “Lưu trữ”, cho biết trạng thái của trang hiện hành.



Thực hiện: chèn đoạn code sau vào trước thẻ đóng </b:skin>
.status-msg-wrap{display:none !important;}
Hy vọng một số thủ thuật nhỏ trên đây sẽ có lúc hữu ích đối với bạn.
Chúc các bạn thành công !
iTechPlus (tổng hợp)

Khái niệm cơ bản về Blog

- Blog, gọi tắt của weblog (tiếng Anh, "nhật ký web"), là một dạng nhật ký trực tuyến, bùng nổ từ cuối thập niên 1990.
- Các blogger (người viết blog), có thể là cá nhân hoặc nhóm, đưa thông tin lên mạng với mọi chủ đề, thông thường có liên quan tới kinh nghiệm hoặc ý kiến cá nhân, chủ yếu cung cấp thông tin đề cập tới những chủ đề chọn lọc, không giống như các báo truyền thống. Được phần mềm hỗ trợ, dễ sử dụng, blog phổ biến rất nhanh và ai cũng có thể dễ dàng tạo ra một blog cho mình.

- Một trang blog có thể chứa các siêu liên kết, hình ảnh và liên kết (tới các trang chứa phim và âm nhạc). Văn bản blog dùng phong cách thảo luận. Một blog thường chỉ liên quan đến một chủ đề yêu thích.

- Các khái niệm khác liên quan đến blog:

+ Blogging: là hành động viết và xuất bản bài viết trên blog.
+ Blogger: Tác giả, người viết để đăng tải các thông tin trên blog.
+ Blogosphere: là công đồng các blog hoặc các blogger.

- Lịch sử ra đời của Blog:

- Tin thời sự, sổ tay và nhật ký cá nhân có thể được coi là những ông tổ của blog.
- Trước khi blog trở nên phổ biến thì các tổ chức xã hội trên mạng mang nhiều hình thức, bao gồm Usenet, các dịch vụ kinh doanh trực tuyến như GEnie, BiX và CompuServe, gồm cả danh sách email và các hệ thống bảng tin nhắn điện tử (BBS). Trong thập niên 1990, các phần mềm diễn đàn Internet như WebEx, tạo ra các luồng trao đổi thông tin (thread). Các luồng thông tin là các kết nối giữa các lời nhắn trao đổi cùng topic trên một bảng trực tuyến. Một số người đã coi blog là phong trào quan sát tập thể của thế kỷ 20.

- Phân loại Blog

- Có rất nhiều loại blog, khác nhau từ nội dung bài đến cách truyền tải.

- Bằng phương tiện truyền đạt

+ Một blog có video được gọi là vlog, blog gồm các link gọi là linklog. 
+ Một trang gồm những bản phác thảo được gọi là sketchblog 
+ Hoặc một trang gồm có ảnh được gọi là photoblog. 
+ Những blog có bài viết ngắn và gồm nhiều dạng tranh ảnh, video đa dạng được gọi là tumblelog.
+ Một loại blog ít gặp được để trên Gopher Protocol được biết tới như Phlog.

- Bằng phương tiện sáng tác

+ Blog được viết bằng phương tiện di động ví dụ như điện thoại di động hoặc PDA được gọi là moblog.

- Thể loại

+ Một số blog tập trung vào một vấn đề cụ thể, ví dụ như blog chính trị, blog du lịch, blog thời trang, blog dự án, hoặc blog pháp luật (tên tiếng Anh là blawg).
+ Một blog không có mục đích chính đáng mà chỉ dành để spam gọi là Splog.
+ Một Slog (Site hoặc website log) là một phần của một website kinh doanh, được hợp nhất trong cả cấu trúc website bình thường, nhưng được viết bởi các phần mềm viết blog.

- Tính hợp pháp của người xuất bản

Một blog phần lớn được để cá nhân, hoặc được dùng cho mục đích kinh doanh. Blog công ty, có thể được dùng đối nội để hỗ trợ truyền đạt và văn hóa riêng của tập đoàn hoặc dùng đối ngoại để tiếp thị, tạo dụng thương hiệu hoặc PR.

- Công cụ tìm kiếm blog

Một số các công cụ tìm kiếm blog được dùng để tìm nội dung blog (còn được biết với tên blogosphere, ví dụ như blogdigger, Feedster và Technorati. Technorati cung cấp những thông tin cập nhật về những tìm kiếm phổ biết và tag dùng để phân loại bài viết trong blog.
- Gần đây, các nhà nghiên cứu đã phân tích nguyên do blog được ưa chuộng. Hai thước đo được sử dụng là: số lần được trích dẫn, và số lần được để link liên kết ( blogroll). Kết luận ban đầu từ các nghiên cứu về kết cấu blog là mặc dù để trở nên nổi tiếng, một blog mất khá nhiều thời gian, nhưng liên kết link vĩnh viễn làm tăng độ nổi tiếng của blog rất nhanh, và có thể chỉ ra độ ảnh hưởng của một blog hơn blogroll, bởi vì chúng cho biết người đọc có thực sự đọc nội dung blog hay không, và đánh giá blog là đáng đọc trong những trường hợp cụ thể.

- Nhiều blogger tự phân biệt mình với các phương tiện truyền thông đại chúng, và một số khác là người làm việc cho các phương tiện truyền thông đại chúng này, đồng thời tham gia một kênh thông tin khác. Một số tổ chức cho rằng viết blog là một phương tiện để tránh bị kiểm duyệt và trực tiếp đưa thông điệp của mình tới công chúng. Một số các nhà phê bình lo rằng blogger không tôn trọng bản quyền và vị trí của phương tiện truyền thông đại chúng trong việc đưa những thông tin đáng tin cậy đến xã hội.

- Tuy nhiên, cũng có rất nhiều nhà báo viết blog, theo như danh sách các J-blog của CyberJournalist.net nhiều hơn con số 300 rất nhiều. Lần đầu tiên một blog được sử dụng trên một trang web thông tin là vào tháng 8 năm 1998, khi Jonathan Dube của tờ Charlotte Observer đăng một kí sự về cơn bão Bonnie.

- Blog cũng có tầm ảnh hưởng tới những ngôn ngữ thiểu số, góp phần tập hợp những người nói và học những ngôn ngữ này; ví dụ nổi bật là các blog tiếng Gaelic, với những người viết blog ở rất xa khu vực nói tiếng Gaelic thậm chí ở cả Kazakhstan và Alaska. Xuất bản bằng ngôn ngữ thiểu số có thể tìm đường đến tới độc giả bằng cách tạo blog, không tốn kém và khả thi hơn cách thông thường rất nhiều.

Thứ Hai, 31 tháng 12, 2012

Xóa dòng chữ "Hiển thị các bài đăng có nhãn..." trong Blogger

Trong Blogspot, mỗi khi ta bấm vào xem nhãn của bài viết thường xuất hiện thông báo "Hiển thị các bài đăng có nhãn...Hiển thị tất cả bài đăng" (Với blog dùng ngôn ngữ tiếng Anh là "Showing posts with label ... Show all posts") như bên dưới:


Dòng thông báo với blog sử dụng ngôn ngữ tiếng Việt 


Dòng thông báo với blog sử dụng ngôn ngữ tiếng Anh 
Nếu bạn muốn xóa dòng thông báo này,Hãy thực hiện theo các bước bên dưới:
1. Đăng nhập vào Blogger
2. Vào Mở rộng Mẫu Tiện ích

Ở bước 3 dưới này mình sẽ hướng dẫn theo 2 cách,tùy vào giao diện bạn sử dụng mà sửa. Nếu cách 3.1 không được thì làm lại theo cách 3.2 

Cách 3.1 Chèn đọan code sau vào phía trên dòng ]]></b:skin>

.status-msg-wrap{
display:none;
}

Cách 3.2 Bạn tìm đến đoạn code bên dưới:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Bạn thay toàn bộ đoạn code trên bằng đoạn code dưới này:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
4. Lưu mẫu
5. Bạn kiểm tra xem thông báo này còn không nhé.
Chúc các bạn thành công !

Hiển thị bài viết trong cùng một nhãn


Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị một bài mới nhất ở phía trên, bên cạnh là vài dòng giới thiệu đầu (bạn có thể cho hiển thị một hay nhiều bài có hình cũng được), các bài viết còn lại sẽ hiển thị phía dưới dạng List (chỉ có các tiêu đề). Khi bạn bấm vào dòng tiêu đề đầu tiên có màu nền xanh (thủ thuật Windows 7) thì sẽ xem hết các bài trong nhãn...

Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.

<style type="text/css">
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}
.itechplus-rc ul{list-style:none;margin:0;padding:0}
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJqlBdbVeUuMKu4zDIXzo6ePvnlph8YQmqRDo_tL1WKw6_BsjrfkKZSA4cw3_dBVymVRUaVy6DyeC8OcNEX2UYIS4Yhj3_Ci9HJWRywi7xnxofjDIYQz-9pnjMW6uqYQCUDDRTAXb6_uuw/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}
</style>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://www.dungheineken.blogspot.com/search/label/WIN 7">Thủ thuật Windows7</a></h2>
<script type='text/javascript'>
numposts = 5; list1 = 1; sumPosts = 168;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a, b) {
var s = a.split("<");
for (var i = 0; i < s.length; i++) {
if (s[i].indexOf(">") != -1) {
s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)
}
}
s = s.join("");
s = s.substring(0, b - 1);
return s
}
function showrecentposts(e) {
img = new Array();
for (var i = 0; i < numposts; i++) {
var f = e.feed.entry[i];
var g = f.title.$t;
var h;
if (i == e.feed.entry.length) break;
for (var k = 0; k < f.link.length; k++) {
if (f.link[k].rel == 'alternate') {
h = f.link[k].href;
break
}
}
if ("content" in f) {
var j = f.content.$t
} else if ("summary" in f) {
var j = f.summary.$t
} else
var j = "";
s = j;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) img[i] = d;
var l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
var m = '<li><a href="' + h + '">' + g + '</a></li>';
if ((i >= 0) && (i < list1)) {
var n = l
}
if (i == list1) {
var n = '<div class="itechplus-rc"><ul>' + m
}
if ((i > list1) && (i < numposts - 1)) {
var n = m
}
if (i == numposts - 1) {
var n = m + '</ul></div>'
}
document.write(n)
}
}
document.write("<script src=\"http://www.dungheineken.blogspot.com/feeds/posts/default/-/WIN 7?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>

Bây giờ, bạn thay đổi các đường link màu đỏ (http://www.dungheineken.blogspot.com/feeds/posts/default/-/WIN 7) là địa chỉ nhãn mà bạn muốn hiển thị, thay đổi các số màu xanh theo ý muốn của bạn:
* Numposts (Số bài hiển thị kể cả có hình hoặc không có hình).
* List1 (Số bài hiển thị có hình)
* SumPots (Số chữ giới thiệu ở bài có hình)
* Width (độ rộng của khung tiện ích)

Và bấm LƯU lại là xong

LƯU Ý: Các bạn phải điền thật chính xác địa chỉ nhãn của bạn ở các dòng màu đỏ, nếu không nó sẽ bị lỗi và không hiển thị được.
Chúc các bạn thành công

Chủ Nhật, 23 tháng 12, 2012

Phân trang đẹp cho Blogspot

Xem thử:
Pages (6) 

1. Đăng nhập Blogger và chọn mục Mẫu
2. Click chọn Chỉnh sửa HTML
3. Tìm đoạn code </body> và dán trước nó đoạn mã bên dưới.
<style type="text/css"> .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;} .showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJWt9KhzLVvQuoV42lJ-Pytp7dis0vef7C1OSomLcCxprDJ94ECIpvKOmmptC86no-S-1oSu2Pe7q9HKuh_Yg8b9WDcbflcwJgyy3afgGZTPo9q9XgsFNGSzQ0V4cyjdAIcIJKv1BYTlfO/) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;} .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;} .showpageOf{float:left;padding-top : 6px;} .showpageNum a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfZD6EGTdc6etb9woBjaUSw0-RH4KtVj9NN5OcroLDuKFarqQkhd5So_VLDAhysm5-Q7UItU4L3rQrk67dguM3s-PEfmxojzllUSFavaM0e9weUKoafSfktxEspFeFtvIa5ZxPq21U8jXC/) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;} .showpageNum a:hover {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfZD6EGTdc6etb9woBjaUSw0-RH4KtVj9NN5OcroLDuKFarqQkhd5So_VLDAhysm5-Q7UItU4L3rQrk67dguM3s-PEfmxojzllUSFavaM0e9weUKoafSfktxEspFeFtvIa5ZxPq21U8jXC/) no-repeat 0 100%;color : #fff;} .showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfZD6EGTdc6etb9woBjaUSw0-RH4KtVj9NN5OcroLDuKFarqQkhd5So_VLDAhysm5-Q7UItU4L3rQrk67dguM3s-PEfmxojzllUSFavaM0e9weUKoafSfktxEspFeFtvIa5ZxPq21U8jXC/) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;} .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;} </style> <script style='text/javascript'> var pageCount=5; var displayPageNum=1; var upPageWord="Previous"; var downPageWord="Next"; </script> <script type='text/javascript' src="http://widgets.way2blogging.org/blogger-widgets/w2b-beautiful-pagenavi.js"/>

#var pageCount=5; là số bài đăng mỗi trang
Lưu mẫu và xem kết quả

Thứ Ba, 18 tháng 12, 2012

Xóa (ẩn) biểu tượng chỉnh sửa nhanh widget



- Các bạn thực hiện các bước đơn giản sau:

+ vào bố cục
+ vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng mẫu tiện ích)
+ chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>
.quickedit{
display:none;
}
+ Save template. Như thế là đã hoàn thành, bạn hãy thử xem.

Thứ Hai, 17 tháng 12, 2012

Chống sao chép bài viết


- Các bạn vào Thiết kế, chọn Chỉnh sửa HTML, check vào ô Mở rộng mẫu tiện ích nhé.
- Bấm tổ hợp phím Ctrl+F để tìm Mã:

]]></b:skin> Chèn đoạn mã dưới này vào ngay trước ]]></b:skin>:


.post-body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}

- Lưu mẫu để hoàn thành. Chúc các bạn thành công!

Thứ Bảy, 15 tháng 12, 2012

Tạo sitemap (mục lục) cho Blogpost

Một dạng sitemap hay bảng mục lục rất phù hợp cho các blogger. Bạn có thể xem ảnh minh họa bên dưới



Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger

2. Bạn vào soạn thảo bài viết mới (New Post) ở chế độ HTML và chèn vào code bên dưới



<style type='text/css'>
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em; 
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.post-footer, #blog-pager, #comments,#disqus_thread{display:none;}
h3.title-header {float:center;text-align:center;font-size:15px}
</style>
<script src="http://dl.dropbox.com/u/74775294/Filejs/bloggertocaccordion.js"></script>
<script src="http://blogduykhanh.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://dl.dropbox.com/u/74775294/Filejs/accordion-pack.js" type="text/javascript"></script>

- Bạn thay http://blogduykhanh.blogspot.com thành địa chỉ blog của bạn.

3. Bây giờ bạn xuất bản bài viết (Publish posts) là xong

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

Hướng dẫn tạo bảng trong bài viết trên blogspot

1 Bảng trong HTML được định nghĩa bằng cặp thẻ <table>...</table> Trong một bảng thì được chia thành nhiều cột và hàng. Mỗi hàng được giới hạn hoặc ngắt hàng bởi cặp thẻ <tr>...</tr>, và trong mỗi hàng lại có nhiều Ô tùy theo trường hợp sử dụng cặp thẻ giới hạn giữa các ô là <td></td>Ví dụ: 1 bảng gồm 2 hàng, 3 cột và mỗi hàng gồm có 3 ô.
<table border="1" cellpadding="10">
<tr>
<td>Ô 1</td>
<td>Ô 2</td>
<td>Ô 3</td>
</tr>
<tr>
<td>Ô 4</td>
<td>Ô 5</td>
<td>Ô 6</td>
</tr>
</table>
Như vậy là chúng ta đã tạo được 1 cái bảng đơn giản, nhìn thì hơi thô thôi. Còn nếu các bạn muốn gộp Hàng hoặc Cột lại thì Bạn sẽ thêm các thuộc tính như

rowspan="Số hàng muốn gộp lại"

colspan="Số cột muốn gộp"

Chẳng hạn như bạn muốn gộp Ô 1 và Ô 4 cột lại thành 1 cột thì sẽ dùng rowpan="2" để hợp lại.
<table border="1" cellpadding="10">
<tr>
<td rowspan="2">Ô 1</td>
<td>Ô 2</td>
<td>Ô 3</td>
<td>Ô 3-3</td>
</tr>
<tr>
<td>Ô 5</td>
<td>Ô 6</td>
<td>Ô 7</td>
</tr>
</table>
Hoặc nếu không muốn hợp 2 hàn thành 1 cột như thế thì mình hợp 2 Ô trên cùng một hàng lại
<table border="1" cellpadding="10">
<tr>
<td colspan="2">Ô 1+</td>
<td>Ô 2</td>
<td>Ô 3</td>
</tr>
<tr>
<td>Ô 4</td>
<td>Ô 5</td>
<td>Ô 6</td>
<td>Ô 7</td>
</tr>
</table>
Như vậy là việc Hợp các Cột hoặc Hàng lại cơ bản đã xong. Bây giờ bạn muốn đổ màu cho Ô , Cột hoặc là Hàng mà mình thích thì làm sử dụng thuộc tính bgcolor="#ee8018"

#ee8018 Các bạn thay thế Mã màu phù hợp theo trường hợp hoặc sở thích của bạn. Để lấy được mã màu các bạn xem ở đây. Ví dụ đổ màu cho các Ô như sau:
<table border="1" cellpadding="10">
<tr>
<td colspan="2" bgcolor="#ee8018">Ô 1+</td>
<td bgcolor="#dddddd">Ô 2</td>
<td bgcolor="#544754">Ô 3</td>
</tr>
<tr>
<td bgcolor="black">Ô 4</td>
<td bgcolor="red">Ô 5</td>
<td bgcolor="blue">Ô 6</td>
<td>Ô 7</td>
</tr>
</table>

Và Dưới đây là một số thuộc tính dùng để giúp tạo bảng tốt hơn. Các bạn tham khảo và áp dụng nha.
Thẻ dùng cho <Table>:

- border: Xác định độ dày của khung bao quanh bảng

- bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.

- cellspacing: Xác định khoảng cách giữa các ô trong bảng.

- width: Xác định độ rộng của bảng

- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng

- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).

Thẻ dùng cho <td>

- width: Độ rộng của ô

- height: Chiều cao của ô

- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng)

- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột).

- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô

- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).

Về cơ bảng thì Một cấu trúc của bảng đơn giản là thế Nếu các bạn hiểu biết về CSS thì có thể tùy chỉnh cho đẹp hơn nữa.

Thứ Ba, 27 tháng 11, 2012

Content Background

You probably know how to configure your Site content area background color or image:
click More actions ► Manage site ► Colors and Fonts ► Content background color / Content background image ►Choose a color / Choose a background image ► Save.
However, these settings are under Site Appearance, i.e. they're Site-wide, not page-specific. What if you'd like to set a background color or image on a particular page content?

Instructions
Background color
In edit mode click the HTML button ► insert the following code:

<div style="background-color:#FFE4E1; padding:3px;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
 Notes: 
1.    If you have an existing page with content, just add the red code to the very top of your HTML editor and the blue code to the very bottom of it.
2.    You can pick any HTML color and its darker/lighter shades.

Click Update ► add anything (else) you wish to your page ► Save. That's how I created this page.







Background Image


Take similar steps with the following code:


    <table width="100%" border="0" cellspacing="0" cellpadding="3" background="http://www.example.com/image.jpg">
    <tr>
    <td>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </td>
    </tr>
    </table>



        Notes:
    1.  As seen on this page you can set a background color or image in a part of your page content. Simply set your <div> or <table> width and height values in pixels, e.g. width:500px or percent, e.g. width="80%" and insert the code wherever you want.
    2.  By default, a background image is repeated, and placed at the top-left corner of the table. To display it only one time set the table tag like this:
    <table style="background-repeat:no-repeat;" width="100%" .....
    To change the image position it might help to change its canvas size using an image editor


    Origil: https://sites.google.com/site/mori79

    Thứ Năm, 22 tháng 11, 2012

    Tạo tab nội dung đơn giản với Jquery

    Tab menu giúp tiết kiệm không gian trên trang web, làm cho blog của bạn trông gọn gàng và chuyên nghiệp hơn. Có nhiều phương pháp để làm một tab nội dung ở sidebar, ở đây mình giới thiệu một cách đơn giản nhất, đó là sử dụng Jquery.


    Tìm trong template đoạn mã sau: <div id='sidebar-wrapper'>
    Chèn ngay bên dưới nó:

    <style type='text/css'>
    ul.tabs-widget{padding:0}
    .tabs-widget li{margin:0 10px 10px 0;background:#fff;float:left;list-style-type:none;display:block;height:30px;line-height:30px;width:60px;border:4px solid #3c5670;text-align:center}
    .tabs-widget li a{display:block;color:#3c5670;font-size:14px;text-decoration:none}
    .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#ff8053;color:#fff}
    #sidebartab1 h2, #sidebartab2 h2, #sidebartab3 h2{display:none}
    </style>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    jQuery(document).ready(function($){$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function(){$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);$(this).addClass(&quot;tabs-widget-current&quot;);$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();var activeTab=$(this).attr(&quot;href&quot;);$(activeTab).fadeIn();return false;});});
    </script>

    <h2><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
    <li><a href='#widget-themater_tabs-1432447472-id1'>Tab 1</a></li>
    <li><a href='#widget-themater_tabs-1432447472-id2'>Tab 2</a></li>
    <li><a href='#widget-themater_tabs-1432447472-id3'>Tab 3</a></li>
    </ul></h2>
    <div class='clear'/>

    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes'/>
    </div>

    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
    <b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes'/>
    </div>

    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
    <b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes'/>
    </div>

    Các dòng màu xanh đỏ ở trên bạn có thể sửa lại cho phù hợp với blog của mình. Vậy là xong, tiếp theo bạn chỉ việc vào phần thiết kế rồi add tiện ích cho từng tab:


    Hy vọng thủ thuật đơn giản này có ích cho blog của bạn.

    Form đăng nhập cho Blogspot

    Bài viết này sẽ hướng dẫn bạn làm một form đăng nhập (Login Form) trên blog với phong cách của Wordpress. Như vậy sẽ tiết kiệm thời gian cho độc giả khi họ muốn để lại nhận xét kèm avatar trên blog của bạn mà quên chưa đăng nhập, thay vì phải gõ địa chỉ trang chủ của Blogger.






    Chèn đoạn CSS sau phía trên thẻ </b:skin> trong template:
    #slide-panel{background-color:#000;border-bottom:2px solid #838383;display:none;height:80px;margin:auto;padding-top:20px}
    .slide{width:950px;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:950px;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/AVvXsEj_irVFcwjDvaC7-j69aQCcZadFAUHcUsGAY9nouFGlGUpleroPH3kXP2X9U1GX0tWDTZ-p9hPOXMjgc0UrFYCidtyxY8Oip3IMPm6xzEh-BPxnBXvnFuau54xBuekv7bvOJHjMUpeUBKQ/) 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 ngay bên dưới </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>

    Save template và xem thành quả.

    Bài đăng phổ biến