Thủ thuật này khá đơn giản, chỉ cấn bạn đăng nhập vào blog > chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán đoạn code phía dưới vào
Bây giờ, bạn nhập nội dung thông báo vào và bấm Lưu lại là xong
TẠO BẢNG THÔNG BÁO CHO BLOG (KIÊU 2)
Người đăng: kiemdaigia on Chủ Nhật, 27 tháng 11, 2011
TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘNG
Người đăng: kiemdaigia on Thứ Sáu, 25 tháng 11, 2011
Trước đây, tôi có chia sẻ với các bạn các mẫu menu dọc cho Blogspot (xem TẠI ĐÂY), hôm nay tôi giới thiệu đến các bạn một mẫu menu dọc khá đẹp, khi sử dụng menu này, bạn rê chuột vào một menu bất kỳ thì menu đó sẽ có hiệu ứng lật và chuyển đổi màu khá mướt. Các bạn bấm vào Xem thử phía dưới để xem trước nha.Thủ thuật này khá là đơn giả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.
<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/Jquery1.3.2.js"></script>
<script src="http://dl.dropbox.com/u/66348944/flipmenu.js" type="text/javascript"> </script>
<style>
.flipmenu {
font-family: Times new roman;
font-size: 16px;
font-weight: bold;
position: relative;
}
.flipmenu_box {
overflow: hidden;
position: relative;
}
.flipmenu_link,.flipmenu_link_over,.flipmenu_link_active {
width:250px;
text-decoration: none;
text-shadow:1px 1px 1px #fff;
text-transform: uppercase;
color: #000000;
cursor: pointer;
margin-top:2px;
padding: 6px;
position: absolute;
background: #fdd78d;
background: -moz-linear-gradient(top, #fbdc88 0%, #fbbf57 50%, #fac319 51%, #fb9709 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc88), color-stop(50%,#fbbf57), color-stop(51%,#fac319), color-stop(100%,#fb9709)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc88', endColorstr='#fb9709',GradientType=0 );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.flipmenu_link_over,
.flipmenu_link_active {
text-decoration: none;
text-shadow:1px 1px 1px #eee;
color: #fa0320;
background: #aebcbf;
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 );
</style>
<div id="flip_menu">
<a href="#">● Thủ thuật Windows 7</a>
<a href="#">● Thủ thuật Windows XP</a>
<a href="#">● Thủ thuật Internet</a>
<a href="#">● Thủ thuật USB</a>
<a href="#">● Thủ thuật Yaoo-Gmail</a>
<a href="#">● Thủ thuật Windows</a>
<a href="#">● Thủ thuật Blogspot</a>
<a href="#">● Chuyên đề máy tính</a>
<a href="#">● Tổng hợp</a>
<a href="#">● Linh tinh</a>
</div>
<script src="http://dl.dropbox.com/u/66348944/flipmenu.js" type="text/javascript"> </script>
<style>
.flipmenu {
font-family: Times new roman;
font-size: 16px;
font-weight: bold;
position: relative;
}
.flipmenu_box {
overflow: hidden;
position: relative;
}
.flipmenu_link,.flipmenu_link_over,.flipmenu_link_active {
width:250px;
text-decoration: none;
text-shadow:1px 1px 1px #fff;
text-transform: uppercase;
color: #000000;
cursor: pointer;
margin-top:2px;
padding: 6px;
position: absolute;
background: #fdd78d;
background: -moz-linear-gradient(top, #fbdc88 0%, #fbbf57 50%, #fac319 51%, #fb9709 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc88), color-stop(50%,#fbbf57), color-stop(51%,#fac319), color-stop(100%,#fb9709)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc88', endColorstr='#fb9709',GradientType=0 );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.flipmenu_link_over,
.flipmenu_link_active {
text-decoration: none;
text-shadow:1px 1px 1px #eee;
color: #fa0320;
background: #aebcbf;
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 );
</style>
<div id="flip_menu">
<a href="#">● Thủ thuật Windows 7</a>
<a href="#">● Thủ thuật Windows XP</a>
<a href="#">● Thủ thuật Internet</a>
<a href="#">● Thủ thuật USB</a>
<a href="#">● Thủ thuật Yaoo-Gmail</a>
<a href="#">● Thủ thuật Windows</a>
<a href="#">● Thủ thuật Blogspot</a>
<a href="#">● Chuyên đề máy tính</a>
<a href="#">● Tổng hợp</a>
<a href="#">● Linh tinh</a>
</div>
Bây giờ, bạn thay đổi các dấu "#" màu xanh thành các địa chỉ tương ứng của các menu và thay đổi các tiêu đề hiển thị trên menu (các dòng chữ màu xanh) theo ý thích của bạn, ngoài ra bạn còn có thể thay đổi:
* Width: 250px (chiều rộng của tiện ích).
* Cỡ chữ hiển thị trên menu (Font-size:16px)
* Cỡ chữ hiển thị trên menu (Font-size:16px)
và bấm LƯU lại là xong
Chúc các bạn thành công
Nguồn: Trai đất mũi
THAY ĐỔI GIAO DIỆN CHO BLOGGER
Người đăng: kiemdaigia on Thứ Năm, 24 tháng 11, 2011
Một trong những điều kiện để đem đến sự thành công cho một Blogger, ngoài nội dung đặc sắc, phong phú được cập nhật thường xuyên thì hình thức giao diện cũng là một trong những yếu tố cần được các bạn quan tâm. Với giao diện đẹp bóng bẩy, bố cục gọn gàng, màu sắc hài hoà trang nhã sẽ thu hút khách tham quan, làm tăng lượt truy cập vào blog.
Bạn có thể dễ dàng tìm kiếm một giao diện ưng ý tại thẻ Trình thiết kế mẫu được Blogger cung cấp sẳn (đăng nhập vào Blog > chọn thiết kế > chọn trình thiết kế mẫu). Nếu vẫn chưa hài lòng, bạn có thể truy cập VÀO ĐÂY để chọn cho mình một Themes đẹp. Trang Web này cung cấp cho bạn một số mẫu Themes đẹp, lạ mắt với nhiều bố cục tuỳ chọn (1 cột, 2 cột, 3 cột, cột bên trái, bên phải...), bạn có thể trải nghiệm thử bằng cách bấm trái chuột vào mẫu themes và chọn Demo để xem thử, nếu vừa ý bạn bấm Download để tải mẫu themes đó về máy tính. Khi tải về, bạn giải nén sẽ thu được một files có đuôi .Xml.
Để bắt đầu đổi thems mới, bạn đăng nhập vào Blog > chọn thiết kế > chọn chỉnh sửa HTML
Tại trang chỉnh sửa HTML, bạn bấm thẻ Duyệt để duyệt đến file .Xml mà bạn vừa tải về, sau đó bấm thẻ Tải lên để đổi giao diện. Bạn chờ một lát, khi hoàn thành xong Blogger sẽ báo cho bạn các tiện ích cần giữ lại hoặc xoá nó đi (tuỳ theo mục đích sử dụng, bạn chọn giữ lại hoặc xoá đi cũng được), cuối cùng bấm Lưu mẫu và đăng nhập vào Blog để xem giao diện mới của mình.
nếu bạn đang sử dụng giao diện mới của Blogspot thì bạn phải đăng nhập vào Blog > Chọn MẪU, sau đó bấm vào thẻ SAO LƯU/PHỤC HỒI ở phía trên cùng bên phải để đi đến thẻ BROWSE, các bước còn lại giống như hướng dẫn ở trên.
Trước khi đổi theme mới, nếu bạn muốn giữ lại theme cũ để sau này dùng đến, bạn đăng nhập vào Blog > chọn thiết kế > chọn chỉnh sửa HTML và bấm thẻ Tải mẫu xuống đầy đủ. Khi tải về, bạn cũng được 1 files có đuôi .Xml, bạn lưu giữ nó vào máy tính, bây giờ bạn có thể yên tâm để thử nghiệm các mẫu theme mới, nếu không thích mẫu mới bạn có thể sử dụng lại mẫu cũ bằng các bước tương tự như trên.
Với các bước kể trên, hy vọng các bạn có thể tạo cho mình một Blogger có giao diện vừa ý...
Chúc các bạn thành công.
HIỂN THỊ CÁC BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 6)
Người đăng: kiemdaigia
Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị 2 bài một lúc được chia thành 2 cột trong khung tiện ích và được tự động thay đổi theo một khoảng thời gian nhất định. Mỗi bài viết sẽ hiển thị một hình đại diện nhỏ đi kèm với tiêu đề, ngày tháng xuất bản, số lượng comments và vài dòng tóm tắt.Mời các bạn xem thử (bấm vào XEM THỬ phía dưới để trải nghiệm nha)
Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > chọn Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh ]]></b:skin> và dán tất cả code phía dưới trên dòng lệnh ]]></b:skin> và bấm Lưu mẫu.
#NewsTicker_horizontal{
border:solid 1px #ccc;
width:600px;
height:200px;
}
#NewsTicker_horizontal h1{
padding:6px;
margin:0;
background:#616D7E;
color:#fff;
font-size:11px;
font-weight:bold;
}
#NewsHorizontal {
width: 600px;
height: 200px;
display: block;
overflow: hidden;
position: relative;
}
#TickerHorizontal {
width: 600px;
height: 140px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerHorizontal li {
width: 280px;
border-right:1px solid #ccc;
text-align: left;
font-size: 12px;
margin: 0;
padding: 6px 10px;
float: left;
height: 162px;
display: inline;
}
#TickerHorizontal li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerHorizontal li a:hover {
color: #666;
text-decoration:underline;
}
#TickerHorizontal li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerHorizontal li .NewsFooter{
display: block;
color: #000;
font-size: 10px;
margin: 0px 0px 0px 70px;
}
border:solid 1px #ccc;
width:600px;
height:200px;
}
#NewsTicker_horizontal h1{
padding:6px;
margin:0;
background:#616D7E;
color:#fff;
font-size:11px;
font-weight:bold;
}
#NewsHorizontal {
width: 600px;
height: 200px;
display: block;
overflow: hidden;
position: relative;
}
#TickerHorizontal {
width: 600px;
height: 140px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerHorizontal li {
width: 280px;
border-right:1px solid #ccc;
text-align: left;
font-size: 12px;
margin: 0;
padding: 6px 10px;
float: left;
height: 162px;
display: inline;
}
#TickerHorizontal li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerHorizontal li a:hover {
color: #666;
text-decoration:underline;
}
#TickerHorizontal li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerHorizontal li .NewsFooter{
display: block;
color: #000;
font-size: 10px;
margin: 0px 0px 0px 70px;
}
Ở code trên, các bạn có thể thay đổi các số màu đỏ và màu tìm để phù hợp cho Blog của mình (Width: chiều rộng tiện ích, Height: chiều cao tiện ích, còn số màu tím 280px là độ rộng của mỗi cột). Lưu ý: nếu thay đổi chiều cao và chiều rộng của tiện ích các bạn phải thay đổi đồng thời chiều rộng của mỗi cột thì nó mới tương xứng nha.
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJKrlcU9OShHbBLutw23l4aUvoCz0MNCS6HimD1HMsRrlXWift0Prly6o71d4SD04kQsgimt15MJ70FBWjDw9vI4mm2doRo7D4D325Epj4BYbiK5OhI294GSBBNcMUXfyV7-Kq6SZeVNa/";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "TRANG TRÍ BLOG"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.dunghennessy.blogspot.com/"; //thay thành địa chỉ blog của bạn
</script>
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66348944/mootools.1.11.js"></script>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJKrlcU9OShHbBLutw23l4aUvoCz0MNCS6HimD1HMsRrlXWift0Prly6o71d4SD04kQsgimt15MJ70FBWjDw9vI4mm2doRo7D4D325Epj4BYbiK5OhI294GSBBNcMUXfyV7-Kq6SZeVNa/";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "TRANG TRÍ BLOG"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.dunghennessy.blogspot.com/"; //thay thành địa chỉ blog của bạn
</script>
<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66348944/mootools.1.11.js"></script>
<div id="NewsTicker_horizontal">
<h1>TRANG TRÍ BLOG</h1>
<div id="NewsHorizontal">
<script src="http://dl.dropbox.com/u/66348944/Horizontal_re-label.js" language="javascript">
</script>
</div></div>
<script src="http://dl.dropbox.com/u/66348944/Ticker_Horizontal.js" type="text/javascript"></script>
<h1>TRANG TRÍ BLOG</h1>
<div id="NewsHorizontal">
<script src="http://dl.dropbox.com/u/66348944/Horizontal_re-label.js" language="javascript">
</script>
</div></div>
<script src="http://dl.dropbox.com/u/66348944/Ticker_Horizontal.js" type="text/javascript"></script>
Bây giờ, bạn có thể thay đổi các giá trị như: địa chỉ blog, tên nhãn, số bài viết hiển thị, tiêu đề tiện ích theo ý thích của mình (có ghi chú trên code).
Ngoài ra, với thủ thuật này bạn cũng có thể tạo KHUNG TRÌNH DIỄN CÁC BÀI ĐĂNG MỚI NHẤT CHO TOÀN BLOG bằng cách thay chữ label (màu xanh) thành chữ post và thay chữ TRANG TRÍ BLOG (màu xanh) thành chữ CÁC BÀI ĐĂNG MỚI (hoặc chữ nào mà bạn thích) bấm Lưu lại là xong.
Lưu ý: Ở code thứ hai, các bạn phải điền thật chính xác tên nhãn và đường link địa chỉ blog của mình thì nó mới hiển thị, nếu không nó sẽ bị lỗi ra một khung trắng (không hiển thị).
Nguồn: Trai đất mũi
KHẮC PHỤC VIỆC KHÔNG GÕ ĐƯỢC TỪ XÁC MINH Ở COMMENTS
Người đăng: kiemdaigia on Thứ Tư, 23 tháng 11, 2011
Có một số giao diện Blogspot, các bạn không thể gõ được từ xác minh ở khung comments để đăng bình luận cho mình được.
Để khắc phục hiện tượng này các bạn sẽ có 3 cách như sau:
1/ KHÔNG CHO HIỂN THỊ TỪ XÁC MINH:
Bạn đăng nhập vào Blog > chọn Cài đặt và chọn thẻ Nhận xét. (Rê chuột vào ảnh để xem ảnh với kích thước lớn hơn.)
Sau đó một bảng thiết lập cho khung nhận xét hiện ra.
Bạn kéo xuống phía dưới ở mục "Hiển thị xác minh từ cho các nhận xét?" và đánh dấu vào ô tròn trước chữ Không, cuối cùng bấm Lưu cài đặt là xong.
Với cách này, thì khi nhận xét xong các bạn sẽ không thấy khung xác minh từ nữa mà nhận xét sẽ tự động xuất bản luôn.
2/ TẠO THANH TRƯỢT CHO KHUNG XÁC MINH TỪ:
Bạn đăng nhập vào Blog > chọn Thiết kế > chọn chỉnh sửa HTML (đánh dấu mở rộng mẫu tiện ích), bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh scrolling='no' và Enter thì bạn sẽ thấy dòng lệnh giống như thế này xuất hiện ở khung lớn phía trên
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='417'/>
Bây giờ, bạn thay đổi chữ 'no' thành chữ 'auto' và bấm Lưu mẫu, trở lại Blog xem kết quả.
Với cách này thì khung xác minh từ sẽ có một thanh trượt ở bên tay phải bạn chỉ việc kéo thanh trượt chạy lên thì sẽ gõ được từ xác minh để xuất bản bình luận cho mình.
Với cách này thì khung xác minh từ sẽ có một thanh trượt ở bên tay phải bạn chỉ việc kéo thanh trượt chạy lên thì sẽ gõ được từ xác minh để xuất bản bình luận cho mình.
3/ THIẾT LẬP LẠI CHIỀU CAO CỦA KHUNG XÁC MINH TỪ:
Bạn làm tương tự như ở cách 2 nhưng bạn thay đổi chiều cao của khung xác minh từ ở mục Height thành số lớn hơn
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='417'/>
Và cuối cùng cũng bấm Lưu mẫu, trở vào Blog xem kết quả.
Còn với cách này thì khung xác minh từ sẽ cao hơn từ đó bạn sẽ dễ dàng gõ được từ xác minh khi xuất bản bình luận.
Theo tôi thì các bạn nên làm cách 1 là tốt nhất và đơn giản nhất, còn cách 2 và 3 vì phải chỉnh sửa trong mã lệnh HTML nguồn của Blog nên rất "nguy hiểm" vì khi bạn chỉnh sửa "vô tình" thay đổi làm xáo trộn một mã lệnh nào đó mà bạn không biết sẽ làm cho giao diện Blog bị lỗi...
Bạn làm tương tự như ở cách 2 nhưng bạn thay đổi chiều cao của khung xác minh từ ở mục Height thành số lớn hơn
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='417'/>
Và cuối cùng cũng bấm Lưu mẫu, trở vào Blog xem kết quả.
Còn với cách này thì khung xác minh từ sẽ cao hơn từ đó bạn sẽ dễ dàng gõ được từ xác minh khi xuất bản bình luận.
Theo tôi thì các bạn nên làm cách 1 là tốt nhất và đơn giản nhất, còn cách 2 và 3 vì phải chỉnh sửa trong mã lệnh HTML nguồn của Blog nên rất "nguy hiểm" vì khi bạn chỉnh sửa "vô tình" thay đổi làm xáo trộn một mã lệnh nào đó mà bạn không biết sẽ làm cho giao diện Blog bị lỗi...
GALLERY
Người đăng: kiemdaigia
THEMES GALLERY
Nguồn:PB templates
SHADES OF GRAY
Người đăng: kiemdaigia
THEMES SHADES OF GRAY
Nguồn:PB templates
