Tutorial Buat Slider Sebagai Header Using JQuery

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

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