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:

Blogger

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Blog Terindeks Google dengan Cepat
• 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
• Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
• Apa Itu Niche Blogging ?
• Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
• Cara Menghindari Blog Dihapus Oleh Google
• Cara Memilih Nama Blog & Situs yang Ramah SEO
• Cara Mengembalikan Mood Blogging
• Mengapa Subscriber Feedburner Menjadi 0 ?
• 7 Tips SEO untuk Blogger
• 10 Tips Mantap Untuk Meningkatkan Trafik Organik
• 7 Trik Membuat Artikel Lama Menjadi Populer
• 7 Cara Mendapat Pengunjung Dengan Mudah
• Tutorial Blog dan SEO Terkena Malware ?
• Bagaimana Mengefektifkan Backlink Dalam SEO
• 8 Tips Membuat Loading Blog Lebih Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Optimasi Gambar Untuk Dapatkan Pengunjung
• Cara Menghindari SEO yang Berlebihan
• 8 Tips Untuk Seorang Blogger Pemula
• Cara Mendapatkan Google Sitelink Dengan Cepat
• Cara Membuat dan Tips Pengaturan Meta Tag
• Cara Meningkatkan Ranking Alexa Dengan Cepat
• Cara Mengklaim Situs di Alexa

Posted in: Blogger