Create Banner Ads on Sidebar

Assakanualaikum.wr.wb

Hem ...

aq new post this afternoon, but the current q lagy to post ..

no problem yes ...

Ok we will discuss is how to create an ad banner box in the sidebar.

As I tu no lo ...
na ... that we will make ..

Ok ...

simply:

1. Log in blogger.com

2. Click on the layout, the Edit HTML

3. Search code ]]></ b: skin>

4. If you've Kopy code below just above the code:

#yusron-ads {

margin:0px;

padding: 5px;

text-align: center;

width : 260px;

}

#yusron-ads img {

margin: 7px 4px 4px 0px;
padding: 3px;
width : 125px;
height : 125px;
text-align: center;

border: 1px solid #c0c0c0;

}

#yusron-ads img:hover {

margin: 7px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

5. Save the template ..

6. Er ni not finished ...

7. Back to the layout, click Element Lama

8. Add Gadget HTML / JavaScript

9. Copy This Code inside

<div id="yusron-ads">


<a width="100" href=" http://www.dekyusron.co.cc/" target="_blank" hight="100"><img border="0" alt="mas doyok" src="http://i35.tinypic.com/160u3af.png"/></a>


<a width="100" href=" http://www.dekyusron.co.cc/" target="_blank" hight="100"><img border="0" alt="mas doyok" src="http://i35.tinypic.com/160u3af.png"/></a>


<a width="100" href=" http://www.dekyusron.co.cc/" target="_blank" hight="100"><img border="0" alt="mas doyok" src="http://i35.tinypic.com/160u3af.png"/></a>


<a width="100" href=" http://www.dekyusron.co.cc/" target="_blank" hight="100"><img border="0" alt="mas doyok" src="http://i35.tinypic.com/160u3af.png"/></a>

</div>

10. Red code replace with your ad link, and replace the yellow with the image address you

11. Save template

wassalamualaikum.wr.wb

Post Column Different Views On Home Page

Assalamualaikum.wr.wb

Hush ....

I will discuss how to create a different view column posts on the home page. These tips specifically for magazine templates. We used clay for example:

1. Figure column posts on the home page:


2. Images after the click on the title post


na ... a difference ... In terms of size column postnya .. That's what we will discuss now ...

1. Log in blogger.com
2. Towards layout, Edit HTML ...
3. If you've looking for code ]]></ b: skin>
4. If you've met the following code Kopy pastekan just below the code ]]></ b: skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

#main-wrapper {
width:372px;
float:left;
}

</b:if>
</style>

4. You can add other code to decorate the display columns. Example in my template like this:

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

#main-wrapper {
width:372px;
float:left;
}

.post{
background:#FFF url(http://i422.photobucket.com/albums/pp302/bloggeracs/post-bg.gif);
background-repeat:repeat-x;width:337px;
margin: 0 0 8px 0px;
padding: 10px;
display:inline;
float:left;
overflow:hidden;
position:relative;
}

.post h3{font-size:12px;
font-family:arial;
font-weight: normal;
}


.post h3 {
color: #036791;
text-transform: capitalize;
margin: 0;
padding: 2px 0 10px 0;
text-align:left;
}

.post h3 a, .post h3 a:visited {
color: #036791;
text-decoration: none;
font-family:arial;
font-weight: normal;
}

.post h3 a:hover {
color: #034c6a;
}

.post-body img{
max-width:100px;
max-height:100px;
padding:1px;
float:left;
margin:0 5px 1px 0;
border: 0px solid #cadaef;
}

.post-timestamp,
.reaction-buttons,
.star-ratings,
.post-backlinks,
.post-icons, .post-labels{
display:none;
}

</b:if>
</style>

Info:

Code red is columnya position you can change the desired result. While that is a bold columnya size.

5. Save

wassalamualaikum.wr.wb