"Tạo dòng text xoay tròn quanh chuộ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
<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