Drawing Horizontal Lines by HTML in Wapka & it's attributes!
Horizontal lines are very beautiful feature of HTML. Wapmasters often need these lines in their wapka or XTGem wapsites. So I'm going to publish how to do it along with it's awesome attributes. In this post you will learn How to Draw Horizontal (HR) Lines in HTML in Wapka. So follow the article neatly.
By size attribute in hr tag, you can define the size of line. Here it is 5. You can choose any size.
By colour attribute you can pick the colour of the line. Here it is blue. You can choose red, yellow, pink whatever you like.
By width attribute you can define the width of the line you are going to draw. It comes pretty handy sometimes.
Watch demo of all the codes in the link below::
<hr />
By <hr /> you can easily draw a normal straight horizontal line through out the site. Remember to finish the tag in itself. It doesn't need any closing tag (exactly like br tag).<hr size="5"/>
By size attribute in hr tag, you can define the size of line. Here it is 5. You can choose any size.
<hr color="blue"/>
By colour attribute you can pick the colour of the line. Here it is blue. You can choose red, yellow, pink whatever you like.
<hr width="75%"/>
By width attribute you can define the width of the line you are going to draw. It comes pretty handy sometimes.
<hr color="blue" size="5" width="75%"/>
You can combine all of the codes above and form a awesome looking compound line easily.Watch demo of all the codes in the link below::
How to change the color of a link in Wapka?
Links are really important in Wapka. It makes a connection bridge between all your pages. A link is by default of purple color unless, until you manipulate it with some codings. Today I'm going to tell you the trick to change the color of a link easily. Just abide by the tutorial carefully.
You can change the color of a link either by CSS class or style attribute. But CSS is harder to work with. So we shall go with the later one.
In HTML links are made like this:
But to colorify it with green color we have to use style attribute. For example:
You can change the color of a link either by CSS class or style attribute. But CSS is harder to work with. So we shall go with the later one.
In HTML links are made like this:
<a href="source_url"> LINK </a>.
RESULT: LINK
But to colorify it with green color we have to use style attribute. For example:
<a href="source_url" style="color:#33CC33">LINK</a>
After # you can use any color code. I have prepared a list of color codes. You can pick any code from there and colorify your link.
How to Create a Facebook Like Login & Registration System in Wapka?
Hey friends have you ever seen facebook like login box in your friend's website and wondered how would he have done it? Quite easy. Today I'm going to share this trick with you so that you can easily create a login and registration system in your wapka wapsite. Follow the simple steps mentioned below. If you don't have an wapka account then learn how to create one.
- First of all login to your wapka account and go to the admin mode.
- Then click on EDIT SITE & then on WML/XHTML code.
- Now copy the following code/script and paste it on the text box. Remember, do not edit this code or it may ruin your login system.
After pasting, click on set to save it. Then check your page. You're done. If you liked the post please do share with your friends and please link back to us through your wapsite.
How to Add Rainbow Color Hover Effect on Links in Wapka?
Ever wondered, how awesome can it look if you customize your links in such a way that whenever someone takes the mouse over a link or hyperlink a cool effect of colors appear? It will just make your users more happy. By this trick you can make your links look great. When you take your mouse over the link an animation of many colors will play role. So how to do that?
To do so, first login to your wapka account. Then go to the admin mode of the site you want to customize. Then click on Edit Site & then on Global Settings (or if you have the drop down menu, you can directly select Global Settings from there). After that go to HEAD tags (meta,style,...). Then at the text box paste the following code and save it.
<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>
Okay so now you're done with it. Enjoy and don't forget to share it with your friends.
How to Create a Wapsite With Wapka?
So you want to create a wapsite, huh? Okay, you're at the right place. It is the leading site to learn how to create and maintain a mobile website a.k.a. wapsite.
First of all you should know, what a wapsite is? Usually a mobile website is known as wapsite. You can create a site using some external websites. Here are a list of site that allows you to create a mobile site-
- Wapka.mobi
- XTGem.com
- Wapego.com
- WapGlee.com
About Wapka:
Wapka is really an awesome site builder cum hosting site . When you create a site in their server your domain name will be under their subdomain. Wapka provides 3 sub domains i.e. *.wapka.me, *.wapka.com, *.wapka.mobi. You'll need a little depth in HTML in account to create awesome pages. Wapka is mainly based on XHTML which is approximately same as HTML. So without waiting let's get started.
The Registration:
Okay now let's come directly to our tutorial. At first to make your own site you have to register at wapka.mobi. To do so,
- First go to this link.
- Now enter valid mail id, password and choose a password & lastly click sign up.
- Now confirm the mail id by clicking on the link sent to your mail box.
- That's it you're done.
What Now?
Now you can create professional wapsites like Wapsko. All you have to do is, after confirming mail, login to your account. Then go to the site you created while opening the account. You can alternatively create a new site too. Next, click on "Others" under the "Basic Settings" and then tick on "Allow fast access to edit functions". Then at the top you'll notice a link like "Admin Mode". Click on there.
Bingoooo! Your site is ready. But currently it's completely blank. You have to edit this site. You'll notice some drop down menus. All your site will be built, edited & control from that section. I shall post more tutorials about the functions of those menus. Just stay tuned to this site for more updates.
Welcome to Wapka Tools
Wapka Tools is a website which publishes awesome tutorials, templates, tricks, tips, scripts & manything else related to the wap sites like Wapka, XTGem etc. Stay tuned to us for some mindblowing stuffs coming soon.