كود ستارة حمراء لاحلى منتدى

من طرف ruah السبت 9 مارس 2013 - 22:37

السلام عليكم

هذا كود بسيط من الموقع
مدخل احترافى على شكل ستارة
صورة الكود بعد وضعة
https://2img.net/r/ihimg/photo/my-images/268/frontc101.jpg/

https://2img.net/r/ihimg/photo/my-images/441/rope1010.png/

الكود :

الكود:: [code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /> <title> منتدى احلى منتدى </title> </head> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="http://microp44.byethost7.com/jquery.easing.1.3.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $curtainopen = false; $(".rope").click(function(){ $(this).blur(); if ($curtainopen == false){ $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'60px'}, 2000 ); $(".rightcurtain").stop().animate({width:'60px'},2000 ); $curtainopen = true; }else{ $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'50%'}, 2000 ); $(".rightcurtain").stop().animate({width:'51%'}, 2000 ); $curtainopen = false; } return false; }); }); </script> <style type="text/css"> *{ margin:0; padding:0; } body { text-align: center; background: #4f3722 url('http://img641.imageshack.us/img641/6141/qeo05009.png') repeat-x; } img{ border: none; } p{ margin-bottom:10px; color:#FFFFFF; } .leftcurtain{ width: 50%; height: 495px; top: 0px; left: 0px; position: absolute; z-index: 2; } .rightcurtain{ width: 51%; height: 495px; right: 0px; top: 0px; position: absolute; z-index: 3; } .rightcurtain img, .leftcurtain img{ width: 100%; height: 100%; } .logo{ margin: 0px auto; margin-top: 80px; } .rope{ position: absolute; top: -40px; left: 70%; z-index: 4; } </style> </head> <body> <div class="leftcurtain"><img src="http://i66.servimg.com/u/f66/14/46/49/60/frontc10.jpg"/></div> <div class="rightcurtain"><img src="http://i66.servimg.com/u/f66/14/46/49/60/frontc10.jpg"/></div> <a class="rope" href="#"> <img src="http://i63.servimg.com/u/f63/14/53/03/39/rope1010.png" width="118" height="320"/> </a> <div class="logo"> <p> مرحباً بكم فى احلى منتدى </p> <p>تفضل بزيارة المنتدى</p> <p> <a target="_blank" href="http://help.ahlamontada.com"><span style="color: #ffffff"> تفضل بدخول احلى منتدى </span></a> </p> </div> </body> </html> <div style="text-align: center;"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div style="text-align: left;"><font size="1"><a style="color: rgb(102, 102, 51);" href="http://www.ahlamontada.com" target="_blank">ahlamontada.com</a></font><br></div><p></p>[/code]</div>

التعديل على الكود
غير اسم منتدى شمس المستقبل الى اسم منتداك
وغير رابط المنتدى الى رابط منتداك
يوضع الكو د
في
لوحة الادارة
عناصر اضافية
ادارة صفحات html
ثم ننشا صفحة جديدة
ولو عاوزين انها تبقا الرئيسية نضع علامة صح على جعل الصفحة رئيسية للمنتدى

المصدر
منتدى شمس المستقبل