jQuery Slider Futured Content Blog

jQuery Slider Futured Content Blog – slider adalah salah satu fungsi widget pada blog yang banyak digunakan oleh blogger untuk menampilkan konten artikel kedalam frame gambar dengan disertai link dimana link tersebut mengarah kehalaman konten yang dituju. Dengan begitu konten yang sudah lama dapat dipasang kedalam slider agar seseorang dapat menemukan dengan mudah halaman konten yang sudah lama tersebut didalam slider. Slideshow atau biasa disebut slider ini juga lebih efektif untuk menampilkan konten yang faforit sehingga visitor dapat mengetahui artikel yang menarik didalam blog anda tanpa perlu harus mencari terlebih dahulu. Fitur widget blog yang satu ini sedikit dimanjakan oleh sebagian blogger juga untuk melengkapi desain template blog dengan menambahan slider, dengan demikian layout blog juga terlihat cantik. Untuk memasang slider di blog cukup mudah, berikut adalah jQuery Slider Futured Content Blog beserta tutorial cara memasangnya kedalam blog.

1. Login ke akun blogger.
2. Pada dashboard blog anda klik Template >> Edit HTML, selanjutnya Copy kode CSS dibawah ini lalu taruh diatas kode ]]></b:skin>

.slider-wrap { width: 419px;}          
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -43px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaEIkbnTb5vPVxB3dGWmQXI7I8twV1b0jMQAP7dtusMPkkOoUubp4yVs9Hl5weTghGqezfOwy_X_5tRFYMu3QVh-Jo36Q1T9sWKnOZO-_6Hti05W22xDuzADDmbTBXqQbCL3NOJw85oi4d/s10/transpBlack.png); padding: 10px; height: 30px;
margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -14px;
position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkHbOunFxCROheQ-a3fts9eyUE4za0yN_XxELUmd2OCknODGq0JaCcGD5LruB8TsyFk6sjacUoDkKzn8MgUTAQYmX5MTI2s5EumAYpb8wuudzugDE2setWTlGkCTPr4F-nCTSRi8NdpXBj/s14/icon-uparrowsmallwhite.png) top center no-repeat; }

3. Lalu copy kode berikut ini kemudian taruh diatas kode </head>

<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/coda-slider.1.1.1.pack.js"></script>
<script type="text/javascript">
var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
clearInterval(theInt);

if( typeof cur != 'undefined' )
curclicked = cur;

$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');

theInt = setInterval(function(){
$crosslink.removeClass("active-thumb");
$navthumb.eq(curclicked).parent().addClass("active-thumb");
$(".stripNav ul li a").eq(curclicked).trigger('click');
curclicked++;
if( 6 == curclicked )
curclicked = 0;

}, 3000);
};

$(function(){

$("#main-photo-slider").codaSlider();

$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");

$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});

theInterval();
});
</script>

4. Klik Simpan Template.
5. Selanjutnya untuk menampilkan slider kedalam layout blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode ini didalamnya:

<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">

<div class="panel" title="Panel 1">
<div class="wrapper">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6y68s60UFSc3r0dsEBHaJ4RxurtgOb-iUmeklSVubcC1WcitNocM_7CttOsh0i7mTvIxerRMJ7Q8JLcgJ_Gl57VrLG8aPTACdS3tC-VF2jaxh7X_MYLdRVtFfi6mr4jtibI7oMyvTrv3d/w419-h285-no/Faceblog+Evolutions+%25281%2529.jpg" alt="temp" />
<div class="photo-meta-data">
<a href="http://mas-andes.blogspot.com/2013/05/membuat-iphone-zoom-efek-pada-gambar-di.html" target="_blank">jQuery efek iPhone Zooming</a><br />
<span>Tutorial cara membuat efek iphone pada gambar di blog</span>
</div>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgspZAeyqBtdzpkq14Qla-3D5u-12jRcvg_ZvDr8hsifJoJFEmMbG-4WoTczroQs0q-gPjgXDNqNf5C3B9E_c9ehrPC1XyNmNZBvdQWloYkr7hNli3NFshNe8hFcYbmF9qfvYAUDeeGyqDV/w419-h285-no/Faceblog+Evolutions+%25282%2529.jpg" alt="temp" />
<div class="photo-meta-data">
<a href="http://mas-andes.blogspot.com/2013/04/jquery-headline-fitur-post-slider-di.html" target="_blank">jQuery Headline Post Slider</a><br />
<span>Tutorial cara membuat headline slider pada blog</span>
</div>
</div>
</div>      
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwZQ8D3DzZaEK7QVaVdnHvWpiLHvlNPOAK5h2gTOu2ePoiq-j5qfpz_G6y_LaF_zGzIVHkxfgKH9x5AEHePn3qZtrFNmHEEySjv7hAMk45A8Mqa5t-4wYtOVG0Q6Yq0IO5dvXApScW6fnM/w419-h285-no/Faceblog+Evolutions+%25283%2529.jpg" alt="scotch egg" class="floatLeft"/>
<div class="photo-meta-data">
<a href="http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html" target="_blank">jQuery recent post automatic slider</a><br />
<span>Tutorial cara membuat efek recent post slider auto</span>
</div>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihjGhvrVsPlqCSoZl4NFkOOJIEuQgJIqewT60bzywjWIfjgp1BHzgKK7I-xVU15uOpIwfzH8a2yrRxyBJnhQ2GpwEPjbKL4ebDOwm5dWAJ3j51TwA6hkrTDkDCkzU9CTGZ7ckWKRHnD25z/w419-h285-no/Faceblog+Evolutions+%25284%2529.jpg" alt="temp" />
<div class="photo-meta-data">
<a href="http://mas-andes.blogspot.com/2013/02/jquery-gambar-efek-lightbox-pada-blog.html" target="_blank">jQuery efek lightbox di blog</a><br />
<span>Tutorial cara membuat efek lightbox pada gambar di blog</span>
</div>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCrHUSRA5LySbzhEKqTdjnBlDQ5yEE2BkjF7m9CvoEceuFonAs5bbF6RG2lLAGT_ll6sbJ4Ok9EXKHhFWe9jre-WOP3LYdfqjyT3TtMKcLg0MCwxRR_5jLTp3fuWSUlCXWWCHiaOdSrJJz/w419-h285-no/Faceblog+Evolutions+%25285%2529.jpg" alt="temp" />
<div class="photo-meta-data">
<a href="http://mas-andes.blogspot.com/2013/02/jquery-image-efek-kubus-berputar.html" target="_blank">jQuery efek kubus berputar</a><br />
<span>Tutorial cara membuat efek gambar rotate kubus 3D di blog</span>
</div>
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihjGhvrVsPlqCSoZl4NFkOOJIEuQgJIqewT60bzywjWIfjgp1BHzgKK7I-xVU15uOpIwfzH8a2yrRxyBJnhQ2GpwEPjbKL4ebDOwm5dWAJ3j51TwA6hkrTDkDCkzU9CTGZ7ckWKRHnD25z/w419-h285-no/Faceblog+Evolutions+%25284%2529.jpg" alt="scotch egg" />
<div class="photo-meta-data">
<a href="http://mas-andes.blogspot.com/2012/12/memasang-jquery-efek-zoom-bisa-gambar.html" target="_blank">jQuery efek easy zoom pada gambar</a><br />
<span>Tutorial cara membuat efek zoom bisa digeser</span>
</div>
</div>
</div>

</div>
</div>

<a href="#1" class="cross-link active-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZc6KPx3POxbbvAuBI1oFhcFRM3af2q2Y7KQripeBsu726TNjEKjNSUuvgyBRoCL-T02gmxuNm5Ig7vbyp62ATpU2LbOzCMjitcZ3J7Bvx3HQk2DWNux2M2r6u-lQlVYhwhiOV_fh3fub/s60/Faceblog+Evolutions+Thumb+(1).jpg" class="nav-thumb" alt="temp-thumb" /></a>
<div id="movers-row">
<div><a href="#2" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVcMXVQ9YBAcZNe3vPWO_DcdvBC1kFCdtV5ybRx6nNumybo5JSKQPJiwL61mqg-HF_NxIPnTJnOzRvcluQCGfdyEge6uWN416SFpaf2LKxNKsRLEROO3K4LRs3RyAD1LICK61af0sheeN/s60/Faceblog+Evolutions+Thumb+(2).jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#3" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixPJFX6xMduxkNo7dTdn6mODC16EzAy17jJMmDTYJrs-RF-kZXE2KBntpodkLiyly0spB_M_Jypqzg4Czb55GF8yqk7E3G2wHHlwZdvMqJXHebLFoGzDqgVwXdKRrbbdRVXoLc9J_L3ZT_/s60/Faceblog+Evolutions+Thumb+(3).jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#4" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq0wvtV57n2cnYy-Vb1eACFuIO_QlYdtpwqOgEbxE8PldBBq0x-YY5SU8qpz7UtHYDkyvrikoxx1QuahYKH-ypsnse9KfA96Ox_rF1H5HwSWCHpU4qWjrwt9tb_xVTJlWKhwclFg6K5GS-/s60/Faceblog+Evolutions+Thumb+(4).jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#5" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2R1X31A8DEO3Q5SKbysM-y9sfUTOkXm3v_mm4WSuUytvIdYumEXE9wvf4-1ovJhxa16GwpttXR-Wvp83i0yZdMia8StsNIqz9NAuDSPQZE361yaapPqurTPf3rSnT0QdPG1qGRCEm64U/s60/Faceblog+Evolutions+Thumb+(5).jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#6" class="cross-link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq0wvtV57n2cnYy-Vb1eACFuIO_QlYdtpwqOgEbxE8PldBBq0x-YY5SU8qpz7UtHYDkyvrikoxx1QuahYKH-ypsnse9KfA96Ox_rF1H5HwSWCHpU4qWjrwt9tb_xVTJlWKhwclFg6K5GS-/s60/Faceblog+Evolutions+Thumb+(4).jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
</div>

</div>

Keterangan:
Ubah URL gambar dan deskripsi dengan yang di inginkan.

6. Langkah terakhir klik Simpan.