ليزلي كتب:

اكيد

الكود:


<script src="http://foryamany1.googlecode.com/svn/trunk/4egy/bdayh.js" type="text/javascript"></script>
  <script src="http://foryamany1.googlecode.com/svn/trunk/4egy/custom.js" type="text/javascript"></script>
  <script src="http://foryamany1.googlecode.com/svn/trunk/4egy/easing.js" type="text/javascript"></script>
<style>
.slideset {
  width: 960px;
  height: 167px;
  margin: auto;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}
.slideset .next {
  position: absolute;
  right: 0px;
  top: 72px;
  background: url(http://www.imzaj.com/wp-content/themes/iMzaj/iMzaj/images/next_prev.png) no-repeat -6px -5px;
  width: 18px;
  height: 21px;
  overflow: hidden;
  text-indent: -555px;
}
.slideset .prev {
  position: absolute;
  left: 0px;
  top: 72px;
  background: url(http://www.imzaj.com/wp-content/themes/iMzaj/iMzaj/images/next_prev.png) no-repeat -6px -35px;
  width: 18px;
  height: 21px;
  overflow: hidden;
  text-indent: -555px;
}
.slideset .slidesetCont {
  width: 905px;
  margin: auto;
  position: relative;
  background: #000;
}
.slidesetCont ul {
  float: right;
  width: 100%;
}
.slidesetCont ul > li { float: left; }
.slidesetCont ul > li a {
  display: block;
  width: 200px;
  height: 145px;
  padding: 6px;
  overflow: hidden;
  background: #FFF;
  border: 1px #d2d2d2 solid;
  margin: 0 7px;
}
.slidesetCont ul > li a img {
  background: #EEE;
  width: 200px !important;
  height: 145px !important;
  display: block;
}
ul, li, ol {
  list-style: none;
  outline: 0px;
}
</style>
 <script src="http://www.imzaj.com/wp-content/themes/iMzaj/iMzaj/js/ads.js" type="text/javascript"></script><div class="slideset"> <a class="next" href="#">التالي</a> <a class="prev" href="#">السابق</a>
  <div class="slidesetCont">
      <ul class="set1">
                  <li>
                        <a href="#">
              <img width="145" height="145" src="http://www.imzaj.com/wp-content/uploads/2012/12/349757-150x150.jpeg" class="attachment-200x145 wp-post-image" alt="4egy.net" />            </a>
            <!--image-->
                    </li>
                  <li>
                        <a href="#">
              <img width="145" height="145" src="http://www.imzaj.com/wp-content/uploads/2012/12/microsoft-surface-tablets-the-differences-between-rt-and-window-150x150.jpg" class="attachment-200x145 wp-post-image" alt="4egy.net" />            </a>
            <!--image-->
                    </li>
                  <li>
                        <a href="#">
              <img width="145" height="145" src="http://www.imzaj.com/wp-content/uploads/2012/12/nexus7-150x150.jpeg" class="attachment-200x145 wp-post-image" alt="4egy.net" />            </a>
            <!--image-->
                    </li>
                  <li>
                        <a href="#">
              <img width="145" height="145" src="http://www.imzaj.com/wp-content/uploads/2012/12/C710-2605-Chromebook-150x150.jpg" class="attachment-200x145 wp-post-image" alt="4egy.net" />            </a>
            <!--image-->
                    </li>
                  <li>
                        <a href="#">
              <img width="145" height="145" src="http://www.imzaj.com/wp-content/uploads/2012/12/Screen-Shot-2012-12-12-at-4.53.39-PM-150x150.png" class="attachment-200x145 wp-post-image" alt="4egy.net" />            </a>
            <!--image-->
                    </li>
                        </ul>
  </div>
</div>
<!--//slideset-->
<! --- code prog by www.4egy.net ---> 

الكود:

<style type="text/css">

#scrollToTop:link,#scrollToTop:visited { color: transparent; background-color: transparent; display: none; position: fixed; top: 15px; right: 15px;}


.icon {display : block; font-size: 8pt; font-family: Calibri; line-height: 15px; border-bottom : 1px solid #f4f4f3; text-indent : 5px; vertical-align : middle; background:
url('http://4.bp.blogspot.com/-rws3a70R4A8/UZfr40BpNvI/AAAAAAAAKfY/O9Qt_1n2CVQ/s320/icon1.gif') no-repeat left; padding-left :5px;
padding-bottom : 2px;}

.icon:hover {display : block; font-size: 8pt; font-family: Calibri; line-height: 15px; border-bottom : 1px dashed #E0DCD6; text-indent : 5px; vertical-align : middle; background : url('http://4.bp.blogspot.com/-G874FRJby38/UZfr406k3UI/AAAAAAAAKfQ/JH9dQzvuZ6I/s320/icon2.gif') no-repeat left; padding-left : 10px; padding-bottom : 2px;}

#spinningbox{
-webkit-border-radius: 30px;
-moz-border-radius: 20px;
border-radius: 20px;


moz-box-shadow: 0 0 1px #E799A3;
-webkit-box-shadow: 0 0 8px #C48793;
position:fixed !important;
left:200px;
top: -15px;
padding-bottom:14px;
padding-top:21px;
text-align:left;
height:7px;
width:79px;
overflow:hidden;  
border:1px double #D8BFD8 ;
-webkit-transition: opacity 0.6s linear;
-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

-o-transition: all 0.6s ease-in-out;

background: #fff;

z-index:999;

color:#7f5a58;

background : url('http://i111.photobucket.com/albums/n159/docedani/back9.png');
}
#spinningbox:hover{

left:200px;

top:10px;

border:2px dashed #D8BFD8 ;

padding:5px;

height:170px;

width:125px;

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

p {
margin:0px; margin-top:0px;
}
a.dp{
color: #8B8682;
background:#FFF;
text-decoration: none;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
font-size:12px;
}

a.dp:hover{

text-decoration: none;
font-style: none;
font-size:12px;
color: #DB7093;
background:#FFFfcc;
}


</style>
<div id="spinningbox">
 
<center>
 <span style="color: black; font-family:Lucida Sans; font-size: 16;" font="font"><span style="background-color: #EED5D2;"> القائمـﮧ</span></span><img src="http://4.bp.blogspot.com/-DFVqsLDQWM8/UZft-uR8sCI/AAAAAAAAKfw/GJinqipiTPo/s320/icon3.gif" />
<p>
 
</p>
 
<p>
 <strong> </strong>
</p>
 
<div class="icon">
 <strong> <a title="وصف للعنوان" class="dp" الرابط"="">العنوان</a> </strong>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
</center><strong></strong>
</div>

ليزلي كتب:هل يوضع في التشكيلات العامة

صياد اليمام كتب:تفضلي الكود

الكود:

<style type="text/css">

#scrollToTop:link,#scrollToTop:visited { color: transparent; background-color: transparent; display: none; position: fixed; top: 15px; right: 15px;}


.icon {display : block; font-size: 8pt; font-family: Calibri; line-height: 15px; border-bottom : 1px solid #f4f4f3; text-indent : 5px; vertical-align : middle; background:
url('http://4.bp.blogspot.com/-rws3a70R4A8/UZfr40BpNvI/AAAAAAAAKfY/O9Qt_1n2CVQ/s320/icon1.gif') no-repeat left; padding-left :5px;
padding-bottom : 2px;}

.icon:hover {display : block; font-size: 8pt; font-family: Calibri; line-height: 15px; border-bottom : 1px dashed #E0DCD6; text-indent : 5px; vertical-align : middle; background : url('http://4.bp.blogspot.com/-G874FRJby38/UZfr406k3UI/AAAAAAAAKfQ/JH9dQzvuZ6I/s320/icon2.gif') no-repeat left; padding-left : 10px; padding-bottom : 2px;}

#spinningbox{
-webkit-border-radius: 30px;
-moz-border-radius: 20px;
border-radius: 20px;


moz-box-shadow: 0 0 1px #E799A3;
-webkit-box-shadow: 0 0 8px #C48793;
position:fixed !important;
left:200px;
top: -15px;
padding-bottom:14px;
padding-top:21px;
text-align:left;
height:7px;
width:79px;
overflow:hidden;  
border:1px double #D8BFD8 ;
-webkit-transition: opacity 0.6s linear;
-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

-o-transition: all 0.6s ease-in-out;

background: #fff;

z-index:999;

color:#7f5a58;

background : url('http://i111.photobucket.com/albums/n159/docedani/back9.png');
}
#spinningbox:hover{

left:200px;

top:10px;

border:2px dashed #D8BFD8 ;

padding:5px;

height:170px;

width:125px;

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

p {
margin:0px; margin-top:0px;
}
a.dp{
color: #8B8682;
background:#FFF;
text-decoration: none;
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
font-size:12px;
}

a.dp:hover{

text-decoration: none;
font-style: none;
font-size:12px;
color: #DB7093;
background:#FFFfcc;
}


</style>
<div id="spinningbox">
 
<center>
 <span style="color: black; font-family:Lucida Sans; font-size: 16;" font="font"><span style="background-color: #EED5D2;"> القائمـﮧ</span></span><img src="http://4.bp.blogspot.com/-DFVqsLDQWM8/UZft-uR8sCI/AAAAAAAAKfw/GJinqipiTPo/s320/icon3.gif" />
<p>
 
</p>
 
<p>
 <strong> </strong>
</p>
 
<div class="icon">
 <strong> <a title="وصف للعنوان" class="dp" الرابط"="">العنوان</a> </strong>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
<div class="icon" style="">
 <a title="وصف للعنوان" class="dp" href="الرابط">العنوان</a>
</div><strong> </strong>
</center><strong></strong>
</div>

عدلي علي الاتي :

العنوان >> إسم القسم
الرابط >> رابط القسم
وصف العنوان >>وصف لعنوان القسم

الكود:

<style>
#menu
{z-index:999;
background-color:#fff;
border:2px dashed #FFC0CB;
width:50px;
height:50px;
border-radius:50px 0px 0px 0px;
-moz-border-radius:50px 0px 0px 0px;
position:fixed;
overflow:hidden;
bottom:0px;
right:0px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}
#icon
{margin-top:20px;
margin-bottom:20px;
margin-right:-12px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}
#menu:hover
{width:220px;
height:175px;
-moz-border-radius:0px;
border-radius:15px;
padding:10px;}
#menu:hover #icon
{margin-top:10px;
margin-right:0px;
margin-bottom:4px;}


</style>
<div id="menu">
   
   <center>
      
      <div id="icon">
          <img src="http://1.bp.blogspot.com/-829eUYeVZ_w/UcCutrdUnYI/AAAAAAAANOg/dklwDZSijGE/s1600/icon1+(14).gif" />
      </div>
       أكتبي أي شئ هنا
   </center>
   
   <p>
      
   </p>
   
   <div align="right">
       <span style="text-decoration: underline;">اسم الادمن هنا</span>
   </div>
</div>