Home » » Salam Lebaran Bersama jQuery Easing Dan Banner Rotator

Salam Lebaran Bersama jQuery Easing Dan Banner Rotator

EmpayarUtama - Monday, July 29, 2013 : 4 comments

Diam tak diam sembilan belas hari kita telah berpuasa. Sana sini dah mula nampak bloggers bagi ucapan Selamat Hari Raya siap decorate kad ucapan sendiri. Best gitu.

Aku tak pandai le bab-bab melukis ke, buat dekor ke. Jadi kat sini aku tempek gambar-gambar dari gugel. Hambek ko 15 keping sekali aku pos.

Kali ni slider album menggunakan jQuery Easing bersama Banner Rotator. Nah kad ucapan raya dari Empayarutama :











Ambik kod kat sini:

Aku dah upgrade versi jQuery kepada jQuery 1.8.3 tetapi jika belog korang dah ada mana-mana versi; buang kod kaler merah tu. Kalau belog tak pernah ada jQuery; aku rekomen guna versi terkini agar ikut perkembangan semasa.

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

<script src="http://yourjavascript.com/43361812024/empayarutamajqueryeasing.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/13267823130/empayarutamajquerybannerrotator.js" type="text/javascript"></script>

<style>
.TB_Wrapper {width: 470px;height: 290px; margin-left: 5px; border: 2px solid #ddd; }
.TB_Wrapper {position: relative;overflow: hidden;}
.TB_Wrapper .Slide {visibility:hidden;background: #eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJItCFrwwzudkLJ5s40xhpuzQr_uzhyphenhyphenRMqzy2r3cxoFgY-6UycpPD90K0J56k08mvo5m5kbGxQ5ZLa0RB6IXIOd8ffgWIocGFce5SefV-WVI60fwsiW-ZCram6sSuyJulXaiRJ1DNB3dg/s1600/preloader.gif) center center no-repeat;}
.TB_Wrapper .icon {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNXbc9s62lZfmpMxFBjjREm41U2Xj43IvO_Lqpw7wOAecdbSEVgKurygsMvI_vUAMFdwk59x3hAmU2Chp7xWcURkDX9YQnjARQqygvJJ4HI9fSfniPJTXdwAhjfksnfLu9peXpCAYC12U/s1600/icons.png);}
.TB_Wrapper .timer_sprite {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgruR5Pxxrl7_6sjXLijN6RtedIDyrWC3BK3WGWxcU8vIZU_USMT8tOEdeKu1BBvmrwMo3umhbQ1acxG-ai8fiz0PUykqTKCiNz8b3CfBo_1ZJ2YbRnP7CT1zGT1Uf26u5epj8x7EsIAxE/s1600/timer-sprite.png);}
.TB_Wrapper .Slide div {font-family: Cherry Cream Soda;font-weight:100;color:#fff;font-size:16px;}
.TB_Wrapper a:link{color:#fff;text-decoration:none;}
.TB_Wrapper a:visited{color:#fff;text-decoration:none;}
.TB_Wrapper a:hover{color:#fffcc;text-decoration:none;}
.TB_Wrapper a:active{color:#fff;text-decoration:none;}
.TB_Wrapper .noSelect {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;}
.TB_Wrapper .buttonText {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold; color: #000;}
#slide_caption a{font-size:15px;color: red;text-decoration:none;}
#slide_caption a:hover{font-size:14px;color:#fffcc;text-decoration:none;}
</style>

<div class="TB_Wrapper" id="SlideView">
<div class="Slide" data-position="20,20" data-width="250">
<img src="link imej/gambar pertama" />
<div align="left" id="slide_caption">
<a href="link blog ke, kalau ada" target="_blank">caption/penerangan 1</a></div>
</div>
<div class="Slide" data-position="20,20" data-width="250">
<img src="link imej/gambar kedua" />
<div align="left" id="slide_caption">
<a href="link blog ke, kalau ada" target="_blank">caption/penerangan 2</a></div>
</div>
<div class="Slide" data-position="20,20" data-width="250">
<img src="link imej/gambar ketiga" />
<div align="left" id="slide_caption">
<a href="link blog ke, kalau ada" target="_blank">caption/penerangan 3</a></div>
</div>

<script type="text/javascript">
$('#SlideView').TransBanner({
button_show_back: true,
button_numbers_autohide: false,
button_numbers_horizontal: true,
caption_padding_x : 18,
caption_padding_y : 18,
caption_float_mode: true
});
</script>

Yang kaler oren tu, boleh tukar ikut kesesuaian belog. Dan aku cuma letak 3 set imej di mana set ketiga aku kalerkan pink gitu. Kalau nak tambah gambar/imej - kopipes je yang kaler pink dan tambah di bawahnya.



Sebelum masak megi buat sahur pagi nih, aku ucapkan Selamat Hari Raya Aidilfitri Maaf Zahir & Batin kepada semua yang tersinggah dan baca bahan-bahan rojak aku :)










4 Comments

4 comments:

  1. EU.....rasanya awal sangat nak buat ucapan....tapi tak kesahlah takut tak sempatkan,maklumla makin dekat raya masing masing makin sibok.Jadi aku nak ucap selamat menyambut hari raya dan maaf zahir dan batin.....apa juadah istimewa raya petama kat johor ye....besok malam aku nak buat dodol pandan...hehehe

    ReplyDelete
    Replies
    1. Sama-samalah kita. Pagi raya kami biasanya bersama ketupat (beli), rendang, serunding dan kuah kacang. Tapi kalau di kampung; banyak masakan bugis yang diorang buat sendiri seperti burasak, lepat loy, lepat-lepat, ketupat; dan lauknya serunding (2 jenis - kelapa dan daging), rendang, kuah kacang, lodeh, dan yang mesti ada ialah asam pedas ikan parang. Kuih bugis tu biasalah - wajik, dodol kelapa (cengkaruk - ntah betul ke tak taule), dodol, bauhulu becak; dan macam-macam biskut berwarna warni siap ada manik-manik kat tengah perghhh penuh tiga meja hahahahahah.

      Kalau di pantai timur Johor (Mersing) mesti ada tapai pulut daun getah...

      Sekarang ni mmg tgh sibuk kena buat review 1 kompeni, due date sebelum raya

      Delete
  2. leh gerak-gerak.. tukar-tukar.. terbaek..

    ReplyDelete
  3. nice tuto. aku simpan dulu yg ni. ada dalam rancangan nak apply stail slider mcm ni utk iklan2 churp2 dan says...huhu

    ReplyDelete

Tulisle apa pun, aku baca ^_~