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

سنتطرق في هذا الموضوع لشرح طريقة تركيب سلايدشو جميل جدا و جذاب يعتمد على لغة الـ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;
}

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

0 التعليقات:

Proudly Powered by Blogger.