Blogspot: Cara Menghapus Space (Jarak) diantara Gambar di Blog

Blogger.com-Tutorial hari ini adalah pertanyaan yang sangat umum di komunitas blogger - Cara menghapus ruang putih antara gambar di blogger. Ini adalah pos yang panjang karena saya mencakup banyak kemungkinan, tetapi jangan dimatikan untuk mencoba. Ini sangat mudah dilakukan setelah Anda mengikuti langkah-langkahnya dengan benar.

BACALAH SEBELUM berkomentar
Kode di bawah ini harus berfungsi pada sebagian besar template blog, namun mungkin tidak! Itu tergantung pada template yang Anda gunakan dan kode apa yang telah Anda tambahkan sebelumnya. Anda mungkin perlu mencari kode serupa di template Anda. Mengunggah gambar melalui Blogger akan membungkus gambar Anda dalam kode tambahan sehingga memberinya spasi. Skrip di bawah ini harus secara otomatis menghapus ini. Saya sarankan mengunggah gambar Anda ke situs hosting yang berbeda, seperti Photobucket atau Flickr dan kemudian menambahkan kode ke posting blog Anda. Saya akan berbicara melalui cara melakukan ini di bawah ini.

BAGAIMANA MENGHAPUS SPACES ANTARA GAMBAR

1. Pertama-tama Anda perlu memastikan bahwa tidak ada spasi di dalam posting blog itu sendiri. Klik pada posting blog dengan beberapa gambar, dalam mode penulisan Anda dapat melihat beberapa ruang di antara gambar. Hapus ruang-ruang sehingga gambar-gambar berada di bawah yang lain. Kemudian klik tombol HTML dan periksa spasi di antara gambar.

Perhatikan di bawah bahwa tidak ada ruang antara penutupan satu tag dan pembukaan berikutnya, mereka tampak seperti .. </a> <a href ... sebagaimana mestinya. Cari juga jeda baris yang terlihat seperti <br /> atau <br> lalu hapus. Kode untuk dua gambar di posting blog Anda akan terlihat seperti ini (tergantung pada host gambar - default blogger mungkin terlihat berbeda) tanpa spasi di antara setiap gambar.

<a href="URL"><img src="IMAGE URL" border="0"/></a><a href="URL"><img alt="" src="IMAGE URL" border="0" /></a>

2. Jika tidak ada spasi dalam itu, maka jarak adalah karena pengaturan padding di HTML Anda, jadi kita perlu menyesuaikan ini. Pergi ke Theme > Edit HTML, klik ke dalam kotak HTML dan cari (CTRL & F) untuk kode berikut. Anda dapat menemukan satu, semua atau variasi dari mereka tergantung pada kode Anda sehingga harus melihat-lihat untuk mereka.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { 

.post img {

.post-body img {

table.tr-caption-container {

.post-body img, .post-body .tr-caption-container {

remove the space between images in blogger

Di bawah kode ini, di antara kurung kurawal {} Anda akan melihat properti padding, border, atau margin. Cari border, border-top, border-bottom, padding, padding-top, padding-bottom, margin, margin-top, margin-bottom, ubah angka menjadi 0px. Jika Anda melihat sesuatu seperti $(....); untuk semua properti ini, lalu ubah ke 0 piksel. Contoh padding: $(image.border.small.size); ganti ke padding: 0px;

 { border: 0px; padding: 0px; margin-bottom: 0px; margin-top: 0px; } 

3. Jika itu tidak menyelesaikan masalah, masalahnya adalah dengan hosting gambar Blogger. Secara otomatis menambahkan kode tambahan dan membungkusnya di sekitar gambar Anda. Penjelasan lebih lanjut di bawah tetapi skrip ini harus secara otomatis menghapus kode tambahan itu. Untuk menambahkannya, klik template, edit HTML dan temukan </head>, tepat di atas ini tempelkan skrip berikut :

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type='text/javascript'>

//<![CDATA[

/**

this script was written by Confluent Forms LLC http://www.confluentforms.com

for the BlogXpertise website http://www.blogxpertise.com

any updates to this script will be posted to BlogXpertise

please leave this message and give credit where credit is due!

**/

$(document).ready(function(){

$('.post-body').find('img').each(function(n, image){

var image = $(image);

image.parent().css('margin-left',0).css('margin-right',0).css('margin-top',0).css('margin-bottom',0);

});

});

// ]]></script>

Q. BAGAIMANA CARA MENGHAPUS SPACE SEPENUHNYA?

Saya tidak menyarankan benar-benar menghapus celah karena dua alasan - satu karena sedikit ruang membantu memisahkan gambar sehingga terlihat lebih rapi dan kurang berantakan, dua karena angka minus dapat mengganggu gambar terutama jika menggunakan teks menyebabkan mereka tumpang tindih . Jika Anda benar-benar ingin menghapus celah, gunakan nilai minus untuk margin, misalnya

.post-body img {

margin-top: -5px !important;

}

Q. MENGAPA INI TERJADI DI BLOGGER?

Ketika Anda mengunggah gambar melalui Blogger, ini akan membungkus gambar Anda dalam kode tambahan (ditampilkan di bawah)

<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img width="800" height="500" border="0" src="image url 1"></div><br><div style="clear: left; float: left;margin-bottom: 1em; margin-right: 1em; text-align: center;"><img width="800" height="500" border="0" src="image url 2"></div><br>

Jika Anda secara manual memperbaiki ini, Anda akan menghapus kode sehingga terlihat seperti ini ...

<div style="clear: left; float: left; margin-right: 1em; text-align: center;"><img width="800" height="500" border="0" src="image url 1"><img width="800" height="500" border="0" src="image url 2"></div>

dan cara yang lebih baik dan lebih bersih untuk menulisnya akan seperti ini ...

<img width="800" height="500" border="0" src="image url 1"><img width="800" height="500" border="0" src="image url 2">

Tetapi melakukan ini satu per satu akan membawa Anda selamanya! Script di atas akan membantu, tetapi sekali lagi itu tergantung pada pengaturan template Anda. Inilah sebabnya mengapa saya merekomendasikan mengunggah gambar melalui situs hosting foto terpisah seperti photobucket, flickr, tinypic. Blogger menggunakan album web Picasa dan ruang penyimpanan Anda akan habis tetapi yang lebih penting saat Anda menyalin kode gambar secara manual dari hosting alternatif dan menempelkannya ke blogger, itu tidak mengubah kode. Ini kode gambar yang sederhana dan sederhana, tidak terbungkus dalam hal lain. Oleh karena itu, kode untuk menghapus celah akan bekerja tanpa masalah. Misalnya, mengunggah melalui Photobucket akan memberi Anda kode seperti ini ...

<a href="URL Link" target="_blank"><img src="Image Url" border="0" alt="Image Des"></a>

Menempatkan beberapa gambar ke dalam posting Anda menggunakan situs hosting gambar eksternal, satu demi satu seperti berikut, berarti tidak ada yang terbungkus dalam pengkodean yang tidak diinginkan. Setiap kali Anda mengklik gambar yang diunggah melalui Blogger dan memilih ukuran atau posisi kode yang sedang dibungkus di sekitar gambar sehingga lebih sulit untuk mengedit dalam HTML utama. Menggunakan photobucket dan menempatkan banyak gambar satu demi satu, Anda akan melihat yang berikut tanpa spasi, margin atau padding ...

<a href="URL Link" target="_blank"><img src="Image Url" border="0" alt="Image Des"></a><a href="URL Link" target="_blank"><img src="Image Url" border="0" alt="Image Des"></a><a href="URL Link" target="_blank"><img src="Image Url" border="0" alt="Image Des"></a>

Q. BAGAIMANA SAYA HARUS MENGGUNAKAN VIA BLOGGER?

Saya sarankan untuk mengunggah gambar Anda pada ukuran yang benar, satu demi satu tanpa spasi dan hindari menyesuaikannya, yang akan menambahkan kode yang tidak diinginkan.

Q. BAGAIMANA SAYA MENGGUNAKAN PHOTOBUCKET, FLICKR, DLL?

Di dalam posting blog Anda, di sebelah kanan di bawah opsi, pilih "Interpretasikan HTML yang diketik" dan klik selesai. Buat akun di situs hosting gambar, unggah gambar Anda dan dapatkan kode html atau img. Tempelkan ini ke dalam pos blog Anda di bawah tab tulis, karena Anda memiliki interpretasi HTML yang diketik yang dipilih maka akan tahu bahwa itu adalah html dan akan menampilkan gambar. Ini akan menghemat Anda dari mengklik bolak-balik dari HTML dan menulis.