Redirect dựa trên URL gốc được rất nhiều người quan tâm. Tiện ích hoạt động giống như một dạng Iframes để chuyển hướng các bản demo và liên kết tải về mà không phải rời khỏi blogger các liên kết trong blogger. Namkna sẽ sử dụng cùng một phương pháp tiếp cận chính xác để kiểm soát liên kết chuyển hướng trong blogger mà không cần bất kỳ tài khoản lưu trữ hoặc các kịch bản web phức tạp. Plugin này dành cho Bloggerđược phát triển bởi mybloggertricks. Namkna hy vọng nỗ lực nhỏ này của tác giả sẽ hữu ích cho tất cả người dùng Blogger đặc biệt là những người chia sẻ phần mềm download với độc giả của họ.
Xem Demo để thấy rõ hơn!
VIEW DEMO
☼ Tiện ích này hoạt động như thế nào?
- Hướng dẫn này sẽ giúp bạn kết nối tất cả các liên kết bên ngoài bên cạnh địa chỉ tên miền của bạn bằng cách sử dụng kỹ thuật nối chuỗi. Người truy cập sẽ cảm thấy anh ta như đang truy cập một trang web mới, nhưng URL tên miền của của bạn sẽ vẫn dính vào thanh địa chỉ.
http://namkna.blogspot.com/p/download.html?url=http://domain2.com/
- Plugin này sẽ thay đổi bố cục phần body blog của bạn với một kiểu tuỳ chỉnh theo quy định của ID "MBT-REDIRECTION". Namkna sẽ tạo ra hai trang tĩnh. Một cho trang dành cho Demo và một dành cho download. Cả hai trang này sẽ chứa một khung nội tuyến với vị trí nguồn bỏ trống. Bằng cách sử dụng JavaScript, namkna sẽ tuỳ chỉnh mà để bao gồm toàn bộ không gian giữa các thẻ body. JavaScript này cũng sẽ đảm bảo chắc chắn rằng không có thanh cuộn sẽ xuất hiện trong cửa sổ.
- Để liên kết làm việc trang bạn bạn phải tạo bao gồm một thuộc tính data [content]. Bằng cách sử dụng Jquery tôi sẽ chọn vị trí href là chuỗi đó nối nó bên cạnh liên kết của trang demo hoặc trang download của bạn .
- TIện ích này sử dụng thư viện Jquery do vậy hãy chắc chắn là blog của bạn đã có file JQuery rồi. Nếu chưa có thì thêm file bên dưới vào sau thẻ <head>
- TIện ích này sử dụng thư viện Jquery do vậy hãy chắc chắn là blog của bạn đã có file JQuery rồi. Nếu chưa có thì thêm file bên dưới vào sau thẻ <head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
- Và vui lòng thực hiện theo các bước đơn giản dưới đây:
☼ Bước 1: Tạo trang Demo và Download!
1.1- Đăng nhập vào Blog
1.2- Vào Trang (Page)
1.3- Chọn Trang mới (New page) => Trang trống (page blank)
1.4- Đánh tên trang là Demo hoặc bất kỳ tên nào khác mà bạn muốn. Bấm chọn mục HTML của trang và dán code sau vào:
<div height="100%" id="iframe-container" width="100%"> <style> body { padding: 0!important; background: none!important; } #iframe-container { overflow: hidden; background: none!important; } #frame { border: 0; } </style> <iframe frameborder="0" id="frame" src="" width="100%"> </iframe> </div> <script> document.documentElement.style.overflow = 'hidden'; // firefox, chrome document.body.scroll = "no"; // ie only var query = window.location.search.substring(1); query = query.replace("url=", ""); $('#frame').attr('src', query); var str = $('#iframe-container').html(); $('#MBT-REDIRECTION').html(str); $('iframe').height($(window).height()); </script>
1.5- Bấm vào phần tùy chọn (Opyions) của trang đó => Tại mục dấu ngắt dòng (Line Breaks) => Đánh dấu chọn vào ô sử dụng thẻ <br> [Use <br> tag]:
Nếu bạn viết blog tiếng anh thì xem ảnh này.
1.6- Bấm lưu (save) trang sau đó bấm xuất bản trang Demo đó của bạn.
- Như vậy là bạn đã tạo được một trang Demo. Trong ví dụ này là:
http://namkna.blogspot.com/p/demo.html
http://namkna.blogspot.com/p/demo.html
1.7- Tiếp theo là tạo một trang download. Tạo một trang trống mới đặt tên là Download và thực hiện từ bước 1.3 đến bước 1.6 nha. Sau đó bạn sẽ được trang download. Trong ví dụ này là:
http://namkna.blogspot.com/p/download.html
http://namkna.blogspot.com/p/download.html
☼ Bước 2: Liên kết chuỗi URL với nhau!
2.1- Đăng nhập vào blogger.
2.2- Vào mẫu (template)
2.3- Chọn chỉnh sửa HTML (Edit html)
2.4- Thêm đoạn mã bên dưới vào sau thẻ mở <body> :<div id='MBT-REDIRECTION'>
- Lưu ý: Với các bạn dùng mẫu Simple của blogger nếu không tìm thấy thẻ <body> thì hãy tìm thẻ có dạng như sau:
<body expr:class='"loading" + data:blog.mobileClass'>2.5- Thêm đoạn mã bên dưới vào trước thẻ đóng </body> :
</div>2.6- Dán code bên dưới vào sau thẻ: ]]></b:skin> .
<script> $(document).ready(function() { $('[data-MBTdemo]').click(function(e) { e.preventDefault(); if($(e.srcElement).attr('target') == "_blank") { window.open("http://namkna.blogspot.com/p/demo.html?url=" + $(e.srcElement).attr('href'), '_blank'); } else { window.location = "http://namkna.blogspot.com/p/demo.html?url=" + $(e.srcElement).attr('href'); } }); $('[data-MBTdownload]').click(function(e) { e.preventDefault(); if($(e.srcElement).attr('target') == "_blank") { window.open("http://namkna.blogspot.com/p/download.html?url=" + $(e.srcElement).attr('href'), '_blank'); } else { window.location = "http://namkna.blogspot.com/p/download.html?url=" + $(e.srcElement).attr('href'); } }); }); </script>
Tùy chỉnh:
- Thay thế phần màu cam thành URL trang demo của bạn.
- Thay thế phần màu xanh thành URL trang download của bạn.
- Bây giờ nếu bạn thử truy cập theo URL trang demo và trang download của bạn, bạn sẽ nhìn thấy một trang trống không có nội dung bên trong nó. Bạn đùng cảm thấy ngạc nhiên hay lo lắng vì đó là những gì namkna muốn. Nội dung chỉ hiển thị khi bạn gắn link ở bước sau!
☼ Bước 2: Làm thế nào để sủ dụng link.
Bây giờ khi bạn đã thực hiện tất cả các phần của hướng dẫn ở bước 1, Namkna sẽ hướng dẫn các bạn bước tiếp theo, Namkna sẽ hướng dẫn các bạn các sử dụng các chức năng.
Bạn sẽ tạo liên kết như thông thường và chỉ thêm phần thông tin mà bạn cần để chèn link vào là các thuộc tính dữ liệu - nội dung (Data-Content). Đây là các cách bạn cần phải làm.
2.1- Tạo một bài viết (hoặc trang) mới.
2.2- Check vào ô HTML của bài viết (hoặc trang).=> Vào dán code bạn muốn ở bên dưới vào.
2.2.1- Dành cho link demo hoặc nút demo!2.1- Tạo một bài viết (hoặc trang) mới.
2.2- Check vào ô HTML của bài viết (hoặc trang).=> Vào dán code bạn muốn ở bên dưới vào.
<a href="#" rel="nofollow" data-MBTdemo="true">DEMO</a>
- Để liên kết mở ra trong của sổ mới bạn dùng code sau:<a href="#" target="_blank" rel="nofollow" data-MBTdemo="true">DEMO</a>2.2.2- Dành cho link download hoặc nút download!
<a href="#" rel="nofollow" data-MBTdownload="true">DOWNLOAD</a>
- Để liên kết mở ra trong của sổ mới bạn dùng code sau:<a href="#" target="_blank" rel="nofollow" data-MBTdownload="true">DOWNLOAD</a>
- Thay dấu thăng màu đỏ (#) thành URL của trang demo hoặc trang download.
- Bạn có thể sử dụng nhiều liên kết chuyển hướng trên mỗi trang hoặc bài viết như bạn muốn. Mã này là hiệu quả, đủ để chọn một loạt các thuộc tính dữ liệu-nội dung. Đơn giản!
Bây giờ bạn có thể chuyển hướng của bất cứ liên kết nào bên trong blog của bạn trở lại địa chỉ tên miền của bạn.
Nếu cần giúp đỡ?
Nếu bạn phải đối mặt với bất kỳ rắc rối trong khi cài đặt plugin này, vui lòng cho tôi biết. Tôi hy vọng rằng phương pháp chuyển hướng các liên kết bên ngoài trong blogger trở lại với tên miền gốc sẽ giúp tất cả những người quản trị web những người chia sẻ các tài nguyên như, ebooks, hình nền, Template,icon,...vv
Nhận xét
anh có thể hướng dẫn em làm cái này được không em tìm mà ko thấy mục hỏi đáp nên hỏi luôn ở đây vậy em đang dùng temple Này và em muốn nó hiển thị ngoài trang chủ mặc định là GRID chứ không phải List anh giúp em với
Trả lờiXóaĐó là mẫu JPstation một mẫu hoạt động dựa trên thư viện JQuery thực thụ.
XóaTuy nhiên anh cài thì không thấy phần em mô tả. Em có thể chụp ảnh post phần đó lên đây không.
em muốn mặc định ngoài trang chủ là nó hiển thị như thế này ạCapture.PNG
Trả lờiXóaNHỜ NAMKNA ZIP HỘ MÌNH CÁI MENNU NHƯ CỦA http://nhatkyuocmo.com/wp/ VỚI
Trả lờiXóaMÌNH ĐỊNH LẤY MENU NHƯ VẬY ĐẶT Ở TRÊN ĐẦU BLOG CỦA MÌNH.
NẾU NAMKNA GIÚP ĐƯỢC THANK NHÌU NHÉ !
Nó là một dạng sticky menu:
XóaBạn có thể xem bài này:
http://namkna.blogspot.com/2011/12/tao-banner-dinh-sticky-banner-voi.html
hic giúp em với anh nam ơi
Trả lờiXóaEm gửi cái template đó vào mail tavannam01@gmail.com anh sẽ chỉnh giùm cho.
Xóagiúp với mình làm không được :(
Trả lờiXóamình ko tim dc < body >
2.6- Dán code bên dưới vào sau thẻ >>> dán đoạn đó sau thẻ nào bạn ?
giúp với !!!
- Nếu không có thẻ <body> thì tìm thẻ sau:
Xóa<body expr:class='"loading" + data:blog.mobileClass'>
Bước 2.6 mình đã cập nhật sau thẻ: ]]></b:skin> .
Demo:
Trả lờiXóahttp://demo-blog-namkna.blogspot.com/2013/03/url-redirect-cho-lien-ket-demo-va.html
anh có thể hướng dẫn em làm cái này được không em tìm mà ko thấy mục hỏi đáp nên hỏi luôn ở đây vậy em đang dùng temple Này và em muốn nó hiển thị ngoài trang chủ mặc định là GRID chứ không phải List anh giúp em với
Trả lờiXóaTrang bạn nói mình đã xem không hề có bất kỳ một phần nào như bạn nói ????
XóaBước 2 không hiểu bạn ơi, những link ở bước 2 mình chèn vô đâu, bạn có thể hướng dẫn chi tiết tí xíu nữa thì tốt quá.
Trả lờiXóaSử dụng khi đăng bài nha bạn. Hiện mình đã cập nhật bài viết rùi đó.
Xóacái này phải thêm code jquery vào mới chạy dc anh nam ak
Trả lờiXóaĐúng thế em ak.
XóaAnh Nam ơi, cái này có cách nào để cho nó tự động chèn link vào giống bên đây ko: Redirect URL for blogspot - Tạo trang chuyển hướng cho Blogspot
Trả lờiXóaChứ em post lần mấy trăm link chèn thủ công thì mệt chết :(
Có mà bạn thực hiện đến cuối bài viết đó sẽ thấy có tác dụng nha,
Xóacode này hình như lỗi trên một vài template, bạn có code nào khác không. thanks.
Trả lờiXóa