Banner quảng cáo trượt dọc 2 bên trang web là hình thức quảng cáo rất phổ biến hiện nay trên các Forum\Website lớn. Không những giúp tận dụng “đất”, nó còn dễ dàng gây được sự chú ý của người đọc với hiệu ứng trượt theo khi trang được cuộn lên\xuống.

Tiện ích này trước đây đã được một số Blogger giới thiệu. Tuy nhiên có một số nhược điểm “chết người” như : không hiển thị tốt trên trình duyệt Firefox, hoặc nếu hiển thị thì khi click vào bất cứ liên kết nào trên Blog cũng không có tác dụng ( unclickable ).
Sau khi tham khảo code từ một số website tên tuổi, iTechPlus đã tìm được đoạn code ưng ý, có thể khắc phục được các lỗi nêu trên, đặc biệt là hiển thị tốt ngay cả trên trình duyệt “già nua xấu xí” IE6.

Trang iTechPlus.info hiển thị dưới độ phân giải 1280x800

Và cũng theo yêu cầu của một số bạn trước đây, hôm nay iTechPlus sẽ hướng dẫn các bạn cách chèn tiện ích “Banner quảng cáo trượt dọc 2 bên” vào Blog, qua 2 bước rất đơn giản sau :
1. Vào Thiết kế > Phần tử trang
2. Tạo một widget HTML\JavaScript và chèn vào đoạn code bên dưới :

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8jtorMYCf77mkrZmBJG1TPYQkagbcQ1lzxlrVEEelTETfTNQzwCxNJ29qOQ0mbwCPAWc3D951iFbB4omkThyphenhyphen_h-ycMUJQntTlaR_KZWXsGYfsc3YXAiiBY4doqlfmpKNgMOGVypEkFI/s512/bannerfpt.jpg" width="125" /></a>
</div>
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8jtorMYCf77mkrZmBJG1TPYQkagbcQ1lzxlrVEEelTETfTNQzwCxNJ29qOQ0mbwCPAWc3D951iFbB4omkThyphenhyphen_h-ycMUJQntTlaR_KZWXsGYfsc3YXAiiBY4doqlfmpKNgMOGVypEkFI/s512/bannerfpt.jpg" width="125" /></a>      
</div>
<script>
    function FloatTopDiv()
    {
        startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;
        var d = document;
        function ml(id)
        {
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
            el.x = startRX;
            el.y = startRY;
            return el;
        }
        function m2(id)
        {
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};
            e2.x = startLX;
            e2.y = startLY;
            return e2;
        }
        window.stayTopLeft=function()
        {
            if (document.documentElement && document.documentElement.scrollTop)
                var pY =  document.documentElement.scrollTop;
            else if (document.body)
                var pY =  document.body.scrollTop;
            if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;};
            ftlObj.y += (pY+startRY-ftlObj.y)/16;
            ftlObj.sP(ftlObj.x, ftlObj.y);
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);
            setTimeout("stayTopLeft()", 1);
        }
        ftlObj = ml("divAdRight");
        //stayTopLeft();
        ftlObj2 = m2("divAdLeft");
        stayTopLeft();
    }
    function ShowAdDiv()
    {
        var objAdDivRight = document.getElementById("divAdRight");
        var objAdDivLeft = document.getElementById("divAdLeft");       
        if (document.body.clientWidth < 1000)
        {
            objAdDivRight.style.display = "none";
            objAdDivLeft.style.display = "none";
        }
        else
        {
            objAdDivRight.style.display = "block";
            objAdDivLeft.style.display = "block";
            FloatTopDiv();
        }
    } 
</script>
<script>
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");
</script>

Trong đoạn code trên :

• <a href="#"> : liên kết đến khi người đọc click vào. Thay # bằng liên kết trang bạn cho phù hợp
• <img src=”…”/> : banner bạn muốn hiển thị
• width="125" : chiều rộng của banner. Có 2 giá trị được đánh dấu cùng màu đỏ
• MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu xanh lá
• LeftAdjust = 5 : khoảng cách từ bìa trái trang web đến banner
• RightAdjust = 5 : khoảng cách từ bìa phải trang web đến banner
• TopAdjust = 10 : khoảng cách từ rìa trên trang web đến banner

Lưu ý : Do tiện ích sử dụng những giá trị xác định để điều chỉnh vị trí của banner so với trang web, do đó, tính thẩm mỹ của tiện ích sẽ phụ thuộc vào độ phân giải của màn hình máy tính.
3. Save and Done.
Chúc các bạn thành công !

Nguồn: itechplus.info

Read more…

(Traidatmui.com) – Trước đây mình có giới thiệu cùng các bạn một thủ thuật là tạo banner chạy dọc hai bên của blog. Tuy nhiên với thủ thuật cũ thì banner chỉ trượt tốt với trình duyệt IE (Internet Explorer) còn với Firefox thì banner không chạy được. Cũng chính vì hạn chế của thủ thuật trước, hôm nay mình xin giới thiệu với các bạn một bản hoàn thiện hơn, banner sẽ chạy tốt hơn trên cả hai trình duyệt.
Các bước thực hiện thủ thuật này cũng không phức tạp hơn thủ thuật cũ, bạn chỉ việc làm theo một vài bước đơn giản bên dưới.

1. Đăng nhập vào tài khoản
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code sau vào bên dưới thẻ <head>

<style type='text/css'>
#slideads{
position: absolute;
visibility: hidden;}

#slideads1{
float:left;
margin-left: 20px;}

#slideads2{
float:right;
margin-right: 20px;}
</style>
<script src='http://traidatmui-tips.googlecode.com/files/slide_ads.js' type='text/javascript'/>

4. Bây giờ save template lại và trở về phần tử trang, tạo thêm 1 phần tử HTML/Javascript
5. Thêm vào phần tử HTML/Javascript code bên dưới

<div id="slideads">
<div id="slideads1" class="slideads1">
<a target="_blank" href="http://www.traidatmui.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXuxqFDhz8Ev6NhSnv7GuziUrwD6rGQ1FVMCpCXEejasLkwZ9lXVP5rmkm2w63xZQ2htYn2n3xKfJi4m5pu-zlZZYI7_1_ByGuIcrCljan4sr3jyJEEtT-71zoPcsKFlyFv_ER8yCtwyMC/" border="0"/></a>
</div>
<div id="slideads2" class="slideads2">
<a target="_blank" href="http://www.traidatmui.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYJbJfXhVGbiJ7WEt39DPpYlutv2-jg26jHueJJH9c7RRFHqKYv8Kfi1JkzJTZ-RvvdXYZt1fOaRXasxgbKy4dB7LDOtSZch9-haQfEG4-IlZ8pcinHCUB1A8sN582e1hoX69MYWi9cUP/" border="0"/></a>
</div>
</div>

Chỉnh code: Bạn hãy thay link ảnh trong code (dòng màu cam) thành banner của mình có thể bạn thêm độ rộng và độ cao của ảnh tùy ý.
- Thay đường dẫn cho banner tương ứng dòng màu xanh đậm trong code trên.

6. Đến đây bạn chỉ việc save lại là xong

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

Nguồn traidatmui.com

Read more…

Các bạn vào các link sau để down load file chương trình và file PDF về xem nhé.

http://www.mediafire.com/?3fx5c3l6ta73kia  File chuong trình

http://www.mediafire.com/?t913aq6cu6v3qcb file PDF

Read more…

Sau đây là cách tự tạo một forum nhanh chóng. Nếu bạn có bản lĩnh và thích thử thách chính mình thì vào đây nhé!

1/ Đầu tiên bạn truy cập vào website: http://www.forumotion.com 2/ Sau khi load xong, phía bên trái sẽ thấy một con nhái há họng to chảng gào hai câu "Creat a free forum" và "Create a free blog". Bạn biết mục tiêu của bạn cần làm là gì rồi phải không? Click vào Create a free forum.
3/ Việc đầu tiên bạn phải làm là chọn một theme (mẫu khung hình) đơn giản trước, hoặc các theme khác đẹp hơn ở phần hitskin. Nhưng bạn cũng có thể sửa lại theme sau này, chẳng sao cả(nếu muốn xem qua dung nhan cái theme mình chọn, bạn click vào chữ Preview màu xanh ở dưới).

Kéo xuống dưới và click vào mũi tên có chữ Continue để tiếp tục.
4/ Giờ là lúc bạn vận dụng vốn liếng kiến thức tiếng Anh đã được học đây.
Title of your forum: điền tên cho forum yêu dấu của bạn
Category: nội dung chính của forum bạn: thể thao, giải trí, truyền thông....
Description : mô tả khái quát về forum. Nhớ là KHÁI QUÁT thôi nhá. Sau khi bạn lập, lời giới thiệu này sẽ thuộc dạng một cái banner của bạn đó, đâu có khách nào lại thích xem một cái quảng cáo toàn chữ là chữ đâu nè!
Internet Address of your forum (at least 4 characters): Điền địa chỉ cho forum mong muốn của bạn, ít nhất 4 ký tự. Sau đó, chọn một tên miền dễ nhớ và bạn thích. Ví dụ, mình đặt tên là uyencong, tên miền forummotion.com, thế thì địa chỉ của mình là uyencong.forummotion.com, thế thôi!
Language used on your forum : chọn ngôn ngữ cho forum của bạn. Ôi, nói về mặt ngôn ngữ thì forum nì đúng là ý ẹ. Quá ư là nghèo nàn, nhưng kệ, chúng ta có bản lĩnh thì giỏi làm như họ ấy, đừng có chê!
Hour / Timezone : cái này thì chúng ta học địa lý rồi nhé, múi giờ của Bangkok, Hanoi, Jakarta là....(không nhớ hả?) GMT+7, OK?

Còn hai dòng cuối là riêng tư cho admin (administrator: ở đây nghĩa là người điều hành)
Your e-mail address : điền email của bạn vào
Administration password : điền password của admin, nhớ là tối thiểu 6 ký tự, có cả chữ và số đó nhé, không thôi thì cứ bị báo lỗi password không thôi
Tick vào ô trống của dòng I agree with these terms and conditions, nói chung, những hoạt động trong sáng của chúng ta sẽ không bị phạm lỗi lầm gì cả nên khỏi lo. Nhưng nếu bạn nghi ngờ về mình hay đơn giản là muốn học tiếng Anh, cứ click vào Terms of service để đọc luật, mình rất ủng hộ ai có tinh thần học hỏi.
Click vào Continue để tiếp tục. Nếu có hộp thoại hỏi có nên ghi nhớ password hay không, quyền lựa chọn là ở bạn.
Important information là những điều quan trọng các bạn cần đọc qua để hiểu. Bạn cũng có thể để tiếng anh, hay dịch ra tiếng việt rồi lưu lại, xong để vào forum của mình làm cái rule (luật) riêng cho nó.
Administration password Checking: gõ lại password bạn đã chọn, để kiểm định ấy mà.
Nhấp tiếp vào Continue, nhưng theo mình thấy thì do lỗi hình, cái mũi tên đã thành ra méo mó, kệ, cứ dí nó, thấy bàn tay nổi lên là click, xong thôi!
5/ Nếu làm thành công, bạn sẽ có cái cúp to đùng thế này nè...

Ghi chú là nếu bạn đã có đăng ký tài khoản thì tên truy cập (username) của bạn chính là cái bạn đã đăng ký (nhưng khoản đăng ký này dài dòng hơn, và chưa chắc các bạn đã hiểu, nhưng bạn cứ khám phá khi thích nhé), nếu không, mặc định tên truy cập của bạn là admin
6/ Và bây giờ, bạn click vào cái link (địa chỉ) của forum bạn để bắt đầu "làm vua". Nhớ nhập tên truy cập và mật khẩu à nhá!

Nếu chọn tiếng Việt, bạn click vào "Bảng điều khiển của người quản trị" ở cuối trang để Quản lý giao diện, Quản lý diễn đàn, Quản lý tổng thể, Quản lý người dùng và nhóm, Quản lý các tính năng ưu việt khác (tạo portal, sưu tập ảnh - gallery...). Nói trước với các bạn là cái trang này nó còn "củ chuối" lắm. Thi thoảng bạn sẽ thấy mấy chữ tiếng anh tiếng việt nửa nạc nửa mỡ gắn với nhau, thôi kệ. Bây giờ, sự đoàn kết là trên hết. Mời gọi các member (thành viên) để giúp đỡ bạn thì hay hơn là ngồi đó kêu trời đó!
Cũng tương tự như thế, bạn click Administration panel cũng ở cuối trang để làm các việc tương tự, nhưng bằng tiếng Anh. Đây là cơ hội để các bạn chứng tỏ bản lĩnh tiếng Anh của mình. Nhưng mà cũng dễ thôi, chứ không đến nỗi như các bạn nghĩ đâu!

CHÚC CÁC BẠN THÀNH CÔNG
http://sangnguyenms.forumvi.com/

Read more…

(Traidatmui.com) - Hôm nay mình giới thiệu đến bạn tiện ích cũng khá hay dành cho Blogger, tiện ích này sẽ hiển thị số lần khách truy cập vào blog của bạn, nói cách khác là nó sẽ đến số lần khách ghé thăm blog của bạn. Ở đây mình giới thiệu cho bạn 2 dạng của tiện ích, một dạng là dạng text đơn giản và một dạng sẽ hiển thị cửa sổ popup.

Bạn có thể chọn một trong hai tiện ích này để đặt vào blog.

Hình ảnh minh họa dạng text

Hình ảnh minh họa dạng popup

1. Đăng nhập tài khoản Blogger
2. Vào thiết kế
3. Chọn thêm tiện ích
4. Thêm 1 HTML/Javascript và thêm vào 1 trong 2 code bên dưới.

a. Dạng cửa sổ popup

<script language="JavaScript">
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (2 < argc) ? argv[2] : null;
var path = (3 < argc) ? argv[3] : null;
var domain = (4 < argc) ? argv[4] : null;
var secure = (5 < argc) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DisplayInfo() {
var expdate = new Date();
var visit;
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
if(!(visit = GetCookie("visit")))
visit = 0;
visit++;
SetCookie("visit", visit, expdate, "/", null, false);
var message;
if(visit == 1)
message=" Chào bạn đến với TRAIDATMUI.com!";
if(visit== 2)
message=" Rất vui bạn trở lại";
if(visit >= 3)
message=" Chúc bạn luôn vui vẻ";
alert("Bạn đã truy cập vào trang này"
+" "+visit+""
+" lần. "
+message);
}
function ResetCounts() {
var expdate = new Date();
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
visit = 0;
SetCookie("visit", visit, expdate , "/", null, false);
history.go(0);
}
window.onload=DisplayInfo
</script>

b. Dạng text

<script language="JavaScript">
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function amt(){
var count = GetCookie('count')
if(count == null) {
SetCookie('count','1')
return 1
}
else {
var newcount = parseInt(count) + 1;
DeleteCookie('count')
SetCookie('count',newcount,exp)
return count
}
}
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
</script>

<script>
document.write("Bạn đã truy cập vào trang này <b>" + amt() + "</b> lần")
</script>

Bạn có thể thay các dòng text màu xanh trên theo ý của bạn.

5. Cuối cùng save tiện ích lại

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

Nguồn traidatmui.com

Read more…

Sidebar là thành phần nằm bên trái hay phải hoặc cả hai của blog (phụ thuộc vào template). Trong blogger.com bạn có thể dễ dàng nhìn thấy trên Layout (Xem hình 2). Khi click xem blog, các thành phần này sẽ hiển thị đúng như những gì bạn sắp xếp hay thay đổi tại layout.

Về cơ bản bạn có thể xem hình minh họa cụ thể layout (hình 1) và hiển thị của nó (hình 2).

Hình 1

Hình 2

Kích thước sidebar template của tôi là bao nhiêu và chỉnh thế nào?
Đăng nhập vào blogger.com, trên Template (Mẫu) click Edit HTML (Chỉnh sửa HTML), kéo thanh trượt và tìm như dưới hình. Chiều rộng của sidebar đối với template ví dụ này là 220px (pixels). Tất nhiên ai ngăn cản bạn thay đổi? Ở đây không giới hạn chiều cao (height).

Hình 2a

Bạn có thể cho phép hiển thị gì ở sidebar?
Như đã nói, sidebar là thành phần cơ bản không thể thiếu của blog. Bạn có thể thêm bất kỳ widget nào vào đây bằng cách click trên Add a Page Element (Thêm phần tử trang) (hình 3), chọn và thực hiện thao tác theo hướng dẫn của mỗi widget. Blogger.com cung cấp đủ các widget cho bạn thỏa sức sử dụng, đặc biệt hơn cả bạn có thể chèn mã ứng dụng được cung cấp bởi một hãng thứ ba (widget HTML/JavaScrpipt), không giới hạn số lượng. Về điểm này, nhiều nhà cung cấp blog khác còn lâu mới đuổi kịp!

Hình 3

Làm thế nào để sắp xếp các widget trên sidebar?
Rất đơn giản, bạn chỉ cần kéo và thả (drop and drag) vị trí của chúng theo trật tự ưu thích sau đó click Save (Lưu lại) để kết thúc.

Hình 4

Làm thế nào để đổi màu nền cho sidebar?
Bạn vào Edit HTML (Chỉnh sửa HTML), kéo thanh trượt và chèn đoạn mã như hình 5:

background: #giátrịmàuthậplục;

Ví dụ: Màu đỏ

background: #cc0000;

Hình 5

Lưu ý thêm, khi chúng ta dùng màu nền trong body, màu nền này phủ lên toàn trang, nghĩa là sẽ phủ hết cả header, main, sidebar và footer. Còn màu nền cho sidebar chỉ thay đổi trên sidebar.

Làm thế nào để đổi màu nền cho nhan đề widget trên sidebar?
Bạn muốn có một nhan đề có màu khác với nội dung trên mỗi widget? Trước hết bạn cần thêm một thành phần để hiển thị nhan đề. Hãy chép đoạn mã này và paste như hình 6.

.sidebar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-color: #ffffff;
font-size: 120%;
font-weight:bold;
color: #333333;
}

Hình 6

Trong đó các giá trị bạn margin và padding, background-color (màu nền) và color(màu), font-weight (kiểu hiển thị font: đậm, nghiêng), font-size (kích thước chữ)... cho text nhãn của widget được chèn vào sidebar. Hãy thay đổi các giá trị màu theo ý thích của bạn.

Giá trị màu ở đây là giá trị thập lục phân. Tôi sẽ viết một bài hướng dẫn về các biến màu mà blogger.com sử dụng và cách lấy giá trị này. Để đơn giản bạn có thể dùng link này http://www.colorschemer.com/online.html tìm mã màu.

Kết quả của hiển thị đoạn mã này, hình 7:

Hình 7

Làm thế nào để hiển thị đường viền (border) cho sidebar?
Đường viền dựa trên vị trí hiển thị, độ rộng, kiểu và màu sắc.

Các vị trí: border-right, border-left, border-top, border-bottom (phải, trái, trên dưới), hoặc tất cả: border . Kết hợp với:
border-width (rộng)
border-style (kiểu)
border-color (màu)

Bạn có thể kết hợp các vị trí với các yếu tố rộng, kiểu và màu sắc. Ở đây tôi chỉ hướng dẫn bạn border-width, border-style, border-color,
1. border-width. (độ rộng đường viền)
Có thể bao gồm các giá trị px, em hay các từ khóa thin(mỏng), medium(trung bình), và thick(dầy). Ví dụ: Lần lượt các đoạn mã này sẽ cho kết quả một đường viền mỏng, 1px và 2em:

border-width: thin;
border-width: 1px;
border-width: 2em;

2. border-style. (kiểu đường viền)
Lần lượt các đoạn mã dưới đây là sẽ cho kết quả đường viền như hình 8.

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;

Hình 8

3. border-color (màu đường viền)
Có nhiều cách để sử dụng màu: giá trị thập lục phân, mã màu RGB hay thậm chí tên màu (tất nhiên bằng tiếng Anh). Ví dụ: màu đỏ

border-color: #FF0000;
border-color: red;

Cách dùng tắt: lần lượt độ rộng, kiểu và màu (ví dụ):

border-right: 1px dotted red;

Bạn có được đoạn mã chẳng hạn như ví dụ trên, hãy chép đoạn mã này vào vị trí như được tô màu ở hình 9 và kết quả hình 10

Hình 9

Hình 10

Làm thế nào để chèn đường viền cho các widget chứa link?
Các widget như là linklist hay chứa link, bạn có thể chèn đường viền bao quanh nó, việc chèn này không làm ảnh hưởng widget không chứa liên kết. Cách chèn hình 11 và kết quả hình 12.

Hình 11

Hình 12

Làm thế nào để chèn đường viền bao quanh nội dung trong các widget chứa link?
Cách chèn hình 13 và kết quả hình 14.

Hình 13

Hình 14

Làm thế nào để chèn đường viền cho tất các widget?
Kéo thanh trên trên Edit HTML (Chỉnh sửa HTML) và tìm (phụ thuộc vào template có thể không giống nhau)

.sidebar .widget, .main .widget { 
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Bạn thấy dòng border-bottom:1px dotted $bordercolor; cho biết đường viền dưới, độ rộng 1px, kiểu chấm, màu của biến bordercolor. Chúng ta muốn sử dụng là đường viền bao quanh tất cả, vì vậy sẽ dùng border. Xin đọc ở trên nếu chưa quen với đường viền. Ngoài ra chúng ta còn phải dùng đến padding để đường viền hiển thị cân đối với nội dung. Ví dụ ở đây tôi thay bằng dòng code như được dùng ở các hướng dẫn trên. Các vị trí và kết quả hiển thị lần lượt hình 15 và 16 và bao phủ toàn bộ sidebar cũng như main.

Hình 15

Để khắc phục điểm này, bạn chỉ cần sửa lại như hình 17 và kết quả hiển thị, hình 18.

Hình 17

Hình 18

Thông qua việc tìm hiểu sidebar, bạn sẽ nắm được những thành phần cơ bản để làm cho blog mình "không giống ai". Blog thể hiện cá tính của người, hãy sáng tạo thỏa thích những gì mình muốn nhé! 

Chúc buổi tối vui vẻ!

Nguồn: http://www.vina7.com

Read more…