How to change the background of the Minima Template

Sometimes we want to change the background of the template to fit the style we want. But if we do not know how to change it, then the template will be impressed in shambles.
I try to share a tip how to change the background of the template. In this tutorial, you must prepare the image size 10px x 600 px. Save on bloggers post and copy the image location.   As  an experiment, I applied it to Minima.

Look at the existing code in the  Minima template, below:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
 }

In adding background, I divide the two types.

For Normal Page

body {
background:$bgcolor url(http://.....jpg);
background-repeat: repeat-x;
background-position:top center;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
 }

For a Fixed Background
(or to scroll)

body {
background:$bgcolor url(http://.......jpg);
background-repeat: repeat-x;
background-position:top center;
background-attachment: fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
 }

Please fill in the URL of the location where you save the image.

Tip straightening the page elements

If we add or change the size of the template column, Even in his interface as in the preview or the rendering of the various browsers look smooth without the slightest blemish, but in fact broken a Page Element, sidebar column appears sag downward, between the columns overlap and like truncated.
These short tips may be helpful, and I have to apply in any modification of the template on blogger.

We only add the code governing the Page Elements, held just above the tag ]]></ b: skin>:

body # layout # main-wrapper
(Width: 300px) ....... (adjust the width of main-wrapper)

or

Body # layout # sidebar-wrapper
(width: 200px) .............. (adjust the width of sidebar-wrapper)

Hope helps

How to put AdSense in the middle of Blogger posts

Some webmasters try to put Adsense in a posting and has proven effective way of improving profits significantly.

There is a simple way how to put AdSense in the middle of a Blogger post, only with JavaScript and a group of some DIVs. Within 2 easy steps:

The first step:

Please log in Blogger, then the layout select edit HTML. In your Blogger template, find the tag <data:post.body/> (you must check Expand Widget Templates in Blogger console) and replace it with following code:

<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">

<!-- Your AdSense code here -->

</div>

<div expr:id='"aim2" + data:post.id'>

<data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Note that you must replace <!-- Your AdSense code --> with block code provided by Google.

Step two:

In every blog post: Put a special comment

<! - Adsense ->

in the exact point you want to appear AdSense advertising.

Google automatically inject in your posts up to 3 AdSense blocks. So just the first 3 posts (in a top-down order) in your home page or archive pages will have ads.

Set the Display Bloglist

Bloglist is a short description of the article, both in our blogs and other sites. I hope this tip can help

a. Maximizing the width bloglist content.

If you try to check the widget bloglist, the content or the content width is only about 85% of the width of the sidebar area. Bloglist be to maximize the full sidebar css code for adding it like this.

# BlogList1. Blog-content {
width: 95%;
}

Description:

# Bloglist1 is an Id that should be singular or unique. if you have multiple widgets bloglist then its id would like this #BlogList1 , #BlogList2, #BlogList3 onwards.

. Blog-content is a class that manage the contents, especially the distance (line height), size width etc..

width: 95% = size width bloglist content.


b. Displaying Images on the information in the widget bloglist.

Usually we see in the image bloglist are in the right side of the writing. to move the image in the top of any posts, move the html code this image.

<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a></div></b:if> </b:if>

html code above this.

<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if></div>

Description:

'data:item.itemThumbnail.height'

'data:item.itemThumbnail.width'

syntax can be replaced with a number, eg: 100, 150 or up to you.

Hopefully useful.

Make Tabview with YUI

Sharing this time, I want to share the experience step by step how to create Tabview with YUI. Results from this sharing, which is tabview in this blog.

Step by step how to make:

1. Add the code below before : ]]></b:skin>

/* tabview sharingpost*/

* {
margin: 0;
padding: 0;
}
body {
font:x-small Georgia Serif;
}
p {
font-size: 1.5em;
margin-bottom: 10px;
}

a {
text-decoration: none;
}
a:hover {
color: #990000;
}

h2 { font-size: 1.5em; }

.clear {
clear: both;
}

#page-wrap {
width: 600px;
margin: 20px auto;
}
#content-explorer {
padding-top: 10px;
width:100%;
line-height:normal;
}
#content-explorer ul {
padding: 10px 10px 0;
list-style: none;
max-width: 640px;
border-bottom:1px solid #fff;
height: 31px;
}
#content-explorer ul li {
float: left;
background: #fbe0c5;
border-top:1px solid #fff;
text-align: center;
overflow: hidden;
margin-left: 5px;
}
#content-explorer ul li a {
display: block;
background: #fbe0c5;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
padding: 10px 20px 6px 20px;
font-weight: bold;
color: #999;
}
#content-explorer ul li a:hover {
color: #990000;
}
#content-explorer ul li.selected {
background: #fad00d;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
}
#content-explorer ul li.selected a {
background: #71572a;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
padding-bottom: 8px;
color: #ffffff;
}
div.yui-content {
overflow: auto;
background: #71572a;
border-bottom: 1px solid white;
border-right: 1px solid white;
border-left: 1px solid white;
padding: 15px;
}

2. Add the code below before : </head>

<script src='http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js' type='text/javascript'/>

3. Add the following code in the page elements or <body>:

<div id="page-wrap">

<script type="text/javascript"> var myTabs = new YAHOO.widget.TabView("content-explorer");</script>

<div id="content-explorer">

<ul class="yui-nav">
<li class="selected"><a href="#">
Title1</a></li>
<li><a href="#">Title2</a></li>
<li><a href="#">Title3</a></li>
<li><a href="#">Title4</a></li>
</ul>

<div class="yui-content">
<div>
<p>additional text</p>
<a href="#">Text1</a>
<br/>
<a href="#">text2</a>
<br/>
additional text & URL
<br/>
<br/>
<center><p>additional text </p></center>
</div>
<div>
<p>additional text</p>
<a href="#">Text1</a>
<br/>
<a href="#">text2</a>
<br/>
additional text & URL
<br/>
<br/>
<center><p>additional text </p></center>
</div>
<div>
<p>additional text</p>
<a href="#">Text1</a>
<br/>
<a href="#">text2</a>
<br/>
additional text & URL
<br/>
<br/>
<center><p>additional text </p></center>
</div>
<div>
<p>additional text</p>
<a href="#">Text1</a>
<br/>
<a href="#">text2</a>
<br/>
additional text & URL
<br/>
<br/>
<center><p>additional text </p></center>
</div>
<div>
<p>additional text</p>
<a href="#">Text1</a>
<br/>
<a href="#">text2</a>
<br/>
additional text & URL
<br/>
<br/>
<center><p>additional text </p></center>
</div>
</div>
</div>
</div>

Please add the URL or the inclination according Image
You can view the source code of this blog to see variations from the text or URL

Congratulations to try

Create a Tab View

Try to see the tabview at the top, under this step by step how to make

1. After you log in bloggers, and then enter the layout and edit the HTML.

Remember, we do not have to sign on the "Expand Widget Templates"
Add the code below before ]]></ b: skin>

/* tabview Modify by nataludin */
* {
margin: 0;
padding: 0;
}
body {
font:x-small Georgia Serif;
}
p {
font-size: 1.5em;
margin-bottom: 10px;
}
a {
text-decoration: none;
}
a:hover {
color: #990000;
}
h2 { font-size: 1.5em; }
.clear {
clear: both;
}
#page-wrap {
width: 600px;
margin: 20px auto;
}
#content-explorer {
padding-top: 10px;
width:100%;
line-height:normal;
}
#content-explorer ul {
padding: 10px 10px 0;
list-style: none;
max-width: 640px;
border-bottom:1px solid #fff;
height: 31px;
}
#content-explorer ul li {
float: left;
background: #fbe0c5;
border-top:1px solid #fff;
text-align: center;
overflow: hidden;
margin-left: 5px;
}
#content-explorer ul li a {
display: block;
background: #fbe0c5;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
padding: 10px 20px 6px 20px;
font-weight: bold;
color: #999;
}
#content-explorer ul li a:hover {
color: #990000;
}
#content-explorer ul li.selected {
background: #fad00d;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
}
#content-explorer ul li.selected a {
background: #71572a;
border-top:1px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
padding-bottom: 8px;
color: #ffffff;
}
div.yui-content {
overflow: auto;
background: #71572a;
border-bottom: 1px solid white;
border-right: 1px solid white;
border-left: 1px solid white;
padding: 15px;
}

2. Then add this code before </ head>

<script src='http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js' type='text/javascript'/>

3. Then add this code in the <body> or on the Page Elements

<div id="page-wrap">
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("content-explorer");
</script>
<div id="content-explorer">
<ul class="yui-nav">
<li class="selected"><a href="#">tab1</a></li>
<li><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
<li><a href="#">tab5</a></li>
</ul>

<div class="yui-content">
<div>
your text here (tab1)
</div>
<div>
your text here (tab2)
</div>
<div>
your text here (tab3)
</div>
<div>
your text here (tab4)
</div>
<div>
your text here (tab5)
</div>
</div>
</div>
</div>

Note: To Width adjust your template

Making CSS Vertical Navigation Menu

Let's learn-sharing in the CSS. This time I try to encourage the sharing of how to create CSS Vertical Navigation Menu.

Step by step how to create CSS Vertical Navigation Menu is as follows:

1. copy the code below:

/ * Extra-menu * /

#menu {
width: 200px;
margin: 10px;
}

#menu li a {
height: 32px;
voice-family: &quot;\&quot;}\&quot;&quot;;
voice-family: inherit;
height: 22px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #666;
display: block;
background: url(http://i288.photobucket.com/albums/ll179/ahnning/menu.gif);
padding: 10px 0 0 35px;
}

#menu li a:hover {
color: #000;
background: url(http://i288.photobucket.com/albums/ll179/ahnning/menu.gif) 0 -32px;
padding: 10px 0 0 35px;
}

/ * End of the menu * /

2. Paste the code before : ]]></b:skin>

3. And then save the changes. The next step, we will add the code below:

<div id="menu">
<ul>
<li><a href="url" target="_blank" >Link 1</a></li>
<li><a href="url" target="_blank" >Link 2</a></li>
<li><a href="url" target="_blank" >Link 3</a></li>
<li><a href="url" target="_blank" >Link 4</a></li>

and so on ..

</ul>
</div>

in the body, or on the Page Elements, by pressing "add a gadget" and then click the HTML / Javascript

Congratulations to try

How do I promote my FeedBurner feed on my Blogger site?

One of the ways to promote your FeedBurner feed on your Blogger site is by using FeedBurner's Publicity Tools to select a "chicklet" image to display a link to your FeedBurner feed from your blog's homepage.

1. Click the Publicize tab.

A list of publicity-related services appears.

1. Locate and click the Chicklet Chooser service.

The form shown below loads into the right side of the screen:

This form contains several options for buttons that promote (and link to) your FeedBurner feed.

1. Click the radio button next to the button you want to display on your site.
2. From the drop-down select "Blogger", then click Go! to add the chicklet as a widget.

1. Blogger will open in a new window. Follow the prompts there to continue to add the new widget.