Solved

How to move an advertisement to the left in a Blogger blog

Posted on 2014-01-25
10
296 Views
Last Modified: 2014-01-26
Hello,

I am writing a blog and I have placed an ad in it, but I just can't move it to the left.

The URL is: http://opulentia.blogspot.com.br.

Does anyoe know how to do that?

Thanks in advance.
Blog-bloco---esquerda.PNG
0
Comment
Question by:Brejinski
  • 5
  • 5
10 Comments
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 500 total points
ID: 39809427
You have margin-left and margin-right set to 15px on your .section class.
That's why the add is not left aligned.

set margin-left to 0px and you'll get the look you want.

HTH,
Dan
0
 

Author Comment

by:Brejinski
ID: 39809438
Thanks, Dan,

But I have a limited knowledge of HTML.

Not sure if you know how Blogger/Blogspot works, but all I did was copy and paste the HTML snippet in a Blogger box (widget).

I am not sure where to set margin-left to 0px.

Any further help will be much appreciated.

<a href="http://bit.ly/AlocAtiv">
<img src="http://hcinvestimentos.com/wp-content/uploads/2012/03/banner728x90.gif" border="0" width="690" height="90" />
</a>
0
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 500 total points
ID: 39809447
You'll need to customize your Blogger template.

Step 1
Open your browser and go to Blogger.com.

Step 2
Enter the email address and password for your Blogger account, then click the "Sign In" button.

Step 3
Click the link for the blog title you want to edit from your list of blogs to open its "Overview" page.

Step 4
Click the "Template" link located in the left column.

Step 5
Click the "Customize" button.

Step 6
Click the "Advanced" link.

Step 7
Click the scroll-down arrow in the middle column and select "Add CSS."

Step 8
Enter this in the "Add Custom CSS" box: .section{margin-left:0;}

Step 9
Click the "Apply to Blog" button located in the right corner of the page.

After that, your add should be where you want it.

Not a Blogger user, so steps taken from here: http://smallbusiness.chron.com/customize-css-blogspot-29958.html
0
 

Author Comment

by:Brejinski
ID: 39809477
Great, Dan! It worked very well, but the ad is still a tiny little bit to the right. Please see the new picture attached.

Maybe I should charge the border="0"??
Blog-bloco---esquerda2.PNG
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39809483
Please post the link to the page, so I can inspect it and see what the problem is.
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

by:Brejinski
ID: 39809489
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39809500
It's off by 2px because of the padding of the parent div, with the class .tabs-inner.

Repeat the steps from my previous post, and at step 8 add this:
.tabs-inner{padding-left:13px}
0
 

Author Comment

by:Brejinski
ID: 39809517
I really can't thank you enough, Dan!

Now, just a couple of extra questions and we'll call it a day:

1 - How do you know how many pixels you need to move, that is, how do you count the pixels?

2 - How does each CSS snippet "know" where it will be applied?

3 - Any special suggestion to learn a bit of this stuff?

Thanks again!
0
 
LVL 34

Accepted Solution

by:
Dan Craciun earned 500 total points
ID: 39809756
If you use Chrome, you can right click on the element that misbehaves and choose "Inspect element". This will open the elements inspector, where you see your document listed hierarchical, with the current element selected.
In Firefox you can do the same with Firebug (https://addons.mozilla.org/en-US/firefox/addon/firebug/).
In IE, I have no idea if someone wrote a plugin for this.

After you select your element, in the right side you will see the css styles applied to it, and if you click on "Computed" you will see the box model of your element, plus, beneath it, all the computed styles that apply.

That's what I used to see what styles I needed to modify to obtain the look you wanted.

As for where to learn, I'd say start with this: http://www.codecademy.com/tracks/web

It's the HTML/CSS track from Code Year (which, if you have the time, you should sign up to). It has the benefit that you will learn by doing things.

HTH,
Dan
0
 

Author Closing Comment

by:Brejinski
ID: 39810102
Thanks again, Dan! I've been lookin for those answers for more than a week!
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
Read about how to approach blogging and about ways to do it right. Stand out from the crowd and let your knowledge be consumed by a large audience. This article aims to explain how your blog should look like,  the most important things to do while b…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now