Các bạn thường thấy ở 1 số forum, khi ta click vào 1 link liên kết nào đó, nó thường dẫn ta tới 1 trang trung gian trước khi chuyển tới trang đích. Thường các trang như vậy để kiểm tra virus hoặc đơn giản chỉ là câu pageview hoặc tạo 1 nơi để đặt quảng cáo.
Hôm nay mình sẽ hướng dẫn các bạn tạo 1 trang như vậy cho blogspot. Và mục đích với blogspot chỉ đơn giản là câu pageview và chèn quảng cáo. Nếu bạn nào muốn PR tên miền của mình thì có thể dùng cách này.
Có 2 cách để tạo trang redirect như demo, 1 là sử dụng 1 trang trên blog chính của bạn, 2 là tạo hẳn 1 blog mới, và chỉ dùng nó để làm trang redirect. Và để cho đơn giản, mình sẽ hướng dẫn cách 2 cho các bạn.
Sau đây là các bước thực hiện :
1. Tạo mới 1 blog
2. Vào chỉnh sửa code HTML, vào xóa tất cả các code có trong thẻ body :
<body> ...Xóa toàn bộ code trong thẻ này... </body>Nếu muốn code của template gọn gàng hơn, các bạn có thể xóa hết các code CSS của template. Lưu ý là chỉ xóa code css, không nên xóa các dòng khác. Sau đó các bạn muốn làm đẹp trang redirect của mình thì cứ thêm code CSS mới vào. 3. Tiếp theo là xóa thanh Navbar :
- thêm đọan code bên dưới vào trước thẻ <body>
<script type='text/javascript'> <![CDATA[ <!-- /*<body>*/ --> ]]> </script>4. Tiếp theo là thêm đọan code bên dưới vào sau thẻ <body>
<b:section class='main' id='main' showaddelement='yes'> </b:section>- Thực ra đây là code để tạo nút thêm tiện ích ở trang phần tử blog. Bước 4 này dùng để tạo 1 widget Javascript/HTML để chèn code chính của thủ thuật vào. Lý do mình hướng dẫn các bạn chèn code chính của thủ thuật vào widget mà không phải vào hẳn code template là do trong code template việc chèn code javascript vào thường gặp lỗi.
5. Vào trang phần tử và tạo 1 widget javascript/HTML và chèn code bên dưới vào :
<script type="text/javascript">
<!--
String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var str = location.href;
//-->
</script>
<div id="header">
<center>
<div class="top">
<span style="color:#f00;"><script type="text/javascript">document.write(str.GetValue("url")); </script> </span>
</div>
</center>
</div>
<div id="main">
<form name=loading>
<div align=center>
<script type="text/javascript">
document.write("<input style="text-align:center;margin:3px;font-weight::bold;" type="button" onclick="location.href='"+str.GetValue("url")+"'""+" value="Click here to Continue"");
</script>
</div>
<div align=center>
<input type="text" name="chart" size="48" style="font-family:Arial; color:#000; background:url(http://data.fandung.com/img/loading-bg1.png) no-repeat left; padding:0 1px 1px 1px; border-style:none;" /> <br />
<input type="text" name="percent" size="14" style="color:#0066ff; text-align:center; border-width:medium; border-style:none;background:#efefef;" />
<script type="text/javascript">
var bar=0;
var line="||";
var amount="||";
count();
function count(){
bar=bar+2;
amount =amount + line;
document.loading.chart.value=amount;
document.loading.percent.value="Loading ... "+bar+"%";
if (bar<99)
{setTimeout("count()",100);}
else
{window.location = str.GetValue("url");}
}
</script>
</div>
</form>
</div>
<div id="footer">
Nội dung của footer
</div>
- Ở đây mình đã phân sẵn 3 vùng riêng biệt đó là : header, main và footer, các bạn có thể theo đó mà thêm bớt hoặc tạo thêm các code CSS cho 3 id này để trang redirect của bạn trông pro hơn. Cụ thể như các bạn có thể add các quảng cáo vào…Sau khi đã có trang redirect bây giờ ta sẽ thực hiện việc redirect cho các link liên kết.
- Bình thường 1 liên kết sẽ có dạng như bên dưới :
<a href="link liên kết">Liên kết</a>
- Bây giờ ta sẽ cho nó load qua trang trung gian của chúng ta trước khi nó chuyển tới trang đích. Và code của nó sẽ là như thế này
<a href="javascript:;" onclick="javascript:window.open('http://redirect.fandung.com/?url=http://domain.com/example.html','newwin','fullscreen=yes,scrollbars=1,toolbar=0,resizable=1')">Liên kết</a>
- http://redirect.fandung.com/ : là địa chỉ trang redirect của bạn.- http://domain.com/example.html : liên kết cần tác động.
Chúc các bạn thành công.
Theo fandung
0 comments:
Post a Comment
♦ Mời bạn gửi Nhận xét của mình. Nếu không có tài khoản Blogger-Google, LiveJournal, WordPress, TypePad, AIM, OpenID, bạn vẫn có thể nhận xét bằng cách chọn là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống. Bạn vui lòng gõ tiếng Việt có dấu.
♦ Bấm vào Xem trước [Preview] bên dưới khung nhận xét nếu muốn xem trước comment đã viết, trước khi post [đăng]. Tương tự, bấm vào Đăng ký qua email [Subscribe by email] để đăng ký theo dõi nhận xét của bài này.
♦Nội dung nhận xét liên quan đến chủ đề bài viết và không mang tính chất spam ,dung tục ,đả kích ...
♦ Các bạn tự chịu trách nhiệm với Nhận xét của mình. Nhận xét để phản hồi, đánh giá, góp ý.... suy nghĩ của bạn. Thông qua Nhận xét hãy để cho mọi người biết Bạn là ai.