Jquery tab slider ni terletak di atas sekali, boleh jadi pengganti/pelengkap header.
Iku step di bawah:
1- Pergi ke Layout> Add gadget > HTML/Javascript
2- Copy paste kod di bawah:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"/></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/mbt-slider-0-01-jis.js" type="text/javascript"/></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/mbt-slider-0-02-jis.js" type="text/javascript"/></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/mbt-slider-0-03-jis.js" type="text/javascript"/></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'fade',
timeout: 4000,
delay: 0,
speed: 1000,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});
/* ]]> */
</script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRyzersMZX6bzwfYFycPZG5J_LMfnM_Ys0n8BROIk0mOQ7zV1zrFdarMt5PeUeZ-hSdm4ithRgwD8FnwzCkBhM_nFZEn6ixH2T2RbBQ_Cjbw6CBAIdGGizVFTRMxFvJcq4inniJVLmYNM/s1600/featured-pager-24work-1.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX9O741lRL3FFhg6CneGKqcE_7J3MJF4BZj_NjCoZwlnnFZXoIk3JKLN6qP42YKEoJHv2-XmkQqo1EqmTFeFbE3TZFUFisgwnv6ZFrxheEowvyQT-4GLYpN75G0cthm-3Fqxy3y7ohgKw/s1600/featured-prev-24work-1.png) top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwAWH9Zi1St-UHgctaVlAQ3KvPhcZmDq1qwkETPiHTlDHzdIaMNbo0vndUa8B51Wu2F-ZEHibFFdGp0f5mYrlRLAoUFwbys0nAoBJTiDjwDBu_n_CvObOEJLoj9p3QxNrqsFWK_goXEQ/s1600/featured-next-24work-1.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}
</style>
<div class="featuredposts clearfix">
<div class="fp-slides">
<div class="fp-post">
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNrgc65z_theq_UHI37Y57Wx7ImD5pgSJOgLm-JmJ21zzNSNNtk2y74CCIcBXG-p1exNBeaLD5StsMDn0yoo6baEb5xYlAsB_gu-nYtn2zL0W4LazBtE4LUxElFHYSgOA1GAFZPN1yhT-f/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" height="266"/></a></div>
<h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p>
</div>
<div class="fp-post">
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzBNJxXTSB37jwFfnFwTLDr2FoqlaewaiBrdIek9FZ8hh4MAZQS8YIHJSSfdrE8dbzccVLOMf8x1hes1Hf7d2VZB-2BehzxtWO7q7dbiZTyrCZHnYc8fo6Xmuc8REBMVHFi66_Z-5u69al/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" height="266"/></a></div>
<h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p>
</div>
<div class="fp-post">
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVB7lqS2GtSyQ6ENYx7abwk5HOjykMZKZXi47gUwqz2AZLvpJJZ0Arjx-OVtDdQvK7Z37606oW6xSiZb8G9xIBMjqp1L257HmeoJTSLaP5pfplR6pgT-OwOOL0eE4o1NRhn9dCHeaqxhWi/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" height="266"/></a></div>
<h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p>
</div>
<div class="fp-post">
<div class="fp-thumbnail"><a href="#" target="_blank"><img alt="" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYf7YETnKp9L_c2klh68fiR4453jflakub8kOg79ftwS2jKQIHbT9qDa1-j5lqTpXtqtot-L98pPZkyVobsINUiVhCEzVJYeQYTk9trbYW4Ofnin6VPQ24TeXjxmA_IOC58wEE2F6KG6Tv/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" height="266"/></a></div>
<h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p>
</div>
<div class="fp-post">
<div class="fp-thumbnail"><a href="http://24work.blogspot.com/2011/12/how-to-add-animated-flash-clock-to-your.html" target="_blank"><img alt="How To Add Animated Flash Clock To Your Blogger Blog" width="580" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkdEKb0vgdVAmLkhmjltlD9BJe-eCXnXNHUHimpPSEKV36LmSttBXE1jRWxIf9r89zXKUT9q9-vHlnW70RXf5P7BXkLFA0TY0k5ZcnRA-W0xhWQFHskipL3HdSGLix5B7dPRLbRT1fYFF/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" height="266"/></a></div>
<h3 class="fp-title"><a href='#' target='_blank'>Title-of-Post</a></h3> <p> Slide Description [...] </p>
</div>
</div>
<div class="fp-nav clearfix">
<span class="fp-pager"></span>
<a class="fp-next" href="#fp-next"></a>
<a class="fp-prev" href="#fp-prev"></a>
</div>
</div>
3- Edit koding, SAVE!
4- boleh tambah <center> di awal kod, </center> di akhir kod utk posisikan ke tengah.
5- Posisikan di tengah blog/bawah header/atas post layout
6- Save arrangement, VIEW BLOG!
NOTA KAKI/////////////////////////////////
Min Slide=5 (jangan lebih jangan kurang)
ukuran ideal utk header +/- (w:960 h:260)
<--cari kod untuk edit width, height sini-->
.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
*ukuran utk ini kalau nak buat header, (w:980 h:350)
<--tukar kod width, height setiap slider juga-->
<--pastikan semua slider telah diseting dengan photoshop atau aplikasi relevan, mengikut ukuran yang dikehendaki sebelum upload-->
Title-of-Post</a></h3> <p> Slide Description [...] </p>
*boleh tambah atau delete terus kalau tak nak..
*tambah koding mana yang patut.. ;)
Ada lagi 17+ jenis Jquery slider menarik yang boleh dimasukkan dalam blog, klik SINI.
Selamat berkoding :)
Terima kasih baca, sudi-sudilah komen :) .
No comments:
Post a Comment