Thứ Ba, ngày 12 tháng 1 năm 2016

Tổng Hợp các cách AUTO Wap/Web cho WAPKA chi tiết

Bài này sẽ dành cho những ai đam mê và hứng thú với WAPKA. Là 1 trong những WapBuilder khá lâu đời, sever ổn và hiện nay được hỗ trợ khá tốt từ những nhóm làm Wapka nên ai thích thì cứ chiến thoải mái. Hiện nay AUTO Wap/Web là một điều không thể thiếu giúp Google đánh giá trang của bạn tốt hơn. Các cách dưới đây mình tổng hợp lại những thứ mà mình biết về auto wap web cho wapka, nếu bạn nào có cách nào khác hơn vui lòng comment bên dưới để mình bổ sung



1. Auto Wap Web bằng javascript theo độ rộng màn hình

Cách dùng: thay đổi giá trị w>=1000. Ví dụ bạn muốn những màn hình có độ rộng lớn hơn 1000px sẽ hiển thị code cho web thì bạn bọc xung quanh những code mà bạn muốn hiển thị bằng class web 
Ví dụ 
<div class="web">những code bạn muốn web hiển thị</a>
<div class="wap">những code bạn muốn wap hiển thị</a>

Coppy js bên dưới dán vào head hoặc top của trang wapka bạn
Code
<script type="text/javascript"> var w=window.innerWidth; if(w>=1000){document.write('<style type="text/css">.wap{display:none;}</style>');} else{document.write('<style type="text/css">.web{display:none;}</style>');}</script>

2. Auto Wap Web bằng công cụ sẵn của Wapka

Đầu tiên tìm 1 giao diện web cho wap
Vào site -1 để add css nhé (kéo xuống dưới cùng wap có cái mũi tên thì click vào và đến site -1) > add css vào > ok , edit site > users >Items visibility > tìm cái css mình vừa add bên cạnh có dòng "[A N L X](g c t l p u)" thì click "g c t l p u" > chọn "Cell phone" > cái này là css cho PC nên chọn như sau 
Display item, if user is not using selected cell phone*:" > add vào ô 2 là các browser của điện thoại vì khi xài điện thoại thì sẽ ko hiện ra css này còn PC thì ngược lại
Code
Opera Mini; SonyEricsson; Nokia; Maui Wap Browser; LG; UC; Motorola; Q Mobile; Iphone; Ipad; Ipod; Blackberry

và cái css còn lại cho mobile thì các bước như trên nhưng chọn "is using" và vẫn add mấy browser kia vào.
Thế là xong! cái nào bạn muốn hiện khi xài PC thì làm cách giống như css cho PC. Còn cái nào muốn xài điện thoại hiện thì làm giống cách css mobile.

3. Auto Wap Web bằng javascript nhận diện trình duyệt

Dán vào Head hoặc top
Code
<script type="text/javascript">{document.write("<script type="text/javascript">if("+navigator.appName+"=="Internet exeroler"|| "+navigator.appName+"=="Mozilla Firefox" ||"+navigator.appName+"=="Google Chrome"||"+navigator.appName+"=="Opera"||"+navigator.appName+"=="Sarafi"){document.write("link css dành cho pc");}else{document.write("link css cho điện thoại");}</script><noscript>link css cho dòng không hỗ trợ javascript</noscript>")};</script>



4. Auto Wap Web bằng CSS (Reponsive)

Cái này cũng không mới hiện nay đang rất thịnh hành (Hãy tìm hiểu khái niệm Reponsive CSS)

CSS này sẽ có tác dụng tương tự như số 1 là theo độ rộng màn hình. Lợi ích sẽ tăng khả năng load trang và tương thích trên nhiều thiết bị. Hơn nữa loại này các bạn có thể tùy chỉnh css ở nhiều độ rộng khác nhau với nhiều dạng css khác nhau

Dưới đây là đoạn css giúp reponsive

@media only screen and (min-width: 1024px) {
    /* CSS cho máy tính */
    .css1 {}
    .css2 {}
}
@media only screen and (min-width: 768px) {
    /* CSS cho máy tính bảng */
    .css1 {}
    .css2 {}
}
@media only screen and (max-width: 768px) {
    /* CSS cho di động */
    .css1 {}
    .css2 {}
}

Bên trên chỉ là ví dụ thôi các bạn có thể tùy biến nhiều hơn nữa
Chúc các bạn thành công. Nếu có gì không hiểu vui lòng comment bên dưới để được hỗ trợ