Cara Membuat Slider Otomatis keren abis di blog

adscblog

Slider merupakan salah satu feature blog yang dapat menampilkan gambar tertentu dengan bergantian,dengan Slider ini anda dapat menampilkan Gambar yang menurut anda special atau penting untuk para pengunjung baik itu sesuai dengan postingan ataupun sesuai denga label tertentu yang berada di blog anda

Slider banyak sekali Jenis nya,seperti pada pembahasan yang terdahulu saya sudah banyak membahas tentang Slider tersebut,baik itu slider biasa ataupun slider Accordion bisa anda cari di artikel blog ini,berbagai jenis slider sudah saya bagikan dan kini masih tentang slider yang mungkin anda tertarik

Namun Slider kali ini berbeda dengan slider sebelum nya yang pernah saya posting di blog ini,yang dimana slider ini perlu menempatkan link posting di area tertentu yang berada di kode tertentu,jadi tidak seperti slider sebelum nya yang dimana slider sebelum nya bisa tampil menurut postingan baru ataupun label yang ingin anda tampilkan yang dimana hanya menempatkan nama label nya saja

Jadi menurut saya Slider ini kurang efisien atau kurang praktis di banding dengan slider sebelum nya yang sudah saya posting kan di waktu sebelum nya,namun untuk menghilangkan kepenasaran anda untuk mengetahui kualitas slider ini,anda bisa saja menguji slider ini di blog anda ataupun anda bisa saja melihat gambar nya di bagian atas

Akan tetapi Slider ini pun tidak kalah keren dengan slider slider lain nya,dengan tampilan yang mungil dan juga Judul postingan yang sudah di pareasi nya,mungkin anda akan tertarik dengan slider ini dan mencoba nya di blog anda untuk sebagai pemanis blog anda,namun itu tergantung kepada anda sendiri saya tidak memaksakan anda untuk memasang slider ini di blog anda

Langkah langkah membuat Slider di blog

Namun jika anda tertarik ingin menrapkan Slider ini di blog anda bisa mengikuti langkah-langkah pembuatan nya di bawah ini yang tentu nya tidak begitu sulit,dan cara pembuatan slider ini bisa anda ikuti langkah-langkah nya sebagai berikut

• Seperti biasa masuk ke blogger
• Lalu klik template yang berada di bagian kiri blogger
• setelah itu silahkan klik Edit Html
• Apabila sudah berada di bagian peng editan Html langkah pertama yang harus anda cari yaitu </b:skin> lalu tempatkan CSS berikut sebelum kode tersebut,dan untuk memudahkan anda dalam pencarian kode silahkan tekan CTRL+F secara bersamaan setelah itu masukan kode yang anda ingin cari,lalu letakan kode berikut sebelum kode </b:skin>

#featured{
        width:400px;
        padding-right:250px;
        position:relative;
        height:250px;
        background:#fff;
        border:5px solid #ccc;
    }
    #featured ul.ui-tabs-nav{
        position:absolute;
        top:0; left:400px;
        list-style:none;
        padding:0; margin:0;
        width:250px;
    }
    #featured ul.ui-tabs-nav li{
        padding:1px 0; padding-left:13px;
        font-size:12px;
        color:#666;
    }
    #featured ul.ui-tabs-nav li span{
        font-size:11px; font-family:Verdana;
        line-height:18px;
    }
    #featured .ui-tabs-panel{
        width:400px; height:250px;
        background:#999; position:relative;
            overflow:hidden;
    }
    #featured .ui-tabs-hide{
        display:none;
    }
    #featured li.ui-tabs-nav-item a{/*On Hover Style*/
        display:block;
        height:60px;
        color:#333;  background:#fff;
        line-height:20px;
        outline:none;
    }
    #featured li.ui-tabs-nav-item a:hover{
        background:#f2f2f2;
    }
    #featured li.ui-tabs-selected{ /*Selected tab style*/
        background:url('images/selected-item.gif') top left no-repeat;
    }
    #featured ul.ui-tabs-nav li.ui-tabs-selected a{
        background:#ccc;
    }
    #featured ul.ui-tabs-nav li img{
        float:left; margin:2px 5px;
        background:#fff;
        padding:2px;
        border:1px solid #eee;
    }
    #featured .ui-tabs-panel .info{
        position:absolute;
        top:180px; left:0;
        height:70px; width: 400px;
        background: url('images/transparent-bg.png');
    }
    #featured .info h2{
        font-size:18px; font-family:Georgia, serif;
        color:#fff; padding:5px; margin:0;
        overflow:hidden;
    }
    #featured .info p{
        margin:0 5px;
        font-family:Verdana; font-size:11px;
        line-height:15px; color:#f0f0f0;
    }
    #featured .info a{
        text-decoration:none;
        color:#fff;
    }
    #featured .info a:hover{ 
      text-decoration:underline;
    }

• Setelah itu silahkan anda cari kode </head> dan letakan kode jQuery berikut sblm kode tersebut,namun jika kode tersebut sudah ada tidak perlu lagi di tambahkan

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>

• Masih berada di atas kode </head> letakan lagi kode berikut di bawah kode jQuery tersebut

<script>$(document).ready(function(){
            $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
        });</script>

•  Langkah selanjut nya silahkan anda letakan kode HTML berikut biasanya di letakan di bawah kode <div id='main-wrapper'> atau sejenis nya yang berada di bagian atas postingan blog

<div id="featured" >
        <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
        </ul>
        <!-- First Content -->
        <div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="images/image1.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
            </div>
        </div>
        <!-- Second Content -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image2.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
            <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
            </div>
        </div>
        <!-- Third Content -->
        <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image3.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >35 Amazing Logo Designs</a></h2>
            <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
            </div>
        </div>
        <!-- Fourth Content -->
        <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image4.jpg" alt="" />
            <div class="info" >
            <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
            <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
            </div>
        </div>
    </div>

• Kemudian Save template

- Untuk pada bagian H2 nya silahkan anda ganti dengan judul artikel postingan dan untuk kode # silahkan anda ganti dengan URL postingan anda

Nah itulah cara pembuatan Slider Otomatis di blog semoga artikel nya bisa di pahami dan juga bisa di praktek kan di blog sobat,semoga bermanfaat.salam blogger

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 31 Mei and have 0 komentar