• صفحة 1 من%
  • 1
مجتمع uCoz العربي للدعم والمساعدة » اصحاب المواقع والويب ماسترز » اكواد وحلول HTML » كود سلايدر شو احترافى (استجابةً لطلب احد اصدقائنا نقدم لكم هذا الكود)
كود سلايدر شو احترافى
freeman
مشاركات: 77
السمعة: 1
مشاركة # 1 | 15:42
طلب منى احد اعضائنا هنا بان اقدم له كود سلايدر شو ليضعه بموقعه فاستجبت لطلبه وقدمت له هذا الكود والذى بدوره اقدمه لكم عسى ان ينال رضاكم واعجابكم .

<style type="text/css">
/* alb33dani.blogspot.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}

#slider {
width:700px;height:306px;/* Make it the same size as your images */
background:#fff urlundefinedhttp://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style undefinedif an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent urlundefinedhttp://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider
{
transform: translate3dundefined0,0,0);
-ms-transform:translate3dundefined0,0,0);
-moz-transform:translate3dundefined0,0,0);
-o-transform:translate3dundefined0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>
<a href="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>
<a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>
<a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>
<a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>
</div>
</div>

طريقة التركيب :
من لوحة ادراة موقعك ثم اختر القسم العلوى للموقع وضعه اخر شئ واخيرأ احفظ القالب.
ولا تنسى ان تقوم بالتعديلات المطلوبة فى الكود , فمكان عنوان الموضوع ضع العنوان الذى تريده , أما عن رابط الصورة فضع رابط الصورة التى تحبذها.
ياسين
مشاركات: 1369
السمعة: 11
مشاركة # 2 | 03:46
شكرا لك اخي الكريم على الكود فقط نتمنى ارفاق صورة توضيحية ليتسنى للمستخدمين معرفة ما نوع الكود هذا هل يناسب حجم مواقعنا او لا
بارك الله فيك مرة اخرى


اظافات ucoz | دعم مواقع ucoz | الدعم المتقدم لمواقع ucoz دروس، اضافات، قوالب, دعم وتطوير مواقع ucoz



انطلاقتك نحو انشاء المواقع تبدا من اول نقطة
freeman
مشاركات: 77
السمعة: 1
مشاركة # 3 | 10:46
مرحباً اخى ياسين وشكراً على مرورك الطيب ,
صديقى كما تعلم من حيث كونه كود سلايدر شو فان محتواه من صور سيكون متحركاً , كما انى لم اضع بالكود اية صور بل تركت مكانها فارغاً واشرت لذلك حتى يضع صاحب الموقع ما يرديه من صور !
و هذا مثال توضيحى للمعاينه كطلبك :

http://upload.konozalsamaa.com/do.php?imgf=1420183774091.jpg

ولما كان الامر هكذا حيث ان محتواه سيكون متحركا فضلاً لعدم ارفاقى صوراً بالكود سيظهر مكانه خالياً كما بالصورة السابقة التى هى اصلاً صورة ثابت وغير متحركة ولا تؤى للغاية من طريقة عمل الكود ,
ولذك يجب على كل من يرغب باضافة هذا الكود ان يقوم بالتعديلات المطلوبة من اضافة صور وروابط وغيرها ويضعها بالموقع ويذهب ليرى كيف انه يعمل بسلاسة ويسر .

نعم اخى ياسين أنه يناسب حجم مواقعنا فانا شخصياً قمت بجربته وكان رائعاً بالفعل.
مجتمع uCoz العربي للدعم والمساعدة » اصحاب المواقع والويب ماسترز » اكواد وحلول HTML » كود سلايدر شو احترافى (استجابةً لطلب احد اصدقائنا نقدم لكم هذا الكود)
  • صفحة 1 من%
  • 1
بحث: