Untuk menampilkan gambbar di blogger dengan tampilan seperti di atas, dapat dilakukan dengan beberapa langkah, berikut langkah-langkahnya:
Pertama, siapkan gambar yang akan digunakkan dengan ukuran yang sama. Height & width suatu gambar,sama dengan gambar yang lainnya. upload gambar tersebut di situs hosting gratisan, biasanya saya pake picasa web album.
kemudian masuk ke blogger anda, pada menu rancangan cari edit html, centang pada expand template widget,
cari script ini:
</head>
Note: untuk mempermudah pencarian gunakkan (Ctr+f).
setelah menemukkan kode di atas, masukkan kode di bawah ini tepat di atas kode tadi,
<script type='text/javascript'>
//<![CDATA[
(function($) {
var div = document.createElement('div'),
divStyle = div.style,
support = $.support;
support.transform =
divStyle.MozTransform === ''? 'MozTransform' :
(divStyle.MsTransform === ''? 'MsTransform' :
(divStyle.WebkitTransform === ''? 'WebkitTransform' :
(divStyle.OTransform === ''? 'OTransform' :
false)));
support.matrixFilter = !support.transform && divStyle.filter === '';
div = null;
$.cssNumber.rotate = true;
$.cssHooks.rotate = {
set: function( elem, value ) {
var _support = support,
supportTransform = _support.transform,
cos, sin,
centerOrigin;
if (typeof value === 'string') {
value = toRadian(value);
}
$.data( elem, 'transform', {
rotate: value
});
if (supportTransform) {
elem.style[supportTransform] = 'rotate('+ value +'rad)';
} else if (_support.matrixFilter) {
cos = Math.cos(value);
sin = Math.sin(value);
elem.style.filter = [
"progid:DXImageTransform.Microsoft.Matrix(",
"M11="+cos+",",
"M12="+(-sin)+",",
"M21="+sin+",",
"M22="+cos+",",
"SizingMethod='auto expand'",
")"
].join('');
// From pbakaus's Transformie http://github.com/pbakaus/transformie
if(centerOrigin = $.rotate.centerOrigin) {
elem.style[centerOrigin == 'margin' ? 'marginLeft' : 'left'] = -(elem.offsetWidth/2) + (elem.clientWidth/2) + "px";
elem.style[centerOrigin == 'margin' ? 'marginTop' : 'top'] = -(elem.offsetHeight/2) + (elem.clientHeight/2) + "px";
}
}
},
get: function( elem, computed ) {
var transform = $.data( elem, 'transform' );
return transform && transform.rotate? transform.rotate : 0;
}
};
$.fx.step.rotate = function( fx ) {
$.cssHooks.rotate.set( fx.elem, fx.now+fx.unit );
};
function radToDeg( rad ) {
return rad * 180 / Math.PI;
}
function toRadian(value) {
if(value.indexOf("deg") != -1) {
return parseInt(value,10) * (Math.PI * 2 / 360);
} else if (value.indexOf("grad") != -1) {
return parseInt(value,10) * (Math.PI/200);
}
return parseFloat(value);
}
$.rotate = {
centerOrigin: 'margin',
radToDeg: radToDeg
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function(){
var slideShow = $('#slideShow'),
ul = slideShow.find('ul'),
li = ul.find('li'),
cnt = li.length;
// As the images are positioned absolutely, the last image will be shown on top.
// This is why we force them in the correct order by assigning z-indexes:
updateZindex();
if($.support.transform){
// Modern browsers with support for css3 transformations
li.find('img').css('rotate',function(i){
// Rotating the images counterclockwise
return (-90*i) + 'deg';
});
// Binding a custom event. the direction and degrees parameters
// are passed when the event is triggered later on in the code.
slideShow.bind('rotateContainer',function(e,direction,degrees){
// Enlarging the slideshow and photo:
slideShow.animate({
width : 510,
height : 510,
marginTop : 0,
marginLeft : 0
},'fast',function(){
if(direction == 'next'){
// Moving the topmost image containing Li at
// the bottom after a fadeOut animation
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
}
else {
// Showing the bottomost Li element on top
// with a fade in animation. Notice that we are
// updating the z-indexes.
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
}
// Rotating the slideShow. css('rotate') gives us the
// current rotation in radians. We are converting it to
// degress so we can add 90 or -90 to rotate it to its new value.
slideShow.animate({
rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
},'slow').animate({
width : 490,
height : 490,
marginTop : 10,
marginLeft : 10
},'fast');
});
});
// By triggering the custom events below, we can
// show the previous / next images in the slideshow.
slideShow.bind('showNext',function(){
slideShow.trigger('rotateContainer',['next',90]);
});
slideShow.bind('showPrevious',function(){
slideShow.trigger('rotateContainer',['previous',-90]);
});
}
else{
// Fallback for Internet Explorer and older browsers
slideShow.bind('showNext',function(){
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
});
slideShow.bind('showPrevious',function(){
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
});
}
// Listening for clicks on the arrows, and
// triggering the appropriate event.
$('#previousLink').click(function(){
if(slideShow.is(':animated')){
return false;
}
slideShow.trigger('showPrevious');
return false;
});
$('#nextLink').click(function(){
if(slideShow.is(':animated')){
return false;
}
slideShow.trigger('showNext');
return false;
});
// This function updates the z-index properties.
function updateZindex(){
// The CSS method can take a function as its second argument.
// i is the zero-based index of the element.
ul.find('li').css('z-index',function(i){
return cnt-i;
});
}
});
</script>
kemudian lettakan kode css ini setelah setelah kode tadi
<style type="text/css">
/* Styling the slideshow */
#slideShowContainer{
width:510px;
height:510px;
position:relative;
margin:120px auto 50px;
}
#slideShow{
position:absolute;
height:490px; /*ganti untuk mennyesuaikan dengan height gambar yang anda punya*/
width:490px; /*ganti untuk mennyesuaikan dengan width gambar yang anda punya*/
background-color:#fff;
margin:10px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#slideShow ul{
position:absolute;
top:15px;
right:15px;
bottom:15px;
left:15px;
list-style:none;
overflow:hidden;
}
#slideShow li{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lrPMiNY34nufnnJdNacz_bUJdA6TNaTxnYGQJmrVJx-ySDSmDUwPRDPfcqu1qjfrp_pRgZt_r7WtvWXolicCeZYsr45kav5ZqubDkhTuXi5sV7HoIZ37cvGrDOy7D7IOy9_LviFTK6iQ/') no-repeat;/*url gambbar button*/
position:absolute;
top:50%;
margin-top:-21px;
}
#previousLink{
left:-38px;
}
#previousLink:hover{
background-position:bottom left;
}
a#nextLink{
right:-38px;
background-position:top right;
}
#nextLink:hover{
background-position:bottom right;
}
</style>
untuk memanggil slideshow tadi pastekan script ini di gadget/postingan anda. agar gambar anda dapat muncul, copy dan pastekkan link gambar yang sudah di upload tadi
dan ganti link gambar yang sudah ada di bawah ini.
<div id="slideShowContainer">
<div id="slideShow">
<ul>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVIeObG46S7JWE2MScXhUKhQ6XWpSsv9EeXzT2xIpe4rZa1sBh1QJytFf5-_uWP9f67e79Qlz4EeAbrEtAKDxICKDp677SdQImZQ-rBGWb8eMFlFxZm-lt2TiMzeOPI2wmVXBHGYs7gVxT/" width="100%" alt="Fish" /></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXQymmJN2odgavUNkfBITJI_WvjsBRigpPhBuCBXwauEw6dBELkhyphenhyphenO5y9xL6wxHJvkAZMWejaxQJi56EBRpxt6uXjDVgSrB530bhaaOTowHQELsMIDDURJu6O81IXqROfajOEclYi-OYcM/" width="100%" alt="Ancient" /></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZGQwa5dSkeWyBTY1c0rsVwTJ9pEZTwoyBtlzsBWZ4FCLBhQQCQIyKj_ZLkAWB1OB79X5YacoGJoLijjy4iPyJX2mF1KbuEsLAeDDk9TzXrpwEtbOAfVVTVyFeFd5MLxmUnuElCL1xoWi/" width="100%" alt="Industry" /></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo5t8sy_cF3vsO4iGEIRU8JkQnt2LmZt1rgpsm1fDdY2OaYwWLD_qYQe0e2RW9ujqynFywlBXkbKW5Z7gGVfOVTBaibbm2RnV-MdpmZKGirbW3k-T2hgZZVelA7tRK5641MyVZL_FzRS7-/" width="100%" alt="Rain" /></li>
</ul>
</div>
<a id="previousLink" href="#">+</a>
<a id="nextLink" href="#">-</a>
</div>
