Showing posts with label Code. Show all posts
Showing posts with label Code. Show all posts

Friday, March 13, 2009

Improve SEO With A Good Title Tag And Meta Tag




Good way to improve SEO is by providing a good title tag and meta tag to your blog.With a good title tag and meta tag your blog will be able to be indexed by Google.As a webmaster we are insist to be the first on Google,so in this page I will share you a good title tag and meta tag that is very helpful to make your blog indexed by Google.This is based on my experience after I browse the internet for this kind of things and the code needed is listed below:

*For the title tag use the lines below:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>


Of course you need to replace the title tag below with the lines above.

<title><data:blog.pageTitle/></title>


*For the meta tag use the lines below:

<META NAME="Description " CONTENT="Your blog description here"/>
<META NAME="Keywords" CONTENT="Keyword1,Keyword2,Keyword3 etc">
<META NAME="Author" CONTENT="Your name">
<META NAME="Category" CONTENT="Category of your blog here">
<META NAME="Audience" CONTENT="All">
<META NAME="Robots" CONTENT="Index,Follow">
<META NAME="Distribution" CONTENT="Global">
<META NAME="Language" CONTENT="en-US">
<META NAME="Rating" CONTENT="General">


Hopefully your blog will be indexed by Google immediately.
Click here to get your free mobile phone or apple ipod

Monday, January 26, 2009

Add AdSense Code Manually On The Blog Post On New Blogger




In the previous page I had share tips about how to add AdSense between blog post and at this time I will share tips about how to Add AdSense code manually on the blog post on new Blogger that can be done as follows:
1.Log in to Blogger with your account.
2.On the dashboard menu select template, here you will see the edit HTML tab and select this section, see the image below:



3.Then on the edit HTML tick the check box for Expand Widget Templates like this:



4.Next step is parsing the AdSense code as the example below:
<script type="text/javascript"> <! --
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
//-->
</ script>
<script type = "text / javascript"
src = "http://pagead2.googlesyndication.com/pagead/show_ads.js">
</ script>

Change the HTML characters by replacing the (<) to (&lt;) and the (>) to (&gt;) and the quote marks ( ") to (&quot;), then the code will be look like this:
&lt;script type=&quot;text/javascript&quot;&gt; &lt;! --
google_ad_client = &quot;pub-XXXXXXXXXXXXXXXX&quot;;
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = &quot;468x60_as&quot;;
google_ad_type = &quot;text_image&quot;;
google_ad_channel = &quot;&quot;;
//--&gt;
&lt;/ script&gt;
&lt;script type = &quot;text / javascript&quot;
src = &quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
&lt;/ script&gt;

You can also use parse HTML online services by clicking here.
4.Now back to edit HTML and scroll down on the edit HTML, search for the <data:post.body/> tags or you can press (Ctrl + F for IE and Firefox). You should see this code:
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <! - clear for photos floats ->
</ div>

5.And you can add the parsed AdSense code before or after the <data:post.body/> tags, if you want to place on left or right on the blog post the code will be like this:
<div style='float:left;'>
the parsed AdSense code
</ div>

If you want to place AdSense on the right ,just change the float from left to right.

Click here to get your free mobile phone or apple ipod

Monday, January 19, 2009

Create An Image Or Widgets Fixed In A Corner Of A Blog




In this page I will share tips about how to create an image or widgets in a corner of a blog, I share this because I inspired in a blog where the image is fixed in a corner of a blog and good views, to make it follow the steps below :
1.Log in to your blogger account.
2.On the dashboard menu select template tab.
3.On the template menu select edit HTML tab and scroll down you will see code like this:

]]></ b: skin>

4.And if you find it, now you can copy and paste the code below above that code:

# corner (
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

5.If you want to change the position of image just replace "left" with "right" and "bottom" with "top" and you can change the value from 0px to the value that you want.
6. The next step is place the code below before the </ body> tags:

<div id="corner">
<a href="http://nazarpunya-motogp.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoNG80JNr4F-a9kT-eCjIcr8vqNVeKunwdeQduJ3AhpA0H8tSipEMN_xzfWBs7SWdJ7yMCo-sgIUOuwo7i7aIXhgWP_38Gc2exbueFFGZjDeqM1tm6Ur_oveWQJFtVQBmw_B4UZgfWwDc/s144/repsol4.jpg" border="0" /> </ a>
</ div>

8.You can change the link and the URL image with yours and finish it.

Click here to get your free mobile phone or apple ipod

Friday, January 2, 2009

Background Image For Blog




In this page I will share tips about how to create a background image, the first things to be done are preparing URL image we can retrieve it from the free image hosting of the website such as Photobucket, Flickr, Picasa and others.Click on the image that we want after that right-click the mouse then select view image source and click on the image and right-click again select copy image source.The URL image is like this:
http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg
Now we already have a background image as the next step is:
1.Login to Blogger with your account.
2.On the dashboard menu select layout.
3.On the layout menu select edit HTML and scroll down you will see code like this:

body (
background: $ bgcolor;

4.Change the code above with an URL image that you have Like this:

body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg);

5.If you want to repeat or not, you can change the code like this:

body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat;

or

body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) no-repeat;

6.Alternatively, you may only want the image to be repeated horizontally or vertically. The code is this:
-horizontally:

body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat-x;

-or vertically:

body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat-y;

7.If you have an image that is not repeated, you may like to specify the exact position of this image on your page. The code like this:

body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat top left;

Your image will appear at the top left corner of your page. The other possible values that you can use to replace "top left" are:

top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

8.If you do not want it you can also define the horizontal and vertical alignments either in percentage or in pixels. Use either of these values instead, with x being the horizontal value and y being the vertical value.

x% y%;
xpx ypx;

9.You may specify whether you want your background image to remain in a fixed position when the contents of your blog are scrolled. By default, the picture Scrolls with your content. To have it fixed, the code like this:

body (
background: url (http://i247.photobucket.com/albums/gg130/chapunk501/motogp.jpg) repeat center center fixed;

10.You now have a background image for your blog.

Click here to get your free mobile phone or apple ipod

Sunday, December 14, 2008

Edit Template




Again, I question the template. There may be some of the comrade who have all felt very like a template, but there are difficulties the column width is not suit us, both the column width or sidebar mainbar (column where the post). Occasionally the column width of a template in a sense too wide or too narrow, if such a thing, I have good tips However in order for a wide field in accordance with our own desires.

To know the column width of a template, we can through it to its CSS style sheets. But of course there is a difference between a template with a template that other, this of course is up to the designer to its own template. As an example for the header, if the standard template blogger in the CSS style sheet is called the header, but for the template-designer-made templates of other bloggers out there who call Banner or the names of the other. A name will not necessarily affect the results you can be in, in the name of this life is just so easy to remember or recognize users by the template if you want to do edit template.
So that not too confusing, I take the example minima 3 column template . After viewing the growth of this template was a lot like it. If you are not satisfied with the width of the columns in the template, please follow the tips below , wide columns in accordance with the wishes comrade. Where is the location codes to set the column width? I give an example:


# header-wrapper (
width: 900px;
margin: 0 auto 10px;
border: 1px solid $ bordercolor;
)

# outer-wrapper (
width: 900px;
margin: 0 auto;
padding: 10px;
text-align: justify;
font: $ bodyfont;
)

# main-wrapper (
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

)

# sidebar-wrapper (
width: 220px;
float: right;
)

# newsidebar-wrapper (
width: 200px;
float: left;
)


As shown in the code above, that affect the width of my column is printed in red. Width,so get simple for it. 900px is a value that is equal to the width 900 pixels.

To better understand, code I describe above:

# header-wrapper (
width: 900px;
margin: 0 auto 10px;
border: 1px solid $ bordercolor;
)

This means the header-wrapper has a width of 900px and have a border (I'd mean border is a frame or margin) of 1 pixel with a solid line (solid line = full. Dashed line = broken. = Dotted line form of dots) with the colors in the border that could change-change (in the font and color).

header-wrapper is only naming it, is not absolute. If the change in the name of the head also does not do anything. width: 900px; mean width of 900 pixels.SO this is the value of 900 pixels that can change the suit , want to get more value added width, or in reducing get smaller.But I suggest, the value of this header must be the same as the value of the wide body to look good. border: 1px solid $ bordercolor; the header is to have any margin of 1 pixel, if you want to live more bold comrade add value, or if you want a margin is the only comrade remove this code.



# outer-wrapper (
width: 900px;
margin: 0 auto;
padding: 10px;
text-align: justify;
font: $ bodyfont;
)

This means the outer-wrapper has a width of 900px, the distance gap of 10 pixels align it with a flat left-and right kind of letter that could change in the change-over bar and the letter color.

outer wrapper is just a name only. width: 900px; means 900 pixels wide. 900 pixels wide which is provided for in the fields of, say only in this column main-wrapper, sidebar-wrapper, and newsidebar-wrapper. So in other words is the result of the outer wrapper Answer column width main-wrapper, sidebar-wrapper, and newsidebar-wrapper. When comrade incorporate content that exceeds the width of each column, then automatically also exceeds the width provided by the outer wrapper and that happens is one of the fields will be pulling down to this and make us a dreadful sight for the eyes. So if you want to change a wide field between the three, the width of the outer wrapper also have to be adjusted and changed.


# main-wrapper (
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

)

This means that the field has main-wrapper width of 435 pixels with the right margin of 20 pixels, the left margin and 20 pixels in this column placed left.

wrapper is the main-page column posts, what we will post the entry to this page. width: 435px; this means that the width of a column of 435 pixels, but because of the margin-left and margin-right, then the actual column width is 475 pixels. But the pause is only 40 pixels in order to limit the field only to be seen not touch. When comrade feel this column is too narrow or too small, you can add value, for example 550 pixels. When comrade intend alter this column, a column outer-wraper also must be added value. examples when the main-wrapper want to be 550 pixels, the 550px-475px = 75px. This means that the outer-wrapper column should be added as 75px, so 900px +75 px = 975px.


# sidebar-wrapper (
width: 220px;
float: right;
)

This means the column sidebar-wrapper has a width of 220 pixels and place it in the right screen.

Column sidebar-wrapper is a sidebar column or columns in the place where we store various accessories or do other. width: 220px; means have a width of 220 pixels, if you want to narrow or in the enlarge, we only need to change the value pixel only. But when the value of this column, do not forget to change the value in the space provided by outer-wrapper. example: if this column would like to become enlarged 250pixel the additional pixels is 30 pixels, so do not forget to add in the same outer-wrapper.

# newsidebar-wrapper (
width: 200px;
float: left;
)


This means newsidebar column-wrapper has a width of 200 pixels in the fields and in place on the screen to the left.

Like sidebar-wrapper, new sidebar column-wrapper is also the place or store various accessories blog tool. in this column so that we can create more load various accessories that we want. Column newsidebar-wrapper this is 200px wide, well when the change intend to stay the course pixel value, but do not forget to add in the same outer-wrapper.

Click here to get your free mobile phone or apple ipod

Custom Search