Cara Membuat Slider Di Bawah Header

Setelah kesana kemari akhirnya ketemu juga slide post yang kayak gini, ..

 

Metode yang aku share ini tidak harus mengedit CSS dalam tamplate kalian. kalian hanya menaruh kode javascript pada widget kalian dengan syarat kalau sobat sudah mempunyai kolom widget dibawah header namun kalau sobat belum mempunyai kolom dibawah header silahkan buka Edit HTML untuk menambahkan kolom dibawah Header. untuk caranya silahkan ikuti tipsnya dibawah ini.
1.  silahkan login ke blogger.
2. masukkan kode dibawah ini tepat di atas ]]</b:skin> .untuk mempermudah silakan drag kode ]]</b:skin> lalu tekan Control + F pada keybord kalian.

#header-isor-divide {
clear:both;
}
.header-column {
padding: 10px;
margin :5px auto;
}

 3. kalau sudah silahkan cari lagi kode <div id='outer-wrapper'>
4. taruh kode dibawah ini tepat dibawahnya.

<div id='header-isor-divide'>
    <div id='header1' style='width: 100%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col100'
    preferred='yes' style='float:left;'/>
    </div>
    <div style='clear:both;'/>
</div>

5. Sebelum sobat beranjak ke tutorial berikutnya silahkan cari kode </b:skin>. silahkan masukkan kode dibawah ini tepat dibawahnya.

<script type='text/javascript'>
//<![CDATA[
/* Script from:http://giga-watt.blogspot.com/ */
$(document).ready(function(){
    $('#tinycarousel').tinycarousel({
        start       : 1,
        display     : 1,
        axis        : 'x',
        interval    : true,
        intervaltime: 3000,
        animation   : true,
        duration    : 1000,
        callback    : null
    });
});
//]]>
</script>
<script src='http://kodegigawatt.googlecode.com/files/Tiny%20Carousel.js' type='text/javascript'/>

kalau sudah kalian save tamplate. silahkan lihat hasilnya di Tata Letak Tamplate.
6. kalau sobat ikuti cara-cara diatas tentu sudah ada kolom widget baru. kalau sudah silahkan kalian tambah widget dan masukkan kode dibawah ini pada JavaScript/HTML.

<script type="text/javascript">
    showPostDate_g  = false;
    showComm_g      = false;
    slideOpenNewTab = true;
    idMode          = true;
    slidebyLabels   = false;
var slideLabelName  = "label",
    pBlank          = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFd3x-vBSqDNRPxflOOdiMRZ78dNjBajJGWpYHGgl31Hj3Fhyv4SAVInqtpVS5a_hXgID3BnLwfhApz0NjX7o4CY07SBcKrFeMjQl8elJWVZi-lbmJQo9jZ3kUGxIDLzn8ny1oGxFQOBw/s1600/no+image.jpg",
    text            = "comment",
    numposts_g      = 12,
    numchars_g      = 0,
    showText        = "Show at",
    postText        = "Posts",
    tinyprevNav     = "&lt;",
    tinynextNav     = "&gt;",
    home_page       = "http://acibudaya.blogspot.com/";
</script>
<script src="http://kodegigawatt.googlecode.com/files/tinyplay.js" type="text/javascript"></script>

Ket. kode yang berwarna Merah silahkan ubah berapa ingin kalian tampilkan postingan kalian dan yang berwarna Biru silahkan kalian ganti dengan URL blog kalian.

6. kalau sudah kalian ikuti langkah-langkah seperti diatas sekarang kalian Save atau simpan dan lihat hasilnya.

 

Semoga tutorial yang saya sampaikan bisa sobat terapkan di blog kalian. kalau sobat belum berhasil dengan tutorial seperti diatas silahkan kalian isi kolom komentar dibawah. mungkin hanya itu yang bisa saya bagikan buat anda.

Sumbver : http://giga-watt.blogspot.com/2012/08/cara-membuat-slider-dibawah-header.html

Author : coxelgokil | ACI BUDAYA

Anda telah membaca artikel tentang : Cara Membuat Slider Di Bawah Header. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih... <a href="http://acibudaya.blogspot.com/2013/12/cara-membuat-slider-di-bawah-header.html" target="_blank">Cara Membuat Slider Di Bawah Header</a>

Author : Aci Budaya - [Blog Lain]