Place the Banner on the blog homepage.

Since alimama launched a convenient period-based display of paid banner advertising spaces, I found that many blogs in the blog Park have put such advertising spaces. However, although some ad spaces are placed on the top of the homepage, they look very bad. To help you customize your blog, dudu has opened a header and an html embedded segment at the end of the page. Therefore, we can place the banner on the home page more beautifully.

It turns out that it is really difficult to customize pages when only the announcement location can insert html and scripts. A bunch of scripts are required, in addition, you must load the page before it can be executed (so as to ensure security ). Now with the html insertion settings on the homepage, many things are convenient. Most blog topics in the blog Park are on the left of the blog name, and a large chunk is displayed on the right. Some are pictures and some are color blocks. So if you put banner in this blank area, you can use space, beautify the page, and get a big meal at the end of the year. Haha.

But directly put the banner code, the banner will appear directly at the top of the page. This effect seems to damage the appearance of the whole page. For example, the longest and unintentional. net trip will not be listed one by one. So we need to use a little bit of css for the small trick html page layout. Of course, I don't want to use javascript either. This is something that can be done, but it's a bit cool. For example, the banner code of the blog is as follows:

<Iframe frameborder = "0" marginheight = "0" marginwidth = "0" border = "0" id = "alimamaifrm" name = "alimamaifrm" scrolling = "no" height =" 60px "width =" 468px "style =" width: 468px; height: 60px; float: right; src = "http://p.alimama.com/code.php? T = 2 & I = mm_10055081_148045_158408 & w = 468 & h = 60 & sz = 12 & bgc = FFFFFF & bdc = E6E6E6 & tc = 0000FF & lc = 008000 & dc = 000000"> </iframe>

First, we need a container that is as wide as the homepage of the blog garden, in order to make our ads right aligned and relative to the right of the browser. Add a div element, set its position style to absolute, and its width to 100%. This is equivalent to setting it above the header of the blog: <div style = "position: absolute; width: 100%; "> </div>.

Modify the float and margin styles of iframe, put iframe In the div element, and put it in the "homepage html code": <div style = "position: absolute; border: solid 0px red; width: 100%; "> <iframe frameborder =" 0 "marginheight =" 0 "marginwidth =" 0 "border =" 0 "id =" alimamaifrm "name =" alimamaifrm "scrolling =" no "height = "60px" width = "468px" style = "width: 468px; height: 60px; float: right; margin: 8px; "src =" http://p.alimama.com/code.php? T = 2 & I = mm_10055081_148045_158408 & w = 468 & h = 60 & sz = 12 & bgc = FFFFFF & bdc = E6E6E6 & tc = 0000FF & lc = 008000 & dc = 000000"> </iframe> </div>

Then open your blog, and the banner appears on the right of the blog homepage:

In addition, the resize browser keeps the right alignment. Because firefox processes the box model and IE differently, it shows the banner of the position perfect in IE, which will be supported from the right side in firefox. But it's not too messy in general.