Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

jQuery Slider Futured Content Blog

Slider Blog
jQuery Slider Futured Content Blogslider 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(http://3.bp.blogspot.com/-ncn2kX0O_hs/UdBzNXzdscI/AAAAAAAAFbQ/GkvDy7hQ-bs/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(http://2.bp.blogspot.com/-kTRNtjmZA4o/UdBzM_7PA4I/AAAAAAAAFbM/8rtfjK6DDJg/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://lh6.googleusercontent.com/-YmOC3wCaJ3M/UdBzJ1tYBpI/AAAAAAAAFaE/WxcFAZ3YZ7k/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://lh4.googleusercontent.com/-q-omq3Kwefw/UdBzKaM0lMI/AAAAAAAAFaU/hTaPEmPJgx4/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://lh6.googleusercontent.com/-yDwXmValNlc/UdBzJ5UQXiI/AAAAAAAAFaI/Z2PBUHYHaDU/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://lh4.googleusercontent.com/-ysZHoIsK-8o/UdBzKrwDnAI/AAAAAAAAFaY/bC-HEpgiOy8/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://lh6.googleusercontent.com/-Opn7jvhnV6Y/UdBzK-I4PMI/AAAAAAAAFak/JaeSbWM1DEc/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://lh4.googleusercontent.com/-ysZHoIsK-8o/UdBzKrwDnAI/AAAAAAAAFaY/bC-HEpgiOy8/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="http://3.bp.blogspot.com/-Ba7GaBkr5uw/UdBzLQ02R7I/AAAAAAAAFao/ptXnJfpQqOM/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="http://4.bp.blogspot.com/-0Z1rywlPIcM/UdBzLSGLSGI/AAAAAAAAFag/iejtjkCP1H0/s60/Faceblog+Evolutions+Thumb+(2).jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#3" class="cross-link"><img src="http://3.bp.blogspot.com/-lj1DsCYcub0/UdBzL937xEI/AAAAAAAAFa0/tnibfyGly7o/s60/Faceblog+Evolutions+Thumb+(3).jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#4" class="cross-link"><img src="http://3.bp.blogspot.com/-peO2ZQ3FDw8/UdBzMR9EPWI/AAAAAAAAFbA/m5Q0LjpCCIc/s60/Faceblog+Evolutions+Thumb+(4).jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#5" class="cross-link"><img src="http://4.bp.blogspot.com/-WLge7JfMJII/UdBzMnRK76I/AAAAAAAAFa8/jJ58uRQxSpQ/s60/Faceblog+Evolutions+Thumb+(5).jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#6" class="cross-link"><img src="http://3.bp.blogspot.com/-peO2ZQ3FDw8/UdBzMR9EPWI/AAAAAAAAFbA/m5Q0LjpCCIc/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.

Berlangganan artikel via email

64 Response to "jQuery Slider Futured Content Blog"

Mas andes., kalau efek yang gambar di sorot link langsung membesar itu efek jquery atau bukan.

Balas

kalo kode ada tulisannya <script> berarti jquery mas, kalo <style> berarti css

Balas

Wah ini widgetnya bagus Mas, kadang kalau [m̲̅][a̲̅][u̲̅] pasang slider, takut loading blog jadi berat Mas.

Balas

Keren mas slider nya, kalau biasanya navigasi slider dibuat berupa angka, bubble, dan semacamnya.. nah yang ini tetep pakai thumbnail yang diambil dari dalam post/link yang ada. Mantab! :)

Balas

keren Om berguna Banget ijin save dan share ya om..??

Balas

makasih banyak... :)
coba dulu yak...
keep posting...

Balas

ini modelnya slider otmatis mas andes... ijin nyimak aja ...

Balas

sayang nya ga ada demonya ya...nyimak aja deh...

Balas

mantap neh sob slidernya
tak coba di blog satu lagi bakalan biki keren neh hehehe

Balas

aduh kok ada tambahan di head segala ya.. padahal mau make loh.

Balas

kalo jquery aku belum terlalu paham nich.,,jadi izin menyimak saja ya :-)

Balas

izin menyimak dulu mas... mamang belum paham nih... mau pasang masih ragu2..

Balas

wah, saya paling gak paham soal javascript, keren mas widgetnya..

Balas

keren mas andes...lagi bw pke hp
jd blm bisa coba nih....hehehe
:)

Balas

keren banget sob,,,makasih tutornya sangat bermanfaat

Balas

Ini memang sangat bagus dan cantik bahkan menarik untuk di letakkan diBlog sobat, saya sangat senang dengan tutorial ini, ijin save dulu sobat
terima kasih banyak sudah berbagi

Balas

keren.. widget dengan sokongan jquery memang slalu memukau,.. sayangnya kekhawatiran menambah beban loading blog masih lebih besar,..

ada trik biar pemasangan widget dengan sokongan jquery yang indah seperti ini tidak memperlambat loading blog gk gan ?

Balas

izin copas kodenya dulu ya mas, mw di coba dulu, terima kasih mas

Balas

Boleh langsung dicoba nih... bikin berat blog nggak sob nih...

Balas

izin nyimak sob,,,
msh pemula

Balas

Nah...ilmu nih :)

Balas

slidernya keren mas, pengen nyoba takut lelet blognya
makasih udah berbagi

Balas

The Best of Autosurf AutoTraffic Exchange Only 7 Seconds Autosurf Web, Daftar ya http://www.trafikid.com

Balas

baru tahu sekarang nih,sebelumnya edit edit saja,langsung save,ternyata itu toh perbedaanya,,,,,,

Balas

keren bro tutornya,,,jadi kepengen nyoba nih hehe

Balas

kereen mas,,punya saya kok tidak otomatis slide kenapa ya mas,,musti di sentuh dulu baru berganti slide nya

Balas

nggak berat kok mas budi

Balas

wah kyanya keren tuh brow
thanks bro udah sharing
ijin nyimak :D
mampir bro
arie-apthanta.blogspot.com

Balas

mau coba tapi takut ngaruh beratnya gan :D hehe .

Balas

mau pasang widget tersebut namun takut akan memperberat loading blog plus emang belum terlalu ngerti css maupun jquery.

Balas

mau coba pasang kok di blog mamang ndak ada "/head" haduh jadi bingung nih mas.... gimana ya

Balas

waduh ga sempet nih utak-atik beginian, tapi simpen aja dulu...

Balas

saya juga baru tahu perbedaannya ternyata disitu. Emang selalu seperti itu mas?

Balas

saya juga baru tahu ternyata letak perbedaanya disitu. Emang selalu seperti itu mas?

Balas

itukan js nya banyak gan, kalau di pakein ke blog ane bisa jadi lemot gak gan?

Balas

Hi wish a nice day you. LG Fotis from Greece. http://fotisbazakas.blogspot.gr

Balas

Waduuhh banyak banget js-nya, apa gk ngaruh ke loading?

Balas

Ya perbedaannya banyak mas, Cuma singkatnya seperti itu. Bahasa awamnya untuk memasukaan kode harus didahului dengan keterangannya. <style> menandakan kode tersebut CSS, dan di akhiri dengan tag penutup </style>. Sebagai contoh:
<style>
........bla bla bla....
</style>

Atau bisa juga:

<style type="text/css">
........bla bla bla....
</style>

Atau bisa juga dengan <link rel="stylesheet" type="text/css" href="file.css/url.css" /> jika kode tersebut didalam satu bundle file. Namun jika CSS tersebut dimasukan kedalam template blog didalam ]]></b:skin> tidak perlu dikasih kode <style>...</style> gapapa mas.

Sedangkan untuk jquery / javascript selalu didahului dengan tag <script> dan diakhiri dengan tag penutup </script>. Contoh:

<script type='text/javascript'>
........bla bla bla....
</script>

Atau bisa juga:

<script type="text/javascript" src="file.js/url.js"/>
Atau
<script type="text/javascript" src="file.js/url.js"></script>

Singkatnya demikian semoga bermanfaat dan terimakasih atas kunjungannya dari sahabat semua.
Keep smile and happy blogging

Balas

Slidernya ok juga nih mas... kapan-kapan mau nyoba ah... makasih mas udah share tutorialnya, sukses selalu :)

Balas

mas Andes Rizky Nugroho, gimana caranya tetep konsistensi BLOGGING? dan memberikan manfaat buat pembaca, makasi ya

#BUTUH_NASEHAT

Balas

wah keren nih gan, ntar akan saya coba, hehehe...
btw, gan tukar link bisa?link nya agan saya taruh di sidebar...:D

Balas

untuk menjaga konsistensi ya tergantung dari diri sendiri mas, blogging kan banyak pilihan/tujuan. setiap blogger pasti punya niat/tujuan yang berbeda. ada yang sekedar cari popularitas, ada yang ngikutin trend, hanya sekedar hoby, dll. jika niat/tujuan sudah tertanam dari awal tentu saat membuat konten tidak hanya sekedar menulis. visitor sampe mau berlangganan bahkan menjadi pelanggan setia pasti hanya ingin membaca kualitas konten yang bermanfaat. jadi kita bisa berpikir bagaimana untuk memenuhi kebutuhan visitor supaya mereka dapat membaca konten yang kita posting perharinya dengan kulitas konten yang membuat mereka bisa bermanfaat. jadi blogging tidak hanya sekedar posting, melainkan berusaha untuk memenuhi kebutuhan pelanggan dan menyenangkan mereka dengan konten yang sedang mereka cari atau konten permanen yang bisa dibutuhkan kapan saja dan tidak hanya beberapa saat.

menurut saya begitu mas, mungkin masih banyak kekurangan dari yang saya uraikan diatas mas kharis bisa juga minta pendapat sahabat blogger yang lain. atau bisa juga dengan melanjutkan url dibawah:
http://mas-andes.blogspot.com/2013/03/5-tips-kiat-memulai-blog-yang-sukses.html
http://mas-andes.blogspot.com/2013/02/6-tips-untuk-menulis-konten-blog-terbaik.html
http://mas-andes.blogspot.com/2013/03/5-tips-meningkatkan-pelanggan-blog.html

Balas

lansung mencoba mempraktekan ke blog satunya biar lebih paham dan tahu hasil akhirnya.

Balas

iya mbak saya pasang juga linknya mbak alya di blogroll. terimakasih atas kerjasama dan kunjungannya :)

#all@ terimakasih kasih juga buat sahabat blogger dari atas sampai bawah dan yang belum berkunjung :) keep smile and happy blogging

Balas

salam silaturrahmi yea bang,,
info yang menarik ni,,
oa salam sebagai pendatang baru juga yea bang :)

Balas

kelihatannya bagus juga nih sob, kayaknya bikin berat blog jika terlalu banyak penggunaan jquery

Balas

hmmmm manteng dulu deh ya mas ,, saolnya agak susah pahamin yang kaya bgnian .
hahaha

Balas

Blog flying malam Mas Andes :) Happy Blogging!

Balas

Wah wah ternyata admin master blog juga nich bisa main jquery segala. Bagus infonya. Saya tunggu dech info lainnya

Balas

kemana nih gan ....
tongkrongan rame nih.

Balas

wah berubah hijau ni tamplatenya

Balas

saya save dulu.. ntar malam di praktekin.. hehe
salam kenal dan terima kasih untuk artikel nya :)

Balas

Mantab Mas....Mohon ijin saya Copas nggih Mas. makasih

Balas

Maaf Mas mau tanya...setiap kali saya save scripnya kok gak mau ya...selalu ada perubahan pada tulisan <script type="text/javascript" src= yg mana jadi <script src= mohon penjelasannya. makasih

Balas

antara:

<script type="text/javascript" src="url.js"></script>

atau

<script src="url.js" type="text/javascript"></script>

atau

<script src="url.js"></script>

itu sama saja mbak, intinya type="text/javascript" hanya sebuah keterangan saja. tidak dikasih juga tidak apa2.

Balas

ini gak support sama template borneo yg di pake saya -__- .apa saya yg salah make.

Balas

kalo untuk template udah buatan perlu sedikit menyesuaikan lagi miz, tapi kalo template masih standar blogger bisa langsung terapkan :) biar kamu puyeng mikir *hahaha

Balas

benerin dong, kasi kode yang sesuai template aku ahaha.. ditunggu loh :p .
aku pengen make ini ahaha.

Balas

huuuuumt aku sudah berhasil memasangnya di blog aku mas, pi kok gambar thumbnail kecil itu gak ikut otomatis berubah yah, kira kira kenapa yah

Balas

iya mas memang ga otomatis, buat ngrubah thumbnya pada class="cross-link active-thumb" ganti url gambarnya

Balas

mo nanya mas,ada script gallery foto buat dipostingan g mas?? sya kan punya web,nah isinya gallery foto, sya pingin foto2 postingan sya tu g panjang ke bawah gitu,jdi biar tampilannya tu kaya slidshow gitu tpi yg manual g yg pindah2 otomatis,kode yg lgsung di postingan aja g usah pake edit html gitu..
kira2 klo ada tlongin mas kasih scriptnya,btw template baru nih,biasaya ijo,kok skrang jdi biru + acak2an lgi navigasinya,hehehw tpi keren kok,hew
mkasih be4,tlg solusinya mas..

Balas

masukin semua kode ini ke posting mode HTML<style type='text/css'>
.slideshow{position:relative;width:100%;height:250px;border:5px solid #f1f1f1;margin:20px}
.slideshow img{position:absolute;top:0;left:0;z-index:1;background:#fff;width:100%;height:250px}
ul.galeri{position:absolute;bottom:12px;right:4px;list-style:none;z-index:2}
ul.galeri li{display:inline;margin:0;padding:0}
ul.galeri li a,ul.galeri li a:visited{display:block;float:left;background:#e5e5e5;margin-right:1px;color:#000;text-decoration:none;cursor:pointer;padding:4px 8px}
ul.galeri li a:hover,ul.galeri li a:visited:hover{background:#666;color:#fff}
ul.galeri li a.current{background:#1E90FF;color:#fff}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){var imgWrapper=$('.slideshow > img');imgWrapper.hide().filter(':first').show();$('ul.galeri li a').click(function(){if(this.className.indexOf('current')==-1){imgWrapper.hide();imgWrapper.filter(this.hash).fadeIn(500);$('ul.galeri li a').removeClass('current');$(this).addClass('current')}return false})});
</script>

<div class="slideshow">
<img id="slide1" src="https://lh3.googleusercontent.com/DSRxr-nnwRISU7rCCoj12-RnD53BFK-cfnfIr5tCI14=w600-h300-no" alt="Gambar 1" />
<img id="slide2" src="https://lh3.googleusercontent.com/xvWHYzsBk3-F5pCmaeUAQ2H5DvPfelTtgLR40CV6IZE=w600-h300-no" alt="Gambar 2" />
<img id="slide3" src="https://lh3.googleusercontent.com/JpRl4FY6_U9VSw-hrUgJpuqfEbk3ec9OdydP9lIqjQ8=w600-h300-no" alt="Gambar 3" />
<img id="slide4" src="URL-GAMBAR-BERIKUTNYA" alt="Gambar 4" />
<img id="slide5" src="URL-GAMBAR-BERIKUTNYA" alt="Gambar 5" />
<ul class="galeri">
<li><a class="current" href="#slide1">1</a></li>
<li><a href="#slide2">2</a></li>
<li><a href="#slide3">3</a></li>
<li><a href="#slide4">4</a></li>
<li><a href="#slide5">5</a></li>
</ul>
</div>

tampilannya tinggal sesuaikan aja

Balas

oke makasih solusinya,sukses selalu buat mas andes.. :)

Balas

mantap sob.....
http://kunzreative.blogspot.com

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "jQuery Slider Futured Content Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode