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
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='https://sites.google.com/site/comacido/bundle/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.blogpanas123.com/";
</script>
<script src="https://sites.google.com/site/comacido/bundle/tinyplay.js" type="text/javascript"></script>
Ganti url www.blogpanas123.com dengan url blog sobat.
7. save dan selesai.
Welcome to my blog!!!
