Pasang slideshow gambar di bawah header

Seru memang lihat slide show yg ada di komputer kita tapi gimana kalo itu bisa di pasang di blog?Nah ,kali ini q akan bahas tentang Slideshow yg ada di bawah heder blog...

Kode css yang akan saya berikan tidak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan sendiri
.

1. Login dulu di blogger.
2. Masuk ke Rancangan >> Edit HTML.
3. Jangan lupa klik Expand Template Widget karena akan membuat anda jadi pusing dengan kode yang panjang.
4. Copy paste kode berikut diatas kode ]]></b:skin>
1. /* SLIDESHOW */ 2. #slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:660px;height:660px;position:relative;overflow:hidden} 3. #s3sliderContent{width:660px;position:absolute;top:0;margin-left:0} 4. .s3sliderImage{float:left;position:relative;display:none} 5. .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:660px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px} 6. .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px} 7. .s3sliderImage span a.featured-title:hover{color:#999} 8. .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888} 9. .s3sliderImage span a:hover{color:#555}
5. Kemudian copas kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/> <script type='text/javascript'> <!--//--><![CDATA[//><!-- (function($){ $.fn.s3Slider = function(vars) { var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) { $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); }); }); var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); } } var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1 currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } } } makeSlider(); }; })(jQuery); //--><!]]></script> <script type='text/javascript'> $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 4000 }); }); </script>
6. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan anda copas kode berikut setelah kode <div id='main-wrapper'>
<div id='slider-holder'> <div id='s3slider'> <ul id='s3sliderContent'> <li class='s3sliderImage' style='display: list-item;'> <a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuiSFF1YTVzSYE3-fxHS3iYL_wqTM_swcmbNXj9WeX9KSpDAsT52-2CYPfNXvJx400HeknaOIiINQ_Q_V8_I77llEtM0lYRsYeCRSShYSOVEnTIRTpW1mUXACb7EGXoS3sityjiDnK7yQ/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a> <span style='display: block;'> <a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/> Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award </span> </li> <li class='s3sliderImage' style='display: none;'> <a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjS12EoobqxmaKXJlOJIbyAGfAgsbS37h3tHE34RbOvuXYZ6F__ylBH8ymSSJuUD1FA6Db04ZCQMOJRekyWE4IROM_8pZe33I4cCJssA0sorbMFxXMJkAkACrZlLqu5GWcdy-i_NqhlLc/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a> <span style='display: none;'> <a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/> Nggak usah dijelaskan udah ada tulisanya diatas </span> </li> <li class='s3sliderImage' style='display: none;'> <a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp3GAIdjYtl_Akxw05g0Jwa0peT9bjYZO0RyYaaV2fND4uY2-vAYGEXn_xNOq4S5FSO3EWuZzHM3Ph2d3HI5aCkI1MYHHQ5kPeMayB4pp8OLzUp-4FNihH4AnQXK96yclphPARHuEJtdI/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a> <span style='display: none;'> <a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/> Ini orangnya yang.............. </span> </li> <li class='s3sliderImage' style='display: none;'> <a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH5Sa0Wo6dO_ZXDPsRMimQDlU7klL1uUnIxlw00YWZ4NOu3oaLy9Ob_22kDt8pm2lzWM2Uzcm89dVyU2YC3mdCpeHT_YNB_hNNwC33c9MwRJHEqDI0YuIJr4G9Ddpxem6Xx0LdB6Z-lcI/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a> <span style='display: none;'> <a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/> Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan </span> </li> <li class='s3sliderImage' style='display: none;'> <a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG9_40CJMMtH5sML-Q22B2S69z3p3QrBfgqKnFe6PnLzyaqq_7uzYgQG1Ste4M-LChojUCLn5rF2uTAUUkrHnRWPLl316n34y8aqJpY9hsb1FmNzuQyGTKcFdzPEbjVAEHH3oaRZL1FMQ/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a> <span style='display: none;'> <a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/> Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya.... </span> </li> <li class='clear s3sliderImage'/> </ul> </div> </div>
7. Simpan Template

Keterangan :

• Perhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda.
• Perhatikan juga angka -20px pada kode css-nya, saya gunakan margin-left:-20px karena menyesuaikan dengan demo template yang saya gunakan. 
• Tulisan Di postingan ini ganti dengan deskripsi tentang gambar anda.
• Kode ini masih menggunakan kode gambar saya, adalah kode url untuk gambar yang sudah anda upload sebelumnya.

Gimana Kawand ?mbulet opo mumet?paham pasti...terima kasih kunjunganya...

Pokok Media

Tweet

Artikel terkait: