30.4.13

Tutorial : Buat Gambar Bergerak (Macam Tonton Online Nabila)

Author : Nabila Medan Time : 4/30/2013 05:18:00 PM Total Comment : 11 Label :



Assalamualaikum!!
Lama nya nabila takmuncul untuk memberikan tutorialkan? Bukan apa, kadang malas, lepas tu kadang takcukup masa, dengan edit HTML sekarang yang sudah berubah, lagilah rasa malas nak buat tutorial. Tapi hari ni nabila gagahkan diri untuk buat tutorial ini memandangkan sudah ramai yang tanya.. Tutorial ini nabila credit dekat dia. Terima kasih sebab buat tutorial ohsem ini! Tutorial yang nabila buat ni kira macam translate kan tutorial dia ke bahasa melayu la.


1. Dashboard > Template > Edit HTML
2. Tekan "anak panah" pertama tu.. Bila korang dah tekan anak panah tu, code korang jadi expand kan? Maksud mengembang jadi banyak..
3. Tekan pula CTRL + F, search code </head>
4. Dah jumpa?? Copy & paste code yang nabila bagi dan letak bawah </head>
<style type='text/css'>
/* <![CDATA[ */
 #lunSlideContainer           {position: relative;display: block; top:0px; left:0px; right:0px;}
 #lunNivoSlider              { position:relative;
width: 240px; height: 180px;
background:  #fff url("http://4.bp.blogspot.com/-TBMTXcO0VxM/T7dSfCUe9dI/AAAAAAAABgY/dmbkzgOPQI0/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 6px solid #eee;
 }
 #lunNivoSlider img           {position:absolute; top:0; left:0;  display:none}
 .nivoSlider                  {position:relative;width:100%;height:auto;}
 .nivoSlider img              {position:absolute;top:0;left:0}
 .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
 .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
 .nivo-slice                  {display:block;position:absolute;z-index:5;height:100%;top:0}
 .nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
 .nivo-box img                {display:block}
 .nivo-caption                {padding: 5px;
font-family: Arial,sans-serif;position:absolute; Font-size: 14px; background:#000; color:#fff; -ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 238px; z-index:8;}
 .nivo-caption p              {padding:2px;margin:0}
 .nivo-caption a              {display:inline!important}
 .nivo-html-caption           {display:none}
 .nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("http://1.bp.blogspot.com/-JnrFwRkdDV8/UTD4Tc4NVeI/AAAAAAAANTk/k6_siKnoPVY/s1600/flechaslunany1.png5.png") no-repeat;text-indent:-9999px;border:0}
 .nivo-prevNav                {left:10px}
 .nivo-nextNav                {background-position:-30px 0!important;right:10px}
 .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
 .nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("http://3.bp.blogspot.com/-iMpkQARIad0/UTD4S_T38_I/AAAAAAAANTQ/08Tj4O9P90Y/s1600/botonlunany1.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
 .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
 a.tablo{
margin-bottom:10px;
background:#D5F0FB;
width:90px;
text-decoration:italic;
border:1px dotted #E6ADFF;
border-radius:33px;
color:#E6ADFF;
display:inline-block;
text-align:center;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
 $('#lunNivoSlider').nivoSlider({
  effect           : 'random',
  slices           : 10,
  boxCols          : 8,
  boxRows          : 4,
  animSpeed        : 500,
  pauseTime        : 4000,
  startSlide       : 0,
  directionNav     : true,
  directionNavHide : true,
  controlNav       : true,
  keyboardNav      : false,
  pauseOnHover     : true,
  captionOpacity   : 0.8
 });
});
/* ]]> */
</script>
5. Okay sudah? Makesure korang preview dahulu sebelum save. Kalau takada error boleh save.

Haihh. Belum siap lagi, buat yang ni pula!
i. Dashboard > Layout > Add a Gadget > HTML/Javascript
ii. Copy & paste code bawah ni dekat HTML/Javascript tu
<div id="lunSlideContainer"><div id="lunNivoSlider"><a href="LINK"><img src="URL IMAGE" /></a><a href="LINK"><img src="URL IMAGE" /></a></div>
</div>
</div>
iii. Lepas tu boleh la save. Dah save? Tengoklah dekat sidebar. Jadi tak? Clap your hand! =3


Tak Jadi? Boleh inform dekat komen okay! :)

Attention!!
Saiz gambar tu tak boleh nak kecilkan/besarkan. Korang kena edit sendiri dulu guna photoscape/photoshop.

11 comments

Tuesday, April 30, 2013 5:33:00 PM Delete! [Reply Comment]

wauuuu. pandai lahhhh.

Tuesday, April 30, 2013 6:11:00 PM Delete! [Reply Comment]

tak jadi huhu...

Tuesday, April 30, 2013 6:25:00 PM Delete! [Reply Comment]

mcm mn nak resize kan gambar dalam kotak tu?

ni blog akak..

http://blog-threeinone.blogspot.com/

Tuesday, April 30, 2013 6:27:00 PM Delete! [Reply Comment]

mcm mane nak adjust size gambar?

Tuesday, April 30, 2013 6:47:00 PM Delete! [Reply Comment]

tutorial yg bnice.. beza sikit atin punye :D

Tuesday, April 30, 2013 7:06:00 PM Delete! [Reply Comment]

@ieta kenapa takjadi? *takjumpa cbox dkt blog sis*

Tuesday, April 30, 2013 7:07:00 PM Delete! [Reply Comment]

@Halimaton Saadiah kena resize dulu dekat photoscape..

Tuesday, April 30, 2013 7:07:00 PM Delete! [Reply Comment]

@Fendy kena adjust dulu guna photoscape/photoshop sebelum masukkan

Friday, May 03, 2013 6:29:00 PM Delete! [Reply Comment]

Useful ,thanks kak Nab :D

Wednesday, May 15, 2013 6:53:00 PM Delete! [Reply Comment]

Blog skg susah... Nak paste pon xleyh la siz Nab...
Huhuhu... Semua tuto pon x menjadi

Tuesday, June 04, 2013 1:34:00 PM Delete! [Reply Comment]

Thanks for the tuto sis :)

Post a Comment
Related Posts Plugin for WordPress, Blogger...