Membuat Slider Piecemaker 2 Di Blog

Pagi yang cerah ini kita coba buat slider diblog sebagai penghias blog kita yang mungkin kalian juga bosan dengan slider yang biasanya. Membuat Slider Piecemaker 2 Di Blog, slider kali ini bisa kita buat tanpa harus mengedit pada code hmtl nya. Kita hanya perlu add gadget dan pilih javascript/hmtl.

Slider Piecemaker ini sangat cocok jika kita buat untuk header atas dengan template slider. Untuk melihat demonya silahkan lihat Disini Untuk mencobanya silahkan anda coba cara berikut :

1. Masuk Edit Tata Letak kemudian Add Gadget dan pilih html/Javascript kemudian paste kode dibawah ini.

<script src="http://dl.dropbox.com/u/27675057/pidcemaker2/piecemaker/web/scripts/swfobject/swfobject.js" type="text/javascript">

</script>

<div id="flashcontent">

You need to <a href="http://www.adobe.com/products/flashplayer/" target="_blank">Upgrade your Flash Player</a> to version 10 or newer.</div>

<script type="text/javascript">

  var flashvars = {};

  flashvars.xmlSource = "http://dl.dropbox.com/u/27675057/piecemaker.xml";

  flashvars.cssSource = "http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/piecemaker.css";

  flashvars.imageSource = "";

  var attributes = {};

  attributes.wmode = "transparent";

var params = {}; 

     params.allowscriptaccess = "always"; 

     params.allownetworking = "all";

  swfobject.embedSWF("http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/piecemaker.swf", "flashcontent", "960", "610", "10", "http://dl.dropbox.com/u/27675057/Piecemaker/expressInstall.swf", flashvars, attributes, params, null);

</script>

2. Langkah kedua Copy juga code berikut ini untuk inputan Gambar/video atau flash yang ingin anda masukan pada slider.

<Piecemaker>

<Contents>

<Image Source="http://dl.dropbox.com/u/27675057/pic/15.jpg" Title="Sky"/>

<Image Source="http://dl.dropbox.com/u/27675057/pic/21.jpg" Title="Cloud">

</Image>

<Image Source="http://dl.dropbox.com/u/27675057/pic/22.jpg" Title="Clouds"/>

<Image Source="http://dl.dropbox.com/u/27675057/pic/22_2.jpg" Title="Green"/>

<Image Source="http://dl.dropbox.com/u/27675057/pic/24.jpg" Title="Landscape"/>

<Image Source="http://dl.dropbox.com/u/27675057/pic/62.jpg" Title="Water"/>

<Video Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/video.mp4" Title="Video Example" Width="910" Height="365" Autoplay="true">

<Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/video-preview.jpg" />

</Video>

<Flash Source="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/contents/flash.swf" Title="Loaded SWF File">

      <Image Source="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/contents/flash-preview.png" />

    </Flash>

</Contents>

<Settings ImageWidth="900" ImageHeight="360" LoaderColor="0x333333" InnerSideColor="0x222222" SideShadowAlpha="0.8" DropShadowAlpha="0.7" DropShadowDistance="25" DropShadowScale="0.95" DropShadowBlurX="40" DropShadowBlurY="4" MenuDistanceX="20" MenuDistanceY="50" MenuColor1="0x999999" MenuColor2="0x333333" MenuColor3="0xFFFFFF" ControlSize="100" ControlDistance="20" ControlColor1="0x222222" ControlColor2="0xFFFFFF" ControlAlpha="0.8" ControlAlphaOver="0.95" ControlsX="450" ControlsY="280 " ControlsAlign="center" TooltipHeight="30" TooltipColor="0x222222" TooltipTextY="5" TooltipTextStyle="P-Italic" TooltipTextColor="0xFFFFFF" TooltipMarginLeft="5" TooltipMarginRight="7" TooltipTextSharpness="50" TooltipTextThickness="-100" InfoWidth="400" InfoBackground="0xFFFFFF" InfoBackgroundAlpha="0.95" InfoMargin="15" InfoSharpness="0" InfoThickness="0" Autoplay="10" FieldOfView="45"/>

<Transitions>

<Transition Pieces="9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300" CubeDistance="30"/>

<Transition Pieces="15" Time="3" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>

<Transition Pieces="5" Time="1.3" Transition="easeInOutCubic" Delay="0.1" DepthOffset="500" CubeDistance="50"/>

<Transition Pieces="9" Time="1.25" Transition="easeInOutBack" Delay="0.1" DepthOffset="900" CubeDistance="5"/>

<Transition Pieces="20" Time="1.1" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>

<Transition Pieces="12" Time="2" Transition="easeInOutCubic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>

</Transitions>

</Piecemaker>

3. Silahlkan Save dan coba lihat hasilnya.

 Semoga Berhasil. Happy Blogging.