Search Engine Optimization for blog (SEO)
Lots of ways in which
to improve the SEO blogs such as by modifying the template blogspot. And this
time GhostNet will explain how to create a more dynamic and Heading Tags sure
your blog will be more SEO friendly.
Ok, just to do:
1. First go to the
blogger dashboard
2. Then click on the
template> Edit HTML
3. After that, copy
the code below
<b:widget id='Header1' locked='true' title='GHOSTNET (Header)' type='Header'>
<b:includable
id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement ==
"BEHIND"'>
<!--
Show image as background to text.
You can't really calculate the width
reliably in JS because margins
are not taken into account by any of
clientWidth, offsetWidth or
scrollWidth, so we don't force a minimum
width if the user is using shrink
to fit.
This results in a margin-width's
worth of pixels being cropped. If the
user is not using shrink to fit
then we expand the header.
-->
<b:if cond='data:mobile'>
<div
id='header-inner'>
<div
class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div
expr:style='"background-image: url(\"" +
data:sourceUrl + "\"); "
+
"background-position: "
+
data:backgroundPositionStyleStr + "; "
+ data:widthStyleStr
+ "min-height: " + data:height
+
"_height: " + data:height
+ "background-repeat:
no-repeat; "' id='header-inner'>
<div
class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a
expr:href='data:blog.homepageUrl' style='display: block'>
<img
expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId
+ "_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
</a>
<!--Show the
description-->
<b:if cond='data:imagePlacement
== "BEFORE_DESCRIPTION"'>
<b:include
name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include
name='title'/>
</h1>
</div>
<b:include
name='description'/>
</div>
</b:if>
</b:includable>
<b:includable
id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable
id='title'>
<b:if cond='data:blog.url ==
data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a
expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
4. The above code is the code for the header, where
menampilakan title and description. Before you search for the code, please note
that my code red mark above, please replace the title of your blog
5. If you've found that code, please delete all of the
code and then replace or replace with below.
<b:widget id='Header1'
locked='true' title='GHOSTNET (Header)' type='Header'>
<b:includable
id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement ==
"BEHIND"'>
<!--
Show image as background to text.
You can't really calculate the width
reliably in JS because margins
are not taken into account by any of
clientWidth, offsetWidth or
scrollWidth, so we don't force a minimum
width if the user is using shrink
to fit.
This results in a margin-width's
worth of pixels being cropped. If the
user is not using shrink to fit
then we expand the header.
-->
<b:if cond='data:mobile'>
<div
id='header-inner'>
<div
class='titlewrapper' style='background: transparent'>
<h1
class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div
expr:style='"background-image: url(\"" +
data:sourceUrl + "\"); "
+
"background-position: "
+
data:backgroundPositionStyleStr + "; "
+ data:widthStyleStr
+ "min-height: " + data:height
+
"_height: " + data:height
+ "background-repeat:
no-repeat; "' id='header-inner'>
<div
class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<b:if cond='data:blog.pageType
!= "item"'>
<b:if cond='data:blog.pageType !=
"static_page"'>
<h1
style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0
0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
<a
expr:href='data:blog.homepageUrl' style='display: block'>
<img
expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId
+ "_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
</a>
<!--Show the
description-->
<b:if
cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include
name='description'/>
<b:if cond='data:blog.pageType !=
"item"'>
<b:if cond='data:blog.pageType
!= "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0
0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if
cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType ==
"static_page"'>
<p
class='title'><b:include name='title'/></p>
<b:else/>
<h1
class='title'><b:include name='title'/></h1>
</b:if>
<b:else/>
<p
class='title'><b:include name='title'/></p>
</b:if>
<b:include
name='description'/>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p
class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url ==
data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a
expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
6. Not yet finished,
the next step is to edit the title of the post. And the way he is looking at
the code below into your template
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'
itemprop='name'>
<b:if cond='data:post.link'>
<a
expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url !=
data:post.url'>
<a
expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
7. Then delete all of
the code and replace with the following code
<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType !=
"item"'>
<b:if cond='data:blog.pageType ==
"static_page"'>
<h1 class='post-title entry-title'
itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if
cond='data:post.url'>
<b:if
cond='data:blog.url != data:post.url'>
<a
expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
<b:else/>
<h2 class='post-title entry-title'
itemprop='name'>
<b:if cond='data:post.link'>
<a
expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if
cond='data:post.url'>
<b:if
cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'
itemprop='name'>
<b:if cond='data:post.link'>
<a
expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if
cond='data:blog.url != data:post.url'>
<a
expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if>
8. Actually until
this stage is enough to make a heading tag structure in a blog to be dynamic,
but there will be oddities that will be seen on your blog, the title of the
blog becomes a small visible. And the solution is to find this code:
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top)
$(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
9. After that, remove
and replace the premises code below
.Header h1.title,.Header p.title {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top)
$(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1.title a,.Header p.title a {
color: $(header.text.color);
}
And completed. Hope it is useful
0 komentar:
Post a Comment