Home » , » Membuat Feature Slideshow Keren

Membuat Feature Slideshow Keren

Selamat malam semuanya, bertepatan dengan tanggal 18 April 2012 kami mempunyai Trick and Tips Membuat Feature Slideshow Keren dengan efek JQuery. Di posting ini memiliki gaya yang sangat sederhana namun yang memberi kita beberapa opsi tambahan, yang utama adalah Anda dapat dengan mudah Membuat Feature Slideshow ini dan berbagai ukuran sesuai dengan blog atau gambar yang ingin Anda gunakan.

Pada trick kali ini kami sudah mempersiapan penampilan yang sesungguhnya agar anda bisa lebih puas lagi ketika Membuat  Feature Slideshow ini. Silahkan KLIK DEMO


Mas Bro bagaimana agar dapat menambahkannya ke Blogger. Oke tenang saja kami sudah mempersiapkan tutorialnya dibawah ini:

Langkah 1
Silahkan masuk ke Akun Blogger

Langka 2
Masuk ke menu Desain/ Rancangan lalu klik Edit HTML

Langkah 3
Cari potongan kode ]]></b:skin> berikut di blog Anda. (Klik tombol Ctrl-F untuk pencarian lebih cepat)

Langkah 4
Setelah anda menemukan kode tersebut diatas, Silahkan copy paste kode dibawah ini tepat di atas kode yang no 3.

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 600px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(http://1.bp.blogspot.com/-e-v9GYybZSg/TdcdITdapZI/AAAAAAAAD-I/RKqZRg0lSjU/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}


Langkah 5
Jagan lupa untuk merubah Ubah ukuran Feature Slideshow. Saat ini saya memiliki ukuran set 250x600 sebagaimana ditekankan dalam kode diatas. Anda dapat mengubah kode tersebut untuk membuat lebar halaman dan ingat ukuran gambarnya juga disesuaikan dengan ukuran lebar Feature.

Langkah 6
Carilah potongan kode </head> berikut di blog Anda, Setelah anda menemukan kode tersebut silahkan copy paste Kode dibawah ini tepat di atasnya kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>


Langkah 7
Simpan Template anda

Untuk membuat Slider bekerja dengan maksimal sekarang anda harus menambahkan kode html dibawah ini.

- Masuk ke halaman Desain/Rancangan dan klik Tambah Gadget, Pilih Html/JavaScript
- Copy Paste kode dibawah ini ke Gadget HTML/JavaScript

<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window">
<div class="image_reel">

<a href="http://ganti-dengan-url-blog-anda.com/"><img src="ganti-dengan-url-gambar" alt="" /></a>

<a href="http://ganti-dengan-url-blog-anda.com/"><img src="ganti-dengan-url-gambar" alt="" /></a>

<a href="http://ganti-dengan-url-blog-anda.com/"><img src="ganti-dengan-url-gambar" alt="" /></a>

<a href="http://ganti-dengan-url-blog-anda.com/"><img src="ganti-dengan-url-gambar" alt="" /></a>

<a href="http://ganti-dengan-url-blog-anda.com/"><img src="ganti-dengan-url-gambar" alt="" /></a>


</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>

</div>
</div>

</div>

</div>


- Lalu simpan dan lihat hasilnya

Semoga Trick and Tips kali ini semoga bermanfaat buat kita semua. Dan Jangan lupa untuk berlangganan artikel kami silahkan masukkan email anda dibawa ini. Anda akan mendapatkan Artikel terbaru dari saya dengan gratis. Tidak Dipunggut biaya. Ilmu sudah gratis, Mau langganan artikel saya juga gratis. Kenapa harus diperhitungkan. Mari kita lestarikan saling berlangganan agar tidak ada copy paste artikel tanpa sepengetahuan admin.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 4 komentar

24 April 2012 17.17

wah makasih kang tutornya sangat bermanfaat :D

Terimakasih Naufal Nafhan atas Komentarnya di Membuat Feature Slideshow Keren
2 Mei 2012 23.46

makasih infonya

Terimakasih Auriga Mualana Khasan atas Komentarnya di Membuat Feature Slideshow Keren
19 Agustus 2012 04.40

sip, thanks Lora

Terimakasih wong_dharmapala atas Komentarnya di Membuat Feature Slideshow Keren
1 September 2012 09.36

dicoba dulu ah..

Terimakasih cucungukrieuts atas Komentarnya di Membuat Feature Slideshow Keren

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger