سلايدشو جميل و جذاب

سنتطرق في هذا الموضوع لشرح طريقة تركيب سلايدشو جميل جدا و جذاب يعتمد على لغة الـHTML و CSS وهو ما يجعله خفيف  قي التحميل و لا يسبب ثقل في تحميل الصفحة يمكنك المعاينة للسلايدشو قبل التركيب
مشاهدة السلايدشوطريقة التركيب:

كود الـHTML:

ابحث عنالكود التالي:

<div id='main-wrapper'>

و أضف قبله هذا الكود:

<!-- Accordion Featured Post Slider By city-bl.blogspot.com -->

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id="tbi_slider">

    <ul>

        <li>

            <div id="tbi_title">

                <a href="POST LINK">TITLE</a>

            </div>

            <a href="POST LINK">

                <img src="IMAGE LINK"/>

            </a>

        </li>

        <li>

            <div id="tbi_title">

                <a href="POST LINK">TITLE</a>

            </div>

            <a href="POST LINK">

                <img src="IMAGE LINK"/>

            </a>

        </li>

        <li>

            <div id="tbi_title">

                <a href="POST LINK">TITLE</a>

            </div>

            <a href="POST LINK">

                <img src="IMAGE LINK"/>

            </a>

        </li>

        <li>

            <div id="tbi_title">

                <a href="POST LINK">TITLE</a>

            </div>

            <a href="POST LINK">

                <img src="IMAGE LINK"/>

            </a>

        </li>

        <li>

            <div id="tbi_title">

                <a href="POST LINK">TITLE</a>

            </div>

            <a href="POST LINK">

                <img src="IMAGE LINK"/>

            </a>

        </li>

    </ul>

</div>

</b:if>

<!-- Accordion Featured Post Slider By TopBloggingIdeas.com -->  

 قم بتغيير الكود بما يناسبك:POST LINK: رابط الموضوعTITLE: العنوانIMAGE LINK: رابط الصورة

كود الـCSS:

الآن قم بالبحث عن الكود التالي في القالب:

]]></b:skin>

 و أضف قبله الكود التالي:

#tbi_slider {

    overflow: hidden;

    margin: 20px auto;

    padding: 0;

    width: 805px;

    height: 320px;

    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

}

#tbi_slider ul {

    margin: 0;

    padding: 0;

    width: 2000px;

}

#tbi_slider li {

    position: relative;

    display: block;

    float: left;

    width: 160px;

    border-left: 1px solid #888;

    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    -ms-transition: all 0.5s;

    -o-transition: all 0.5s;

    transition: all 0.5s;

}

#tbi_slider ul:hover li {

    width: 40px;

}

#tbi_slider ul li:hover {

    width: 640px;

}

#tbi_slider li img {

    display: block;

    width: 640px;

}

#tbi_title {

    position: absolute;

    top: 0;

    left: 0;

    padding: 20px;

    width: 640px;

    background: rgba(0, 0, 0, 0.5);

    color: #fff;

    font: bold 16px 'trebuchet MS', sans-serif;

}

#tbi_title a {

    display: block;

    color: #fff;

    text-decoration: none;

}

 و أخيرا قم بحفظ القالب و مبروك عليك السلايدشو