"Tạo dòng text xoay tròn quanh chuột"
(Traidatmui.com) – Bạn có muốn chú chuột nhỏ bé trên blog mình trở nên xinh xắn thu hút hơn không? Một thủ thuật mà mình muốn giới thiệu cùng các bạn đó là tạo phong cách riêng cho chuột trên blog. Thủ thuật này sẽ làm cho chú chuột của bạn mang phong cách riêng biệt, nó sẽ mang theo dòng chữ mà bạn muốn hiển thị trên blog mình. Dòng text sẽ chạy xung quanh chú chuột vừa tạo cảm giác thú vị, vừa thể hiện được phong cách riêng cho blog. Ở đây mình xin hướng dẫn cách tạo dòng text chạy vòng quanh chú chuột trên Blogger, dưới đây là thủ thuật.
☼ Bất đầu thủ thuật
1. Đầu tiên hãy đăng nhập tài khoản của blog bạn
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code bên dưới vào trước thẻ ]]></b:skin>
#outerCircleText {
font-style: italic;
font-weight: bold; /*Nếu không muốn in đậm cho text bạn có thể bỏ dòng này*/
font-family: times; /*chọn font chữ*/
color: #0033ff; /*màu của dòng text hiển thị*/
position: absolute;
top: 0;
left: 0;
z-index: 1000;
cursor: default; /*hình dạng của chuột*/
}
#outerCircleText div {
position: relative;}
#outerCircleText div div {
position: absolute;
top: 0;
left: 0;
text-align: center;}
Chỉnh code: Bạn chỉ việc dựa vào chú thích trong code để chỉnh sửa code cho hợp lý, nhớ xóa bỏ các dòng text khi chỉnh sửa xong nhe.
4. Save template lại
5. Trở về phần tử trang thêm 1 HTML/Javascript
6. Thêm code sau vào phần tử vừa tạo
Bạn hãy điều chỉnh theo hướng dẫn cho phù hợp với ý thích của bạn.
7. Save lại là xong
Chúc bạn thành công
☼ Bất đầu thủ thuật
1. Đầu tiên hãy đăng nhập tài khoản của blog bạn
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code bên dưới vào trước thẻ ]]></b:skin>
#outerCircleText {
font-style: italic;
font-weight: bold; /*Nếu không muốn in đậm cho text bạn có thể bỏ dòng này*/
font-family: times; /*chọn font chữ*/
color: #0033ff; /*màu của dòng text hiển thị*/
position: absolute;
top: 0;
left: 0;
z-index: 1000;
cursor: default; /*hình dạng của chuột*/
}
#outerCircleText div {
position: relative;}
#outerCircleText div div {
position: absolute;
top: 0;
left: 0;
text-align: center;}
Chỉnh code: Bạn chỉ việc dựa vào chú thích trong code để chỉnh sửa code cho hợp lý, nhớ xóa bỏ các dòng text khi chỉnh sửa xong nhe.
4. Save template lại
5. Trở về phần tử trang thêm 1 HTML/Javascript
6. Thêm code sau vào phần tử vừa tạo
<script type="text/javascript">
var msg = "Chào bạn đến với TRAIDATMUI.COM"; // thay thành text của bạn
var size = 24; // cỡ chữ, bạn có thể chọn cỡ chữ khác
var circleY = 0.75; // độ rộng vòng tròn text theo chiều đứng
var circleX = 2; // độ rộng vòng tròn text theo chiều ngang
var letter_spacing = 8; // khoảng trắng giữa các chữ cái
var diameter = 10;
var rotation = 0.2;
var speed = 0.3; // tốc độ chạy của text
</script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/circle_text.js">
</script>
var msg = "Chào bạn đến với TRAIDATMUI.COM"; // thay thành text của bạn
var size = 24; // cỡ chữ, bạn có thể chọn cỡ chữ khác
var circleY = 0.75; // độ rộng vòng tròn text theo chiều đứng
var circleX = 2; // độ rộng vòng tròn text theo chiều ngang
var letter_spacing = 8; // khoảng trắng giữa các chữ cái
var diameter = 10;
var rotation = 0.2;
var speed = 0.3; // tốc độ chạy của text
</script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/circle_text.js">
</script>
Bạn hãy điều chỉnh theo hướng dẫn cho phù hợp với ý thích của bạn.
7. Save lại là xong
Chúc bạn thành công
Nguồn: TRAIDATMUI.com
0 nhận xét:
Đăng nhận xét