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


سلام عليكم اخواني
في هذا الدرس من دروس بلوجر سنتعلم طريقة اضافة سلايدشو احترافي و رائع الى مدونتك بلوجر هذه اضافة رائعة ستمنح لمدونتك شكل جداب ورائع كما ان طريقة تركيب شلايدشو سهلة لن اطول عليكم اترككم مع الشرح.
سلايدشو

طريقة اضافة سلايدشو الى مدونتك :
  •    اولا قم باخد نسخة من قالب مدونتك تحسبا لاي مشكل سيقع .
  •   اذهب الى لوحة التحكم الخاصة بمدونتك »»» تم التخطيط  »»» تم اضغط على  اضافة اداة 
  •  قم اختر اداة HTML/JavaScript من افضل ان تكون اضافة اعلى رسائل المدونة الالكترونية

 الكود :


<style type="text/css">
 /* JavaScript Image Slider By http://sofaxe.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/AVvXsEjHd6ZYpMRKNtG5oQ3lRx1ET79raMrLp7Kxg-oOs9dFAacrVUymSA4v6Nx7j7uu5-4P0gM5OjUlR5O6ILKsyn6-flsXsMzPzrdPbcHXb3uv_uIplylZP_2anuf_aU8QCHOsZEZXQANspw/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/AVvXsEjimlW9XRrxQuDiKonbvbDoXfTVegSrIokAI2tWUQ3RYAxSmKVoF1MVI6VCniITGPdplSBf_pLucJvBIlz2ppsilZQJcsImnA4eIBqUBSrykot_R7mOB5x6w74A0S5j8fHmxwSrqhiFAA/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="رابط الموضوع 1"><img src="رابط الصورة 1" alt="عنوان الموضوع 1"/></a>
<a href="رابط الموضوع 2"><img src="رابط الصورة 2" alt="عنوان الموضوع 2"/></a>
<a href="رابط الموضوع 3"><img src="رابط الصورة 3" alt="عنوان الموضوع 3"/></a>
<a href="رابط الموضوع 4"><img src="رابط الصورة 4" alt="عنوان الموضوع 4"/></a>
<a href="رابط الموضوع 5"><img src="رابط الصورة 5" alt="عنوان الموضوع 5"/></a>
 طريقة التعديل على الكود :
  •    لون وردي : بتغير ماكتب بالأزرق بروابط المواضيع الذي تريدها أن تظهر في سلايدشو .
  •  لون احمر  :  قم بتغير ماكتب بالأحمر بروابط الصور المواضيع الذي تريدها أن تظهر في سلايدشو .
  •  لون اصفر :   قم بتغير ماكتب بالصفر بعناوين  التي ستظهر في سلايدشو.
  • يجب  أن تكون أحجام الصور بهذا المقاس 500X216.

                               اذا عجابك اذا كان لديك اي استفسار حول الوضوع لاتتردد في كتابة سؤالك في  التعليق.
    By
    Similiar tagsاضافات بلوجر
    الاشتراك في: تعليقات الرسالة (Atom)