* Bộ ảnh Dương Mịch tại I'M STUDIO

[nguyen_libra's blog - 27/08/2011]

Add to Cart More Info

Tạo popup chỉ xuất hiện một lần duy nhất cho blog

Thường vào các blogspot lớn bạn sẽ rất nhiều popup xuất hiện quảng cáo cho site khác. Chỉ cần load lại trang là lại thêm một số popup khác xuất hiện .Dẫn đến nhiều trường hợp giảm dần lượng khách đến site bạn .Đoạn code sau sẽ giúp bạn chèn quảng cáo popup và chỉ hiện 1 lần duy nhất tránh gây phiền hà cho khách khi truy cập.

Thủ thuật này không có demo minh họa các bạn có thể xem tại : kinglet007.blogspot.com

Cách 1 ( chèn file js )
1.Đầu tiên bạn cần copy đoạn code sau vào Notepad và chỉnh sữa các dòng chữ mình đã đánh dấu cho phù hợp với site của bạn
2.Save lại với tên popup.js 
3.Up file vừa tạo lên host và lấy đường dẫn của nó .Nếu bạn chưa biết up file js xem lại bài hướng dẫn Upload file .js lên host free của anh Chính

function addEvent(obj, eventName, func){
if (obj.attachEvent)
{
obj.attachEvent("on" + eventName, func);
}
else if(obj.addEventListener)
{
obj.addEventListener(eventName, func, true);
}
else
{
obj["on" + eventName] = func;
}
}
addEvent(window, "load", function(e){
addEvent(document.body, "click", function(e)
{
var params = 'scrollbars,width=1500, height=1024,resizable=1';
if(document.cookie.indexOf("xzipvnpop") == -1)
{
var w = window.open("http://xzipvn.com",'Tiêu đề trang popup', params);
if (w)
{
document.cookie = "popunder=xzipvnpop";
w.blur();
}
window.focus();
}
});
});

4.Vào Thiết kế -chỉnh sữa HTML
5.Tìm đến thẻ </head> và chèn đoạn code sau lên phía trên nó.
(Hoặc bạn cũng có thể tạo một widget HTML/Javacsript và paste code sau vào)

<SCRIPT language=JavaScript src="Đường dẫn file js popup.js"></SCRIPT>

Cách 2( chèn thẳng vào templates )
1.vào Thiết kế
2.Vào chỉnh sữa HTML
3.Tìm đến thẻ </head>và chèn đoạn code sau lên phía trên nó.

<script type='text/javascript'>
//<![CDATA[
function addEvent(obj, eventName, func){
if (obj.attachEvent)
{
obj.attachEvent("on" + eventName, func);
}
else if(obj.addEventListener)
{
obj.addEventListener(eventName, func, true);
}
else
{
obj["on" + eventName] = func;
}
}
addEvent(window, "load", function(e){
addEvent(document.body, "click", function(e)
{
var params = 'scrollbars,width=1500, height=1024,resizable=1';
if(document.cookie.indexOf("xzipvnpop") == -1)
{
var w = window.open("http://xzipvn.com",'Tiêu đề trang popup', params);
if (w)
{
document.cookie = "popunder=xzipvnpop";
w.blur();
}
window.focus();
}
});
});
//]]>
</script>

Thay đổi các đoạn đã đánh dấu trong code
4.Vào bố cục tạo một widget HTML/Javascript và paste toàn bộ code ở bước 5 cách 1 vào
Chúc các bạn thành công !!!

Add to Cart More Info

Tạo cửa sổ popup khi di chuột qua ảnh

Bài viết này hướng dẫn cho các bạn thủ thuật cho phép hiển thị cửa sổ popup của ảnh gốc khi ta
 rê chuột vào.Với vài đoạn code CSS đơn giản chúng ta có thể tạo một cửa sổ popup để hiển thị
ảnh rất chuyên nghiệp mà không cần tới Javascript.

Để thực hiển, trước tiên bạn chèn đọan code CSS này vào trước thẻ đóng </head> trong code:

<style type='text/css'> .img-thumbnail{ position: relative; z-index: 0; } .img-thumbnail:hover{ background-color: transparent; z-index: 50; } .img-thumbnail span{ position: absolute; background-color: #ffffff; padding: 5px; left: -1000px; border: 1px solid #000; visibility: hidden; color: black; text-decoration: none; } .img-thumbnail span img{ border-width: 0; padding: 2px; } .img-thumbnail:hover span{ visibility: visible; top: -100px; left:100px; } </style>

- Dòng code

top: -100px;    eft:100px;

chính là vị trí popup sẽ hiển thị ở trong blog của bạn. Hãy điều chỉnh 2 giá trị này để có được vị trí thích hợp nhất.

Và sau cùng là code HTML:

<afont-weight: bold;">img-thumbnail" href="#"> <img src="link ảnh1" border="0" height="98" width="130"/> <span> <img src="link ảnh1"/> </span> </a>

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

Add to Cart More Info

Cách cài đặt mới cho AdSense for domain

Google vừa giới thiệu một cách thức cài đặt AdSense for domain đơn giản hơn bằng cách trỏ NS (NameServer) của tên miền về máy chủ của dịch vụ.

Trước đây cách thức cài đặt cho dịch vụ này khá phức tạp bắt buộc bạn phải tạo 4 bản ghi A trỏ lần lượt về 4 IP 216.239.32.21, 216.239.34.21, 216.239.36.21 và 216.239.38.21 và thêm một bản ghi CName cũng trỏ về Google.




Tuy nhiên cách thức cài đặt mới này khá đơn giản, bạn chỉ việc thay đổi NS của tên miền về Google bằng cách sử dụng 4 NS sau:

• ns1.googleghs.com


• ns2.googleghs.com


• ns3.googleghs.com


• ns4.googleghs.com

Cách này tương tự như dịch vụ Sedo đã áp dụng (Sedo chỉ sử dụng 2 NS).


Sau khi đã trỏ NS về máy chủ của Google, bạn cần đăng nhập vào AdSense, chọn thẻ Setup -> Domains và khai báo tên miền muốn sử dụng. Mất 24h để mọi thức hoạt động một cách thông suốt.

Nói thêm, AdSense for domain là một dịch vụ cho phép bạn kiếm tiền từ những tên miền chưa phát triển nội dung. Khi một ai đó tình cờ vào trang có quảng cáo AdSense for domain thì bạn sẽ nhận được tiền. Dịch vụ này là một phần của Google AdSense, hiện vẫn chưa hỗ trợ tiếng Việt nên chỉ những tài khoản mà người đăng ký phát triển nội dung bằng một trong những ngôn ngữ được hỗ trợ mới có.

Xin lưu ý nếu sử dụng tên miền quốc gia Việt Nam (.vn), mỗi lần thay đổi NS bạn bắt buộc phải trả phí. Do đó, áp dụng cách cũ để thay đổi các bản ghi trên DNS của nhà cung cấp tên miền vẫn hợp lý hơn.

Add to Cart More Info

Bạn đã làm hình nền cho blog của mình chưa? Nếu chưa, hãy đọc bài viết này. Hôm nay tôi hướng dẫn một cách làm hình nền khác: hình nền cho từng phần của blog (header, main, sidebar, footer).

Template theo mặc định bao gồm 4 thành phần chính: header (đầu: chứa tên, miêu tả blog, main (chính: hiển thị bài viết), sidebar (thành phần bên của trang, nằm bên trái hoặc phải hay cả hai), footer (thành phần dưới cùng).

Hình 2. Layout

Hình 1. Mô hình hiển thị

Làm sao để làm hình nền từng thành phần này? Sau khi đăng nhập blogger.com, bạn vào Edit HTML, kéo thanh trượt sẽ tìm thấy các thành phần này.

A. Thành phần Header
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

B. Thành phần Main
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

C. Thành phần Sidebar
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

D. Thành phần Footer
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Như bạn đã biết cách chèn hình nền cho blog, đoạn mã liên kết đến hình:

background-image:url(http://www.vidu.com/hinh.jpg);

Trong đó http://www.vidu.com/hinh.jpg là liên kết đến hình nền. Như vậy muốn chèn vào header, bạn sẽ chèn như sau:

#header-wrapper {
width:660px;
background-image:url(http://www.vidu.com/hinh.jpg);
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Cách chèn tương tự cho các thành phần khác.

Kích thước hình nền cho từng thành phần

Tùy theo width của mỗi thành phần. Các tối ưu nhất hình nền cho từng thành phần có chiều ngang bằng với width của mỗi thành phần. Chiều dọc càng nhỏ càng tốt.

Ví dụ thành phần main và sidebar sẽ kéo dài hoặc thu hẹp chiều dọc theo nội dung bài viết hay số lượng widget được thêm vào, điều này chúng ta không thể kiểm soát được, vì vậy sử dụng ảnh có chiều ngang bằng width của mỗi thành phần, chiều dọc nhỏ để tự động lặp lại theo độ dài hiển thị. Theo các con số như ví dụ trên, chúng ta sẽ thiết kế hình nền với chiều ngang 410px cho main và 220px cho sidebar. Một tấm ảnh vừa phải có kích thước 410 x 10 là tương đối hợp lý. Cần thêm vào đoạn mã sau để hình nền lặp lại theo chiều dọc:

background-repeat: repeat-y;

Để hình nền này nằm vị trí cân đối, bạn có thể thêm vào:

background-position: center center;

Lưu ý thêm, bạn có thể định nghĩa màu nền cho toàn bộ blog của mình sao cho tương phản và làm nổi bậc các thành phần. Có hai cách để làm việc này.

Cách 1. Bạn chọn Font and Colors (Màu và chữ) trên Template, chọn màu cho background

Cách 2. Vào Edit HTML, bạn kéo thanh trược để tìm:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Trong đó background:$bgcolor; định màu nền thay đổi theo lựa chọn của bạn ở cách trên. Hãy lấy mã màu thập lục và chèn thẳng. Ví dụ, màu trắng như sau:

background:#ffffff;

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

Add to Cart More Info

Bảng mã màu thập lục

Đây là bảng mã màu (lấy từ http://tips-for-new-bloggers.blogspot.com) mà bạn có thể dùng cho việc chỉnh sửa màu sắc.

Tên màu	Mã	Màu
Black	#000000
Grey0	#150517
Grey18	#250517
Grey21	#2B1B17
Grey23	#302217
Grey24	#302226
Grey25	#342826
Grey26	#34282C
Grey27	#382D2C
Grey28	#3b3131
Grey29	#3E3535
Grey30	#413839
Grey31	#41383C
Grey32	#463E3F
Grey34	#4A4344
Grey35	#4C4646
Grey36	#4E4848
Grey37	#504A4B
Grey38	#544E4F
Grey39	#565051
Grey40	#595454
Grey41	#5C5858
Grey42	#5F5A59
Grey43	#625D5D
Grey44	#646060
Grey45	#666362
Grey46	#696565
Grey47	#6D6968
Grey48	#6E6A6B
Grey49	#726E6D
Grey50	#747170
Grey	#736F6E
Slate Grey4	#616D7E
Slate Grey	#657383
Light Steel Blue4	#646D7E
Light Slate Grey	#6D7B8D
Cadet Blue4	#4C787E
Dark Slate Grey4	#4C7D7E
Thistle4	#806D7E
Medium Slate Blue	#5E5A80
Medium Purple4	#4E387E
Midnight Blue	#151B54
Dark Slate Blue	#2B3856
Dark Slate Grey	#25383C
Dim Grey	#463E41
Cornflower Blue	#151B8D
Royal Blue4	#15317E
Slate Blue4	#342D7E
Royal Blue	#2B60DE
Royal Blue1	#306EFF
Royal Blue2	#2B65EC
Royal Blue3	#2554C7
Deep Sky Blue	#3BB9FF
Deep Sky Blue2	#38ACEC
Slate Blue	#357EC7
Deep Sky Blue3	#3090C7
Deep Sky Blue4	#25587E
Dodger Blue	#1589FF
Dodger Blue2	#157DEC
Dodger Blue3	#1569C7
Dodger Blue4	#153E7E
Steel Blue4	#2B547E
Steel Blue	#4863A0
Slate Blue2	#6960EC
Violet	#8D38C9
Medium Purple3	#7A5DC7
Medium Purple	#8467D7
Medium Purple2	#9172EC
Medium Purple1	#9E7BFF
Light Steel Blue	#728FCE
Steel Blue3	#488AC7
Steel Blue2	#56A5EC
Steel Blue1	#5CB3FF
Sky Blue3	#659EC7
Sky Blue4	#41627E
Slate Blue	#737CA1
Slate Grey3	#98AFC7
Violet Red	#F6358A
Violet Red2	#E4317F
Deep Pink	#F52887
Deep Pink2	#E4287C
Deep Pink3	#C12267
Deep Pink4	#7D053F
Medium Violet Red	#CA226B
Violet Red3	#C12869
Firebrick	#800517
Violet Red4	#7D0541
Maroon4	#7D0552
Maroon	#810541
Maroon3	#C12283
Maroon2	#E3319D
Maroon1	#F535AA
Magenta	#FF00FF
Magenta1	#F433FF
Magenta2	#E238EC
Magenta3	#C031C7
Medium Orchid	#B048B5
Medium Orchid1	#D462FF
Medium Orchid2	#C45AEC
Medium Orchid3	#A74AC7
Medium Orchid4	#6A287E
Purple	#8E35EF
Purple1	#893BFF
Purple2	#7F38EC
Purple3	#6C2DC7
Purple4	#461B7E
Dark Orchid4	#571B7E
Dark Orchid	#7D1B7E
Dark Violet	#842DCE
Dark Orchid3	#8B31C7
Dark Orchid2	#A23BEC
Dark Orchid1	#B041FF
Plum4	#7E587E
Pale Violet Red	#D16587
Pale Violet Red1	#F778A1
Pale Violet Red2	#E56E94
Pale Violet Red3	#C25A7C
Pale Violet Red4	#7E354D
Plum	#B93B8F
Plum1	#F9B7FF
Plum2	#E6A9EC
Plum3	#C38EC7
Thistle	#D2B9D3
Thistle3	#C6AEC7
Lavendar Blush2	#EBDDE2
Lavendar Blush3	#C8BBBE
Thistle2	#E9CFEC
Thistle1	#FCDFFF
Lavendar	#E3E4FA
Lavendar Blush	#FDEEF4
Light Steel Blue1	#C6DEFF
Light Blue	#ADDFFF
Light Blue1	#BDEDFF
Light Cyan	#E0FFFF
Slate Grey1	#C2DFFF
Slate Grey2	#B4CFEC
Light Steel Blue2	#B7CEEC
Turquoise1	#52F3FF
Cyan	#00FFFF
Cyan1	#57FEFF
Cyan2	#50EBEC
Turquoise2	#4EE2EC
Medium Turquoise	#48CCCD
Turquoise	#43C6DB
Dark Slate Grey1	#9AFEFF
Dark Slate Grey2	#8EEBEC
Dark Slate Grey3	#78C7C7
Cyan3	#46C7C7
Turquoise3	#43BFC7
Cadet Blue3	#77BFC7
Pale Turquoise3	#92C7C7
Light Blue2	#AFDCEC
Dark Turquoise	#3B9C9C
Cyan4	#307D7E
Light Sea Green	#3EA99F
Light Sky Blue	#82CAFA
Light Sky Blue2	#A0CFEC
Light Sky Blue3	#87AFC7
Sky Blue	#82CAFF
Sky Blue2	#B0E2FF
Light Sky Blue4	#566D7E
Sky Blue	#6698FF
Light Slate Blue	#736AFF
Light Cyan2	#CFECEC
Light Cyan3	#AFC7C7
Light Cyan4	#717D7D
Light Blue3	#95B9C7
Light Blue4	#5E767E
Pale Turquoise4	#5E7D7E
Dark Sea Green4	#617C58
Medium Aquamarine	#348781
Medium Sea Green	#306754
Sea Green	#4E8975
Dark Green	#254117
Sea Green4	#387C44
Forest Green	#4E9258
Medium Forest Green	#347235
Spring Green4	#347C2C
Dark Olive Green4	#667C26
Chartreuse4	#437C17
Green4	#347C17
Medium Spring Green	#348017
Spring Green	#4AA02C
Lime Green	#41A317
Spring Green	#4AA02C
Dark Sea Green	#8BB381
Dark Sea Green3	#99C68E
Green3	#4CC417
Chartreuse3	#6CC417
Yellow Green	#52D017
Spring Green3	#4CC552
Sea Green3	#54C571
Spring Green2	#57E964
Spring Green1	#5EFB6E
Sea Green2	#64E986
Sea Green1	#6AFB92
Dark Sea Green2	#B5EAAA
Dark Sea Green1	#C3FDB8
Green	#00FF00
Lawn Green	#87F717
Green1	#5FFB17
Green2	#59E817
Chartreuse2	#7FE817
Chartreuse	#8AFB17
Green Yellow	#B1FB17
Dark Olive Green1	#CCFB5D
Dark Olive Green2	#BCE954
Dark Olive Green3	#A0C544
Yellow	#FFFF00
Yellow1	#FFFC17
Khaki1	#FFF380
Khaki2	#EDE275
Goldenrod	#EDDA74
Gold2	#EAC117
Gold1	#FDD017
Goldenrod1	#FBB917
Goldenrod2	#E9AB17
Gold	#D4A017
Gold3	#C7A317
Goldenrod3	#C68E17
Dark Goldenrod	#AF7817
Khaki	#ADA96E
Khaki3	#C9BE62
Khaki4	#827839
Dark Goldenrod1	#FBB117
Dark Goldenrod2	#E8A317
Dark Goldenrod3	#C58917
Sienna1	#F87431
Sienna2	#E66C2C
Dark Orange	#F88017
Dark Orange1	#F87217
Dark Orange2	#E56717
Dark Orange3	#C35617
Sienna3	#C35817
Sienna	#8A4117
Sienna4	#7E3517
Indian Red4	#7E2217
Dark Orange3	#7E3117
Salmon4	#7E3817
Dark Goldenrod4	#7F5217
Gold4	#806517
Goldenrod4	#805817
Light Salmon4	#7F462C
Chocolate	#C85A17
Coral3	#C34A2C
Coral2	#E55B3C
Coral	#F76541
Dark Salmon	#E18B6B
Salmon1	#F88158
Salmon2	#E67451
Salmon3	#C36241
Light Salmon3	#C47451
Light Salmon2	#E78A61
Light Salmon	#F9966B
Sandy Brown	#EE9A4D
Hot Pink	#F660AB
Hot Pink1	#F665AB
Hot Pink2	#E45E9D
Hot Pink3	#C25283
Hot Pink4	#7D2252
Light Coral	#E77471
Indian Red1	#F75D59
Indian Red2	#E55451
Indian Red3	#C24641
Red	#FF0000
Red1	#F62217
Red2	#E41B17
Firebrick1	#F62817
Firebrick2	#E42217
Firebrick3	#C11B17
Pink	#FAAFBE
Rosy Brown1	#FBBBB9
Rosy Brown2	#E8ADAA
Pink2	#E7A1B0
Light Pink	#FAAFBA
Light Pink1	#F9A7B0
Light Pink2	#E799A3
Pink3	#C48793
Rosy Brown3	#C5908E
Rosy Brown	#B38481
Light Pink3	#C48189
Rosy Brown4	#7F5A58
Light Pink4	#7F4E52
Pink4	#7F525D
Lavendar Blush4	#817679
Light Goldenrod4	#817339
Lemon Chiffon4	#827B60
Lemon Chiffon3	#C9C299
Light Goldenrod3	#C8B560
Light Golden2	#ECD672
Light Goldenrod	#ECD872
Light Goldenrod1	#FFE87C
Lemon Chiffon2	#ECE5B6
Lemon Chiffon	#FFF8C6
Light Goldenrod Yellow	#FAF8CC

Add to Cart More Info

Vài lưu ý về sử dụng hình nền

Kết quả thống kê từ công cụ tìm kiếm cho thấy nhiều bạn đọc quan tâm đến hình nền cho blog của mình. Vì vậy tôi quyết định viết thêm một số bài liên quan đến sử dụng hình nền. Ở bài viết này, chúng ta sẽ lưu ý một số điều về việc sử dụng hình nền.


Kích thước của hình nền thiết kế

Một blog đẹp hẳn phải có một hình nền đẹp, kết hợp màu sắc, kiểu chữ cộng với cách bố trí giao diện hợp lý. Muốn có một hình nền theo phong cách “không đụng hàng” bạn phải tự thiết kế cho mình. Các chương trình xử lý đồ họa như Adobe Photoshop, Google Picasa,… giúp bạn thực hiện việc này. Vậy kích thước cho hình nền bao nhiêu?

Kích thước ngang của blog
Đăng nhập vào blogger.com, chọn layout ->Edit HTML (Trên Template) và kéo thanh trượt để tìm outer-wrapper.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 883px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Đây là kích thước chiều ngang (width) của blog, đơn vị tính px (pixel). Chiều dọc không bị giới hạn. Tất cả theo mặc định. Tất nhiên không ai cấm bạn thay đổi. Phụ thuộc vào cách trình bày và giao diện theo template, bạn có thể thay đổi width cho template 2 cột bằng 800, hay 1024 cho 3 cột trở lên.

Để hình nền hiển thị, bạn phải chèn đoạn mã hướng dẫn bên dưới vào vị trí bên dưới.

background-image:url(http://www.vidu.com/hinh.jpg);

Vị trí chèn:

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
background:#ffffff; 
background-image:url(http://www.vidu.com/hinh.jpg);
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Hãy thay http://www.vidu.com/hinh.jpg (liên kết đến hình nền của bạn), như: http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/ttcbloggerbg1.jpg


Theo tôi, một trong ba cách dùng hình nền như sau có thể được sử dụng.

Cách 1. Dùng các ảnh có kích thước màn hình chuẩn (ngang x dọc) như: 800 x 600, 1024 x 768, …Hình nền sẽ bao phủ toàn bộ blog. Và đoạn mã sau dành cho cách này:

background-image: url(http://www.vidu.com/hinh.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center center;


Giải thích:
background-repeat: no-repeat; (hình nền bao phủ hết trang nên chúng ta không cần để nó lặp lại) background-attachment:fixed; (cố định hình nền ở một vị trí nhất định)
background-position:center center;(canh giữa ngang và dọc cho trang)


Cách 2. Hình nền có kích thước không theo màn hình chuẩn. 

Trường hợp 1: Bạn sử dụng ảnh có width bằng kích thước ngang của màn hình chuẩn, ví dụ: 1024, 800,…
Và đoạn mã này phù hợp cho bạn:

background-image: url(http://www.vidu.com/hinh.jpg);
background-repeat: repeat-y;
background-position:center center;


Giải thích:
background-repeat: repeat-y; (hình nền lặp lại theo chiều dọc phủ đầy trang)
background-position:center center;(canh giữa ngang và dọc cho trang)

Trường hợp 2: Bạn sử dụng ảnh có width không bằng kích thước ngang của màn hình chuẩn. Và đoạn mã này phù hợp cho bạn:


background-image: url(http://www.vidu.com/hinh.jpg);
background-position:center center;


Giải thích:
background-position:center center;(canh giữa ngang và dọc cho trang)
Hình ảnh sẽ lặp phủ đầy trang, theo mặc định.

Trường hợp 3. Tối ưu trường hợp 2, ảnh nền của bạn dùng có kích thước dài rộng bằng nhau.Hãy tưởng tượng những viên gạch lót nền có hoa văn giống nhau và gắn kết với nhau hoàn chỉnh bộ nền nhà. Bạn chỉ cần là một viên gạch để làm hình nền, viên gạch này sẽ lặp lại và bao phủ hết màn hình. Ví dụ: 20x20, 50 x 50, …Đoạn mã tương tự như trên.

Bài viết sau tôi sẽ hướng dẫn dùng hình nền cho từng thành phần riêng rẻ, và bài viết tiếp đó hướng dẫn hình nền cong góc của mỗi thành phần. Mời bạn đón đọc.

Chúc một tuần học tập và làm việc hiệu quả!

Add to Cart More Info

Chèn playlist nhạc vào blog

Thống kê trên statcounter.com của tôi cho thấy số lượng người quan tâm đến việc chèn nhạc cho blog nhiều hơn các chủ đề khác. Vì vậy tôi cũng muốn hướng dẫn thêm một các chèn playlist nhạc vào blog khá đơn giản khác, không đòi hỏi bạn phải bỏ nhiều công sức, giúp cho bạn dễ dàng làm việc hơn với blog của mình. Đây là cách mà kết quả hiển thị như tôi đang dùng.


Hãy click vào đây bạn sẽ được chuyển tới trang làm playlist. Công việc của bạn là bạn phải biết liên kết đến bài hát và tựa bài hát hoặc nghệ sĩ trình bày. Hãy upload các bài hát lên GooglePages hoặc lấy từ các trang chuyên âm nhạc.

Tại Please choose the Tracks and Artists you'd like to have on your Playlist, làm theo hướng dẫn.

Track 1 Url: Liên kết đến file nhạc. Chú ý: Phải là file .mp3
Title/Artist: Tựa bài hát hoặc người trình bày

Bạn có thể link đến 20 bài hát.

Tiếp tục Choose a Style bạn chọn một style theo ý thích của mình. Lưu ý: style 1, 2 và 4 chỉ hoạt động trên Internet Explorer.

Kế đến bạn chọn Yes (tại Should the player start on page load?) nếu muốn chương trình tự động chơi ngay khi trang được tải về máy tính người xem blog. Click trên Generate the Code để lấy lấy code. Xem hình.

Cách đưa lên blog:

- Blogger: Copy đoạn mã sinh ra (xem hình dưới) paste vào HTML/JavaScript (Template | Add a Page Element | HTML/JavaScript) nếu bạn muốn tạo widget riêng hoặc paste trực tiếp vào bài đăng của bạn (chọn Edit html và paste vào đó).

- Yahoo! 360, Yahoo! Mash ...: Xin xem hướng dẫn.


- Làm playlist nhạc nền: Nếu nhạc ở chế độ tự động chơi, bạn có thể làm playlist nhạc nền dễ dàng bằng cách đưa kích thước rộng (width) và cao (height) có trong đoạn code về con số tối thiểu, 1px hoặc 0px.

Chúc thành công.

Cập nhật thêm:

Hãy đăng ký tài khoản tại http://www.fileden.com/ để upload nhạc của bạn. Trang này cho phép:

# Lưu trữ video và nhạc.
# Dung lượng 1GB.
# Dung lượng tối đa cho 1 file: 50MB.
# Băng thông hàng tháng 5GB.

Hoặc bạn có thể tìm một số trang chia sẻ trực tuyến khác cho phép lấy link trực tiếp.

Add to Cart More Info