منتديات كلداني

ثقافي ,سياسي , أجتماعي, ترفيهي
 
الرئيسيةالرئيسيةالكتابة بالعربيةالكتابة بالكلدانيةبحـثمركز  لتحميل الصورالمواقع الصديقةإتصلوا بناالتسجيلدخول
 رَدُّنا على اولاد الزانية,,لقراءة الموضوع اكبس على الصورة  رأي الموقع ,,لقراءة الموضوع اكبس على الصورة
رَدُّنا على اولاد الزانية,,لقراءة الموضوع اكبس على الصورةقصة النسخة المزورة لكتاب الصلاة الطقسية للكنيسة الكلدانية ( الحوذرا ) والتي روّج لها المدعو المتأشور مسعود هرمز النوفليالى الكلدان الشرفاء ,,لقراءة الموضوع اكبس على الصورةملف تزوير كتاب - ألقوش عبر التاريخ  ,,لقراءة الموضوع اكبس على الصورةمن مغالطات الصعلوگ اپرم الغير شپيرا,,لقراءة الموضوع اكبس على الصورةدار المشرق الغير ثقافية تبث التعصب القومي الاشوري,,لقراءة الموضوع اكبس على الصورة

 

 كود سلايد شو احترافى

اذهب الى الأسفل 
كاتب الموضوعرسالة
maria
عضو متألق
عضو متألق
maria


كود سلايد شو احترافى Uouuuo10
كود سلايد شو احترافى Awsema200x50_gif

كود سلايد شو احترافى Bronzy3_2كود سلايد شو احترافى Goldكود سلايد شو احترافى Idary


البلد : العراق
مزاجي : اكل شوكولاتة
الجنس : انثى
عدد المساهمات : 1293
تاريخ التسجيل : 07/05/2009

كود سلايد شو احترافى Empty
مُساهمةموضوع: كود سلايد شو احترافى   كود سلايد شو احترافى Alarm-clock-icon2015-10-29, 7:39 am

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] من طرف saviola! في الأحد 6 نوفمبر 2011 - 18:09
بسم الله الرحمن الرحيم
السلام عليكم



كود حصري جدا مبرمج بتقنيات
Html - Css -Javascript

نبذه عن الكود: عبارة عن سلايد شو احترافى جذاب ولافت للأنظار يعمل كعارض صور بطريقة 3D فى صفحات Html
يمكن استعماله كـ معرض او مكتبة صور
او كـ مجلة الكترونية بتقنية 3d لاول مره على المنتديات والمواقع

طريقة وضع الكود
لوحة الادارة - عناصر اضافية - ادارة صفحات Html - انشاء صفحة Html جديدة

الشرح بالصور

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]







واتبع الخطوات الآتية
قم بتعطيل Html ليصبح الصندوق باللون الاخضر كما بالصورة التالية
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ضع خيارات الصفحه كـ الآتى
هل تود استعمال أعلى و أسفل صفحة منتداك؟ لا
استعمال
هذه الصفحة كصفحة رئيسية؟ اختر لا او نعم اذا اردت ان تجعلها رئيسة
المنتدى وفى هذه الحالة يتوجب عليك وضع رابط يوجه نحو ahlamontada.com

انسخ الكود التالى وضعه بالصفحه مع مراعاة تغيير مايتطلب تغييره فى الكود
عنوان الصفحة:العنوان الرئيسى الذى سيظهر اعلى المتصفح وفى محركات البحث
كلمات دلالية للموضوع:ضع كلمات دلالية للموضوع او الصوره تساعدك فى الأرشفة
عنوان الموضوع باختصار:عنوان الموضوع او اسم للصورة
رابط الموضوع:رابط الموضوع او الصفحة المرادة
وصف موجز للموضوع:ضع وصف بسيط للموضوع او الصورة
مع مراعاة تغيير الصورة التالية بالصور المرادة للمحتوى الذى ستقدمه فى صفحتك
الكود: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg

وهكذا الحال مع بقية الكود
بعد اتمام العملية السابقة بنجاح:اضغط قدم

الكود للنسخ


اقتباس :

الكود:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>


<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title><meta http-equiv="content-script-type"
 content="text/javascript" /><meta http-equiv="content-style-type"
content="text/css" /><meta http-equiv="imagetoolbar" content="no"
  />

<meta name="google-site-verification" content="P7BJggJ24VHn6Tj47PJcOEZAY-D28VmZHKMCQX-93y0" />
 <HTML dir=rtl>

<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #111;
width: 100%;
height: 100%;
}
#center {
position: absolute;
left: 50%;
top:  50%;
}
#slider {
position: absolute;
width: 820px;
height: 333px;
left: -430px;
top: -186px;
overflow: hidden;
background: #000;
border: 20px solid #000;
}
#slider .slide {
position: absolute;
top: 0px;
height: 333px;
width: 500px;
background: #000;
overflow: hidden;
border-left: #000 solid 1px;
cursor: default;
}
#slider .title   {
color: #F80;
font-weight: bold;
font-size: 1.2em;
margin-right: 1.5em;
text-decoration: none;
}
#slider .backgroundText {
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background: #000;
filter: alpha(opacity=40);
opacity: 0.4;
}
#slider .text {
position: absolute;
top: 1%;
top: 100%;
color: #FFF;
font-family: verdana, arial, Helvetica, sans-serif;
font-size: 0.9em;
text-align: justify;
width: 470px;
left: 10px;
}
#slider .diapo {
position: absolute;
filter: alpha(opacity=100);
opacity: 1;
visibility: hidden;
}
a:link {
color: Lime;
text-decoration:none;
}
a:visited {
color: Lime;
text-decoration:none;
}
a:hover {
color:DarkOrange;
text-decoration:none;
}
   
a {text-decoration: none;}
a:hover {
text-shadow: 2px 2px 2px #73729c;
text-decoration: none !important;
}

a:hover
{
background: url(http://i65.servimg.com/u/f65/16/35/21/30/undo10.gif) no-repeat right;
padding:10px 30px 10px 10px;
}



</style>

<script type="text/javascript">
/* ==== slider nameSpace ==== */
var slider = function() {
/* ==== private methods ==== */
function getElementsByClass(object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++) {
if (o[i].className == className) ret.push(o[i]);
}
if (ret.length == 1) ret = ret[0];
return ret;
}
function setOpacity (obj,o) {
if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
else obj.style.opacity = o / 100;
}
/* ==== Slider Constructor ==== */
function Slider(oCont, speed, iW, iH, oP) {
this.slides = [];
this.over = false;
this.S  = this.S0 = speed;
this.iW  = iW;
this.iH = iH;
this.oP   = oP;
this.oc     = document.getElementById(oCont);
this.frm    = getElementsByClass(this.oc, 'div', 'slide');
this.NF     = this.frm.length;
this.resize();
for (var i = 0; i < this.NF; i++) {
this.slides[i] = new Slide(this, i);
}
this.oc.parent = this;
this.view      = this.slides[0];
this.Z         = this.mx;
/* ==== on mouse out event ==== */
this.oc.onmouseout = function () {
this.parent.mouseout();
return false;
        }
    }
    Slider.prototype = {
        /* ==== animation loop ==== */
        run : function () {
            this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
            this.view.calc();
            var i = this.NF;
            while (i--) this.slides[i].move();
        },
        /* ==== resize  ==== */
        resize : function () {
            this.wh = this.oc.clientWidth;
            this.ht = this.oc.clientHeight;
            this.wr = this.wh * this.iW;
            this.r  = this.ht / this.wr;
            this.mx = this.wh / this.NF;
            this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
        },
        /* ==== rest  ==== */
        mouseout : function () {
            this.over      = false;
            setOpacity(this.view.img, this.oP);
        }
    }
    /* ==== Slide Constructor ==== */
    Slide = function (parent, N) {
        this.parent = parent;
        this.N      = N;
        this.x0     = this.x1 = N * parent.mx;
        this.v      = 0;
        this.loaded = false;
        this.cpt    = 0;
        this.start  = new Date();
        this.obj    = parent.frm[N];
        this.txt    = getElementsByClass(this.obj, 'div', 'text');
        this.img    = getElementsByClass(this.obj, 'img', 'diapo');
        this.bkg    = document.createElement('div');
        this.bkg.className = 'backgroundText';
        this.obj.insertBefore(this.bkg, this.txt);
        if (N == 0) this.obj.style.borderLeft = 'none';
        this.obj.style.left = Math.floor(this.x0) + 'px';
        setOpacity(this.img, parent.oP);
        /* ==== mouse events ==== */
        this.obj.parent = this;
        this.obj.onmouseover = function() {
            this.parent.over();
            return false;
        }
    }
    Slide.prototype = {
        /* ==== target positions ==== */
        calc : function() {
            var that = this.parent;
            // left slides
            for (var i = 0; i <= this.N; i++) {
                that.slides[i].x1 = i * that.Z;
            }
            // right slides
            for (var i = this.N + 1; i < that.NF; i++) {
                that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
            }
        },
        /* ==== HTML animation : move slides ==== */
        move : function() {
            var that = this.parent;
            var s = (this.x1 - this.x0) / that.S;
            /* ==== lateral slide ==== */
            if (this.N && Math.abs(s) > .5) {
                this.obj.style.left = Math.floor(this.x0 += s) + 'px';
            }
            /* ==== vertical text ==== */
            var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
            if (Math.abs(v - this.v) > .5) {
                this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
this.v = v;
this.cpt++;
} else {
if (!this.pro) {
/* ==== adjust speed ==== */
this.pro = true;
var tps = new Date() - this.start;
if(this.cpt > 1) {
that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);
}
}
}
if (!this.loaded) {
if (this.img.complete) {
this.img.style.visibility = 'visible';
this.loaded = true;
}
}
},
/* ==== light ==== */
over : function () {
this.parent.resize();
this.parent.over = true;
setOpacity(this.parent.view.img, this.parent.oP);
this.parent.view = this;
this.start = new Date();
this.cpt = 0;
this.pro = false;
this.calc();
setOpacity(this.img, 100);
}
}
/* ==== public method - script initialization ==== */
    return {
init : function() {
// create instances of sliders here
// parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity
this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);
setInterval("slider.s1.run();", 16);
}
}
}();
</script>
</head>
<body>
<br>
<div
 style="text-align: center;"><font style="font-weight: bold;"
size="5"><span style="font-family: Tahoma;"><a href="رابط
منتداك">الرئيسية</a>   <a href="رابط البوابة او رابط
اخر">البوابة</a></span></font><br></div>

<div id="center">
<div id="slider">

<div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt=" كلمات
دلالية للموضوع " width="500" height="333"><div class="text">

<span class="title">عنوان الموضوع باختصار</span>
 وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div><div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="333"><div class="text">
  <span class="title">عنوان الموضوع
</span>
 وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>

</div><div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt=" كلمات
دلالية للموضوع" width="500" height="354"><div class="text">
  <span class="title">عنوان الموضوع</span>
 وصف موجز للموضوع .  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
 وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>

</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
 وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
 وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>

وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">

<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>

وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">

<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.

</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>

وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>

وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="334"><div class="text">
  <span class="title">عنوان الموضوع</span>
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>


</div> <div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="335"><div class="text">
وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">شقرائة المزيد</a><br><br>.
</div>
</div>


<div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع " width="500" height="333"><div class="text">
   <span class="title">عنوان الموضوع</span>
 وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>.
</div>
</div>

<div class="slide">
<img
 class="diapo"
src="http://i48.servimg.com/u/f48/15/28/56/97/tt_bmp11.jpg" alt="كلمات
دلالية للموضوع" width="500" height="333"><div class="text">
   <span class="title">عنوان الموضوع</span>
 وصف موجز للموضوع.  <a href="رابط الموضوع" target="_blank">قرائة المزيد</a><br><br>
</div>

</div>
</div>

<script type="text/javascript">
/* ==== start script ==== */
slider.init();
</script>
 </body>
 </html>





تحياتي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



عدل سابقا من قبل maria في 2015-10-29, 7:59 am عدل 1 مرات
الرجوع الى أعلى الصفحة اذهب الى الأسفل
maria
عضو متألق
عضو متألق
maria


كود سلايد شو احترافى Uouuuo10
كود سلايد شو احترافى Awsema200x50_gif

كود سلايد شو احترافى Bronzy3_2كود سلايد شو احترافى Goldكود سلايد شو احترافى Idary


البلد : العراق
مزاجي : اكل شوكولاتة
الجنس : انثى
عدد المساهمات : 1293
تاريخ التسجيل : 07/05/2009

كود سلايد شو احترافى Empty
مُساهمةموضوع: رد: كود سلايد شو احترافى   كود سلايد شو احترافى Alarm-clock-icon2015-10-29, 7:41 am

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] من طرف KhALiD-Net في الأحد 8 يوليو 2012 - 8:39
السلام عليكم

اخواني الاعزاء نقدم لكم كود معرض الصور الاحترافي

مثال على الكود:::


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الكود::
الكود: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
اقتباس :

الكود:
<script type="text/javascript"    src="http://slideshow.triptracker.net/slide.js"></script><script type="text/javascript"><!--  var viewer = new PhotoViewer();  viewer.add('صورة هنا');  viewer.add('صورة هنا');  viewer.add('صورة هنا');  viewer.add('صورة هنا');  viewer.add('صورة هنا');//--></script><a href="javascript:void(viewer.show(0))">اضغط هنا لعرض معرض الصور</a>

  



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
طريقه وضع الاكود:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

مع التحية..
KhALiD-Net
احلى خبيـــــر اكواد
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الرجوع الى أعلى الصفحة اذهب الى الأسفل
maria
عضو متألق
عضو متألق
maria


كود سلايد شو احترافى Uouuuo10
كود سلايد شو احترافى Awsema200x50_gif

كود سلايد شو احترافى Bronzy3_2كود سلايد شو احترافى Goldكود سلايد شو احترافى Idary


البلد : العراق
مزاجي : اكل شوكولاتة
الجنس : انثى
عدد المساهمات : 1293
تاريخ التسجيل : 07/05/2009

كود سلايد شو احترافى Empty
مُساهمةموضوع: رد: كود سلايد شو احترافى   كود سلايد شو احترافى Alarm-clock-icon2015-10-29, 7:48 am

كود سلايد شو

مُساهمة من طرف Arabian Star في السبت 8 أغسطس 2015 - 8:13
السلام عليكم
اليوم اعطيكم كود جميل لسلايد شو
وان شاء الله يعجبكمم


الكود :

الكود:
---------تضليل المحتوى

اقتباس :

            <style type="text/css">
       
           #mcis {
           display: none;
           }
       
           #sliderFrame {
           position: relative;
           width: 468px;
           margin: 0 auto;
                   border:3px solid #E1E0E2;
           }
       
           #ribbon {
           width: 111px;
           height: 111px;
           position: absolute;
           top: -4px;
           right: -4px;
           }
       
           #slider {
           width: 468px;
           height: 260px;
           background: #fff url(https://lh3.googleusercontent.com/-jr3u7sHVNzc/T_9iyf5egvI/AAAAAAAAC9c/jwanynfbt7Y/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
           position: relative;
           margin: 0 auto;
           box-shadow: 0px 1px 5px 010007;
           }
       
           #slider img {
           position: absolut;
           border: none;
           display: none;
           }
       
           #slider a.imgLink {
           z-index: 2;
           display: none;
           position: absolute;
           top: 0px;
           right: 0px;
           border: 0;
           padding: 0;
           margin: 0;
           width: 100%;
           height: 100%;
           }
       
           div.mc-caption-bg, div.mc-caption-bg2 {
           position: absolute;
           width: 100%;
           height: auto;
           padding: 0;
           right: 0px;
           bottom: 0px;
           z-index: 3;
           overflow: hidden;
           font-size: 0;
           }
       
       
           div.mc-caption-bg {
           background-color: #0066CC;
           }
       
           div.mc-caption {
           font: bold 25px/21px traditional arabic ;
           color:  #0000;
           z-index: 4;
           padding: 10px 0;
           text-align: center;
           }
       
           div.mc-caption a {
           color: #FB0;
           }
       
           div.mc-caption a:hover {
           color: #DA0;
           }
       
           div.navBulletsWrapper {
           top: 250px;
           right: 190px;
           width: 150px;
           background: none;
           padding-right: 20px;
           position: relative;
           z-index: 5;
           cursor: pointer;
           }
       
           div.navBulletsWrapper div {
           width: 11px;
           height: 11px;
           background: transparent url(https://i.servimg.com/u/f18/15/90/68/93/mdonti10.png) no-repeat 0 0;
           float: right;
           overflow: hidden;
           vertical-align: middle;
           cursor: pointer;
           margin-left: 11px;
           _position: relative;
           }
       
           div.navBulletsWrapper div.active {
           background-position: 0 -11px;
           }
       
           #slider {
           transform: translate3d(0,0,0);
           -ms-transform: translate3d(0,0,0);
           -moz-transform: translate3d(0,0,0);
           -o-transform: translate3d(0,0,0);
           -webkit-transform: translate3d(0,0,0);
           }
           </style>      <script type="text/javascript" src="http://my-mdonti.googlecode.com/files/js-image-slider.js"></script>      
       <div id="sliderFrame">
                 
          <div id="ribbon">
          </div>
                         
          <div id="slider">
                   <img alt="ttttt" src="pppp" />      <img alt="ttttt" src="ppppp" />      <img alt="ttttt" src="ppppp" />      <img alt="ttttt" src="ppppp" />    <img alt=" ttttt" src="ppppp" />                    
          </div>
       </div>



قبل حفظ الأداة نقوم باضافة الصور التي نود ظهورها على السلايد شو كما يلي :


   نضع مكان الرمز ppppp رابط الصورة (الرابط الإلكتروني لصورة الموضوع)

   نضع مكان الرمز ttttt عنوان الموضوع (أو نختار عنوان أخر للموضوع )




1- اذا أردنا زيادة عدد المواضيع المعروضة نقوم بزيادة عدد الأكواد التالية

الكود:
---------تضليل المحتوى

         

اقتباس :
 <img src="pppp" alt="ttttt"/></a>




اي نقوم بنسخها ولصقها الواحدة تلو الأخرى حسب عدد المواضيع التي نريد عرضها على السلايد شو (Slideshow ).

2- التحكم في ارتفاع وعرض الأداة (الإطار الخارجي) نقوم بالبحث عن الكود التالي :

لتغيير عرض الأداة width
لتغيير ارتفاع الأداة height



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] {
width: 468px;
height: 260px;

3- تغيير لون السلايدشو الصغيرة (التي يتم بها عرض عنوان الموضوع ) نبحث عن الكود التالي

 background-color: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط];
ونقوم بتغيير الرمز 0066cc (للحصول على الألوان بصيغة html انتقل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]للصفحة التالية )

4- تغيير حجم ولون خط عنوان الموضوع (عناوين  المواضيع المعروضة على السلايد شو) ابحث عن الكود التالي :

الكود:
---------تضليل المحتوى

     

اقتباس :
  font: bold 25px/21px traditional arabic ;




الرمز traditional arabic لإستبدال نوع الخط
الرمز   25px حجم الخط .
هذه هي اهم التعديلات التي نحتاج اليها لتنسيق الأداة بما يتناسب مع الشكل والتصميم
ملاحظة : الكود ليس من تصميمى ولكن تم التعديل عليه بما يناسب احلى منتدى

طريقة وضع الكود : يوضع الكودفى اى مكان يقبل HTML
انتهى
Arabian Star


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
كود سلايد شو احترافى
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات كلداني :: بَرَامِجُ وَتِكْنُولُوجِيَا الكمبيوتروالصوتيات وَالصُّورَ والساتلايت والاقمار الصِّنَاعِيَّةَوالسيارات :: قسم كودات HTML,CSS,Javascript-
انتقل الى: