سلايدر احترافي تقني لأصحاب المواقع والمدونات بتنسيقات سهله

السلام عليكم ورحمة الله وبركاته اعزائنا متابعي مدونة أقرب طريق درسنا اليوم يخص السلايدر شو الذي يخص المواقع والمدونات

السلايدر رغم احترافيته لكن تنسيقاته سهله جدا ولا تتطلب منك جهدا كبيرا سوى وضع العناوين وروابط المواضيع وروابط

الصوركما انه خفيف على المدونه وسهل التركيب ... الان كيفية تركيب هذا السلايدر

كما نوهنا سابقا تركيبه السهل وهو عبر اداة HTML/javaScript

نضع هذا الكود وانت تختار المكان المناسب له والافضل ان يكون فوق او تحت مواضيع المدونه

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEF7yiyR9-Z-kS1S6zWFGsiFBZumgAOxTWSszp0VdBHV_I4AExS_ITF8bRRjxewhiNVIsvnMI5mCuIVxVQMuy6QBCq4QKgwknUZlwVbHQRf1b_MSFnY8sGEvKEov-sztsC84lz2_ZTahq9/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjotEfBklFoNx3QxFT3tulL4-2fiHhrapmaBCgGAS9hfDOWfcwRdPKNpPP8Bu5qWljZD93GIBpglXYajl4b0pNt3hRnRmBv7upB6VFC2ARQKHx3Ehp_VAguVF8c3oGHE0E8edOirdbANOY/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://aqrabtareeq.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>
<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>

ملاحظه / ارتفاع السلايدر 620 وعرضه 350 يمكنك التحكم بالأبعاد وايضا يجب ان تكون الصور بحجم ابعاد السلايدر لكي تظهر

بصوره جميله والتعديل في الكود واضح وهو ان تضع بدل كلمة رابط الموضوع الرابط الاصلي للموضوع وايضا بدل كلمة رابط

الصوره رابط الصوره المحمله وايضا بدل كلمة عنوان الموضوع كتابة عنوان الموضوع المراد ادراجه في السلايدر

لاننسى قدمت لكم هذا السلايدر الجميل بالأستفاده من كن مدون

أقرب طريق : من العراق , اهتمامي وحبي للتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ماأحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته , اهتماماتي للتدوين جعلني أتحدى العمل ، للأكواد ، والتعديل عليها وتكويدهالتخرج بالأشكال المناسبه .

من فضلك تابعنا :
fb
tw
gl

التحالف الأسلامي بين الأمل والواقع

.๑. التحالف الاسلامي ... بين .. الأمل والواقع .?.

بسم القوي العزيز ..... الجميع يسأل عن التحالف الإسلامي ونحن نسأل معهم ...ونأمل أن يكون موجودا أو سيوجد فعلا ...ونأمل أن يكون بعيدا عن منافسات وصراعات ومنازعات محاور القوى الدولية ...ونأمل أن يكون قويّا رصينا متحمّلا مسؤولية الشرع والأخلاق والإنسانية في تخليص شعوب المنطقة خاصة في العراق و سوريا من الظلم والحيف والفقر والمرض والهجرة والنزوح والحرمان والقتل و الإرهاب ؟؟ فإذا هو كذلك فانه عمل جريء وشجاع وإننا و باسم مَن يوافقنا من أبناء شعبنا العربي والإسلامي المظلوم نعلن تأييدنا ومباركتنا ودعمنا الكامل للتحالف الإسلامي ، ونأمل أن يكون التحالف عند حسن ظن الملايين المحرومة المظلومة التي تركت الديار قفارا وسكنت البراري والجبال وعبرت البحار وغرق وفُقِدَ الآلاف وهم يشكون ظلم العباد إلى الله الواحد الأحد.) الصرخي الحسني 18/12/2015 م 6/ ربيع الأول/ 1437هـ

من نحن

أقرب طريق : من العراق , اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ماأحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته , اهتماماتي للتدوين جعلني أتحدى العمل ، للأكواد ، والتعديل عليها وتكويدهالتخرج بالأشكال المناسبه

تواصل معي

المشاركات الشائعة

اضافات بلوجر ودروس المواقع

سلايدر احترافي تقني لأصحاب المواقع والمدونات بتنسيقات سهله

0 التعليقات:

إرسال تعليق

المشاركات الشائعة

اضافات بلوجر ودروس المواقع

سلايدر احترافي تقني لأصحاب المواقع والمدونات بتنسيقات سهله

مواضيع ذات صلة

0 التعليقات:

إرسال تعليق