Berikut adalah cara membuat berita gambar dengan javascript seperti gambar disamping :
- Buka akun Blogger sobat
- Lalu cari kode ]]></b:skin> dan tempatkan kode dibawa ini diatasnya
/* Image Slideshow */
#s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:220px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
#s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}
.s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}
.s3sliderImage span{position:absolute; /* important */left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */bottom:0; /*if you puttop:0; ->the box with text will be shown at the top of the i
- Cari kode </head> letakkan kode dibawah ini diatas kode </head> tadi
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var cssdropdown={disappeardelay:250,dropdownindicator:'<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWj7ZzfjX6mVsnJ7KYHwfrj9TOpGckZvaUEIdb-ncNI3vyvBUO1WOkyi7GlgaK-NCfZwLkg-y3tbbqS0wx-CBajVyhgsdvOZYbPWrP5-ZwHmIpYOczjzNl0uZ_yxdK_uNOxii7InwBCGU/s1600/panah+kucobadotcom.jpg" border="0" />',enablereveal:[true,8],enableiframeshim:1,dropmenuobj:null,asscmenuitem:null,domsupport:document.all||document.getElementById,standardbody:null,iframeshimadded:false,revealtimers:{},getposOffset:function(d,c){var b=(c=="left")?d.offsetLeft:d.offsetTop;var a=d.offsetParent;while(a!=null){b=(c=="left")?b+a.offsetLeft:b+a.offsetTop;a=a.offsetParent}return b},css:function(b,a,c){var d=new RegExp("(^|\\s+)"+a+"($|\\s+)","ig");if(c=="check"){return d.test(b.className)}else{if(c=="remove"){b.className=b.className.replace(d,"")}else{if(c=="add"&&!d.test(b.className)){b.className+=" "+a}}}},showmenu:function(b,a){if(this.enablereveal[0]){if(!b._trueheight||b._trueheight<10){b._trueheight=b.offsetHeight}clearTimeout(this.revealtimers[b.id]);b.style.height=b._curheight=0;b.style.overflow="hidden";b.style.visibility="visible";this.revealtimers[b.id]=setInterval(function(){cssdropdown.revealmenu(b)},10)}else{b.style.visibility="visible"}this.css(this.asscmenuitem,"selected","add")},revealmenu:function(f,d){var e=f._curheight,b=f._trueheight,a=this.enablereveal[1];if(e<b){var c=Math.min(e,b);f.style.height=c+"px";f._curheight=c+Math.round((b-c)/a)+1}else{f.style.height="auto";f.style.overflow="hidden";clearInterval(this.revealtimers[f.id])}},clearbrowseredge:function(f,d){var c=0;if(d=="rightedge"){var e=document.all&&!window.opera?this.standardbody.scrollLeft+this.standardbody.clientWidth-15:window.pageXOffset+window.innerWidth-15;var b=this.dropmenuobj.offsetWidth;if(e-this.dropmenuobj.x<b){c=b-f.offsetWidth}}else{var a=document.all&&!window.opera?this.standardbody.scrollTop:window.pageYOffset;var e=document.all&&!window.opera?this.standardbody.scrollTop+this.standardbody.clientHeight-15:window.pageYOffset+window.innerHeight-18;var g=this.dropmenuobj._trueheight;if(e-this.dropmenuobj.y<g){c=g+f.offsetHeight;if((this.dropmenuobj.y-a)<g){c=this.dropmenuobj.y+f.offsetHeight-a}}}return c},dropit:function(c,b,a){if(this.dropmenuobj!=null){this.hidemenu()}this.clearhidemenu();this.dropmenuobj=document.getElementById(a);this.asscmenuitem=c;this.showmenu(this.dropmenuobj,b);this.dropmenuobj.x=this.getposOffset(c,"left");this.dropmenuobj.y=this.getposOffset(c,"top");this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(c,"rightedge")+"px";this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(c,"bottomedge")+c.offsetHeight+1+"px";this.positionshim()},positionshim:function(){if(this.iframeshimadded){if(this.dropmenuobj.style.visibility=="visible"){this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px";this.shimobject.style.height=this.dropmenuobj._trueheight+"px";this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px";this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px";this.shimobject.style.display="block"}}},hideshim:function(){if(this.iframeshimadded){this.shimobject.style.display="none"}},isContained:function(a,b){var b=window.event||b;var d=b.relatedTarget||((b.type=="mouseover")?b.fromElement:b.toElement);while(d&&d!=a){try{d=d.parentNode}catch(b){d=a}}if(d==a){return true}else{return false}},dynamichide:function(a,b){if(!this.isContained(a,b)){this.delayhidemenu()}},delayhidemenu:function(){this.delayhide=setTimeout("cssdropdown.hidemenu()",this.disappeardelay)},hidemenu:function(){this.css(this.asscmenuitem,"selected","remove");this.dropmenuobj.style.visibility="hidden";this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px";this.hideshim()},clearhidemenu:function(){if(this.delayhide!="undefined"){clearTimeout(this.delayhide)}},addEvent:function(b,c,a){if(b.addEventListener){b.addEventListener(a,c,false)}else{if(b.attachEvent){b.attachEvent("on"+a,function(){return c.call(b,window.event)})}}},startchrome:function(){if(!this.domsupport){return}this.standardbody=(document.compatMode=="CSS1Compat")?document.documentElement:document.body;for(var d=0;d<arguments.length;d++){var g=document.getElementById(arguments[d]).getElementsByTagName("a");for(var b=0;b<g.length;b++){if(g[b].getAttribute("rel")){var a=g[b].getAttribute("rel");var c=document.getElementById(a);this.addEvent(c,function(){cssdropdown.clearhidemenu()},"mouseover");this.addEvent(c,function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(c,function(){cssdropdown.delayhidemenu()},"click");try{g[b].innerHTML=g[b].innerHTML+" "+this.dropdownindicator}catch(f){}this.addEvent(g[b],function(i){if(!cssdropdown.isContained(this,i)){var h=window.event||i;cssdropdown.dropit(this,h,this.getAttribute("rel"))}},"mouseover");this.addEvent(g[b],function(h){cssdropdown.dynamichide(this,h)},"mouseout");this.addEvent(g[b],function(){cssdropdown.delayhidemenu()},"click")}}}if(this.enableiframeshim&&document.all&&!window.XDomainRequest&&!this.iframeshimadded){document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>');this.shimobject=document.getElementById("iframeshim");this.shimobject.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";this.iframeshimadded=true}}};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.s3Slider=function(h){var e=this;var l=(h.timeOut!=undefined)?h.timeOut:4000;var g=null;var d=null;var k=true;var f=false;var i=a("#"+e[0].id+"Content ."+e[0].id+"Image");var b=a("#"+e[0].id+"Content ."+e[0].id+"Image span");i.each(function(m){a(i[m]).mouseover(function(){f=true});a(i[m]).mouseout(function(){f=false;c(true)})});var c=function(m){var n=(m)?(l/2):l;n=(k)?10:n;if(i.length>0){d=setTimeout(j,n)}else{console.log("Poof..")}};var j=function(){g=(g!=null)?g:i[(i.length-1)];var m=jQuery.inArray(g,i)+1;m=(m==i.length)?0:(m-1);var n=a(e).width()*m;if(k==true){if(!f){a(i[m]).fadeIn((l/6),function(){if(a(b[m]).css("bottom")==0){a(b[m]).slideUp((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}else{a(b[m]).slideDown((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}})}}else{if(!f){if(a(b[m]).css("bottom")==0){a(b[m]).slideDown((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}else{a(b[m]).slideUp((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}}}};j()}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3000
});
});
</script>
- Setelah selesai menempatkan kode diatas, silahkan kopi kode dibawah ini
<b:if cond='data:blog.pageType != "item"'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage'>
<a href='http://idienrohidin.blogspot.com/2011/06/lorenzo-incar-kemenangan-perdana-di.html'>
<img height='220' src='http://i.okezone.com/content/2011/06/29/38/473918/edVonE2ZTt.jpg' width='300'/>
<span>MUGELLO - Jorge Lorenzo enggan meratapi kegagalannya di MotoGP Belanda, pekan lalu. </span></a></li>
<li class='s3sliderImage'>
<a href='http://idienrohidin.blogspot.com/2011/06/timothy-sensinyi-cahaya-hidayah-terbit.html'>
<img height='220' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcepAm9Ru-_XrdijjpQx5bTybPpBxr1ml2MDOC20PQFs_uW7GWv3-posLzq-BK7JABHHYuNBZaePOsi2MMvS-Olq9B7RlxdttqnfNcjL9JolGNpig38iI4JAO6IupFNCcO4wNmoci4EoI/s1600/optimized-5558252976_313c2f40b5_z.jpg' width='300'/>
<span>Timothy berasal dari Kerajaan Lesotho, sebuah negara kecil yang terletak tepat di sebelah Utara negara Afrika Selatan.</span></a></li>
<li class='s3sliderImage'>
<a href='http://idienrohidin.blogspot.com/2011/06/fatwa-fatwa-penting-tentang-taubat.html'>
<img height='220' src='http://www.deamira.com/wp-content/uploads/2011/05/taubat.jpg' width='300'/>
<span>Engkau mungkin berkata, “Aku ingin bertaubat, tetapi aku tidak mengetahui sesuatu pun tentang hukum-hukum berkenaan dengan taubat. </span></a></li>
<li class='s3sliderImage'>
<a href='http://idienrohidin.blogspot.com/2011/06/menghilangkan-tampilan-entry-lawas_25.html'>
<img height='220' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqhnsiR3qaQFyUed8saNj0vSDdXUFjeMKSjEblbH9wuh2kuezjKOHmipgsBeFBEXVDRi9Syj0J03KtjWZ-2k9g1Fs5mAGoh9GPBNQtZMOcHEjXiumT7VCTUZeIRgwtBw6NqDu7xyTrieY/s1600/entry.png' width='300'/>
<span><b>Menghilangkan 'Tampilan Entry Lawas' Blogger</b><br/>Sepertinya tutorial yang saya buat ini sudah tak asing bagi sobat, tapi dari sebagian besar blog yang membuat artikel...</span></a></li>
<div class='clear s3sliderImage'/>
</ul>
</div>
</b:if>
dan tempatkan di bawah kode <div id='main-wrapper'>
- Setelah selesai semuanya silahkan sobat Save/Simpan Template sobat dan silahkan lihat hasilnya
Semoga tutorial ini bermanfaat bagi sobat, jika masih menemui kendala silahkan tinggalkan komentar, terimakasih buat kucoba.com atas scriptnya :D
Berikut adalah cara membuat berita gambar dengan javascript seperti gambar disamping :
