Cara Membuat Slideshow pada Blogspot II

Anonymous       11/19/2010 09:46:00 AM

>

Contoh Screenshot dari Slideshow

Caranya ►

Langkah 1

• Login ke Blogger.
• Pilih "Go to Layout" ► Edit HTML.
• Tandai "Expand Widget Templates".

Langkah 2

• Cari [CTRL+F] code ini ►

</head>

• Dan masukan code di bawah ini, tepat di atas kode head di atas.

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

• Sekarang Click Save Template

Langkah 3

• Pilih ► Go To Layout

• Pilih ► Add a Gadget of HTML / JavaScript Type.

• Lalu masukan code ini ►

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#myController&quot;).jFlow({
slides: &quot;#slides&quot;,
controller: &quot;.jFlowControl&quot;, // must be class, use . sign
slideWrapper : &quot;#jFlowSlide&quot;, // must be id, use # sign
selectedWrapper: &quot;jFlowSelected&quot;, // just pure text, no sign
auto: true, //auto change slide, default true
width: &quot;610px&quot;,
height: &quot;235px&quot;,
duration: 100,
prev: &quot;.jFlowPrev&quot;, // must be class, use . sign
next: &quot;.jFlowNext&quot; // must be class, use . sign
});
});
</script>

• Anda dapat memasukan gambar sebanyak mungkin yang Anda mau.

NOTE ► Untuk semua kalimat yang di warnai bisa diganti sesuai dengan kebutuhan site anda sendiri, misalnya untuk Link bisa diganti dengan Link / alamat Anda sendiri.

• Selesai.