Trước đây, tôi có chia sẻ với các bạn tiện ích xem báo ngay tại blog (kiểu 1) xem TẠI ĐÂY , hôm nay tôi sẽ tiếp tục chia sẻ với các bạn cách...
XEM TRỰC TIẾP MỘT TRANG WEB NGAY TẠI BLOG
Khi đang ở trang Blog của mình, nếu bạn muốn xem một trang Web bất kỳ nào đó thì bạn phải mở thêm Tab mới trên trình duyệt. Với thủ thuật đơ...
Thêm 2 cột tiện ích trên khu vực bài đăng
Đầ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 <div id='main-wrapper'> rồi Enter, bạn sẽ thấy trên bảng lớn có dòng lệnh này và được highlight màu xanh.
<b:widget id='Text512' locked='false' title='Column 1' type='Text'/>
</b:section>
<b:widget id='Text522' locked='false' title='Column 2' type='Text'/>
</b:section>
- <div style="clear:both;"></div>
Bước kế tiếp, bạn gõ vào hộp tìm kiếm dòng lệnh ></b:skin> và copy code phía dưới vào ngay trên dòng lệnh ></b:skin>
#magazine-left2 {
width: 45%;
float: left;
}
#magazine-right2 {
width: 45%;
float: right;
}
Thông thường các bạn có thể thêm nhiều tiện ích trên khu vực bài đăng nhưng những tiện ích này sẽ có chiều ngang bằng với chiều ngang của kh...
TẠO 5 TAB CHO MỘT TIỆN ÍCH
Đầ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ả code phía dưới vào
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById('tt'+i);
tr = document.getElementById('dd'+i);
ta = document.getElementById('aa'+i);
if(t==i){
if(t==1) ts.className="Tab1";
if(t==2) ts.className="Tab2";
if(t==3) ts.className="Tab3";
if(t==4) ts.className="Tab4";
if(t==5) ts.className="Tab5";
ta.className="srchlinksel2";
ts.style.borderBottom="1px solid #FFFFFF";
tr.style["display"]="block";
tr.style["visibility"]="visible";
}
else{
ts.className="tb2";
ta.className="srchlink2";
ts.style.borderBottom="1px solid #B5D6EF";
tr.style["display"]="none";
tr.style["visibility"]="hidden";
}
}
}
</script>
FONT-SIZE: 10px; FONT-FAMILY: arial
}
.f11 {
FONT-SIZE: 11px; FONT-FAMILY: arial
}
.f12 {
FONT-SIZE: 12px; FONT-FAMILY: arial
}
.f12r {
FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial
}
.f12n {
FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial
}
.ft11a {
FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma
}
.fv9 {
FONT-SIZE: 9px; FONT-FAMILY: verdana
}
.fv10 {
FONT-SIZE: 10px; FONT-FAMILY: verdana
}
.ft11 {
FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma
}
.fmicro9 {
FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif
}
A.srchlink:link {
COLOR: #2864b4; TEXT-DECORATION: none
}
A.srchlink:visited {
}
A.srchlinksel:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlink2:link {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlink2:visited {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlinksel2:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel2:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
.tb2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6
}
.tbmain2 {
BACKGROUND-COLOR: #ffffff
}
.lfttbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6
}
.rttbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb
}
.rttblx {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff
}
.rt_tbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd
}
.toptbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b
}
.srchtbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede
}
.Tab1 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #fedfb3
}
.Tab2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #b39dfe
}
.Tab3 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #f6fe9d
}
.Tab4 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #feaf9d
}
.Tab5 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #9dfea5
}
A {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline}
</style>
<!-- CSS End //-->
<!-- Widget Code Ends Here -->
width="380">
<tbody>
<tr>
<td align="middle" onclick="st2('1')" height="22" id="tt1"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="70"
class="Tab1"><a id="aa1"
class="srchlinksel2" href="javascript:undefined"><font
class="f12"><b>TIÊU ĐỀ TIỆN ÍCH 1</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('2')" height="22" id="tt2"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="47"
class="tb2"><a id="aa2"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TIÊU ĐỀ TIỆN ÍCH 2</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('3')" height="22" id="tt3"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="62"
class="tb2"><a id="aa3"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TIÊU ĐỀ TIỆN ÍCH 3</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('4')" height="22" id="tt4"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="48"
class="tb2"><a id="aa4"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TIÊU ĐỀ TIỆN ÍCH 4</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('5')" height="22" id="tt5"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="52"
class="tb2"><a id="aa5"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TIÊU ĐỀ TIỆN ÍCH 5</b></font></a></td></tr>
<tr>
<td colspan="9">
<div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px;
BORDER-BOTTOM: 0px"
><!-- Main Headlines Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380" height="5">
<tbody>
<tr>
<td height="5"></td></tr></tbody></table>
<font color="#797979" class="f10"
>
<!-- wmlheadline begin -->
<!-- TDate Begin -->
<!-- Date Begin -->
</font>
<!-- Date End -->
<!-- TDate End -->
<div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">
NỘI DUNG CỦA TIỆN ÍCH 1, BẠN DÁN VÀO ĐÂY
</font></td>
</tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://dunghennessy.blogspot.com/"
target="_blank">dunghennessy</a></b>
</font></td></tr>
<tr>
<td height="4"></td></tr></tbody></table></div><!-- Main
Headlines End //--></div>
<div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- News Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">
NỘI DUNG CỦA TIỆN ÍCH 2, BẠN DÁN VÀO ĐÂY
</font></td></tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://dunghennessy.blogspot.com"
target="_blank">dunghennessy</a></b>
</font></td></tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- News End
//--></div>
<div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Business Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">
NỘI DUNG CỦA TIỆN ÍCH 3, BẠN DÁN VÀO ĐÂY
</font></td></tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://dunghennessy.blogspot.com"
target="_blank">dunghennessy</a></b>
</font></td></tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Business End
//--></div>
<div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Movies Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">
NỘI DUNG CỦA TIỆN ÍCH 4, BẠN DÁN VÀO ĐÂY
</font></td>
</tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://dunghennessy.blogspot.com"
target="_blank">dunghennessy</a></b>
</font></td></tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Movies End
//--></div>
<div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Sports Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">
NỘI DUNG CỦA TIỆN ÍCH 5, BẠN DÁN VÀO ĐÂY
</font></td></tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://dunghennessy.blogspot.com"
target="_blank">dunghennessy</a></b>
</font></td></tr>
<tr>
<td
height="4"></td></tr></tbody></table>
Bây giờ, bạn thay đổi TIÊU ĐỀ TIỆN ÍCH (dòng màu đỏ) và NỘI DUNG TIỆN ÍCH (dòng màu xanh), và bấm Lưu lại là xong.
Lưu ý: Tiện ích mẫu tôi làm với kích thước 380px, nếu bạn muốn thay đổi để cho phù hợp với blog của mình thì bạn phải thay đổi TẤT CẢ SỐ 380px THÀNH SỐ KHÁC MÀ MÌNH MUỐN
Để tiết kiệm không gian Blog, bạn có thể gom các tiện ích vào một tiện ích HTML chung, các tiện ích này sẽ có các TAB riêng, khi cần xem tiệ...
THAY ĐỔI MÀU NỀN VÀ THÊM ICON CHO THANH TIÊU ĐỀ TIỆN ÍCH
.main .Blog {
border-bottom-width: 0;
}
.sidebar .widget h2 {
background: yellow url('URL OF YOUR IMAGE') no-repeat left top;
margin-top:5px;
text-indent: 20px;
padding:7px;
}
Các bạn có thể dễ dàng thay đổi màu nền cho thanh tiêu đề tiện ích khi vào thẻ "Trình thiết kế mẫu", nhưng thẻ này chỉ áp dụng cho...
BEST PHOTOGRAPHY
Đây là Theme có 1 sidebar hiển thị bên tay phải của bài đăng có 1 menu ngang phía trên (dưới banner), khu vực bài đăng được chia thành 2...
TRÌNH DIỄN ẢNH CHẠY TỪ DƯỚI LÊN
Mẫu
<img src="DÁN LINK ẢNH CỦA BẠN Ở ĐÂY"/>
<img src="DÁN LINK ẢNH CỦA BẠN Ở ĐÂY"/>
<img src="DÁN LINK ẢNH CỦA BẠN Ở ĐÂY"/>
</marquee>
Lưu ý!!!
Để cho trình diễn ảnh được đẹp, bạn nên chọn các ảnh có kích thước tương đối giống nhauBạn có nhiều ảnh đẹp muốn trang trí lên blog hoặc trên một bài đăng của mình? Bạn có thể tạo tiện ích trình diễn ảnh tự chạy từ dưới lên, từ...
FLASH ĐẸP CHO BLOG (PHẦN 10)
MẪU 1:
MẪU 2:
MẪU 3:
MẪU 4:
MẪU 5:
MẪU 6:
MẪU 7:
MẪU 8:
MẪU 9:
MẪU 10:
Dưới đây là một số files flash đẹp để bạn có thể trang trí cho Blog mình thêm đẹp, ứng với mỗi files flash là mã code phía dưới, bạn chỉ cần...
GẮN DANH NGÔN VÀO BLOG
2/ Danh ngôn về PHỤ NỮ:
3/ Danh ngôn về THỜI GIAN:
4/ Danh ngôn về TÌNH BẠN:
5/ Danh ngôn về TÌNH YÊU:
6/ Danh ngôn về GIA ĐÌNH:
7/ Danh ngôn về HẠNH PHÚC:
8/ Danh ngôn về TÂM HỒN:
9/ TỤC NGỮ:
10/ Danh ngôn DZUI:
Bạn muốn gắn những câu danh ngôn, những lời hay ý đẹp cho blog? Rất đơn giản, với vài dòng code bạn có thể dễ dàng "sắm" cho Blog ...
NEWSMAGZ
Đây là Theme có 2 sidebar hiển thị bên tay phải của bài đăng và nằm liền kề nhau, có 1 menu ngang phía trên (dưới banner), bạn bấm xem trư...
DANGEROUS GAME
Đây là Theme có 1 sidebar hiển thị bên tay trái và 1 siderbar hiển thị bên tay phải, có 1 menu ngang phía trên (dưới banner), bạn bấm xem t...
TẠO MÀU NỀN CHO CÁC DÒNG CHỮ
Rất đơn giản chỉ cần các bạn copy toàn bộ code phía dưới rồi đăng nhập vào blog > chọn Thiết kế > thêm tiện ích HTML/Javacript rồi dán vào
Để tạo thêm sự chú ý cho một thông báo hoặc muốn đánh dấu nổi bật cho dòng chữ chú thích trong một bài đăng nào đó, bạn có thể tạo thêm màu ...
PHOTOSHOP SPOT
Đây là Theme có 1 sidebar hiển thị bên tay trái, bạn bấm xem trước phía dưới, nếu thích thì bấm Download để tải theme này về và cài đặ...
NO MASK
Đây là Theme có 1 sidebar hiển thị bên tay trái, bạn bấm xem trước phía dưới, nếu thích thì bấm Download để tải theme này về và cài đặ...
Cheap Webhost
Đây là Theme có 1 sidebar hiển thị bên tay trái, có 3 sidebar phía dưới chân blog, bạn bấm xem trước phía dưới, nếu thích thì bấm Download...
RACE GAME
Nguồn: Deh Template
Đây là Theme có 1 sidebar hiển thị bên tay trái, có 3 sidebar phía dưới chân blog, bạn bấm xem trước phía dưới, nếu thích thì bấm Download đ...
HUG YOUR DREAM
Đây là Theme có 1 sidebar hiển thị bên tay trái, bạn bấm xem trước phía dưới, nếu thích thì bấm Download để tải theme này về và cài đặ...