مفهوم التقنية مفهوم التقنية
اندرويد

آخر الأخبار

اندرويد
اندرويد
جاري التحميل ...
اندرويد

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

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

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

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

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

خفيف و لا يؤثر على سرعة تحميل الموقع .
تأثيرات 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(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;
}

ثم نبحث عن الوسم
ونلصق تحته الكود التالي :





   

        <span style="color: red;">عنوان الموضوع الاول</span>
        <span style="color: red;">عنوان الموضوع الثاني</span>
        <span style="color: red;">عنوان الموضوع الثالث</span>
        <span style="color: red;">عنوان الموضوع الرابع</span>
        <span style="color: red;">عنوان الموضوع الخامس</span>
   

   

   

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

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

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


 : مولاي خالد

بقلم : مولاي خالد

مدون مغربي ناشئ يهتم بكل ما هو جديد في عالم التكنولوجيا و التقنية.

التعليقات



ندعوك للاشتراك في المدونة ليصلك الجديد دائما

إتصل بنا

موضوع :
100 من 100 | 100 تقييم من المستخدمين و 70 من أراء الزوار

مدونة مفهوم التقنية

زوار المدونة

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

مفهوم التقنية

2016