Cara Membuat Slider dibawah Header

Selamat Malam buat sobat blogger semua. pada kesempatan kali ini aku akan bagikan bagaimana membuat slider post di bawah header tutorial ini merupakan kelanjutan dari cara membuat recent post slide disidebar yang sudah aku share beberapa waktu yang lalu, dan juga permintaan salah satu sobat saya yang kemarin request tentang tutorial ini. untuk melihat DEMOnya silahkan buka halaman Blog Pro GameXP. 

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/AVvXsEjRymwUsSdTmhUC4Oycz7ursKasuNZKpa7eCAWzltObze93I7RVYLK2Ap7JI0sUV7ZwXjuEg6yKeH30KN_aA8pUEFNXlWQgpa4t7gpq29rn1KZPZbxgvnZOw5zwoUvgt0p0XHMG0hDBI1k/s1600/no+image.jpg",
    text            = "comment",
    numposts_g      = 12,
    numchars_g      = 0,
    showText        = "Show at",
    postText        = "Posts",
    tinyprevNav     = "&lt;",
    tinynextNav     = "&gt;",
    home_page       = "http://pro-gamexp.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.

begitulah tips atau tutorial cara membuat slider post dibawah header 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 sobat Happy Blogging.