4 Cara Jitu Mengatasi Gambar Buram Di Blogger

Tutorial: Tips & Trik Cara Mengatasi dan Memperbaiki Gambar Buram, Blur & Terpotong - Auto Readmore Blogger/Blogspot

Gambar buram, -- disebut juga BLUR (baca: tidak jelas) merupakan problem serius bagi kebanyakan blogger. Masalah ini biasanya terjadi di halaman depan blog (homepage).

Beberapa perkara 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 ibarat gambar yang terpotong (Crop) dan/atau memang kabur.

Pic: YouTube - How to Fix Blurry Photos (Image)

4 Cara Jitu Mengatasi Gambar Buram di Blogger

Apapun dan bagaimana situasi serta kondisinya; salah satu tutorial yang ada di bawah ini, diperlukan sanggup mengatasi gambar yang kabur di tampilan blog kamu.

1. Memperbaiki Gambar yang Kabur di Blogger/Blogspot

Silakan simpan aba-aba di bawah ini, di atas aba-aba </body>

<script type='text/j4vascript'> //<![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 jadinya 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 aba-aba JavaScript (Js) di atas gagal diterapkan di template blogger yang kau gunakan, coba gunakan aba-aba JavaScript (Js) di bawah ini.

Simpan aba-aba jQuery di bawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/j4vascript'/>

...di atas aba-aba </head> atau </body>

Selanjutnya simpan JavaScript (Js) di bawah ini:

<script type='text/j4vascript'> //<![CDATA[ $(document).ready(function() {$('.post-thumbnails').attr('src', function(i, src) {return src.replace( 's72-c', 's640' );});}); //]]> </script>

...di atas aba-aba </body> lalu ketuk tombol Save, dan cek hasilnya.

Catatan:
Pada aba-aba JS di atas, ubah (ganti) aba-aba .post-thumbnails dengan aba-aba 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 yakni gambar yang berada di Related Posts atau Popular Posts; simpan aba-aba di bawah ini, diatas aba-aba </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 aba-aba Blog1 yang sudah ditandai, ubah dan/atau sesuaikan dengan aba-aba elemen dari atribut HTML di template blogger yang kau gunakan dikala ini.

4. Cara Jitu Mengatasi Gambar Buram di Blog

Jika kau memakai Auto Readmore di halaman depan (homepage) blog, bergotong-royong ketiga tutorial di atas sanggup kau implementasikan dan nyatanya berhasil.

Akan tetapi, bila masih gagal (error) juga, coba ganti aba-aba di bawah ini:

<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>

Catatan:
Lokasinya sanggup di dalam atribut post var='post' atau mobile-index-post (tergantung blogger theme yang kau gunakan).

...dengan aba-aba di bawah ini:

<b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 300, &quot;4:3&quot;) : 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, aba-aba 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.

Source:
candysweet-aina.blogspot.com/search?q=cara-mengatasi-gambar-thumbnail-buram
candysweet-aina.blogspot.com/search?q=cara-mengatasi-gambar-thumbnail-buram
candysweet-aina.blogspot.com/search?q=cara-mengatasi-gambar-thumbnail-buram
Sumber http://addbloggerthemes.blogspot.com

Share this post