سلايد شو احترافي وبتأثيرات جميلة لمدونات بلوجر

بسم الله الرحمن الرحيم

سلايد شو احترافي وبتأثيرات جميلة لمدونات بلوجر

في كثير من المدونات يتعبر السلايد شو اداة مهمة لا بد ان تتواجد في القالب , نظرا لاهميته و فوائدنه في اشهار المواضيع و جذب الزائر لقراءتها , في هذا المقال نقدم لكم سلايد شو احترافي و مميز لمدونات بلوجر .

مميزات السلايد شو :

خفيف و لا يؤثر على سرعة تحميل الموقع .
تأثيرات css احترافية ورائعة .
يعرض الصور بالجودة التي صممت بها .
سهولة تركيبه .
سهوله التعديل عليه .

لمعاينة السلايد شو " اضغط هنا "

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

لتركيب السلايد شو نتوجه الى لوحة التحكم في بلوجر > القالب > تحرير HTML > ونضغط Ctrl + f ونبحث عن الوسم ]]>

ونلصق فوقه الكود التالي مباشرة :

#sliderFrame {
    position: relative;
    width: 700px;
    margin: 0 auto 40px;
}

#slider {
    width: 700px;
    height: 306px;
    /* Make it the same size as your images */
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7cLxoou9Q2ZFOgSTXHqtwYg9FB5rhHv_eO-dS-sY3ZBI6p_skmALiAOB2H0W8TAHzwwqAjsS-cPePi_lJFcFnVKLrpvslSql0kGhV2W_9bWX2IDV0PWFFe5maL8C-kM2NXx6n2YC9ld72/s1600/loading.gif) no-repeat 50% 50%;
    position: relative;
    margin: 0 auto;
    /*make the image slider center-aligned */
    -webkit-box-shadow: 0px 1px 5px #999999;
    -moz-box-shadow: 0px 1px 5px #999999;
    box-shadow: 0px 1px 5px #999999;
}

#slider img {
    position: absolute;
    border: none;
    display: none;
}

/* the link style (if an image is wrapped in a link) */

#slider a.imgLink {
    z-index: 2;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

/* Caption styles */

div.mc-caption-bg,
div.mc-caption-bg2 {
    position: absolute;
    width: 100%;
    height: auto;
    padding: 0;
    left: 0px;
    bottom: 15px;
    z-index: 3;
    overflow: hidden;
    font-size: 0;
}

div.mc-caption-bg {
    background-color: #E53232;
}

div.mc-caption {
    font-size: 20px ;
font-family: 'sukar-black';
    color: #fff;
    z-index: 4;
    padding: 10px 0;
    text-align: center;
background-color: #E53232;
}

div.mc-caption a {
    color: #FB0;
}

div.mc-caption a:hover {
    color: #DA0;
}

ثم نبحث عن الوسم

ونلصق تحته الكود التالي :