اضافة vertical Slide - مجتمع uCoz العربي للدعم والمساعدة

مشاركة # 1 | 01:05 07.10.2013

إنشاء قائمه جانبيه لعرض النص وايقونات مواقع التواصل الاجتماعي باضافة اكواد ccs فقط بدون اي من اكواد الجافا .
الاضافه الحاليه يتم تركيبها في الموقع من جهة اليسار ، وبأمكانك التعديل في الاكواد لتحويلها الى جهة اليمين مع تغيير صوره الخلفيه بخلفيه اخرى .
شرح طريقة التركيب في الموقع :
الصق كود الستايل التالي في الموقع في قسم css ثم احفظ العمل :

#myslide{
position: fixed;
top:0;
buttom:0;
left: 0px;

}

#myslide ul{
background: url(http://yemen-fact.ucoz.com/myslide-bg.png) no-repeat;
height: 600px;
padding: 0px;
width:150px;
margin-left: -135px;
cursor:pointer;

}

#myslide p{
position: relative;
font: 12px 'Tahoma', 'Arial';
color: #fff;
text-align: right;
text-decoration: none;
padding: 0px 20px 20px 2px;
margin:0px;

}

#myslide h2{
display: block;
font-famly: Tahoma;
color: #fff;
text-align: center;
text-decoration: none;
padding: 0;
margin-top:10px;

}

#myslide a {
text-decoration: none;
color: #fff;

}

#myslide ul:hover {
display: block;
margin-left: 0px;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
transition: all 1.0s ease;

}

#myslide li{
position: relative;
float:center;
padding: 0px;
margin:8px 5px 2px 5px;
display: inline-block;

}

#myslide img{
width: 30px; /* width of each image.*/
height: 30px; /* height of each image.*/
border:0;
/*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */

}

#myslide li img:hover{
-moz-transform:scale(1.3); /*scale up image 1.8x*/
-webkit-transform:scale(1.3);
-o-transform:scale(1.3);

}

بعد الحفظ قم بتحرير العمود الجانبي للموقع عن طريق " الباني " والصق الكود التالي

<div id="myslide">
<ul>
<li><a href="#" target="_blank"><img src="#"/></a></li>
<li><a href="#" target="_blank"><img src="#"/></a></li>
<li><a href="#" target="_blank"><img src="#"/></a></li>
<li><a href="#" target="_blank"><img src="#"/></a></li>

<h2>العنوان</h2>
<p>الوصف</p>
</ul>
</div>

مشاهده مباشره
http://yemen-fact.ucoz.com/publ/vertical_slide/7-1-0-16

مع تحياتي

آخر تحديثات uCoz

آخر المواضيع