Tutorial Buat Slider Sebagai Header Using JQuery

Wednesday, September 28, 2011

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
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

4 comments

Segala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url, mengandungi kata-kata maki hamun, soalan yang jawapannya terang lagi bersuluh ada dalam entri, atau tidak menyenangkan tidak akan disiarkan. Begitu juga dengan unknown profile. Harap Maklum.

Sekian Terima kasih.