Cách đây không lâu mình có chia sẻ template blogspot thì có một số bạn có rất thích trang xem trước demo và tải về của mình.
Cụ thể là khi bạn nhấn vào nút demo để chuyển sang một trang mới thì bạn sẽ được chuyển sang một trang trung gian của mình tại blog của mình chứa phần hiển thị của trang khác, vậy nên hôm nay mình sẽ viết bài chia sẻ cách tạo trang xem trước và tải về cho Blogspot mà mình đã đọc được tại blog KslZone
Sau khi tạo xong thì bạn không cần điền hoặc thêm bất cứ code nào vào trang này nhé, chỉ cần tạo một trang cho có thôi mà.
Tiếp theo là đến phần chèn CSS lên trên thẻ ]]></b:skin> trong phần code của template đang dùng.
Bước tiếp theo bạn tìm đến thẻ <body> và chèn đoạn mã này xuống dưới
Tới đây bạn tìm tiếp đến thẻ </body> và chèn đoạn mã này lên trên
Cách sử dụng trang xem trước và tải về thế nào?
Khi viết bài bạn chỉ cần đặt địa chỉ để người dùng chuyển đến
Cụ thể là khi bạn nhấn vào nút demo để chuyển sang một trang mới thì bạn sẽ được chuyển sang một trang trung gian của mình tại blog của mình chứa phần hiển thị của trang khác, vậy nên hôm nay mình sẽ viết bài chia sẻ cách tạo trang xem trước và tải về cho Blogspot mà mình đã đọc được tại blog KslZone
Hướng dẫn tạo trang xem trước và tải về cho Blogspot
Bước đầu tiên là bạn cần tạo một trang mới và đặt cái tên tùy ý, ví dụ như "Xem Trước" và nó có đường link như sau:http:://www.thanhtuanit.net/p/xem-truoc.html
Sau khi tạo xong thì bạn không cần điền hoặc thêm bất cứ code nào vào trang này nhé, chỉ cần tạo một trang cho có thôi mà.
Tiếp theo là đến phần chèn CSS lên trên thẻ ]]></b:skin> trong phần code của template đang dùng.
Đây là đoạn CSS mặc định của bên blog kslzone mình lấy về, nếu bạn có kiến thức về CSS thì có thể edit lại theo ý mình.#view {padding: 0;margin: 0;border: 0;position: fixed;top: 50px;left: 0;right: 0;bottom: 0;width: 100%;height: 93%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zozt59D33D7F1CE3rZRyIxhDTZS1NXzpmqPh-2VfcFD4YsZN22Oz6WnZCnkC8u0sfSSjH9DePpWWz4-UztMs-otdTviQ6IiOOjiEfNnKmun-gchA8cqh62l-MQ04JLgOLAjoQLqCyJY/s1600/loader.gif)no-repeat center center;transition:all .4s ease-out;}#tab-demo {width:100%;height:50px;top:0;left: 0;background:#222;color:white;font:normal 13px Arial, sans-serif;z-index:99999;position:fixed;}.closebutton {background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YpXFJvaf315UxkQ9WYu030HrQvzuWHDfsXTASQsqTDqxpJ1SBLhLYivqKDlzu_nBgo3SpUqkA89XOsJQXwNOKXGoIxmlM_eE8UdvUoF_GKagCnT_VwV8k9SZTpMEFXXTbbQdviwhq0U/s1600/close.png)no-repeat 15px 50%;text-align:center;height:50px;padding:0px 20px 0px 50px;position:fixed;top:0;right:0;line-height:50px;cursor:pointer;color:white;}a.closebutton {color:white;text-decoration:none;}.closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9YpXFJvaf315UxkQ9WYu030HrQvzuWHDfsXTASQsqTDqxpJ1SBLhLYivqKDlzu_nBgo3SpUqkA89XOsJQXwNOKXGoIxmlM_eE8UdvUoF_GKagCnT_VwV8k9SZTpMEFXXTbbQdviwhq0U/s1600/close.png)no-repeat 15px 50%}.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHqWqQdZDmbzKz8vIHrWvA75_qeyO5DeWeh7b6Gou4TSSoiDgXzWdqEfFGkhhI-eVAr-1OhAys7HkF7kJamWdN6jcRhh7b6mP6PSqJwcOAkhDh_nAJic8f_B7eLVznKiiN9wAFKwh0eCE/s1600/download.png)no-repeat 15px 50%}.dlbutton, a.dlbutton {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHqWqQdZDmbzKz8vIHrWvA75_qeyO5DeWeh7b6Gou4TSSoiDgXzWdqEfFGkhhI-eVAr-1OhAys7HkF7kJamWdN6jcRhh7b6mP6PSqJwcOAkhDh_nAJic8f_B7eLVznKiiN9wAFKwh0eCE/s1600/download.png)no-repeat 15px 50%;text-align:center;height:50px;padding:0px 20px 0px 55px;position:fixed;top:0;right:158px;line-height:50px;cursor:pointer;color:white;text-decoration:none;}.demologo, a.demologo {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7IxEIRet93eSd8OIvj78z4Ar_skiusU2GFPlTaci7Vle73B4A_tXGuxUf7yqGV2biGh0nvnfkloZMYVhKKtqEZw4J391UOnuVmV1cT-DsbjjvFgzU494tRDrD6w0CMUwAEqCVYi9neho/s1600/ki-logo.png)no-repeat left center;padding-left:55px;font-size:17px;font-weight:normal;font-family:Oswald, Arial, Sans-serif;text-transform:uppercase;line-height:50px;left:15px;position:fixed;color:white;text-decoration:none;}
Bước tiếp theo bạn tìm đến thẻ <body> và chèn đoạn mã này xuống dưới
<b:if cond='data:blog.url != "http://www.thanhtuanit.net/p/xem-truoc.html"'>Tới đây bạn tìm tiếp đến thẻ </body> và chèn đoạn mã này lên trên
Ở phần trên thì bạn thay mọi thông tin cũng như địa chỉ blog của bạn vào nhé!<b:else/><script type='text/javascript'>//<![CDATA[function getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return pair[1];}}return (false);}window.onload = function() {var url = getQueryVariable("url");var download = getQueryVariable("download")document.getElementById('view').src = url;document.getElementById('dl').href = download;};//]]></script><div id='tab-demo'><a class='demologo' href='http://www.thanhtuanit.net'>Xem Trước Và Tải Về</a><a class='dlbutton' href='' id='dl'>Tải về</a><a class='closebutton' href='javascript:void(0)' onclick='document.getElementById('tab-demo').style.display='none';document.getElementById('view').style.top='0';document.getElementById('view').style.height='100%''>Loại bỏ khung</a></div><iframe id='view'/><style>body {background:white;}</style></b:if>
Cách sử dụng trang xem trước và tải về thế nào?
Khi viết bài bạn chỉ cần đặt địa chỉ để người dùng chuyển đến
http://www.thanhtuanit.net/p/xem-truoc.htm?url=Địa_chỉ_url_demo&download=Địa_chỉ_url_download
0 nhận xét trong bài "Cách tạo trang xem trước và tải về cho Blogspot"
Đăng nhận xét