‏إظهار الرسائل ذات التسميات مكتبة بلوجر. إظهار كافة الرسائل

1/16/2018

مولد أزرار لصفحات الإنترنت لموقعك

مولد أزرار لصفحات الإنترنت

الموقع هنا

اقــرأ بـــاقـي الـمـوضـوع >>>>>>

شـــارك المـوضوع لـتعم الفائـدة للجميـع

1/15/2018

HTML Download Link كوداضافة رابط تحميل

HTML Download Link

How to write download link in HTML.

Download link is a link that is used to download a file from the server to the browser's directory on the local disk.

The download link code is written as:

<a href="test_file.zip">Download File</a>

The code will create this link:

Download File

The code has the following parts:

<a> is the link tag.
href attribute sets the file to download.
Download File is the text of the link.
</a> is the link end tag.

اقــرأ بـــاقـي الـمـوضـوع >>>>>>

شـــارك المـوضوع لـتعم الفائـدة للجميـع

HTML button link اضافة رابط لموقعك

HTML button link

HTML button link code.

HTML button link

Without javascript:

<form action="../html-link.htm">
    <input type="submit" value="This is a button link">
</form>

With javascript:

<input type="button" value="This is button link"onclick="window.location.href='../html-link.htm'">

اقــرأ بـــاقـي الـمـوضـوع >>>>>>

شـــارك المـوضوع لـتعم الفائـدة للجميـع

افضل موقع اون لاين لتعديل اكواد HTML editor

الموقع الاول ادخل من هنا

موقع اخر من هنا الدخول للموقع

اقــرأ بـــاقـي الـمـوضـوع >>>>>>

شـــارك المـوضوع لـتعم الفائـدة للجميـع

12/19/2015

7نصائح للمدونين الجدد بلوجر

7نصائح للمدونين الجدد بلوجر
السلام عليكم
كثيرا من المدونين يريدون ان تضهر مدوناتهم في نتائج البحث الاولى ان كنت تريد ان تضهر مواضيعك في نتائج البحث الاولى

يجب عليك اتباع الخطوات التالية:
1-كتابة عنوان الموضوع قصير ويعبر فعلا عن محتوى الموضوع ويفضل وضع كلمات مع العنوان باللغة الانجليزية .
2-ابدأ الموضوع بنفس عنوان الموضوع الذي كتبته .
3-يفضل البحث في جوجل عن الموضوع الذي تريد نشره ورؤية اعلى عنوان حصل في نتائج البحث وكتابته كجزء من العنوان للموضوع.
4-يفضل ان تكون الوصلات ليس رابط ثابت تلقائي وانما مخصص واكتب الكلمات باللغة الانجليزية.
5-انشر مايبحث عنه الناس فشهرة مدونتك ليس بكثرة المواضيع وانما بالحصريات ومايبحث عنه الناس.
6-يفضل وضع صور داخل الموضوع لتحصل على زوار من جوجل صور ووضع عنوان للصور والكلمات البديلة من الخصائص.
7-يجب تحسين مضهر مدونتك لكي تجذب الزائر وتجنب اي اضافة تجعل المدونة بطيئة
اتمنى استفدتم من هذه ال7نصائح للمدونين الجدد بلوجر

اقــرأ بـــاقـي الـمـوضـوع >>>>>>

شـــارك المـوضوع لـتعم الفائـدة للجميـع

12/14/2015

اضافة الثلوج لمدونتك Add ice for your blog

السلام عليكم

اضافة الثلوج لمدونتك Add ice for your blog

اليوم اقدم لكم كود الثلوج لموقعك هذه الاضافة جميلة لتزيين موقعك

اضافة الثلوج لمدونتك,الثلوج,كود جافا,Add ice for your blog

يمكنك اضافة الثلوج لمدونتك في اي مكان تريد

الكود:

<!doctype html>

var snowStorm = (function(window, document) {

// --- common properties ---

this.autoStart = true;          // Whether the snow should start automatically or not.
  this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) Enable at your own risk.
  this.flakesMax = 128;           // Limit total amount of snow made (falling + sticking)
  this.flakesMaxActive = 64;      // Limit amount of snow falling at once (less = lower CPU use)
  this.animationInterval = 33;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
  this.useGPU = true;             // Enable transform-based hardware acceleration, reduce CPU load.
  this.className = null;          // CSS class name for further customization on snow elements
  this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice.
  this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
  this.followMouse = true;        // Snow movement can respond to the user's mouse
  this.snowColor = '#fff';        // Don't eat (or use?) yellow snow.
  this.snowCharacter = '•';  // • = bullet, · is square on some systems etc.
  this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
  this.targetElement = null;      // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference
  this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
  this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
  this.usePositionFixed = false;  // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported
  this.usePixelPosition = false;  // Whether to use pixel values for snow top/left vs. percentages. Auto-enabled if body is position:relative or targetElement is specified.

// --- less-used bits ---

this.freezeOnBlur = true;       // Only snow when the window is in focus (foreground.) Saves CPU.
  this.flakeLeftOffset = 0;       // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars.
  this.flakeRightOffset = 0;      // Right margin/gutter space on edge of container
  this.flakeWidth = 8;            // Max pixel width reserved for snow element
  this.flakeHeight = 8;           // Max pixel height reserved for snow element
  this.vMaxX = 5;                 // Maximum X velocity range for snow
  this.vMaxY = 4;                 // Maximum Y velocity range for snow
  this.zIndex = 0;                // CSS stacking order applied to each snowflake

// --- "No user-serviceable parts inside" past this point, yadda yadda ---

features = (function() {

var getAnimationFrame;

/**
     * hat tip: paul irish
     * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
     * https://gist.github.com/838785
     */

function timeoutShim(callback) {
      window.setTimeout(callback, 1000/(storm.animationInterval || 20));
    }

var _animationFrame = (window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        timeoutShim);

// apply to window, avoid "illegal invocation" errors in Chrome
    getAnimationFrame = _animationFrame ? function() {
      return _animationFrame.apply(window, arguments);
    } : null;

var testDiv;

testDiv = document.createElement('div');

function has(prop) {

// test for feature support
      var result = testDiv.style[prop];
      return (result !== undefined ? prop : null);

}

// note local scope.
    var localFeatures = {

transform: {
        ie:  has('-ms-transform'),
        moz: has('MozTransform'),
        opera: has('OTransform'),
        webkit: has('webkitTransform'),
        w3: has('transform'),
        prop: null // the normalized property value
      },

getAnimationFrame: getAnimationFrame

};

localFeatures.transform.prop = (
      localFeatures.transform.w3 || 
      localFeatures.transform.moz ||
      localFeatures.transform.webkit ||
      localFeatures.transform.ie ||
      localFeatures.transform.opera
    );

testDiv = null;

return localFeatures;

}());

this.timer = null;
  this.flakes = [];
  this.disabled = false;
  this.active = false;
  this.meltFrameCount = 20;
  this.meltFrames = [];

this.setXY = function(o, x, y) {

if (!o) {
      return false;
    }

if (storm.usePixelPosition || targetElementIsRelative) {

o.style.left = (x - storm.flakeWidth) + 'px';
      o.style.top = (y - storm.flakeHeight) + 'px';

} else if (noFixed) {

o.style.right = (100-(x/screenX*100)) + '%';
      // avoid creating vertical scrollbars
      o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';

} else {

if (!storm.flakeBottom) {

// if not using a fixed bottom coordinate...
        o.style.right = (100-(x/screenX*100)) + '%';
        o.style.bottom = (100-(y/screenY*100)) + '%';

} else {

// absolute top.
        o.style.right = (100-(x/screenX*100)) + '%';
        o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';

}

};

this.events = (function() {

var old = (!window.addEventListener && window.attachEvent), slice = Array.prototype.slice,
    evt = {
      add: (old?'attachEvent':'addEventListener'),
      remove: (old?'detachEvent':'removeEventListener')
    };

function addEvent() {
      apply(getArgs(arguments), 'add');
    }

function removeEvent() {
      apply(getArgs(arguments), 'remove');
    }

return {
      add: addEvent,
      remove: removeEvent
    };

}());

function rnd(n,min) {
    if (isNaN(min)) {
      min = 0;
    }
    return (Math.random()*n)+min;
  }

function plusMinus(n) {
    return (parseInt(rnd(2),10)===1?n*-1:n);
  }

this.randomizeWind = function() {
    var i;
    vRndX = plusMinus(rnd(storm.vMaxX,0.2));
    vRndY = rnd(storm.vMaxY,0.2);
    if (this.flakes) {
      for (i=0; i<this.flakes.length; i++) {
        if (this.flakes[i].active) {
          this.flakes[i].setVelocities();
        }
      }
    }
  };

this.scrollHandler = function() {
    var i;
    // "attach" snowflakes to bottom of window if no absolute bottom value was given
    scrollY = (storm.flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || (noFixed ? document.body.scrollTop : 0), 10));
    if (isNaN(scrollY)) {
      scrollY = 0; // Netscape 6 scroll fix
    }
    if (!fixedForEverything && !storm.flakeBottom && storm.flakes) {
      for (i=0; i<storm.flakes.length; i++) {
        if (storm.flakes[i].active === 0) {
          storm.flakes[i].stick();
        }
      }
    }
  };

this.resizeHandler = function() {
    if (window.innerWidth || window.innerHeight) {
      screenX = window.innerWidth - 16 - storm.flakeRightOffset;
      screenY = (storm.flakeBottom || window.innerHeight);
    } else {
      screenX = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!isIE ? 8 : 0) - storm.flakeRightOffset;
      screenY = storm.flakeBottom || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
    }
    docHeight = document.body.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
  };

this.resizeHandlerAlt = function() {
    screenX = storm.targetElement.offsetWidth - storm.flakeRightOffset;
    screenY = storm.flakeBottom || storm.targetElement.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
    docHeight = document.body.offsetHeight;
  };

this.freeze = function() {
    // pause animation
    if (!storm.disabled) {
      storm.disabled = 1;
    } else {
      return false;
    }
    storm.timer = null;
  };

this.resume = function() {
    if (storm.disabled) {
       storm.disabled = 0;
    } else {
      return false;
    }
    storm.timerInit();
  };

this.toggleSnow = function() {
    if (!storm.flakes.length) {
      // first run
      storm.start();
    } else {
      storm.active = !storm.active;
      if (storm.active) {
        storm.show();
        storm.resume();
      } else {
        storm.stop();
        storm.freeze();
      }
    }
  };

this.stop = function() {
    var i;
    this.freeze();
    for (i=0; i<this.flakes.length; i++) {
      this.flakes[i].o.style.display = 'none';
    }
    storm.events.remove(window,'scroll',storm.scrollHandler);
    storm.events.remove(window,'resize',storm.resizeHandler);
    if (storm.freezeOnBlur) {
      if (isIE) {
        storm.events.remove(document,'focusout',storm.freeze);
        storm.events.remove(document,'focusin',storm.resume);
      } else {
        storm.events.remove(window,'blur',storm.freeze);
        storm.events.remove(window,'focus',storm.resume);
      }
    }
  };

this.show = function() {
    var i;
    for (i=0; i<this.flakes.length; i++) {
      this.flakes[i].o.style.display = 'block';
    }
  };

this.SnowFlake = function(type,x,y) {
    var s = this;
    this.type = type;
    this.x = x||parseInt(rnd(screenX-20),10);
    this.y = (!isNaN(y)?y:-rnd(screenY)-12);
    this.vX = null;
    this.vY = null;
    this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
    this.vAmp = this.vAmpTypes[this.type] || 1;
    this.melting = false;
    this.meltFrameCount = storm.meltFrameCount;
    this.meltFrames = storm.meltFrames;
    this.meltFrame = 0;
    this.twinkleFrame = 0;
    this.active = 1;
    this.fontSize = (10+(this.type/5)*10);
    this.o = document.createElement('div');
    this.o.innerHTML = storm.snowCharacter;
    if (storm.className) {
      this.o.setAttribute('class', storm.className);
    }
    this.o.style.color = storm.snowColor;
    this.o.style.position = (fixedForEverything?'fixed':'absolute');
    if (storm.useGPU && features.transform.prop) {
      // GPU-accelerated snow.
      this.o.style[features.transform.prop] = 'translate3d(0px, 0px, 0px)';
    }
    this.o.style.width = storm.flakeWidth+'px';
    this.o.style.height = storm.flakeHeight+'px';
    this.o.style.fontFamily = 'arial,verdana';
    this.o.style.cursor = 'default';
    this.o.style.overflow = 'hidden';
    this.o.style.fontWeight = 'normal';
    this.o.style.zIndex = storm.zIndex;
    docFrag.appendChild(this.o);

this.refresh = function() {
      if (isNaN(s.x) || isNaN(s.y)) {
        // safety check
        return false;
      }
      storm.setXY(s.o, s.x, s.y);
    };

this.stick = function() {
      if (noFixed || (storm.targetElement !== document.documentElement && storm.targetElement !== document.body)) {
        s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
      } else if (storm.flakeBottom) {
        s.o.style.top = storm.flakeBottom+'px';
      } else {
        s.o.style.display = 'none';
        s.o.style.bottom = '0%';
        s.o.style.position = 'fixed';
        s.o.style.display = 'block';
      }
    };

this.vCheck = function() {
      if (s.vX>=0 && s.vX<0.2) {
        s.vX = 0.2;
      } else if (s.vX<0 && s.vX>-0.2) {
        s.vX = -0.2;
      }
      if (s.vY>=0 && s.vY<0.2) {
        s.vY = 0.2;
      }
    };

this.move = function() {
      var vX = s.vX*windOffset, yDiff;
      s.x += vX;
      s.y += (s.vY*s.vAmp);
      if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
        s.x = 0;
      } else if (vX < 0 && s.x-storm.flakeLeftOffset < -storm.flakeWidth) {
        s.x = screenX-storm.flakeWidth-1; // flakeWidth;
      }
      s.refresh();
      yDiff = screenY+scrollY-s.y+storm.flakeHeight;
      if (yDiff<storm.flakeHeight) {
        s.active = 0;
        if (storm.snowStick) {
          s.stick();
        } else {
          s.recycle();
        }
      } else {
        if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
          // ~1/1000 chance of melting mid-air, with each frame
          s.melting = true;
          s.melt();
          // only incrementally melt one frame
          // s.melting = false;
        }
        if (storm.useTwinkleEffect) {
          if (s.twinkleFrame < 0) {
            if (Math.random() > 0.97) {
              s.twinkleFrame = parseInt(Math.random() * 8, 10);
            }
          } else {
            s.twinkleFrame--;
            if (!opacitySupported) {
              s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 'hidden' : 'visible');
            } else {
              s.o.style.opacity = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 0 : 1);
            }
          }
        }
      }
    };

this.animate = function() {
      // main animation loop
      // move, check status, die etc.
      s.move();
    };

this.setVelocities = function() {
      s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
      s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
    };

this.setOpacity = function(o,opacity) {
      if (!opacitySupported) {
        return false;
      }
      o.style.opacity = opacity;
    };

this.melt = function() {
      if (!storm.useMeltEffect || !s.melting) {
        s.recycle();
      } else {
        if (s.meltFrame < s.meltFrameCount) {
          s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
          s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
          s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
          s.meltFrame++;
        } else {
          s.recycle();
        }
      }
    };

this.recycle = function() {
      s.o.style.display = 'none';
      s.o.style.position = (fixedForEverything?'fixed':'absolute');
      s.o.style.bottom = 'auto';
      s.setVelocities();
      s.vCheck();
      s.meltFrame = 0;
      s.melting = false;
      s.setOpacity(s.o,1);
      s.o.style.padding = '0px';
      s.o.style.margin = '0px';
      s.o.style.fontSize = s.fontSize+'px';
      s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
      s.o.style.textAlign = 'center';
      s.o.style.verticalAlign = 'baseline';
      s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
      s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
      s.refresh();
      s.o.style.display = 'block';
      s.active = 1;
    };

this.recycle(); // set up x/y coords etc.
    this.refresh();

};

this.snow = function() {
    var active = 0, flake = null, i, j;
    for (i=0, j=storm.flakes.length; i<j; i++) {
      if (storm.flakes[i].active === 1) {
        storm.flakes[i].move();
        active++;
      }
      if (storm.flakes[i].melting) {
        storm.flakes[i].melt();
      }
    }
    if (active<storm.flakesMaxActive) {
      flake = storm.flakes[parseInt(rnd(storm.flakes.length),10)];
      if (flake.active === 0) {
        flake.melting = true;
      }
    }
    if (storm.timer) {
      features.getAnimationFrame(storm.snow);
    }
  };

this.mouseMove = function(e) {
    if (!storm.followMouse) {
      return true;
    }
    var x = parseInt(e.clientX,10);
    if (x<screenX2) {
      windOffset = -windMultiplier+(x/screenX2*windMultiplier);
    } else {
      x -= screenX2;
      windOffset = (x/screenX2)*windMultiplier;
    }
  };

this.createSnow = function(limit,allowInactive) {
    var i;
    for (i=0; i<limit; i++) {
      storm.flakes[storm.flakes.length] = new storm.SnowFlake(parseInt(rnd(flakeTypes),10));
      if (allowInactive || i>storm.flakesMaxActive) {
        storm.flakes[storm.flakes.length-1].active = -1;
      }
    }
    storm.targetElement.appendChild(docFrag);
  };

this.timerInit = function() {
    storm.timer = true;
    storm.snow();
  };

this.init = function() {
    var i;
    for (i=0; i<storm.meltFrameCount; i++) {
      storm.meltFrames.push(1-(i/storm.meltFrameCount));
    }
    storm.randomizeWind();
    storm.createSnow(storm.flakesMax); // create initial batch
    storm.events.add(window,'resize',storm.resizeHandler);
    storm.events.add(window,'scroll',storm.scrollHandler);
    if (storm.freezeOnBlur) {
      if (isIE) {
        storm.events.add(document,'focusout',storm.freeze);
        storm.events.add(document,'focusin',storm.resume);
      } else {
        storm.events.add(window,'blur',storm.freeze);
        storm.events.add(window,'focus',storm.resume);
      }
    }
    storm.resizeHandler();
    storm.scrollHandler();
    if (storm.followMouse) {
      storm.events.add(isIE?document:window,'mousemove',storm.mouseMove);
    }
    storm.animationInterval = Math.max(20,storm.animationInterval);
    storm.timerInit();
  };

this.start = function(bFromOnLoad) {
    if (!didInit) {
      didInit = true;
    } else if (bFromOnLoad) {
      // already loaded and running
      return true;
    }
    if (typeof storm.targetElement === 'string') {
      var targetID = storm.targetElement;
      storm.targetElement = document.getElementById(targetID);
      if (!storm.targetElement) {
        throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
      }
    }
    if (!storm.targetElement) {
      storm.targetElement = (document.body || document.documentElement);
    }
    if (storm.targetElement !== document.documentElement && storm.targetElement !== document.body) {
      // re-map handler to get element instead of screen dimensions
      storm.resizeHandler = storm.resizeHandlerAlt;
      //and force-enable pixel positioning
      storm.usePixelPosition = true;
    }
    storm.resizeHandler(); // get bounding box elements
    storm.usePositionFixed = (storm.usePositionFixed && !noFixed && !storm.flakeBottom); // whether or not position:fixed is to be used
    if (window.getComputedStyle) {
      // attempt to determine if body or user-specified snow parent element is relatlively-positioned.
      try {
        targetElementIsRelative = (window.getComputedStyle(storm.targetElement, null).getPropertyValue('position') === 'relative');
      } catch(e) {
        // oh well
        targetElementIsRelative = false;
      }
    }
    fixedForEverything = storm.usePositionFixed;
    if (screenX && screenY && !storm.disabled) {
      storm.init();
      storm.active = true;
    }
  };

function doDelayedStart() {
    window.setTimeout(function() {
      storm.start(true);
    }, 20);
    // event cleanup
    storm.events.remove(isIE?document:window,'mousemove',doDelayedStart);
  }

function doStart() {
    if (!storm.excludeMobile || !isMobile) {
      doDelayedStart();
    }
    // event cleanup
    storm.events.remove(window, 'load', doStart);
  }

// hooks for starting the snow
  if (storm.autoStart) {
    storm.events.add(window, 'load', doStart, false);
  }

return this;

}(window, document));
</script>

<h1 style="font-size:1em;color:#fff">
Snow</h1>
<p style="font-size:1em;color:#fff">
Nice snow on the page.<br/>
 Enjoy it!
</p>
<div>
<a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none"></span></a></div>
</!doctype>

اخيرا اتمنى وفقت في تقديم موضوع اضافة الثلوج لمدونتك

اقــرأ بـــاقـي الـمـوضـوع >>>>>>

شـــارك المـوضوع لـتعم الفائـدة للجميـع

12/13/2015

كود تشغيل الصوت في موقعك بشكل تلقائي

كود تشغيل الصوت في موقعك بشكل تلقائي
اليوم اقدم لكم مشغل الصوت للموقع يمكنك تشغيل اي نشيد او القرأن الكريم ليستمع اليه من يدخل موقع وتكسب الأجر ان شاء الله

يمكنك وضعه بأي مكان في موقعك فقط ضع رابط النشيد او القرأن الذي تريد تشغيله بدل http://anbarprograms.blogspot.com/

ملاحظة:يمكنك استخدام موقع https://archive.org/ لرفع النشيد او القرأن ونسخ الرابط ووضعه بدل الرابط .

سكربت الاضافة:

اقــرأ بـــاقـي الـمـوضـوع >>>>>>

شـــارك المـوضوع لـتعم الفائـدة للجميـع

كود اضافة حاسبة جميلة لموقعك

<html>
<head>
<style type="text/css">
/* Basic reset */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 
 /* Better text styling */
 font: bold 14px Arial, sans-serif;
}

/* Finally adding some IE9 fallbacks for gradients to finish things up */

/* A nice BG gradient */
html {
 height: 100%;
 background: white;
 background: radial-gradient(circle, #fff 20%, #ccc);
 background-size: cover;
}

/* Using box shadows to create 3D effects */
#calculator {
 width: 325px;
 height: auto;
 
 margin: 10px auto;
 padding: 20px 20px 9px;
 
 background: #9dd2ea;
 background: linear-gradient(#9dd2ea, #8bceec);
 border-radius: 3px;
 box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}

/* Top portion */
.top span.clear {
 float: left;
}

/* Inset shadow on the screen to create indent */
.top .screen {
 height: 40px;
 width: 212px;
 
 float: right;
 
 padding: 0 10px;
 
 background: rgba(0, 0, 0, 0.2);
 border-radius: 3px;
 box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
 
 /* Typography */
 font-size: 17px;
 line-height: 40px;
 color: white;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 text-align: right;
 letter-spacing: 1px;
}

/* Clear floats */
.keys, .top {overflow: hidden;}

/* Applying same to the keys */
.keys span, .top span.clear {
 float: left;
 position: relative;
 top: 0;
 
 cursor: pointer;
 
 width: 66px;
 height: 36px;
 
 background: white;
 border-radius: 3px;
 box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
 
 margin: 0 7px 11px 0;
 
 color: #888;
 line-height: 36px;
 text-align: center;
 
 /* prevent selection of text inside keys */
 user-select: none;
 
 /* Smoothing out hover and active states using css3 transitions */
 transition: all 0.2s ease;
}

/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
 background: #FFF0F5;
 margin-right: 0;
}

.keys span.eval {
 background: #f1ff92;
 box-shadow: 0px 4px #9da853;
 color: #888e5f;
}

.top span.clear {
 background: #ff9fa8;
 box-shadow: 0px 4px #ff7c87;
 color: white;
}

/* Some hover effects */
.keys span:hover {
 background: #9c89f6;
 box-shadow: 0px 4px #6b54d3;
 color: white;
}

.keys span.eval:hover {
 background: #abb850;
 box-shadow: 0px 4px #717a33;
 color: #ffffff;
}

.top span.clear:hover {
 background: #f68991;
 box-shadow: 0px 4px #d3545d;
 color: white;
}

/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
 box-shadow: 0px 0px #6b54d3;
 top: 4px;
}

.keys span.eval:active {
 box-shadow: 0px 0px #717a33;
 top: 4px;
}

.top span.clear:active {
 top: 4px;
 box-shadow: 0px 0px #d3545d;
}
</style>
</head>
<body>
<div id="calculator">
 
 <div class="top">
  <span class="clear">C</span>
  <div class="screen">
</div>
</div>
<div class="keys">
  
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span class="operator">+</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span class="operator">-</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span class="operator">÷</span>
  <span>0</span>
  <span>.</span>
  <span class="eval">=</span>
  <span class="operator">x</span>
 </div>
</div>

<script type="text/javascript">
// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;

// Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
 keys[i].onclick = function(e) {
  // Get the input and button values
  var input = document.querySelector('.screen');
  var inputVal = input.innerHTML;
  var btnVal = this.innerHTML;
  
  // Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
  // If clear key is pressed, erase everything
  if(btnVal == 'C') {
   input.innerHTML = '';
   decimalAdded = false;
  }
  
  // If eval key is pressed, calculate and display the result
  else if(btnVal == '=') {
   var equation = inputVal;
   var lastChar = equation[equation.length - 1];
   
   // Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
   equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
   
   // Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
   if(operators.indexOf(lastChar) > -1 || lastChar == '.')
    equation = equation.replace(/.$/, '');
   
   if(equation)
    input.innerHTML = eval(equation);
    
   decimalAdded = false;
  }
  
  // Basic functionality of the calculator is complete. But there are some problems like 
  // 1. No two operators should be added consecutively.
  // 2. The equation shouldn't start from an operator except minus
  // 3. not more than 1 decimal should be there in a number
  
  // We'll fix these issues using some simple checks
  
  // indexOf works only in IE9+
  else if(operators.indexOf(btnVal) > -1) {
   // Operator is clicked
   // Get the last character from the equation
   var lastChar = inputVal[inputVal.length - 1];
   
   // Only add operator if input is not empty and there is no operator at the last
   if(inputVal != '' && operators.indexOf(lastChar) == -1) 
    input.innerHTML += btnVal;
   
   // Allow minus if the string is empty
   else if(inputVal == '' && btnVal == '-') 
    input.innerHTML += btnVal;
   
   // Replace the last operator (if exists) with the newly pressed operator
   if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
    // Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
    input.innerHTML = inputVal.replace(/.$/, btnVal);
   }
   
   decimalAdded =false;
  }
  
  // Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.
  else if(btnVal == '.') {
   if(!decimalAdded) {
    input.innerHTML += btnVal;
    decimalAdded = true;
   }
  }
  
  // if any other key is pressed, just append it
  else {
   input.innerHTML += btnVal;
  }
  
  // prevent page jumps
  e.preventDefault();
 } 
}
</script>
<div>
<a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none"></span></a></div>
</body>
</html>

اقــرأ بـــاقـي الـمـوضـوع >>>>>>

شـــارك المـوضوع لـتعم الفائـدة للجميـع

8/23/2015

اضافة زر الاشتراك بقناة اليوتيوب على موقعك youtube

اضافة زر الاشتراك بقناة اليوتيوب للمواقع والمدونات بسهولة
هذه الاضافة توفر لك الاشتراك بقناتك وجلب الكثير من المشتركين في قناة اليوتيوب عن طريق موقعك .
الخطوات :
1- الذهاب الى هذا الموقع من اليوتيوب لجلب معرف قناتك id

2-بعد نسخ المعرف كما اوضحنا ,نذهب للموقع هنا

3-بعد وضع معرف قناتك ,سيضهر لك كود جافا سكربت ,اضفه انسخ الكود والصقه في مكان في موقعك من مواقع الجافا سكربت.

اقــرأ بـــاقـي الـمـوضـوع >>>>>>

شـــارك المـوضوع لـتعم الفائـدة للجميـع