my-codes: أكواد css

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

الأحد، 9 نوفمبر 2014

أكواد إضافة كنترول بانل

الكود الأول :

.admin-controll,.admin-controll * {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
    line-height: 1.0;
}
.admin-controll ul {
    position: absolute;
    top: -999em;
    width: 100%;
}
.admin-controll ul li {
    width: 100%;
    background: 333333;
}
.admin-controll li:hover {
    visibility: inherit;
}
.admin-controll li {
    float: left;
    position: relative;
}
.admin-controll a {
    display: block;
    position: relative;
}
.admin-controll li:hover ul,.admin-controll li.sfHover ul {
    left: 0;
    top: 100%;
    z-index: 99;
}
.admin-controll li:hover li ul,.admin-controll li.sfHover li ul {
    top: -999em;
}
.admin-controll li li:hover ul,.admin-controll li li.sfHover ul {
    left: 100%;
    top: 0;
}
.admin-controll li li:hover li ul,.admin-controll li li.sfHover li ul {
    top: -999em;
}
.admin-controll li li li:hover ul,.admin-controll li li li.sfHover ul {
    left: 100%;
    top: 0;
}
.mbl-admin-bar {
    margin: 0px;
    direction: ltr;
    color: #ccc;
    font: 400 13px/32px "Open Sans",sans-serif;
    height: 32px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 600px;
    z-index: 99999;
    background: #222;
    float: left;
}
.mbl-admin-bar li a {
    display: block;
    color: #fff;
    padding: 7px 15px;
    font-weight: 400;
    text-decoration: none;
    font-size: 14px;
}
.mbl-admin-bar li li a {
    font-size: 15px;
    color: #fff;
    float: none;
    padding: 0px;
    width: 0;
}
ul.children {
    color: #fff;
    background: #333333;
    font-size: 18px;
    min-width: 230px;
    padding: 10px;
    float: right;
    margin-left: -98px;
}
.mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover > a,.mbl-admin-bar li.current-cat > a,.mbl-admin-bar li.current_page_item > a,.mbl-admin-bar li.current-menu-item > a {
    color: #38b8f0;
    background: #333333;
}
.fa {
    font-size: 18px;
    color: #999;
    margin-right: 5px;
}
.fa.fa-user {
    font-size: 50px;
    float: left;
    padding: 20px;
    border: 1px solid #212121;
    background: #575757;
}
ul.children img {
    width: 80px;
    height: auto;
    float: left;
    margin-right: 10px;
}
ul.children a {
    margin-top: 10px;
}
li.mright {
    float: right;
}
li.mblogo a {
    padding: 3px 15px 3px 15px!important;
}
ul.child1 {
    min-width: 180px;
    color: #fff;  background: #333333;
}
ul.child1 li a {
    padding: 10px;
    width: 100%;
    background: #333333;
}

الكود الثاني:

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

كود تغيير شكل الماوس

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

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

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

أكواد قائمة ميترو من Gooplz

كود Html-javascript

<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;
}

كود الآش ت م ل

الأحد، 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