إنشاء سلايد شو متطورة رائعة جدا لمدونات بلوجر

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

عيش التجربة

كيفية إضافة سلايدر لمدونات بلوجر؟

بعد تسجيل دخولك إلى مدونتك توجه إلى صفحة التخطيط ثم إضغط "إضافة أداة" اختر إضافة اداة HTML/JavaScript فوق رسائل المدونة الإلكترونية الاتي:

الصق في اداة HTML/JavaScript مباشرة هذا الكود 

<style type="text/css"> /* JavaScript Image Slider By http://konozblog.blogspot.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; right: -4px; } #slider { width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTbjX9G8buGcGvSTLg4kKOERXVxRkrABi5lEWQE_j18uO1Mdwxb5wejNEnTO7mOvI721_O2lH3vcYhhNiELyVOgVmcGTywcilVfnmYX02cwQR54vcGyVwxF3NBqFZZNtUN1_1HQ595Gw/h120/mdonti-n.blogspot.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; 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: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQXke-jXpM9rRYNsY75hzCLZFyaNmsj_10C_JChndI1FrMo3uvSOBH54u8Gw3w6ieXUWCrQMaaM6VwSr3dVSlZjMGEyBH7f5i8Qdiyrcz7TZjICVx1cGq4_L8qD4u5pc_yByFYEW_jbg/h120/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://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div> <div id="slider"> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZG3pI1tK8z_jcu9H7uWHiHQnACMh_Y2tqYV6TcR74FszvE56qd7vBkKVESrlAGQA38e_BKsuQSJPM1o4APJW4AC03_jfId2BEk-e05xMd4g08nd8kpL_m_TyKi2cBxChg-2EfI7tByQ/s1600/mdonti-n.blogspot.com-1.jpg" alt="عنوان التدوين1"/></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB6gO04Gy_SvquAmD0R1snHAnndw7G53WRU4z4gCBL54CEEdc3oCk-zBm8G46t6m9IMzg32DekbiZdLaWhEQlcv4KkJ-xQK4kXuxvuCLsQyBL_j7Ll8pfGQjBQeNb4r2XqBm2PnYkvsg/s1600/mdonti-n.blogspot.com-2.jpg" alt="عنوان التدوين2"/></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNWqoRD_8e5n3cZXea2WS8AvsFBdUGeyp7bTE5zvDJs3rmB19coiHf0kLOXjpGM5weoRq_QCuymhhZkrfvZiqAc8eMiLChNDlI7jGjBPBs14FgOLdlxudlBLy3A0jJOLqt-32sBcaXug/s1600/mdonti-n.blogspot.com-3.jpg" alt="عنوان التدوين3"/></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqjL03yaWp7MfyGIn0jIXlbm72iYgUJLTJLJI2hooUwTyG_T4CwN0_uhUPeTKxLnNCl3ezGldKESAMPB4cjT9p5wgC4HAuVUu8ugBQ539YE_piycVUp9na1JhEzy4YpI6zj5YwJ1Jc9Q/s1600/mdonti-n.blogspot.com-4.jpg" alt="عنوان التدوين4"/></a> <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFx-Dzb0ZkbktujZ2shPofZgPSvnqzAcP2pkDgotNMO_7dS-8jwWJxyZqKov7xTF2zuIgQkwzGUbQr4OA6jsHYnrejFEjY1-h_9HX3urBg2tLDksL9He0UhZ3Fg2wdQciOqVlh5TFjA/s1600/mdonti-n.blogspot.com-5.jpg" alt="عنوان التدوين5"/></a> </div></div>

شرح الكود : السلايدر

• الاحمر لتعديل رابط الموضوع .
• الازرق لتعديل ابعاد الصورة
• البرتقالي لتعديل رابط الصورة .
• لتعديل عنوان الموضوع .

 ملاحظة: يجب ان تكون ابعاد الصورة >> 500 PX في العرض × 210 PX في الارتفاع.

الآن إضغط حفظ، ولأي إستفسار المرجو ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل.

بقلم العماد

عماد البدري : غالباً ما يفشل معظم الناس في الحديث عند التعريف بأنفسهم، ويعجبني في هذا المقام أن أنضم لمعظم الناس، فقد حاولت استفزاز نرجسيتي أكثر من مرة لمعرفة من أنا، أو على الأقل لأفتح المجال أمام (الأنا) لتعبّر عن ذاتها , صدقاً لم أجد الكثير لأخطه عن نفسي، إلا بعض عادات أداوم بين الفينة والأخرى على فعلها، وشخصيات أحب تبني أفكارها وآرائها، وأعتقد أن الإنسان يعرف بأقرانه، ومن خلال اهتماماته يمكنك سبر أغواره، ربما هي طريقة جميلة أن تعرفني من خلال ما أحب وما أكره، يمكنكم متابعتي والتواصل معي على صفحتي بتويتر @ ALEMAD5 أو عبر الفيسبوك AL EMAD