
Langkah1: Masuk ke menu 'Edit HTML'.
Langkah2: Gunakan 'Menu Find' (control+F) di browser anda untuk menemukan kode.
Langlah3: Pasang Script berikut diatas kode </head>
<style type='text/css'>
#crosscol {width: 600px; margin: 0 0 20px 60px;}
.coin-slider { overflow: hidden; zoom: 1; position: relative; background: #000; width: 570px; border: 5px solid #000;}
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 10px; padding: 10px; float: left;}
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #424242; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #fff; color: #FFFFFF; }
.cs-title { width: 563px; padding: 10px; background-color:#000000; color: #FFFFFF; }
.cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/askamedia/java-script/coin-slider-askamedia.txt' type='text/javascript'/>
<script type='text/javascript'> $(document).ready(function() { $('#coin-slider').coinslider({ opacity: 0.5, width: 570, height: 250, navigation: true, delay: 3000 }); }); </script>
#crosscol {width: 600px; margin: 0 0 20px 60px;}
.coin-slider { overflow: hidden; zoom: 1; position: relative; background: #000; width: 570px; border: 5px solid #000;}
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 10px; padding: 10px; float: left;}
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #424242; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #fff; color: #FFFFFF; }
.cs-title { width: 563px; padding: 10px; background-color:#000000; color: #FFFFFF; }
.cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/askamedia/java-script/coin-slider-askamedia.txt' type='text/javascript'/>
<script type='text/javascript'> $(document).ready(function() { $('#coin-slider').coinslider({ opacity: 0.5, width: 570, height: 250, navigation: true, delay: 3000 }); }); </script>
Langkah4: klik tombol Save Template untuk menyimpan perubahan.
Langkah5: Masuk ke Menu 'Page Elements'
Langkah6: Tambahkan elemen baru 'HTML java script', selanjutnya isi form tersebut dengan Script ini:
<div id='coin-slider'>
<a href="imgN_url" target="_blank">
<img src="https://lh6.googleusercontent.com/-SHgQ8eS32Lc/SSxO7cyI5JI/AAAAAAAAGKU/A4Bh3LhLQdE/s600/National%20Geographic%20Wallpapers%20-%20BTMUF%20-%20Part%203%20%28114%29.jpg" />
<span>Deskripsi gambar......</span>
</a>
<a href="imgN_url" target="_blank">
<img src="https://lh4.googleusercontent.com/-I7U0qK5Ih1M/SSxOlXvu7fI/AAAAAAAAGJw/gzsvL6v3eIo/s600/National%20Geographic%20Wallpapers%20-%20BTMUF%20-%20Part%203%20%28106%29.jpg" />
<span>Deskripsi gambar......</span>
</a>
<a href="imgN_url" target="_blank">
<img src="https://lh3.googleusercontent.com/-QDT0NzzJG40/SSxPWREdSXI/AAAAAAAAGLA/suG9eHHliCc/s600/National%20Geographic%20Wallpapers%20-%20BTMUF%20-%20Part%203%20%28124%29.jpg" />
<span>Deskripsi gambar......
</span>
</a>
</div>
<a href="imgN_url" target="_blank">
<img src="https://lh6.googleusercontent.com/-SHgQ8eS32Lc/SSxO7cyI5JI/AAAAAAAAGKU/A4Bh3LhLQdE/s600/National%20Geographic%20Wallpapers%20-%20BTMUF%20-%20Part%203%20%28114%29.jpg" />
<span>Deskripsi gambar......</span>
</a>
<a href="imgN_url" target="_blank">
<img src="https://lh4.googleusercontent.com/-I7U0qK5Ih1M/SSxOlXvu7fI/AAAAAAAAGJw/gzsvL6v3eIo/s600/National%20Geographic%20Wallpapers%20-%20BTMUF%20-%20Part%203%20%28106%29.jpg" />
<span>Deskripsi gambar......</span>
</a>
<a href="imgN_url" target="_blank">
<img src="https://lh3.googleusercontent.com/-QDT0NzzJG40/SSxPWREdSXI/AAAAAAAAGLA/suG9eHHliCc/s600/National%20Geographic%20Wallpapers%20-%20BTMUF%20-%20Part%203%20%28124%29.jpg" />
<span>Deskripsi gambar......
</span>
</a>
</div>
Langkah7: Klik tombol 'Save' pada element tersebut. Selesai.
No comments:
Post a Comment