اضافة سلايدر شو مميز وتلقائي لمدونات بلوجر

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

 اذهب الى تخطيط > اضافة ادة > HTML/JAVASCRIPT 

 اضف بها الكود التالى

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBwkOD_tD7Z4dZYhzz0_CHM-sWIDlkonqS2bLBT8dyd3jlONcP4r0blgbxu6jgn6fGwlm4FQdpvmrwFN5QdCCyoH_wZbi0aHrjBiyqlO572e1RQR-oT9aP5XP5qjNPsBUHAgrncjdz_SQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXiJVJAnGdDcgAHsBbuccwwynNyp1CCaODgvoiObdz9LGO7nlfTgCIpR9XNiUgxJAv35ykVXzGq3U8RUIZdChFvvQ17fM-6S3XfN3I4JwDcjxGbu4pzjMytBpRvNESzQQQYdJrFpvExI/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>  

التعديلات اللازمة على الكود

<a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>  

  

#000

 كود اللون ...... غيره بما يناسبك

 الارتفاع

 height: 300px

 العرض

 width:610px 

إرسال بالبريد الإلكترونيكتابة مدونة حول هذه المشاركة‏المشاركة في Twitter‏المشاركة في Facebook

التسميات: إضافات بلوجر, slider

!ترغب في المشاركة

هام : هذا الموضوع ضمن تصنيفات المدونة زووم العربية نشكرك للمتابعة . يمكنك نقل الموضوع من المدونة لكن بشرط يجب ذكر المصدر و ذكر رابط الموضوع الاصلي قبل نقل أي موضوع المرجوا زيارة صفحة الخصوصية تحت ترخيص DMCA Protection