Drawing Horizontal Lines by HTML in Wapka & it's attributes!

  /   No comments   
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.


<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?

  /   No comments   
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:

<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?

  /   No comments   
create-a-facebook-like-login-register-system

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?

  /   No comments   





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.