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

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

 

 طريقة جعل المواضيع بهذا الشكل على البوابة

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


طريقة جعل المواضيع بهذا الشكل على البوابة Uouuuo10
طريقة جعل المواضيع بهذا الشكل على البوابة Awsema200x50_gif

طريقة جعل المواضيع بهذا الشكل على البوابة Bronzy3_2طريقة جعل المواضيع بهذا الشكل على البوابة Goldطريقة جعل المواضيع بهذا الشكل على البوابة Idary


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

طريقة جعل المواضيع بهذا الشكل على البوابة Empty
مُساهمةموضوع: طريقة جعل المواضيع بهذا الشكل على البوابة   طريقة جعل المواضيع بهذا الشكل على البوابة Alarm-clock-icon2015-10-29, 8:10 am

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


كود سلايدر احترافي بشكل انيق وبعدة صور
صورة السلايدر



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


الكود


الكود:
<style> #mcis { display: none;} #sliderFrame {   background:#222;   margin: 2px auto 20px;   padding: 20px 20px 28px;   position: relative;   width: 620px; } #slider img {  position: absolute;  border: none; display: none; } #slider {  width: 620px;  height: 350px;  background: #fff url(https://lh6.googleusercontent.com/-TghMlE2NjrY/U0ZhaCofIVI/AAAAAAAADuE/Y3WD45mnRDU/s32/preview.gif) no-repeat 50% 50%;  position: relative;  margin: 0 auto; } #slider a.imgLink {  z-index: 2;  display: none;  position: absolute;  top: 0px;  left: 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;  left: 0px;  bottom: 0px;  z-index: 3;  overflow: hidden;  font-size: 0; } div.mc-caption-bg {background-color: black;} div.mc-caption {   background: url("https://lh5.googleusercontent.com/-lafTQRfuog0/U0EsxD_XSMI/AAAAAAAADr4/16mJJ7Ssx_0/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0);   color: #EEEEEE;   font: bold 15px/30px tahoma;   padding: 10px 0;   text-align: center;   z-index: 4; } div.mc-caption a { color: #FB0;} div.mc-caption a:hover { color: #DA0;} div.navBulletsWrapper {  top:350px; background: none;  position: relative;  z-index: 5;  cursor: pointer; } div.navBulletsWrapper div{ background:#ccc; cursor: pointer; float: right; height: 9px; margin-left: 1px; overflow: hidden; vertical-align: middle; width: 87px; } div.navBulletsWrapper div.active { background:#1980E6;} #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 src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>  <div id="sliderFrame"> <div id="slider"> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a> <a href="#"><img src="i#" alt="عنوان الموضوع"/></a><a href="#"><img src="i#" alt="عنوان الموضوع"/></a> </div></div>

شرح التعديل على السلايدر شو

الرقم  620 هو عرض السلايدر عدله في المرتين
الرقم 350 هو الإرتفاع عدله أيضاً في المرتين
هذا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] هو لون السلايدر النشط

الإستخدام

استبدل i# برابط الصورة بالمقاس المناسب الذي اخترته لعرض وارتفاع السلايدر
استبدل رمز # بالرابط الذي تريده ان يظهر عند الضغط على الصورة
اما كلمة عنوان الموضوع استبدلها بعنوان مناسب
انت لديك 7 سطور كل سطر يساوي صورة في السلايدر , يمكنك الحذف او يمكنك تكرار الكود دة



الكود:
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>


 لتحصل على صور جديدة
في حالة الزيادة او النقصان شريط التنقل السفلي لن يكون مظهره مضبوط لذلك عدل الرقم 87
ان زدت الصور قم بتقليل الرقم حتى تصغر مساحة ازرار التنقل وتستوعب الصور الجديدة دون تشوه
اما ان قللت عدد الصور زد الرقم حتى تتسع الازرار وتكون بمظهر مناسب

طريقة التركيب

يوضع الكود فى اى مكان يقبل HTML


ذكر المصدر عند النقل




السلام عليكم ورحمة الله وبركاته

اولا لنتعرف عن معنى سلايدر شو

السلايد شو أو السلايدر Slider هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح ولافت للأنظار

صورة لسلايدر


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

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

الكود متميز وذو شاشة سهل التحكم له مؤثر بالتنقل للموضوع الثاني

الان للكود تفضلوا


الكود:
<style type="text/css">   #mcis {  display: none; }  #sliderFrame {  position: relative;  width: 600px;  margin: 0 auto; border:5px solid #000; border-bottom:25px solid #000; background:#fff; border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px; margin-bottom:5px; } #slider img {  position: absolute;  border: none; display: none; }  #slider {  width: 600px;  height: 218px;  background: #fff url(https://lh4.googleusercontent.com/-k6J7L0AmqnE/UV7FswW-qsI/AAAAAAAABC0/iwjr-yjs8Tg/s39/cnmuslidlod.gif) no-repeat 50% 50%;  position: relative;  margin: 0 auto;  box-shadow: 0px 1px 5px #999999; }  #slider a.imgLink {  z-index: 2;  display: none;  position: absolute;  top: 0px;  left: 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;  left: 0px;  bottom: 0px;  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; }  div.navBulletsWrapper {  top:225px; background: none;  position: relative;  z-index: 5;  cursor: pointer; }  div.navBulletsWrapper div {  width: 11px;  height: 11px;  background:transparent url(https://lh5.googleusercontent.com/-7NRCeJsVpFQ/UV7Fs6xP8RI/AAAAAAAABCw/REtO-oLoX7Q/s22/cnmu-sliddot.png) no-repeat 0 0;  float: left;  overflow: hidden;  vertical-align: middle;  cursor: pointer;  margin-right: 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 src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>  <div id="sliderFrame">                 <div id="slider"><a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a> <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a> </div></div>


شرح الكود

بالنسبة للرقم 600 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
الرقم 218 هو إرتفاع السلايد يمكنك تعديله لكن بنفس القدر الذي ستعدله به يجب ان تعدل به هذا الرقم أيضا 225 فإن قمت بالزيادة مثلا بنسبة 20 يجب أن تزيد الآخر 20 وإن قمت بالإنقاص نفس الشئ تنقص الآخر بنفس النسبة
أما هذا الكود [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] وهو متكرر مرتين هذا لون السلايد قم بتعديله باللون الذي يعجبك أكواد الألوان
أما هذا الكود <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفه
ملاحظة حجم الصور يجب ان يكون بحجم العرض والإرتفاع الذي ستحدده
 فمثلا في الكود العرض محدد بـ 600 والإرتفاع 218
إذا الصورة ستكون بحجم 600x218

طريقة التركيب

يوضع الكود فى اى مكان يقبل HTML

عند النقل اذكر المصدر

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




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

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

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