Saturday, January 30, 2016

Create Desktop version of your Website [Full Tutorial]

NOTE:Please red this tutorial with very carefully.
This Tutorial will teach you how to create a wapka site with Pc view.

Previously,i have written on this,you cand read [Tutorials] How to create the desktop version of your wapka site using "div Id" but this tutorial uses a different method to create a pc version of wapka site.

if you are new to wapka let me give you a quick summary on how to start a wapka site

You have to Open a Gmail account and then goto http://wapka.com and sign in for a wapka passport, you should choose a strong password to prevent hackers from penetrating into your wapka account in the future.this is always a problem faced by wapka webmasters

After you have succesfully created your wapka passport you will be sent a confirmation mail which will be automatically sent by wapka bot to verify if truly you are the owner of the mail you provided, so input accurately all the necessary info required by wapka to avoid difficulties with your account in the future.

What will this tutorial teach me
In case you're complete novice to wapka,i'll like to make you know that wapka was meant to be used in creating "wap" site that's mobile sites and not "web" sites that's desktop/pc sites. it's that simple.
In the beginning,early wapka programmers were comfortable with this but as time went on,newer and more advanced technology started making their way into our world and this wap sites wer being shunned by pc users hence the need to create a pc version for our pc users so that they can equally fell at home in our sites and not leave it.

That's how the issue of creating a pc view for wapka sites came up so continue reading below,let's do it.

Basic Wapka Functions in designing Pc View of wapka sites

We are going to be looking at the Most important functions that will help you in succesfully Creating a wapka website with Pc View.

1. Headtags - the Headtags is one of the most important function when designing your pc view (desktop version), this is where you will put all the important codes that will make your website 100% responsive.
I know most of you guys ignore the headtags because you can put every html code or javascript code on the Xhtml/Wml box, this is very bad... As a programmer you need to explore each and every function in a program. The headtags is very important because it comes before the <body></body> tags and any code e.g Css or Javascript or Jquery code you put there will affect the behaviour of your webpage so take note, the headtags plays the most important role in developing both PC and MOBILE version for your website making your website dynamic and user friendly.

RESPONSIVE CSS TO PLACE IN YOUR HEADTAG

This code will hide your pc contents from mobile users and your mobile contents from pc users

<style type="text/css"><br />@media only screen and (min-width:1024px){<br />#mobile,.mobile{display:none}<br />}<br />@media only screen and (max-width:1023px){<br />#pc,.pc{display:none} #mobile,.mobile{display:block}<br />}<br />@media handheld{<br />#pc,.pc{display:none} #mobile,.mobile{display:block}<br />}<br /></style>


The CSS code above is a Media query conditional statement. E.g the code above is telling the mobile/pc user that “if min width (minimum width of the device screen is 1024) show pc contents and if max width is 1023 do not show pc contents... This css media query actually tells the browser to adjust css class or ID's to match the media. Css rule for the width/size of the screen.

CREATING YOUR FIRST PC VIEW IN WAPKA

Now you have to place the above code inside your headtags. Your headtag is located at global settings. Once you Have placed the Css code inside your headtag hiding your contents for pc View or Mobile View will be extremely easy.

To hide yor contents for pc simply wrap the item with 

<div class="pc">YOUR PC CONTENTS</div>


[center]OR[/center]


<div id="pc">YOUR PC CODES/CONTENTS</div>


The above codes will make you show contents for only pc users (people using a computer).

to hide mobile content from Pc users just replace "pc" with "mobile" e.g

<div id="mobile">YOUR MOBILE CONTENTS</div>



You can also write a javacript if else statement here's a javascript statement you can use: 



<script type="text/javascript"> var w=window.innerWidth; if(w>=800){document.write('<style type="text/css">.wap{display:none;}</style>');} else{document.write('<style type="text/css">.web{display:none;}</style>');}</script>



If you use these Code above you can hide your mobile contents by using a div class "wap" to wrap your mobile items and for your Pc contents you can use "web".

This will make coding easier for you on your wapka site and render your webpage responsive.

STAY WITH US AND VISIT OurBuzz.tk
for new someone.

http://fb.me/md.souravmahmudkhan

Thanks.

EducationBoardResult.Org is a website, that publish all latest news and updates about Educational Result HSC Exam Result 2017, Admission Etc. Here you can collect your Exam Result, Exam Routine, Admission Result and all about Educational. We're only website, that publish all latest information.

This Is The Newest Post