Gambar buram atau blur (tidak jelas) merupakan masalah serius bagi kebanyakan blogger. Masalah ini biasanya terjadi di halaman depan blog (homepage) atau related post gambar.
Jika yang bermasalah adalah gambar yang berada di Related Posts atau Popular Posts; simpan kode di bawah ini, diatas kode </body> atau </head>
<script>//<![CDATA[function resizeThumb(parentID, size) { var parent = document.getElementById(parentID), image = parent.getElementsByTagName('img'); for (var i = 0; i < image.length; i++) { image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c"); image[i].width = size; image[i].height = size; }} resizeThumb('Blog1', 300);//]]> </script>
...kemudian Save Template!
Catatan:
Pada kode Blog1 yang sudah ditandai, ubah dan/atau sesuaikan dengan kode elemen dari atribut HTML di template blogger yang kamu gunakan saat ini.
4. Cara Jitu Mengatasi Gambar Buram di Blog
Jika kamu menggunakan Auto Readmore di halaman depan (homepage) blog, sebenarnya ketiga tutorial di atas bisa kamu implementasikan dan nyatanya berhasil.
Akan tetapi, jika masih gagal (error) juga, coba ganti kode di bawah ini:
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
Catatan:
Lokasinya bisa di dalam atribut post var='post' atau mobile-index-post (tergantung blogger theme yang kamu gunakan).
...dengan kode di bawah ini:
<b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 300, "4:3") : data:post.thumbnail' var='image_bro'> <img expr:alt='data:post.title' expr:src='data:image_bro'/> </b:with>
Kode di atas akan mengkondisikan ukuran gambar secara otomatis; yang awalnya s72-c menjadi w300-h225-p-k-no-nu.
Selain itu, kode di atas juga akan mengubah (membuat) resolusi image thumbnail berubah dari 72px x 72px menjadi 300px x 250px sehingga gambar (image-thumbnail) tidak akan terpotong lagi.
Berikut ini Cara Jitu Mengatasi Gambar Buram di Blogger.
Beberapa kasus yang pernah terjadi pun, didapati pula kondisinya di dalam artikel (SinglePost), dan/atau maupun Related Posts. Jika kondisi yang bermasalah berada di Related Posts, masalahnya seperti gambar yang terpotong (Crop) dan/atau memang kabur.
Cara Jitu Mengatasi Gambar Buram di Blogger
Apapun dan bagaimana situasi serta kondisinya; salah satu tutorial yang ada di bawah ini, diharapkan bisa mengatasi gambar yang kabur di tampilan blog kamu.
1. Memperbaiki Gambar yang Kabur di Blogger/Blogspot
Silakan simpan kode di bawah ini, di atas kode </body>
<script type='text/javascript'> //<![CDATA[ function replaceText(){if(!document.getElementById){return;} bodyText = document.getElementById("Blog1"); theText = bodyText.innerHTML; theText = theText.replace(/s72-c/gi, "s200-c"); bodyText.innerHTML = theText; }replaceText(); //]]> </script>
Save Template dan Cek hasilnya bagaimana. Apabila sudah beres, tutorial yang ada di bawah ini tidak perlu dipraktekan lagi.
2. Cara Mengatasi Gambar Buram (Blur) di Blogger/Blogspot
1. Memperbaiki Gambar yang Kabur di Blogger/Blogspot
Silakan simpan kode di bawah ini, di atas kode </body>
<script type='text/javascript'> //<![CDATA[ function replaceText(){if(!document.getElementById){return;} bodyText = document.getElementById("Blog1"); theText = bodyText.innerHTML; theText = theText.replace(/s72-c/gi, "s200-c"); bodyText.innerHTML = theText; }replaceText(); //]]> </script>
Save Template dan Cek hasilnya bagaimana. Apabila sudah beres, tutorial yang ada di bawah ini tidak perlu dipraktekan lagi.
2. Cara Mengatasi Gambar Buram (Blur) di Blogger/Blogspot
Seandainya apabila kode JavaScript (Js) di atas gagal diterapkan di template blogger yang kamu gunakan, coba gunakan kode JavaScript (Js) di bawah ini.
Simpan kode jQuery di bawah ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'/>
...di atas kode </head> atau </body>
Selanjutnya simpan JavaScript (Js) di bawah ini:
<script type='text/javascript'> //<![CDATA[ $(document).ready(function() {$('.post-thumbnails').attr('src', function(i, src) {return src.replace( 's72-c', 's640' );});}); //]]> </script>
...di atas kode </body> kemudian ketuk tombol Save, dan cek hasilnya.
Catatan:
Pada kode JS di atas, ubah (ganti) kode .post-thumbnails dengan kode gambar thumbnail di halaman depan blog. Begitu pula dengan Related Posts, .related-post misalnya.
3. Cara Mengatasi Gambar Keruh, Terpotong & Tidak Jelas di Blogger/Blogspot
Simpan kode jQuery di bawah ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'/>
...di atas kode </head> atau </body>
Selanjutnya simpan JavaScript (Js) di bawah ini:
<script type='text/javascript'> //<![CDATA[ $(document).ready(function() {$('.post-thumbnails').attr('src', function(i, src) {return src.replace( 's72-c', 's640' );});}); //]]> </script>
...di atas kode </body> kemudian ketuk tombol Save, dan cek hasilnya.
Catatan:
Pada kode JS di atas, ubah (ganti) kode .post-thumbnails dengan kode gambar thumbnail di halaman depan blog. Begitu pula dengan Related Posts, .related-post misalnya.
3. Cara Mengatasi Gambar Keruh, Terpotong & Tidak Jelas di Blogger/Blogspot
Jika yang bermasalah adalah gambar yang berada di Related Posts atau Popular Posts; simpan kode di bawah ini, diatas kode </body> atau </head>
<script>//<![CDATA[function resizeThumb(parentID, size) { var parent = document.getElementById(parentID), image = parent.getElementsByTagName('img'); for (var i = 0; i < image.length; i++) { image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c"); image[i].width = size; image[i].height = size; }} resizeThumb('Blog1', 300);//]]> </script>
...kemudian Save Template!
Catatan:
Pada kode Blog1 yang sudah ditandai, ubah dan/atau sesuaikan dengan kode elemen dari atribut HTML di template blogger yang kamu gunakan saat ini.
4. Cara Jitu Mengatasi Gambar Buram di Blog
Jika kamu menggunakan Auto Readmore di halaman depan (homepage) blog, sebenarnya ketiga tutorial di atas bisa kamu implementasikan dan nyatanya berhasil.
Akan tetapi, jika masih gagal (error) juga, coba ganti kode di bawah ini:
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
Catatan:
Lokasinya bisa di dalam atribut post var='post' atau mobile-index-post (tergantung blogger theme yang kamu gunakan).
...dengan kode di bawah ini:
<b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 300, "4:3") : data:post.thumbnail' var='image_bro'> <img expr:alt='data:post.title' expr:src='data:image_bro'/> </b:with>
Kode di atas akan mengkondisikan ukuran gambar secara otomatis; yang awalnya s72-c menjadi w300-h225-p-k-no-nu.
Selain itu, kode di atas juga akan mengubah (membuat) resolusi image thumbnail berubah dari 72px x 72px menjadi 300px x 250px sehingga gambar (image-thumbnail) tidak akan terpotong lagi.
Post a Comment