Teroroid 1O1 : بالعلم نرقى Teroroid 1O1 : بالعلم نرقى
الأخبار

آخر الأخبار

الأخبار
recent
جاري التحميل ...
recent

سلايدر شو احترافي للمدونات الإحترافية فقط بتقنية 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 مختص في مجال التكنلوجيا و التقنيات و كل ما يخص الهواتف الذكية و الحواسيب ، و هدفي هو تصحيح الأفكار و الدروس الخاطئة في المحتوى العربي عن طريق دروس و حلقات في قناتنا على اليوتيوب ، و يسهر على إشراف و سير الموقع الشاب اللبناني ذو 15 عام ' معتصم الأيوبي ' الذي يحيكم و يشجعكم على الزيارة الدائمة و الإشتراك في موقعنا لتتوصل بكل جديد منا .

    حمل تطبيقنا

    Get it on Google Play

    جميع الحقوق محفوظة

    Teroroid 1O1 : بالعلم نرقى

    2017