This tutorial is step-by-step on how to remove the image border which some of the blog themes provided auto-border generating for every time you post a new entry. I don't want to explain in complicated manner. Just a simple with a little steps, okay?
First, upload your required image as usual step by clicking on 'Add Image' button. A new window will appear, and all you have to do is select with single or multiple submissions, as show as below:
After uploading successful, your image suppose be shown like this..
Second, you might be wonder or thinking on how to remove the border of the uploaded images. You might to remove manually the Javascript code or blogger tags from your Templates Editor. But, it is totally complicated to you or to whom is not very familiar with Javascript language or even though HTML code.
So, for the alternative; we have to use the blogger post editor, instead. On the right top of your blog editor shows two different tabs, there are 'Edit Html' and 'Compose' tab. Click on 'Edit Html' tab.
So, for the alternative; we have to use the blogger post editor, instead. On the right top of your blog editor shows two different tabs, there are 'Edit Html' and 'Compose' tab. Click on 'Edit Html' tab.
The contents inside the editor supposedly shown like this;
Huh? Whatha hell? Hard to understood ya? Okay, let me explain for this. All the contents that showing while you write or edit (previously on Compose tab) would be change/converted to HTML code, entirely including your images. In this part, try to find <img ... /> tag (without quote). For example, my image code should be show like this;
<img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 266px;" src="http://2.bp.blogspot.com/_t7h6ltTSjag/SYHhz-VvgsI/AAAAAAAABUg/ifbKboqPkQg/s400/dreams_of_flying_16.jpg" alt="" id="BLOGGER_PHOTO_ID_5296762919788184258" border="0" />Third, change the highlighted code (red) with this code: style="border:0px solid;padding:0px;margin:0px 0;"
Last but not least, you might not to preview your entry but instead, you have to publish it to see the result. So, click PUBLISH POST, and see the different.
As the result...
The original code:
<img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 266px;" src="http://2.bp.blogspot.com/_t7h6ltTSjag/SYHhz-VvgsI/AAAAAAAABUg/ifbKboqPkQg/s400/dreams_of_flying_16.jpg" alt="" id="BLOGGER_PHOTO_ID_5296762919788184258" border="0" />After editing the code:
The edited code:
<img style="border:0px solid;padding:0px;margin:0px 0;" src="http://2.bp.blogspot.com/_t7h6ltTSjag/SYHhz-VvgsI/AAAAAAAABUg/ifbKboqPkQg/s400/dreams_of_flying_16.jpg" alt="" id="BLOGGER_PHOTO_ID_5296762919788184258" border="0" />Simple, right? Try it on. Good luck!
PERHATIAN! Aktiviti PLAGIAT (copy & paste) sesuatu artikel tanpa pengetahuan dan kebenaran penulis adalah satu aktiviti/perbuatan yang TIDAK BERMORAL!
