كود فتح اخر المواضيع بطريقة رائعة بمجرد مرور الماوس في جميع الصفحاتلفتح عنصر اخر المواضيع او اي عنصر اخر بمجرد مرور الماوس عليه واخذت لكم عينة لاخر المواضيع
صورة للكود
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]وعند مرور الماوس على صورة المواضيع الاخير تفتح تلقائيا[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]اذا اردت وضع مثل تلك الصورة
ما عليك سوى
الذهاب
الى
لوحة الادارة
مظهر المنتدى
الالوان
ورقة التصميم cssوضع هذا الكود
- الكود:
-
#content-container div#right {
background-image:
url('http://i40.servimg.com/u/f40/16/60/81/99/top_1010.png');
background-position:
right top;
background-repeat:no-repeat;
padding-right: 30px;
margin:
0px;
width: 80px;
height: 200px;
font-size: 0px;
float:
left;
overflow: hidden;
}
#content-container div#right:hover {
width:
180px;
height: 225px;
font-size: 12px;
font-weight: bold;
float:
left;
overflow: hidden;
border-top: 2px double #000000;
border-right:
2px double #000000;
border-bottom: 2px double #000000;
border-left:
0px double #;
padding: 0px;
}
#right {
position:
absolute;
position: fixed;
left: -80px;
top: 40%;
overflow:
hidden;
}
#right:hover {
position: absolute;
position:
fixed;
left: 0px;
top: 40%;
overflow: hidden;
}
#right
div.borderwrap div.box-content {
background-image:
url('http://i40.servimg.com/u/f40/16/60/81/99/top_1010.png');
background-position:
left top;
background-repeat: no-repeat;
margin-top: 0px;
padding-top:
0px;
padding-left: 20px;
}
#right div.borderwrap
div.box-content .row1 {
background-image: none;
background-color:
transparent;
border: none;
width: 50%;
margin-top: 0px;
padding-top:
0px;
line-height: 149%;
}
#right div.borderwrap
div.box-content .row2 {
background-image: none;
background-color:
transparent;
border: none;
width: 50%;
padding-top: 0px;
margin-top:
0px;
line-height: 149%;
}
/* Google Chrome and Safari 3.1
*/
body:nth-of-type(1) #right div.borderwrap div.box-content .row1 {
background-image:
none;
background-color: transparent;
border: none;
width: 50%;
margin-top:
0px;
padding-top: 0px;
line-height: 150%;
}
/* Google
Chrome and Safari 3.1 */
body:nth-of-type(1) #right div.borderwrap
div.box-content .row2 {
background-image: none;
background-color:
transparent;
border: none;
width: 50%;
padding-top: 0px;
margin-top:
0px;
line-height: 150%;
}
ولا ننسى نغير صورة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
بالصورة
المناسبة
الخطوى
الثانية التوجه الى لوحة
الادارة
عناصر اضافية
ادارة العناصر المستقلة على المنتدىوتطبيق ما في الصورة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]