Cách tạo khung converter code cho Blogger

Đôi khi các bạn muốn đặt một Code quảng cáo hay một tiện ích nào đó vào trong Template nhưng xảy ra hiện tượng Code không hoạt động. Một trong những lỗi đó là do phần Code các ký tự đặc biệt chưa được chuyển đổi để phù hợp với Template. Hôm nay mình giới thiệu với các bạn cách tạo khung converter code (mã) cho Blogger - Blogspot.

Cách làm thật là đơn giản các bạn à:

Cách 1: Các bạn hãy mở chế độ HTML của bài đăng, sau đó Copy và dán đoạn code sau vào nơi các bạn muốn khung xuất hiện trong bài đăng.
Cách 2: Tạo một 1 Widget ở nơi nào đó trên trang, sau đó Copy và dán đoạn code sau vào.

<span style="font-weight: bold;">Gõ code cần chuyển đổi vào ô bên dưới nhấn Converter để chuyển đổi mã hóa:</span>
<script src="http://www.gmodules.com/ig/ifr?url=http://thuthuat-blogger.googlecode.com/files/code_converter_for_blogger.xml&amp;up_grows=10&amp;up_conv1=1&amp;up_conv2=1&amp;up_conv3=1&amp;up_conv4=1&amp;up_conv5=1&amp;synd=open&amp;w=570&amp;h=300&amp;output=js"></script>

Hãy làm và tận hưởng thành quả của bạn.
Chú ý rằng:
w=570 là chiều rộng khung.

h=300 là chiều cao khung.

Read More

Tạo nút Back to Top

B1:

Chèn đoạn code sau phía trên </body> trong template:

<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

B2:  Lưu template và tận hưởng thành quả

Read More

Feather Blogger Template

DOWNLOADPREVIEW

Read More

Managov Blogger Template

DOWNLOADPREVIEW

Read More

Template Hài VL 2014 cho blogspot

Demo
Download

Read More

Cách tạo RSS cho Blog

Khi bạn muốn tạo Blog 1 cách hoàn chỉnh, thì Blog của bạn không thể thiếu những thành phần quan trọng như công cụ tìm kiếm, RSS, hay thành phần đếm số lượt người truy cập blog...

Sau đây tôi muốn trình bày cách thêm RSS cho blog của mình:
1. Cách 1: Đối với Blogger:
Đầu tiên các bạn copy đoạn mã sau vào vị trí trong Blog của bạn muốn đặt logo RSS



Thay các chữ Tên Blog của bạn bằng địa chỉ Blog của các bạn, thay dòng mô tả http://vnbtips.blogspot.com/ bằng các dòng bất kì theo ý thích. Vậy là xong.

2. Cách 2:

Bình thường, nếu không đăng ký FeedBurner và thay đổi Post Feed Redirect URL trong Site Feed (Settings -> Site Feed) liên kết đến Feed cho các bài đăng của blog sẽ có dạng: http://tencuaban.blogspot.com/feeds/posts/default. Từ chương trình đọc feed trên web hay các chương trình trên Windows người dùng có thể đọc một phần hoặc tất cả nội dung của một bài đăng dựa theo chế độ cài đặt của bạn tại Allow Blog Feeds.

Theo hướng dẫn của Blogger link đến Feed cho từng nhãn của bạn sẽ là:

http://tencuaban.blogspot.com/feeds/posts/default/-/labelname

Nhớ phải có dấu "-". Và như vậy có thể dùng link này kết hợp với một hình ảnh, bạn hoàn toàn có một một biểu tượng feed cho từng label.

Cách thực hiện:

- Đăng nhập Blogger và hãy bảo đảm bạn trên blog của bạn có ít nhất một tiện ích label được sử dụng.

- Tiếp theo vào Template -> Edit HTML, nhớ bấm Expand Widget Templates và tìm id='Label1' (hoặc id='Label2' nếu bạn sử dụng đến nhãn thứ 2 )( Có thể dùng Ctrl + F để tìm). Bạn lưu ý đoạn mã sẽ như thế này:



Nào bây giờ hãy chép đoạn code:


Trong đó Link đến biểu tượng Feed bạn có thể lựa chọn từ một trong các hình sau:  (Đưa chuột phải lên hình bạn chọn và click Properties để lấy link)

và dán theo một trong hai cách: phía dưới thẻ

(hoặc phía dưới thẻ

) để biểu tượng xuất hiện trước (hoặc sau tên của nhãn).

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

Read More

Digishop Template - Template shop bán hàng online

Read More

Shoppaholic Boutique - Template shop bán hàng quần áo

Read More

Các thuộc tính định dạng chung

Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:

Cấu trúc thư mục

• Html

Click vào dấu [+] để xem cấu trúc.

HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
<div>
<p>Thành phần không có CSS.</p>
<p class="cssStyle">Thành phần có CSS.<br />
Thành phần có CSS.<br />
Thành phần có CSS.<br />
Thành phần có CSS.</p>
</div>
</body>
</html>

CSS viết

p.cssStyle {
}

Hiển thị trình duyệt khi chưa sử dụng CSS

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Download phần chuẩn bị

Thuộc tính background

• Thuộc tính background được dùng để định dạng nền cho thành phần.
• Các dạng thuộc tính background:
  • background-color: xác định màu cho nền.
  • background-image: xác định hình cho nền.
  • background-position: xác định vị trí cho nền, thường được sử dụng kèm với background-image.
  • background-repeat: xác định hình nền được lặp lại như thế nào.
  • background-attachment: xác định thành phần nền được cố định hoặc cuộn so với trang, được sử dụng kèm với background-image.
  • background: dạng tổng quát, kết hợp của các loại background trên.

Cấu trúc background-color viết dạng tổng quát

tag {
    background: giá trị;
}

Giá trị của thuộc tính background-color: 

• Giá trị theo hệ thập lục phân: gồm dấu "#" kết hợp với dãy ký tự latin (chỉ bao gồm số hoặc chữ).
  VD: color: #ff0000;
• Giá trị theo kết hợp màu RGB: Đây là dạng kết hợp của 3 loại màu, màu đỏ (Red), màu xanh lá (Green), màu xanh dương (Blue).
  VD: color: rgb(255,0,0); // chuỗi giá trị từ 0 tới 255
• Giá trị theo tên tiếng anh: tên màu sắc viết bằng tiếng anh.
  VD: color: red;

CSS viết

p.cssStyle {
    background: blue;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Cấu trúc background-image viết dạng tổng quát

tag {
    background: url(đường dẫn hình);
}

CSS viết

p.cssStyle {
    background: url(../images/img_webstandard.gif);
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính border

• Thuộc tính border được dùng để định dạng đường viền cho thành phần.
• Các thuộc tính border:
  Thuộc tính định dạng
  • border-color: màu cho đường viền
  • border-style: kiểu cho đường viền
  • border-width: độ rộng cho đường viền
  Thuộc tính vị trí
  • border-top: đường viền hiển thị bên trên
  • border-right: đường viền hiển thị bên phải
  • border-bottom: đường viền hiển thị bên dưới
  • border-left: đường viền hiển thị bên trái
  • border: đường viền hiển thị bao quanh thành phần

Cấu trúc

tag {
    border-vị trí: [màu sắc] [kiểu] [độ rộng];
}

Tham khảo thêm [màu sắc].

Tham khảo thêm [kiểu] của border.

Độ rộng có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %, em).

Thuộc tính border-top, CSS viết

p.cssStyle {
    border-top: #ff0000 solid 2px;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính border-right, CSS viết

p.cssStyle {
    border-right: #ff0000 solid 2px;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính border-bottom, CSS viết

p.cssStyle {
    border-bottom: #ff0000 solid 2px;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính border-left, CSS viết

p.cssStyle {
    border-left: #ff0000 solid 2px;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính border, CSS viết

p.cssStyle {
    border: #ff0000 solid 2px;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính height

• Thuộc tính height được dùng để định dạng chiều cao cho thành phần.
• Tham khảo thêm về thuộc tính height.

Cấu trúc

tag {
    height: giá trị;
}

Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %,em).

CSS viết

p.cssStyle {
    border: 2px solid red;
    height: 150px;
}

Thêm thuộc tính border để dễ thấy được chiều cao của thành phần.

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính width

• Thuộc tính width được dùng để định dạng chiều rộng cho thành phần, nếu không sử dụng thành phần này thì chiều rộng mặc định của thành phần sẽ mang giá trị "auto".
• Tham khảo thêm về thuộc tính width.

Cấu trúc

tag {
    width: giá trị;
}

Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %,em).

CSS viết

p.cssStyle {
    border: 2px solid red;
    width: 200px;
}

Thêm thuộc tính border để dễ thấy được chiều rộng của thành phần.

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính text-align

• Thuộc tính text-align được dùng để sắp xếp vị trí cho thành phần, nếu không sử dụng thành phần này thì vị trí mặc định của thành phần sẽ mang giá trị "left".
• Tham khảo thêm về thuộc tính text-align.

Cấu trúc

tag {
    text-align: giá trị;
}

Thuộc tính text-align có các giá trị.

• left: thành phần canh về phía bên trái
• right: thành phần canh về phía bên phải
• center: thành phần canh giữa
• justify: thành phần canh đều 2 bên, thường dùng cho text

CSS viết

p.cssStyle {
    text-align: center;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Read More

Các thuộc tính định dạng cho text

Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:

Cấu trúc thư mục

• Html

Click vào dấu [+] để xem cấu trúc.

HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
<div>
<p>Thành phần không có CSS.</p>
<p class="cssStyle">Thành phần có CSS.<br /> Thành phần có CSS.<br /> Thành phần có CSS.<br /> Thành phần có CSS.</p>
</div>
</body>
</html>

CSS viết

p.cssStyle {
}

Hiển thị trình duyệt khi chưa sử dụng CSS

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Download phần chuẩn bị

Thuộc tính color

• Thuộc tính color được dùng để định dạng màu sắc cho thành phần.
• Tham khảo thêm về thuộc tính color.

Cấu trúc

tag {
    color: giá trị;
}

Giá trị của thuộc tính color: (Tham khảo)

• Giá trị theo hệ thập lục phân: gồm dấu "#" kết hợp với dãy ký tự latin (chỉ bao gồm số hoặc chữ).
  VD: color: #ff0000;
• Giá trị theo kết hợp màu RGB: Đây là dạng kết hợp của 3 loại màu, màu đỏ (Red), màu xanh lá (Green), màu xanh dương (Blue).
  VD: color: rgb(255,0,0); // chuỗi giá trị từ 0 tới 255
• Giá trị theo tên tiếng anh: tên màu sắc viết bằng tiếng anh.
  VD: color: red;

CSS viết

p.cssStyle {
    color: #ff0000;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-size

• Thuộc tính font-size được dùng để định dạng cỡ chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-size: giá trị;
}

Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %,em).

CSS viết

p.cssStyle {
    font-size: 200%;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-family

• Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-family: kiểu chữ;
}

Font có nhiều kiểu chữ khác nhau, tham khảo thêm

CSS viết

p.cssStyle {
    font-family: "Courier New", Courier, monospace;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-weight

• Thuộc tính font-weight được dùng để định dạng độ dày của chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-weight: giá trị;
}

Giá trị chính của font-weight gồm: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900

CSS viết

p.cssStyle {
    font-weight: bold;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính font-style

• Thuộc tính font-style được dùng để định dạng kiểu chữ cho thành phần.
• Tham khảo thêm về thuộc tính font.

Cấu trúc

tag {
    font-style: giá trị;
}

Các giá trị chính cho thuộc tính font-style gồm: italic, oblique, normal.

CSS viết

p.cssStyle {
    font-style: italic;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính letter-spacing

• Thuộc tính letter-spacing được dùng để định dạng khoảng cách các ký tự cho thành phần.
• Tham khảo thêm về thuộc tính letter-spacing.

Cấu trúc

tag {
    letter-spacing: giá trị;
}

Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %,em).

CSS viết

p.cssStyle {
    letter-spacing: 5px;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính line-height

• Thuộc tính line-height được dùng để định dạng khoảng cách các dòng cho thành phần.
• Tham khảo thêm về thuộc tính line-height.

Cấu trúc

tag {
    line-height: giá trị;
}

Giá trị có thể là số không đơn vị hoặc có đơn vị, tham khảo các loại đơn vị khác nhau.

CSS viết

p.cssStyle {
    line-height: 5;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính text-decoration

• Thuộc tính text-decoration được dùng xác định thành phần có gạch dưới hay không.
• Tham khảo thêm về thuộc tính text-decoration.

Cấu trúc

tag {
    text-decoration: giá trị;
}

Các giá trị chính cho thuộc tính text-decoration gồm: blink, line-through, overline, underline, none

CSS viết

p.cssStyle {
    text-decoration: underline;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính word-spacing

• Thuộc tính word-spacing được dùng để định dạng khoảng cách giữa các từ cho thành phần.
• Tham khảo thêm về thuộc tính word-spacing.

Cấu trúc

tag {
    word-spacing: giá trị;
}

Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %,em).

CSS viết

p.cssStyle {
    word-spacing: 10px;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Read More

Sử dụng CSS

Nội fung file index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiêu đề trang web</title>
</head>

<body>
...Phần thân viết ở đây...
</body>
</html>

Nội fung file style.css

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

Kết nối file CSS vào file HTML

Chúng ta kết nối file CSS vào file HTML thông qua thẻ <link>, cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
...Phần thân viết ở đây...
</body>
</html>

Thuộc tính href ta phân tích như sau:

• style.css là một file có tên là style với định dạng file là .css
• css là folder chứa file style.css

Như vậy css/style.css sẽ dẫn đường dẫn tới file style.css trong thư mục css.

Cách viết một nội dung CSS

Viết nội dung CSS theo cấu trúc như sau:

Bộ chọn { thuộc tính: giá trị; }

p { color: red; }

Chúng ta có thể viết nhiều cặp thuộc tính và giá trị cho bộ chọn, mỗi cặp thuộc tính và giá trị có thể viết cách nhau bởi dấu chấm phẩy.

p { color: red; float: left; padding-left: 10px; }

Đoạn code trên tương tự như đoạn code sau:

p {
    color: red;
    float: left;
    padding-left: 10px;
}

Cách viết bộ chọn CSS

Giả sử ta có file HTML như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
<div id="content">
<ul>
<li>Mục 01</li>
<li>Mục 02</li>
<li>Mục 03</li>
<li>Mục 04</li>
</ul>
<p>Đoạn văn</p>
</div>

<div class="navi">
<p>Nội dung navi</p>
</div>
</body>
</html>

Bộ chọn theo tên id

tag#tênid { thuộc tính: giá trị; }

• Bắt buộc phải có ký tự dấu "#" và tênid

div#content { width: 600px; }

Bộ chọn theo tên class

tag.tênclass { thuộc tính: giá trị; }

• Bắt buộc phải có ký tự dấu "." và tênclass

div.navi { background: #333333; }

Bộ chọn theo cấp bậc

[tag cha] [tag con] [tag cháu] { thuộc tính: giá trị; }

• Cấu trúc này không bắt buộc, tuy nhiên cấu trúc này sẽ thuận tiện trong việc điều chỉnh các thành phần con bên trong, và cũng để xác định thứ tự ưu tiên trong CSS.
• Trong file HTML bên trên, trong phần content và navi đều có tồn tại thành phần <p> nếu sử dụng cách chọntag { thuộc tính: giá trị;} thì ta sẽ không thể nào chọn được đâu là thành phần thuộc content, đâu là thành phần thuộc navi, tuy nhiên sử dụng cách chọn theo cấp bậc thì việc này lại rất dễ dàng:

div#content p { color: #333333; } /* Chon thanh phan p theo content*/

div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/

div#content ul li { display: inline; } /* Chon thanh phan li theo content*/

Chúng ta có thể xem thêm các bộ chọn khác tại phần tham khảo.

Cách viết một comment trong file CSS

Comment là một dạng ghi chú, giúp người viết code giải thích nghĩa cho từng đoạn code, cách viết một comment trong CSS như sau:

/* Đây là dòng comment */

Read More