Membuat Konten Slide dengan Jquery Untuk Blogger

Pada tutorial kali ini saya akan membahas bagaimana caranya membuat Menu Slide dengan Jquery. selain untuk mempermudah dan mempercactik tampilan blog, dengan menggunakan fitur ini kamu juga bisa menaruh teks, link atau gambar ke dalam blog kamu. Langsung saja tutorialnya dibawah yah :

1. Masuk ke Blogger.com

2. Klik Rancangan--> Edit HTML --> Back Up Template Terlebih dahulu.

3.  Centang Expand Template Widget, Kemudaian cari kode ]]></b:skin> lalu kamu copas kode javscript dibawah ini dan letakan diatas kode ]]></b:skin> tadi.

#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; }

4. Setelah itu kamu cari lagi kode </head> dan copas lagi kode dibawah ini dan letakan diatas kode </head>

<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>

5. Simpan template, namun ini belum selesai, setelah itu kamu klik lagi Elemen Laman --> Tambah Gadget --> HTML/Javascript dan masukan kode Javascript dibawah ini.

<div class="jflow-content-slider">
<div id="slides">

<-! Slide #1 Starts -->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="MASUKAN LINK/ALAMAT GAMBAR DISINI"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> MASUKAN JUDUL SLIDE DISINI </b></span>
<div class="description">

MASUKAN TEKS KAMU DISINI

</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->

<-! Slide #2 Starts -->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="MASUKAN LINK/ALAMAT GAMBAR DISINI"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> MASUKAN JUDUL SLIDE DISINI </b></span>
<div class="description">

MASUKAN TEKS KAMU DISINI
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->


<-! Slide #3 Starts -->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="MASUKAN LINK/ALAMAT GAMBAR DISINI"/>
</div>

<div class="slide-details">
<span style="font-size: large;"><b> MASUKAN JUDUL SLIDE DISINI </b></span>
<div class="description">

MASUKAN TEKS KAMU DISINI

</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->

.
.
.
.
<!-- KAMU BISA TAMBAHKAN SLIDE SEBANYAK APAPUN SEBELUM KODE DIV DIBAWAH-->

</div>

<div id="myController">
<span class="jFlowPrev">Prev</span>

<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Increase these numbers as with the increase in your number of slides above -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>

6. Save Template dan Lihat hasilnya.

Postingan Terkait:

Posted in: Blogger