Responsive Image Tricks For Blogger | Artikel ini adalah
tips tentang cara mengubah semua gambar yang ada di blog menjadi responsive.
Karena, pada beberapa template blog responsive sendiri terkadang image/gambar
sering belum ikut tersentuh responsive desain. Apalagi template yang tidak
responsive, sudah pasti itu.
Sehingga, gampar pendukung postingan yang ditampilkan pada
gadget seperti Tab, Handphone, atau lainnya, sering terpotong atau tidak
terlihat semua. Dan jelas hal ini sangat menggangu tampilan. Untuk itu, kita
perlu sedikit memodifikasi template dengan melakukan beberapa editing code HTML
pada blog.
Kita langsung saja ke pembahasan inti
Pertama, login blogger terus edit HTML.
Lalu cari kode :
]]></b:skin>
Dan tambahkan kode css dibawah ini diatasnya:
img {
display: block;
max-width:100%;
height:auto;
width:auto\9;}
Setelah itu cari kode:
</head>
dan tambahkan javascript dibawah ini diatas kode tersebut:
<script type='text/javascript'>
/*<![CDATA[*/
var cwResImg =
function () {
var cwBpArry =
[1382, 992, 768, 480], //Image breakpoint arrays
currIndex,
cwResImgVal =
Math.max(screen.width,screen.height),
hdpi =
window.devicePixelRatio > 1 ? window.devicePixelRatio : 1,
rwdImgId =
"rwdimg-"+Math.floor(Math.random()*1000),
tpl='<img
src="{src}" alt="{alt}" title="{title}"
id="{rwdImgId}" {attributes}>';
cwBpArry.push(cwResImgVal);
cwBpArry.sort(function(a,b){return a-b});
if(Array.prototype.indexOf){
currIndex =
cwBpArry.indexOf(cwResImgVal) + 1;
}else{
for(var i in
cwBpArry){
if(cwBpArry[i] === cwResImgVal){
currIndex = parseInt(i)+1;
}
}
}
cwBpArry[currIndex]
= cwBpArry[currIndex] || cwBpArry[currIndex-1];
var imgWid =
Math.max.apply(Math, cwBpArry) <= cwBpArry[currIndex] ?
cwBpArry[currIndex-2] : cwBpArry[currIndex];
return {
imgWid : imgWid,
hdpi: hdpi,
id:rwdImgId,
rwdImg:function(arg){
var src =
arg.src || arguments[0] || '',
src =
src.replace(/\/s\d*\//, '/s'+imgWid * hdpi+'/'), //picasa image size replacing
(s340 to device width)
title =
arg.title || arg.alt || arguments[1] || '',
alt =
arg.alt || arg.title || arguments[2] || arguments[1] || '',
attributes = arg.attr || arguments[3] || '',
img
=
tpl.replace('{src}',src).replace('{title}',title).replace('{alt}',alt).replace('{rwdImgId}',rwdImgId).replace('{attributes}',attributes);
document.write(img)
}
};
}()
/*]]>*/</script>
setelah itu cari kode
</body>
dan tambahkan script dibawah ini di atasnya (ini digunakan
untuk mengatasi terjadinya fallback jika javascript tidak support di peramban)
<noscript>
<img
src="http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s720/Webpagetest-IE8-Octopress-Default-waterfall.png"
alt="Responsive
images test"/>
</noscript>
<script>
cwResImg.rwdImg("http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png",
'Responsive
images text script');
---or----
cwResImg.rwdImg({src:'http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png',
alt:'Responsive
images text script', title:'Responsive images text script'});
</script>
Demikian Cara membuat Responsive Image untuk Blogger
Template Blogspot. Terimakasih atas kunjungannya dan semoga bermanfaat.
Scourse : redaksiexpo2012.blogspot.co.id
Authors : *2RI$1* TURISWAN
Posts
