AsalSuka: Memasang Jquery Popeye Slideshow (blue) di Blogger

|= |

| +)

|= |

| +)

|= |

| +)

Hi sahabat Blogger...^^ Kali ini AsalSuka hanya ingin berbagi cara memasang Plugin Wordpress yang satu ini didalam Blogger. Asal Jquery popeye ini adalah dari situs asli Jquery.Popeye.2.0. Jquery adalah seperti script yang memang lebih keren dari Javascript. Seperti contoh adalah Facebook yang menggunakan jquery.

Saya pikir tidak perlu untuk membahas tentang Jquery, karena saya dapat dikatakan gaptek tp mencoba untuk belajar..^^

Mari kita mulai saja membahas mengenai cara memasang Jquery ini.
Yang pertama adalah:

Login terlebih dahulu ke Blogger.
Klik Rancangan/Layouts dan klik Edit HTML. Tidak perlu mencentang kotak "Expand Template Widget"
Kemudian salin kode dibawah ini dan taruh sebelum </head>

<style type='text/css'>

.ppy-outer { display: none;}.ppy-active .ppy-outer { display: block;}.ppy-stage { background-repeat: no-repeat !important; background-position: center center !important; position: relative;}.ppy-placeholder { position: relative;}

.ppy-caption,.ppy-captionwrap { overflow: hidden;}.ppy-hidden { display: none !important;}

</style>

<style type='text/css'>

/* fallback styles for image list */

.ppy-imglist { width: 100%; display: block; overflow: hidden;}.ppy-imglist li { padding: 10px; border: 1px solid #f0f0f0; border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; background: #fff; list-style: none; float: left; display: block; margin: 0 10px 10px 0;}

.ppy-imglist li a img { display: block; border: 0;}#ppy1 .ppy-extcaption { width: 240px; display: block;}#ppy1 .ppy-imglist li { width: 240px; height: 270px;}

#ppy2 .ppy-imglist li,

#ppy2 .ppy-imglist li a { width: 160px; height: 160px; overflow: hidden; display: block;}#ppy2.ppy-active { width: 224px; float: right; margin: 0 0 10px 20px;}#ppy2 .ppy-outer { padding: 0 46px 0 0;}

#ppy2 .ppy-stagewrap { padding: 7px; border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; -webkit-border-radius: 5px 0 5px 5px; background: #c1eaff; background: rgba(193,234,255,0.7);}#ppy2 .ppy-stage { width: 160px; height: 160px; border: 2px solid #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #777;}#ppy2 .ppy-counter { background: #fff; color: #333; padding: 0 5px; font-size: 0.8em; position: absolute; bottom: 0; right: 0; opacity: 0.7; border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -khtml-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; }#ppy2 .ppy-loading { background-image: url(https://sites.google.com/site/asalsuka01/jquery-popeye/gambar/loading2.gif); background-repeat: no-repeat; background-position:center;}#ppy2 .ppy-nav { border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; background: #76c6ee; background: -webkit-gradient( linear, left top, right bottom, color-stop(0, rgb(118,198,238)), color-stop(1, rgb(45,158,214)) ); background: -moz-linear-gradient( left top, rgb(118,198,238) 0%, rgb(45,158,214) 100% ); border-left: 1px solid #6ab1d5; width: 45px; position: absolute; top: 4px; right: 0;}#ppy2 .nav-wrap { padding: 5px 0;}#ppy2 .ppy-nav a { display: block; overflow: hidden; text-indent: -900em; height: 22px; padding: 5px; border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; width: 30px;}.ppy-prev { background: url('https://sites.google.com/site/asalsuka01/jquery-popeye/gambar/prev3.png') no-repeat center;}#ppy2 .ppy-next { background: url('https://sites.google.com/site/asalsuka01/jquery-popeye/gambar/next3.png') no-repeat center;}#ppy2 .ppy-switch-enlarge { background: url('https://sites.google.com/site/asalsuka01/jquery-popeye/gambar/enlarge4.png') no-repeat center;}#ppy2 .ppy-switch-compact { background: url('https://sites.google.com/site/asalsuka01/jquery-popeye/gambar/compact4.png') no-repeat center;}#ppy2 .ppy-nav a:hover { background-color: #378eba; cursor: pointer; opacity: 0.8;}

</style>

Salin kode dibawah ini dan taruh sebelum kode </body>

<script type="text/javascript">

   $(document).ready(function () {

   var options2 = {

   caption: false,

   navigation: 'permanent',

   direction: 'left'

   }

   $('#ppy2').popeye(options2);

   });

</script>

Langkah terakhir adalah mengedit kode html dibawah ini, dan taruh di Widget/Gadget yang Anda punya.

<div id="ppy2" align="left">

<ul class="ppy-imglist">

<li><a href="Link Image 1"><img src="Link Image 1" /></a></li>

<li><a href="Link Image 2"><img src="Link Image 2" /></a></li>

<li>...</li>

</ul>

<div class="ppy-outer">

<div class="ppy-stage">

<div class="ppy-counter">

<span class="Apple-style-span" style="font-size: xx-small;">Edited by </span>

<a href="http://asal-suka.blogspot.com/"><span class="Apple-style-span" style="font-size: xx-small;">AsalSuka</span></a>

<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>

</div>

<div class="ppy-nav">

<div class="nav-wrap">

<a class="ppy-next" title="Next image">Next image</a>

<a class="ppy-prev" title="Previous image">Previous image</a>

<a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>

<a class="ppy-switch-compact" title="Close">Close</a>

</div>

Jika Anda dilihat lebih teliti, Yang berwarna merah diulang dua kali seperti:<a href="Link Image 1"><img src="Link Image 1" /></a>. Salin url gambar yang sama Anda dikedua tempat tersebut.
Untuk <li>...</li> berarti Anda dapat menambah gambar tersebut sebanyak yang Anda inginkan.

Demikianlah posting AsalSuka kali ini. Jika kurang jelas, Anda dapat memberikan komentar agar diperbaiki oleh AsalSuka..^^

Terima kasih sudah berkunjung...
Happy Blogging ^^...

AsalSuka

Pages

Memasang Jquery Popeye Slideshow (blue) di Blogger

Google Translator

Info dan Statistik