كود سيلادر شو لعرض الصور مع عنوان المقال

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

<style type="text/css"> /* JavaScript Image Slider By http://www.rassidonline.net/*/ #mcis { display: none; } #sliderFrame { position: relative; width: 500px; margin: 0 auto; border:5px solid #000; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; right: -4px; } #slider { width: 500px; height: 218px; background: #fff url(http://www.rassidonline.com/code/slider/005.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #FFFF00; } #slider img { position: absolute; 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: black; } div.mc-caption { font: bold 15px/21px 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: 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: url('mdonti-n.blogspot.com-bullet.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 src="http://www.rassidonline.com/code/slider/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div><div id="slider"><a href="استبدهل هذه العبارة بالرابط الأول للموضوع"><img src="استبدل هذه العبارة بالرابط الأول للصورة" alt=" pdfتحميل الكتاب المقدس العهد القديم والعهد الجديد بصيغة"/></a><a href="استبدهل هذه العبارة بالرابط الثاني للموضوع"><img src="استبدل هذه العبارة بالرابط الثاني للصورة" alt="mp3 تحميل القرآن الكريم كاملا بصوت الشيخ سعيد الغامدي"/></a> <a href="استبدهل هذه العبارة بالرابط الثالث للموضوع"><img src="استبدل هذه العبارة بالرابط الثالث للصورة" alt="أروع ما كتب نزار قباني قصيدة مايا الركبة الملساء ....."/></a><a href="استبدهل هذه العبارة بالرابط الرابع للموضوع"><img src="استبدل هذه العبارة بالرابط الرابع للصورة" alt="الفيزون والثورة التهيجية لمجتمع يتمتع ببراكين من الشهوات الجنسية"/></a> </div></div> شاهد مثال مباشر لكيفية ظهور الكود

 

يسمح لكم بنقل الموضوع بشرط ذكر المصدر : كود سيلادر شو لعرض الصور مع عنوان المقال | infowksl

 

ساهم في نشر الموضوع ولك جزيل الشكر !

أضف تعليقك عن طريق الفيسبوك :

أكواد منوعة