آخر الأخبار

مرحبا بك فى موقع الموبيلات Mob4U بشكلة الجديد ... تعرف على اجدد اخبار الموبيلات و مميزات و عيوب الموبيلات ... هنساعدك فى اختيار موبايلك و هنساعدك فى حل المشاكل التى تواجه موبايلك ....

القائمة

Nokia Samsung Apple Lg Black Barrey Motorola Asus Sony Htc
top
Nokia Samsung Apple Lg Black Barrey Motorola Asus Sony Htc
Searching...


السلام عليكم اخوانى ... اليوم اقدم لكم اول اداة معانا هى عبارة عن اداة لتغيير الخلفية يمكنك و ضعها فى اى مكان فى مدونتك مهما كانت نوعها هى عبارة عن اداة ذكية من تصميم : Mohamed Azel مصمم موقع Mob 4 u
هى عبارة عن اداة ايضا بها 12 خلفية عالية الجودة استمتع بها و اضف شكلا جماليا لموقعك فلنبدأ فى الموضوع


معاينة الاداة اذهب الى لوحة تحكمك فى بلوجر ثم اضغط على التخطيط و اضف اداة html جديدة و اكتب بها هذا الكود :


<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'/>

<link href='http://cdn.jsdelivr.net/darfonts/0.1/tv-tha-tye-wide/stylesheet.css' rel='stylesheet'/>


<script type='text/javascript'>
function bgChange(bg)
{
document.body.style.background=bg;

}
</script>

<style>
body{transition:all 900ms cubic-bezier(1, 0, 0, 1)}
#backgroundnew il {
    margin: 2px;
    border-radius: 24px;
    cursor: url(http://i74.servimg.com/u/f74/17/42/09/54/jtrh110.png), auto;
    transition: all 0.5s ease;
}
#backgroundnew il:hover {
    -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
cursor:url(http://i74.servimg.com/u/f74/17/42/09/54/jtrh110.png), auto;
}
#phonenewshow{
cursor:url(http://i42.servimg.com/u/f42/17/42/09/54/cursor10.png), progress;


}
#closebuttonsow {
    background: url(https://az351254.vo.msecnd.net/3-0-161/assets/images/linking/video_close_button.png) no-repeat;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 12px;
    right: -3px;
    background-size: cover;
    display: block;
}
#closebuttonsow:hover {
    background-position: 0 -40px;
cursor:url(http://i74.servimg.com/u/f74/17/42/09/54/jtrh110.png), auto;
}
#closebuttonsow:active {
    background-position: 0 -80px;
cursor:url(http://i74.servimg.com/u/f74/17/42/09/54/jtrh110.png), auto;
}
#buttonnewshow {
    background: url('https://az351254.vo.msecnd.net/3-0-161/assets/images/buttonRoundedRightBg.png') 100% 0 no-repeat;
    width: 120px;
    height: 30px;
    border-radius: 26px;
    display: block;
    color: white !important;
    font-family: ge_thameenregular,Shadows Into Light;
    text-align: center;
    padding-top: 10px;
text-decoration:inherit;
}
#buttonnewshow:hover {
    background-position: 100% -40px;
cursor:url(http://i74.servimg.com/u/f74/17/42/09/54/jtrh110.png), auto;
}
#buttonnewshow:active {
    background-position: 100% -80px;
cursor:url(http://i74.servimg.com/u/f74/17/42/09/54/jtrh110.png), auto;
}
.buttonnewback:hover {
    background-position: 0px -32px !important;
cursor:url(http://i74.servimg.com/u/f74/17/42/09/54/jtrh110.png), auto;
}
.buttonnewback:active {
    box-shadow: inset 0 0 6px black;
cursor:url(http://i74.servimg.com/u/f74/17/42/09/54/jtrh110.png), auto;
}
</style>

<div>
  <div id="mzbuttonopen_background" style="position: fixed; width: 156px; height: 50px; background-color: rgb(43, 84, 100); left: 0px; top: 38%; border-right-width: 6px; border-right-style: solid; border-right-color: rgb(0, 175, 240); -webkit-transition: all 500ms cubic-bezier(1, 0, 0, 1); transition: all 500ms cubic-bezier(1, 0, 0, 1);">
<a onclick="mzbuttonopen_background.style.left=('-166px');phonenewshow.style.bottom=('0px');phonenewshow1.style.bottom=('-94px');phonenewshow2.style.bottom=('-94px')" id="buttonnewshow" style="
    font-size: 17px;
    top: 5px;
    position: absolute;
    right: 20px;
">
اداة تغيير الخلفية
</a>
</div>
<div id="phonenewshow2" style="background-image: url(http://4.bp.blogspot.com/-6o5J_k9njPY/U3DnqGPtl6I/AAAAAAAAL9w/HzETabYnTj8/s1600/%D8%A8%D9%8A%D8%B3.png); width: 225px; height: 318px; position: fixed; bottom: -570px; left: 28px; background-size: cover; -webkit-transform: rotateZ(-47deg); transition: all 1200ms cubic-bezier(1, 0, 0, 1); -webkit-transition: all 1200ms cubic-bezier(1, 0, 0, 1);">
<div style="
    width: 146px;
    height: 216px;
    background: rgb(0, 175, 240);
    position: absolute;
    top: 43px;
    left: 40px;
    box-shadow: inset 0 0 6px black;
">


</div>

</div>
<div id="phonenewshow1" style="background-image: url(http://4.bp.blogspot.com/-6o5J_k9njPY/U3DnqGPtl6I/AAAAAAAAL9w/HzETabYnTj8/s1600/%D8%A8%D9%8A%D8%B3.png); width: 225px; height: 318px; position: fixed; bottom: -670px; left: 189px; background-size: cover; -webkit-transform: rotateZ(47deg); transition: all 900ms cubic-bezier(1, 0, 0, 1); -webkit-transition: all 900ms cubic-bezier(1, 0, 0, 1);">
<div style="
    width: 146px;
    height: 216px;
    background: rgb(0, 175, 240);
    position: absolute;
    top: 43px;
    left: 40px;
    box-shadow: inset 0 0 6px black;
">


</div>

</div>
<div id="phonenewshow" style="background-image: url(http://4.bp.blogspot.com/-6o5J_k9njPY/U3DnqGPtl6I/AAAAAAAAL9w/HzETabYnTj8/s1600/%D8%A8%D9%8A%D8%B3.png); width: 225px; height: 318px; position: fixed; bottom: -319px; left: 100px; background-size: cover; transition: all 500ms cubic-bezier(1, 0, 0, 1); -webkit-transition: all 500ms cubic-bezier(1, 0, 0, 1);">
<a id="closebuttonsow" onclick="mzbuttonopen_background.style.left=('0px');phonenewshow.style.bottom=('-319px');phonenewshow1.style.bottom=('-670px');phonenewshow2.style.bottom=('-570px')"></a>  <div id="showscreennew" style="
    width: 146px;
    height: 216px;
    background: rgb(0, 175, 240);
    position: absolute;
    top: 43px;
    left: 40px;
    box-shadow: inset 0 0 6px black;
    overflow: hidden;
">
  <a href="http://mob-4-u.blogspot.com/" style="
    padding-bottom: 8px;
    margin-top: 41px;
    display: block;
">
    <img src="http://3.bp.blogspot.com/-FtyXLqmTkPg/U3btQf8OkwI/AAAAAAAAL-I/UQ1_xabz_wc/s1600/sdas.png" style="
    width: 132px;
    position: relative;
    top: 4px;
    right: 7px;
" />
  </a>
  <div style="
    padding-right: 12px;
    margin-top: 6px;
    margin-bottom: 13px;">
    <a onclick="backgroundnew.style.top=('-47px')" id="buttonnewshow" style="
    font-size: 17px;
">
تغيير الخلفية

</a>



  </div><div style="
    position: absolute;
    color: white;
    top: 167px;
    display: inline-block;
    width: 100%;
    font-family: ge_thameenregular,Shadows Into Light;
    font-size: 15px;
    right: 7px;
">
<p style="
    display: inline-block;
"> تصميم :</p>
  <a target="_blank" href="http://www.facebook.com/mohamed.azel13" style="
    color: white;
    display: inline-block;
"> Mohamed Azel </a>
</div>

  <div id="backgroundnew" style="width: 146px; height: 206px; background-color: rgb(43, 84, 100); margin-top: 48px; padding-top: 17px; position: absolute; top: 172px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease;">

<il onclick="bgChange('url(http://3.bp.blogspot.com/-xXMV-nL_PfU/UgZdib4gZqI/AAAAAAAAC9E/bqh5-sF0Qfo/s1600/beautiful_meadow_spring-wallpaper-1366x768.jpg) no-repeat 0px 0px fixed')" style="     width: 40px;     height: 40px;     background-image: url(http://3.bp.blogspot.com/-xXMV-nL_PfU/UgZdib4gZqI/AAAAAAAAC9E/bqh5-sF0Qfo/s1600/beautiful_meadow_spring-wallpaper-1366x768.jpg);     float: right;    background-size: cover;      margin-right: 8px;">
</il>
<il onclick="bgChange('url(http://4.bp.blogspot.com/-6UomlX0iORQ/UgZdcP4hiDI/AAAAAAAAC88/uzrVkOB6nxI/s1600/sea_cave-wallpaper-1366x768.jpg) no-repeat 0px 0px fixed')" style="     width: 40px;     height: 40px;     background-image: url(http://4.bp.blogspot.com/-6UomlX0iORQ/UgZdcP4hiDI/AAAAAAAAC88/uzrVkOB6nxI/s1600/sea_cave-wallpaper-1366x768.jpg);     float: right;          background-size: cover; ">
</il><il onclick="bgChange('url(http://forums.azyaalive.com/storeimg/azyaalive_1374792834_539.jpg) fixed no-repeat 0px 0px')" style="     width: 40px;     height: 40px;     background-image: url(http://forums.azyaalive.com/storeimg/azyaalive_1374792834_539.jpg); background-size:cover;    float: right;">
</il><il onclick="bgChange('url(http://www.apple-wd.com/wp-content/uploads/2009/09/almidad.jpg) fixed no-repeat 0px -21px')" style="     width: 40px;     height: 40px;     background-image: url(http://www.apple-wd.com/wp-content/uploads/2009/09/almidad.jpg); background-size:cover;    float: right;     margin-right: 8px;">
</il><il onclick="bgChange('url(http://www.shbab2.net/vb/photos/2/20141358240029_651.jpg) no-repeat -300px -150px fixed')" style="     width: 40px;     height: 40px;     background-image: url(http://www.shbab2.net/vb/photos/2/20141358240029_651.jpg);     float: right;   background-size: cover; ">
</il><il onclick="bgChange('url(http://www.shbab2.net/image/1373075076_883.jpg) no-repeat 0px 0px fixed')" style="     width: 40px;     height: 40px;     background-image: url(http://www.shbab2.net/image/1373075076_883.jpg);     float: right;     margin-left: 8px;background-size: cover; ">
</il><il onclick="bgChange('url(http://up.3dlat.com/uploads/13478363156.jpg) fixed no-repeat 0px 0px')" style="     width: 40px;     height: 40px;     background-image: url(http://up.3dlat.com/uploads/13478363156.jpg); background-size:cover;    float: right;     margin-right: 8px;">
</il><il onclick="bgChange('url(http://www.700bk.com/vb/uploadcenter/uploads/03-2012/PIC-338-1331637900.jpg) fixed no-repeat 0px 0px')" style="     width: 40px;     height: 40px;     background-image: url(http://www.700bk.com/vb/uploadcenter/uploads/03-2012/PIC-338-1331637900.jpg); background-size:cover;    float: right;">
</il><il onclick="bgChange('url(http://www.girls-top.net/vb/img/girls-top.net_1356529191_832.jpg) fixed no-repeat 0px 0px')" style="     width: 40px;     height: 40px;     background-image: url(http://www.girls-top.net/vb/img/girls-top.net_1356529191_832.jpg);background-size:cover;     float: right;     margin-left: 8px; ">
</il><il onclick="bgChange('url(http://forums.imageslove.net/pictures/str-ly.com_1390168822_760.jpg) fixed no-repeat 0px 0px')" style="     width: 40px;     height: 40px;     background-image: url(http://forums.imageslove.net/pictures/str-ly.com_1390168822_760.jpg); background-size:cover;    float: right;     margin-right: 8px;">
</il><il onclick="bgChange('url(http://www.sowaar.com/wp-content/uploads/2013/08/maldivian_beach-wide.jpg) fixed no-repeat -183px -576px')" style="     width: 40px;     height: 40px;     background-image: url(http://www.sowaar.com/wp-content/uploads/2013/08/maldivian_beach-wide.jpg); background-size:cover;    float: right;">
</il><il onclick="bgChange('url(http://forums.azyaalive.com/storeimg/azyaalive_1374956658_314.jpg) no-repeat -181px -33px fixed')" style="     width: 40px;     height: 40px;     background-image: url(http://forums.azyaalive.com/storeimg/azyaalive_1374956658_314.jpg);     float: right;     margin-left: 8px; background-size: cover; ">
</il>
</div>
</div>

  <div onclick="backgroundnew.style.top=('172px')" class="buttonnewback" style="
    background: url(http://www.skypeassets.com/i/scom/images/video-player/skype-skin.png) no-repeat 0px 0px;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 8px;
    left: 42%;
    cursor: url(http://i74.servimg.com/u/f74/17/42/09/54/jtrh110.png), auto;
    border-radius: 23px;
"></div>
  </div></div>

و مبروك عليك هذة الاداة الرائعة .... اترك تعليقك !!


معلومات المشاركة

0 التعليقات:

 
top