21‏/01‏/2017

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

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


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

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

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

لمعاينة السلايد شو " اضغط هنا "
طريقة التركيب :

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


#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(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/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;
}

ثم نبحث عن الوسم <div id='main-wrapper'> ونلصق تحته الكود التالي :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='sliderFrame'>
    <div id='slider'>
        <a href='#'><img alt='عنوان الموضوع الاول' src='http://3.bp.blogspot.com/-1LayoXAEu_Y/UR-VGlIl8eI/AAAAAAAABnI/yI0SkxYfRsc/s1600/image-slider-1.jpg'/></a>
        <a href='#'><img alt='عنوان الموضوع الثاني' src='http://3.bp.blogspot.com/-eOR0aaChxAw/UR-VGiVnp1I/AAAAAAAABnM/_bIC8_EisxQ/s1600/image-slider-2.jpg'/></a>
        <a href='#'><img alt='عنوان الموضوع الثالث' src='http://4.bp.blogspot.com/-5NisCPe6tEc/UR-VGfF8_8I/AAAAAAAABnE/kUtLaL3SzWE/s1600/image-slider-3.jpg'/></a>
        <a href='#'><img alt='عنوان الموضوع الرابع' src='http://2.bp.blogspot.com/-gl-HJvghglA/UR-VK7FgIBI/AAAAAAAABnc/EfjVW6e1nz4/s1600/image-slider-4.jpg'/></a>
        <a href='#'><img alt='عنوان الموضوع الخامس' src='http://1.bp.blogspot.com/-qkKwbfW234Y/UR-VLZRV6hI/AAAAAAAABnk/pO5-b99UmGo/s1600/image-slider-5.jpg'/></a>
    </div>
    <div id='htmlcaption1' style='display: none;'>
    </div>
   

طريقة التعديل على السلايد شو 

العبارات باللون الاحمر هي عناوين المواضيع .
الروابط باللون الازرق استبدلها بروابط صور مواضيعك بحيث تكون بمقاس 700 * 306 px .
الهاش باللون الاخضر استبدله برابط الموضوع .

بعد التعديل نقوم بحفظ القالب , ومبروك عليك السلايد شو
مع تحيات  "محمد ارش " 


ليست هناك تعليقات

إرسال تعليق

تعليقاتكم تشجعنا على تقديم المزيد وهي محل إهتمامنا دائمًا

ساعدنا على الاستمرارية ساعد وحمس الأشخاص الذين يريدون أن يفعلوا شي مميز في الحياة، يمكنك الآن دعم www.madad2.com. عبر باي بال، نقدر ماتقوم به ونتمنى أن تعطى كما أعطيت.

© جميع الحقوق محفوظة مداد الجليد 2013 - حقوق الطبع والنشر | مدعومة بكل فخّر من blogger | سياسة الخصوصية