Saya sebut Slider Tiny Carousel karena bentuknya gambar mini, post berupa gambar berjajar
dan bergerak slide.
Jika sobat belum mengetahui cara membuat slider tiny carousel,
simak berikut instan caranya, tinggal copast...hoho
1. Login blog
2. Template dan centang expand widget template
3. Letakkan kode css berikut diatas ]]></b:skin>
#tinycarousel{width:300px;height:1%;overflow:hidden;font-size:10px;text-align:center;color:#666;margin:0 auto;}#tinycarousel .viewport{height:180px;overflow:hidden;position:relative;filter:alpha(opacity=70);opacity:0.7;background:#111111;}#tinycarousel .viewport:hover{filter:alpha(opacity=100);opacity:1;}#tinycarousel ul.overview{list-style:none!important;position:absolute;width:240px;left:0;top:0;margin:0!important;padding:0!important;}#tinycarousel ul.overview li{list-style:none!important;float:left;height:auto!important;width:145px;background-color:#111;color:#51241b;border:3px solid #232323;margin:2px 0 2px 3px !important;padding:0!important;}#tinycarousel .inner{height:150px;overflow:hidden;margin:10px;}#tinycarousel img{width:100px;height:130px;outline:none;border:1px solid #000;border-bottom:1px solid #444;border-right:1px solid #444;margin:0;padding:0;}#tinycarousel h6{font-size:8px;color:#999;text-shadow:1px 1px 1px #000;backgorund:transparent;overflow:hidden;margin:5px 0;padding:0;}#tinycarousel h6 a{color:#999;text-decoration:none;border:none;}#tinycarousel h6 a:hover{color:#0dc3ff}
#tinycarousel #tinyarrow{display:block;background:#111;overflow:hidden;margin:5px 0 0;padding:5px;border:3px solid #232323;}
#tinycarousel #tinyarrow .buttons{background-color:#444;border:none;outline:none;display:block;overflow:hidden;position:relative;float:left;color:#eee;text-decoration:none;font-weight:700;margin:0 1px;padding:2px 5px;}
#tinycarousel #tinyarrow .disable{display:none;}
#tinycarousel #tinyarrow .buttons:active{background-color:#900;position:relative;top:1px;}
4. Letakkan kode script berikut di atas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#tinycarousel').tinycarousel({
start : 1,
display : 1,
axis : 'x',
interval : true,
intervaltime: 3000,
animation : true,
duration : 1000,
callback : null
});
});
//]]>
</script>
<script src='http://cybermigcarousel.googlecode.com/files/tinycarousel.js' type='text/javascript'/>
jika sobat sudah memasang script jquery yang saya tandai warna merah diatas versi berapapun, sobat tidak perlu lagi meletakkan script jquery lagi. tinggal sobat copast script tanpa scipt kode jquery.
5. save template.
Langkah selanjutnya,
6. masuk ke layout rancangan blog sobat. add gadget "html/javascript dan letakkan kode berikut:
<script type="text/javascript">
var showPostDate_g = true,
showComm_g = true,
slideOpenNewTab = true,
idMode = true,
slidebyLabels = false,
slideLabelName = "label",
pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
text = "Comment",
numposts_g = 12,
numchars_g = 100,
showText = "Show",
postText = "Posts",
tinyprevNav = "<",
tinynextNav = ">",
home_page = "http://www.cybermig.com/";
</script>
<script src="http://cybermigtiny.googlecode.com/files/tinyplay.js" type="text/javascript"></script>
Ganti url www.cybermig.com dengan url blog sobat.
7. save dan selesai.
Semoga tutorial Cara Membuat Slider Tiny Carousel pada Sidebar Blog bermanfaat.
Comments
Post a Comment