Tutorial Buat Slider Sebagai Header Using JQuery

Wednesday, September 28, 2011

Sebelum Fiza nak buat design,meh nak kasi tutorial sikit bagi pusing biji mata jap dan bagi pening lalat sikit.Kali ni tutorial nak buat slide yang ade gambar dan link post sekali ye.Kalau sape yang pandai coding tu boleh customize mengikut citarasa korang.Sape yang masih samar-samar,ikut je tutorial ni..kalau tak tahu bertanye ye,Fiza tak makan orang.Fiza pun baru je belajar ni...ni saje nak share je..kalau suke,trylah.Kalau tak suke,dok diam-diam ye..okay,mari mulekan

*Sebelum ape-ape,save dulu template korang ditempat yang selamat dengan menekan button download di html tu ye

1.Log in blogger>>Dashboard>>Edit HTML>>tick expand widget templates

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 nakdiletakkan dalam slide
URL image-URL image yang nak diletakkan dalam slide
Image's decription-boleh amek terus dari post entry[copy+paste] atau nak buat ayat sendiri

Sebenarnye banyak lagi yang boleh korang pelbagaikan font,size,warne..pandai-pandailah ye..nanti tanyelah.Kalau nak letak semua,pingsan la Fiza.Ni bagi yang basic je,harap boleh membantu.

credit to:Mr Mung

With Love,
image

6 comments

  1. akak ! kat dashboard saya xda page element so saya xtau nk gy mana :/

    ReplyDelete
  2. salam..sis fiza..nk tnya..camana buat widget popular post mcam sis tu? nampak kemas..kalau x keberatan, boleh x sis bt tutorial tu. :)

    ReplyDelete
  3. Hehehe banyak main ngan coding tuu ..Kena hati2 OK

    ReplyDelete

LATEST PHOTOS ON INSTAGRAM

All rights reserved Blog Sihatimerahjambu