اكتب ما تود البحت عنه و اضغط Enter
معذرة، فالصفحة التي تبحث عنها في هذه المدونة ليست متوفرة.

السبت، 26 أغسطس 2017

سلايدر شو احترافي للمدونات الإحترافية فقط بتقنية JavaScript





السلام عليكم ورحمة الله تعالى وبركاته
Teroroid 1O1 | تيرورويد للمعلوميات
اليوم الشرح سيكون حول كيفية اضافة Slider الى مدونات بلوجر ، هذه الإضافة تمكنك من عرض صور على مدونتك وهي بتقنية الجافا سكربت JavaScript ، الإضافة جميلة جدا والكود جد سهل .
لإضافة الـ Slider الى مدونتك اتبع الخطوات التـاليـة :

  • توجه الى لوحت تحكم مدونتك Blogger Dashboard .
  • اضغط على تخطيط Layout  .
  • اضغط على اضافة ادات Add a Gadget فوق الرسائل .
  •  اختر ادات HTML/JavaScript.
  • ثم الصق الكود اسفله في الصندوق بعد التعديل عليه .


<style type="text/css"> /* JavaScript Image Slider By http://www.teroroid1o1.com/ */#mcis { display: none;}#sliderFrame { position: relative; width: 500px; margin: 0 auto;        border:5px solid #000;}#ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7;}#slider { width: 500px; height: 218px; background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999;}#slider img { position: absolute; border: none; display: none;}#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: 250px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer;}div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/s1600/helperblogger.com-bullet.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="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script><div id="sliderFrame">     <div id="ribbon"></div><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>                </div></div>


شرح التغييرات الواجبة تغييها :
  • رابط الصورة    :   قم بتغييرها برابط الصورة المراد ادراجها في Slider .
  • الرابط             :  غيره بـالـ Link .
  • وصف الصورة  :  وصف قصير للصورة .
  • لحذف كلمة What's hot احذف الكود التالــي :
 #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7; }
    ملاحظة : يمكنك تغيير المقاسات عن طريق تغيير ما يــلــي :
    • width: 500px;  يمكنك تغيير القيمة 500 لتغيير العرض .
    • height: 218px; يمكنك تغيير القيمة 218 لتغيير الطول .

    شارك الموضوع عبر :

    كاتب الموضوع :
    Teroroid 1O1 | تيرورويد للمعلوميات
    موقع Teroroid 1o1 مختص في مجال التكنلوجيا و التقنيات و كل ما يخص الهواتف الذكية و الحواسيب ، و هدفي هو تصحيح الأفكار و الدروس الخاطئة في المحتوى العربي عن طريق دروس و حلقات في قناتنا على اليوتيوب ، و يسهر على إشراف و سير الموقع الشاب اللبناني ذو 15 عام ' معتصم الأيوبي ' الذي يحيكم و يشجعكم على الزيارة الدائمة و الإشتراك في موقعنا لتتوصل بكل جديد منا .
    للإتصال بنا: moutasim9997@gmail.com