Tutorial Buat Slider Sebagai Header Using JQuery

Kali ni tutorial nak buat slider yang ada gambar dan link post sekali. Untuk yang tahu selok belok coding, boleh customize ikut pilihan sendiri.

Yang masih samar-samar boleh follow terus tutorial di bawah ni. Sebelum teruskan, lebih baik save dulu template.

1. Log in blogger>>Dashboard>>Theme>>Edit HTML

(Klik sini untuk cope semua code)

2. Cari code

]]></b:skin>

3. Copy code bawah ni

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 560px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

4. Paste diatas code ]]></b:skin>

5. Kemudian cari code

</head>

6. Copy code bawah ni

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

 <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 560, navigation: false, delay: 5000 }); });</script>

7. Paste di atas code </head>

8. Save template

9. Pegi pada page element

dashboard>>page element>>Add a gadget>>HTML/Java

10.Copy code bawah ni

<div id='coin-slider'>

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

    

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

<a href="LINK Post" target="_blank">

        <img src="URL image" />

        <span>

    Image's decription

        </span>

    </a>

</div>

11. Paste dalam box HTML tadi

560 - lebar boleh adjust ikut kesesuaian blog masing-masing

LINK Post - link post yang nak diletakkan dalam slide

URL image - URL image yang nak diletakkan dalam slide

Image's decription - boleh ambil terus dari post entry [copy+paste] atau nak buat ayat sendiri

Sebenarnya banyak lagi yang boleh kau orang pelbagaikan font, size, warna.

kredit : http://www.mr-mung.com/2010/06/membuat-slide-show-gambar-dengan-jquery.html