my-codes: كود

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

الأحد، 8 يونيو 2014

الجمعة، 6 يونيو 2014

كود إضافة المواضيع الأكثر تعليقا في البلوجر

الثلاثاء، 27 مايو 2014

<div class='mblmetromenu'>
<div class='tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='/'>
<i class='fa fa-home'></i>
<span class='light-text'>الرئيسية</span>
</a>
</div>
<div class='tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='http://almos3a.blogspot.com/search/label/%D9%85%D8%B9%D9%84%D9%88%D9%85%D8%A7%D8%AA%20%D9%88%D8%AB%D9%82%D8%A7%D9%81%D8%A9?&max-results=8'>
<img src='  '/>
<i class='fa fa-question-circle'></i>
<span class='light-text'>ثقافة ومعلومات</span>
</a>
</div>
<div class='tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='http://almos3a.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%D8%B7%D8%B1%D8%A7%D8%A6%D9%81?&max-results=8'>
<i class='fa fa-globe'></i>
<span class='light-text'>غرائب وطرائف</span>
</a>
</div>
<div class='tile-bt-large solid-red shadow-violetred-n margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='http://www.almos3a.com/search/label/%D9%82%D8%B5%D8%B5%20%D9%88%D8%B9%D8%A8%D8%B1?&max-results=8'>
<i class='fa fa-book'></i>
<span class='light-text'>قصص وعبر</span>
</a>
</div>
<div class='tile-bt solid-darkred shadow-violetred-b margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='http://almos3a.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%D8%B7%D8%B1%D8%A7%D8%A6%D9%81?&max-results=8'>
<i class='fa fa-video-camera'></i>
<span class='light-text'>أبتكارات ومنوعات</span>
</a>
</div>
<div class='tile-bt solid-black shadow-violetred-c margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='http://www.almos3a.com/search/label/%D8%B9%D8%A7%D9%84%D9%85%20%D8%A7%D9%84%D9%85%D8%B1%D8%A3%D8%A9?&max-results=8'>
<i class='fa fa-female'></i>
<span class='light-text'>عالـم المرأة</span>
</a>
</div>
<div class='tile-bt solid-orange shadow-violetred-e margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='http://www.almos3a.com/search/label/%D8%A7%D9%84%D9%85%D8%B7%D8%A8%D8%AE%20%D9%88%D8%A7%D9%84%D8%AD%D9%84%D9%88%D9%8A%D8%A7%D8%AA?&max-results=8'>
<i class='fa fa-coffee'></i>
<span class='light-text'>طبخات وحلويات</span>
</a>
</div>
<div class='tile-bt solid-darkblue shadow-violetred-f margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='http://www.almos3a.com/search/label/%D8%A7%D9%84%D8%B5%D8%AD%D8%A9%20%D9%88%D8%B1%D8%B9%D8%A7%D9%8A%D8%AA%D9%87%D8%A7?&max-results=8'>
<i class='fa fa-medkit'></i>
<span class='light-text'>الصحة ورعايتها</span>
</a>
</div>
<div class='tile-bt-large solid-blue shadow-violetred-j margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='http://almos3a.blogspot.com/search/label/%D8%A7%D9%84%D9%85%D9%83%D8%AA%D8%A8%20%D8%A7%D9%84%D8%A5%D8%B3%D9%84%D8%A7%D9%85%D9%8A%D8%A9?&max-results=8'>
<i class='fa fa-columns'></i>
<span class='light-text'>الموسوعة الإسلامية</span>
</a>
</div>
<div class='tile-bt solid-olive shadow-violetred-h margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='http://www.almos3a.com/search/label/%D9%81%D9%86%D9%88%D9%86%20%D9%88%D8%A3%D8%A8%D8%AA%D9%83%D8%A7%D8%B1%D8%A7%D8%AA?&max-results=8'>
<i class='fa fa-rocket'></i>
<span class='light-text'>اختراعات وتكنولوجيا</span>
</a>
</div>
<div class='tile-bt-large solid-blue-2 shadow-violetred-q margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='http://www.facebook.com/messages/almos3abook'>
<i class='fa fa-phone-square'></i>
<span class='light-text'>إتصل بنا</span>
</a>
</div>
</div>

كود الستايل #CSS

body {
font-family:sans-serif;
}
a {
text-decoration:none;
}
.mblmetromenu {
margin-bottom: auto;
margin-top: auto;
width: 960px;
}
@media screen and (max-width:960px) {
.mblmetromenu {
width:100%;
}
}
.MblMetroMenu {
position:relative;
}
.om-nav {
position:absolute;
width:100%;
z-index:999;
display:none;
}
.om-ctrlbar {
width:100%;
height:48px;
}
.om-ctrlitems {
margin:auto;
padding:0px;
height:48px;
display:inline-block;
text-align:center;
}
.om-ctrlitem {
height:48px;
width:48px;
display:none;
cursor:pointer;
float:left;
opacity:0.5;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
opacity:1 !important;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
width:960px;
margin:auto;
}
.om-controlitem {
height:48px;
cursor:pointer;
}
.om-closenav {
float:left;
}
.om-movenext {
float:right;
}
.om-itemholder {
margin:auto;
padding:20px 0px;
}
@media screen and (max-width:960px) {
.om-closenav {
position:absolute;
z-index:9999;
left:0;
top:0;
}
.om-movenext {
position:absolute;
z-index:9999;
right:0;
top:0;
}
.om-controlitems {
width:100%;
}
.om-itemholder {
width:100%;
}
}
.om-centerblock {
display:inline-block;
}
.om-item {
display:none;
}
.om-showitem {
margin:5px;
float:left;
display:none;
}
.tile-bt {
cursor: pointer;
height: 50px;
text-align: center;
width: 120px;
}
.tile-bt a {
display:block;
padding-top:3px;
text-decoration: !important;
}
.tile-bt img {
margin:0 auto 0 auto;
padding-bottom:5px;
height:48px;
width:48px;
position:relative;
display:block;
}
.tile-bt span {
display: block;
font-family: 'Droid Arabic Kufi',cursive;
font-size: 12px;
font-weight: bold;
padding-bottom: 10px;
}
.tile-bt:active {
opacity:0.5;
}
.tile-bt-large {
cursor: pointer;
height: 50px;
line-height: 50px;
text-align: center;
width: 190px;
}
.tile-bt-large a {
display: block;
height: 100%;
}
.tile-bt-large img {
vertical-align: middle;
margin:auto;
padding:0px;
position:relative;
width:48px;
height:48px;
}
.tile-bt-large span {
display: inline;
font-family: 'Droid Arabic Kufi',cursive;
font-size: 12px;
font-weight: bold;
vertical-align: top;
}
.tile-bt-large:active {
opacity:0.5;
}
.tile-bt-extralarge {
text-align:center;
cursor:pointer;
width:190px;
height:105px;
}
.tile-bt-extralarge a {
display:block;
padding-top:16px;
text-decoration: !important;
}
.tile-bt-extralarge img {
display: block;
height: 80px;
margin: 0 auto;
padding-bottom: 23px;
padding-top: 27px;
position: relative;
width: 80px;
}
.tile-bt-extralarge span {
display: block;
font-family: 'Droid Arabic Kufi',cursive;
font-size: 14px;
font-weight: bold;
padding-bottom: 20px;
}
.tile-bt-extralarge:active {
opacity:0.5;
}
.shadow-white, .shadow-black,.shadow-violetred, .shadow-blue, .shadow-green, .shadow-red {
/*display:inline-block;*/
}
.shadow-white:hover {
background: none repeat scroll 0 0 #DDD;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-violetred-n:hover {
background: none repeat scroll 0 0 #00A21B;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-violetred-b:hover {
background: none repeat scroll 0 0 #D34727;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-violetred-c:hover {
background: none repeat scroll 0 0 #009AAD;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-violetred-e:hover {
background: none repeat scroll 0 0 #5535AF;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-violetred-f:hover {
background: none repeat scroll 0 0 #AB193F;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-violetred-j:hover {
background: none repeat scroll 0 0 #084EB3;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-violetred-h:hover {
background: none repeat scroll 0 0 #98E509;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-violetred-q:hover {
background: none repeat scroll 0 0 #EFAE00;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-blue:hover {
background: none repeat scroll 0 0 #8E0099;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-green:hover {
background: none repeat scroll 0 0 #000;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-red:hover {
background: none repeat scroll 0 0 #2D88EE;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.shadow-black:hover {
background: none repeat scroll 0 0 #FF9A00;
box-shadow:0px 0px 6px 3px #FF9A00;
-webkit-box-shadow:0px 0px 6px 3px #FF9A00;
-moz-box-shadow:0px 0px 6px 3px #FF9A00;
-o-box-shadow:0px 0px 6px 3px #FF9A00;
-ms-box-shadow:0px 0px 6px 3px #FF9A00;
}
.solid-blue { background:#191919; }
.solid-blue-2 { background:#191919; }
.solid-darkblue { background:#191919; }
.solid-violetred { background:#191919; }
.solid-red { background:#191919;}
.solid-red-2 { background:#191919; }
.solid-pink { background:#191919; }
.solid-purple { background:#191919; }
.solid-orange { background:#191919; }
.solid-orange-2 { background:#191919; }
.solid-orange-3 { background:#191919; }
.solid-coral { background:#191919; }
.solid-green { background:#191919; }
.solid-green-2 {background:#191919; }
.solid-darkgreen { background:#191919; }
.solid-olive { background:#191919}
.solid-grass { background:#191919; }
.solid-darkred { background:#191919; }
.solid-gold { background:#191919; }
.solid-yellow { background:#191919; }
.solid-black { background:#191919; }
.solid-smoke { background:#191919; }
.clearspace { clear: both; }
.floatleft { float:right; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
color:#fff;
}
.dark-text {
color:#1e1e1e;
}
.gradient {
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
height:100%;
}

شاهد شرح هذه الإضافة من هنا
http://gooplz.blogspot.com/2014/05/How-to-retrieved-tools-from-any-sites.html

الأربعاء، 21 مايو 2014

تسمية توضيحية متحركة تحوم على الصورة

لمعاينة التأثير مرر الماوس على الصورة

Title Here.. Description Here...

كود الستايل

#image-hover {
}

#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#figure:hover .caption {
margin-bottom:0px;
}

#image-hover .caption {
width:100%;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}

#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}

كود الآش ت م ل

الجمعة، 16 مايو 2014

تأثر على صور البلوجر

للمعاينة مرر الماوس على الصورة

الكود الأول الخاصة بالإضافة الأولى والتي هي إطار للصور :
الكود الثاني الخاصة بالإضافة الثانية والتي هي تأثير ابيض واسود:

الخميس، 15 مايو 2014

كود الإشتراك في المدونة

</form>
<div class="clear">
</div>
</div>
</div>

هذا هو الشرح الكامل لهذه الإضافة
http://gooplz.blogspot.com/2014/05/how-to-get-sign-up-in-blogger.html

الأحد، 11 مايو 2014

كود تعديل الصور من البلوجر

..
للمزيد حول هذا الموضوع :http://gooplz.blogspot.com/2014/05/how-to-round-edges-of-images-in-one.html

الجمعة، 9 مايو 2014

كود سلايدر فوق المواضيع

كود سلايدر الهيدر

إضافة كود سلايدر </head>

كود سلايدر بودي body

كود سلايدر بودي

كود ستايل السلايدر css slider

كود #css

featured{margin: 0 0 20px 20px;}
.sliderwrapper{position: relative;overflow: hidden;border: 2px solid #5A2C8E;border-bottom-width:6px;height:250px;background:rgba(90, 44, 142, 0.6);}
.sliderwrapper .contentdiv{background:#5A2C8E;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.pagination{text-align: right;background-color:#5A2C8E;padding: 2px 10px 10px}
.pagination a{font-size:11px;color:#fff;padding: 5px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:3px;border-top-right-radius:3px;background:#68667B}
.pagination a:hover{color:#68667B;background-color:#881E5D}
.pagination a.selected{color:#68667B;background-color:#fff}
.featuredPost{width:100%;padding:5px 10px 10px;background:#5A2C8E;background:rgba(90, 44, 142, 0.4);color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-family:droidkufi-bold, tahoma;font-size:14px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-family:droidkufi-bold, tahoma;font-size:10px}

الثلاثاء، 6 مايو 2014

كود النشر التلقائي

الخميس، 1 مايو 2014

كود صندوق الفيسبوك الأنيق

هذا الكود خاص بـ صندوق الفيسبوك الإحترافي والأنيق

الجمعة، 25 أبريل 2014

كود محرك البحث جوجل

هذا الكود يضاف إلى أي أداة للبحث من داخل مدونتك

كود لعبة الأرقام

لإضافتها قم بإضافة كود التالي أين شئت

name = x + '_' + y;
   button = getElement15(form,name);
   name = x1 + '_' + y1;
   button1 = getElement15(form,name);
   if (button.value == ' ' || button1.value == ' ') {
    tmp = button.value;
    button.value = button1.value;
    button1.value = tmp;
    if (button.value == ' ') {
     ex = x;
     ey = y;
    } else {
     ex = x1;
     ey = y1;
    }
    return true;
   }
   return false;
  }
  
  function check15(form) {
   score = 0;
   for (i = 0; i < 4; i++) {
    for (j = 0; j < 4; j++) {
     val = 1 + i + (4*j);
     if (val < 16) {
      if (getElement15(form,i + '_' + j).value == val) {
       score++;
      }
     }
    }
   }
   return score == 15;
  }
 </script>
 
 <table border="0" cellspacing="0" cellpadding="1">
  <form>
<tr>
   <td><input style="width:30px;" type="button" name="0_0" value="1" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="1_0" value="2" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="2_0" value="3" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="3_0" value="4" onclick="press15(this.form, this);"></td>
  </tr>
<tr>
   <td><input style="width:30px;" type="button" name="0_1" value="5" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="1_1" value="6" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="2_1" value="7" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="3_1" value="8" onclick="press15(this.form, this);"></td>
  </tr>
<tr>
   <td><input style="width:30px;" type="button" name="0_2" value="9" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="1_2" value="10" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="2_2" value="11" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="3_2" value="12" onclick="press15(this.form, this);"></td>
  </tr>
<tr>
   <td><input style="width:30px;" type="button" name="0_3" value="13" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="1_3" value="14" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="2_3" value="15" onclick="press15(this.form, this);"></td>
   <td><input style="width:30px;" type="button" name="3_3" value=" " onclick="press15(this.form, this);"></td>
  </tr>
<tr>
   <td colspan="2">
    <input style="width:62px;" type="button" value="إعادة تعيين" onclick="resetboard15(this.form);">
   </td>
   <td colspan="2">
    <input style="width:62px;" type="button" value="الشروط" onclick="showrules15();">
   </td>
  </tr>
<tr>
   <td colspan="4">
    <input style="width:126px;" type="button" value="خلط" onclick="shuffle15(this.form,150);">
   </td>
  </tr>
</form>
</table>

كود لعبة الحب

هذا الكود يفدم لك لعبة الحب للتسلية فقط شاهد المعاينة التالية :

اختبار الحب
اختبار الحب بين شخصين ... اكتب اسم الشخص الاول ثم اسم الشخص الثاني واضفط على احسب ... تكتب الأسماء بالحروف الإنجليزية فقط.

function calc() {
first = document.loveform.name1.value.toUpperCase();
firstlength = document.loveform.name1.value.length;
second = document.loveform.name2.value.toUpperCase();
secondlength = document.loveform.name2.value.length;
var LoveCount=0;

for (Count=0; Count < firstlength; Count++) {

letter1=first.substring(Count,Count+1);

if (letter1=='L') LoveCount+=2; 
if (letter1=='O') LoveCount+=2; 
if (letter1=='V') LoveCount+=2;
if (letter1=='E') LoveCount+=2; 
if (letter1=='Y') LoveCount+=3; 
if (letter1=='O') LoveCount+=1; 
if (letter1=='U') LoveCount+=3;
}

for (Count=0; Count < secondlength; Count++) {
letter2=second.substring(Count,Count+1);
if (letter2=='L') LoveCount+=2;
if (letter2=='O') LoveCount+=2; 
if (letter2=='V') LoveCount+=2; 
if (letter2=='E') LoveCount+=2;
if (letter2=='Y') LoveCount+=3;
if (letter2=='O') LoveCount+=1;
if (letter2=='U') LoveCount+=3;
}

amount=0;

if (LoveCount> 0) amount=  5-((firstlength+secondlength)/2)
if (LoveCount> 2) amount= 10-((firstlength+secondlength)/2)
if (LoveCount> 4) amount= 20-((firstlength+secondlength)/2)
if (LoveCount> 6) amount= 30-((firstlength+secondlength)/2)
if (LoveCount> 8) amount= 40-((firstlength+secondlength)/2)

if (LoveCount>10) amount= 50-((firstlength+secondlength)/2)

if (LoveCount>12) amount= 60-((firstlength+secondlength)/2)
if (LoveCount>14) amount= 70-((firstlength+secondlength)/2)
if (LoveCount>16) amount= 80-((firstlength+secondlength)/2)
if (LoveCount>18) amount= 90-((firstlength+secondlength)/2)
if (LoveCount>20) amount=100-((firstlength+secondlength)/2)
if (LoveCount>22) amount=110-((firstlength+secondlength)/2)
if (firstlength==0 || secondlength==0) amount= "Err";
if (amount < 0) amount= 0;
if (amount >99) amount=99;

document.loveform.output.value=amount+"%";

}

</script>

<div align="center">
<p>
<b><span lang="ar-sa">اختبار الحب</span></b></p>
<font color="#000099" face="Tahoma" size="2">
اختبار الحب بين شخصين ... اكتب اسم الشخص الاول ثم اسم الشخص الثاني واضفط على احسب
<span lang="ar-sa">... تكتب الأسماء بالحروف الإنجليزية فقط</span>.</font>

<p>
<input value="name1" name="name1" type="text" size="20">  + 
  <INPUT

value="name2" name="name2" type="text" size="20">  = <input value name="output" type="text" size="6"> <br>

<br>

<input value="احســب" name="calculate" type="button" value="calculate"

onclick="calc()"> </P>

</FORM></DIV>

my-codes