Bagaimana Cara Mengoptimalkan susunan Headings H1 di Judul Blog ini ?
Pada template yang biasa kita download ada bagian judul, sidebar, comments dan lainnya. Biasanya judul blog diberi nilai H1, Judul artikel H3 (.post),Sidebar H2 / H3, Comments H4. Nah, untuk optimasi di bagian judul blog dapat mengikuti panduan dan tutorialnya berikut ini :
Cara Mengubah Judul Blog menjadi Tag H1, judul artikel H2 :
1. Login ke blogger.com.
2. Masuk ke Template, pilih Edit HTML.
3. Centang / Ceklis Expand Widget Templates.
4. Cari kode seperti berikut ini
.post h3 {
color: #333333;
font-size: 16px;
font-family: Tahoma, Arial, Verdana;
font-weight: normal;
text-decoration: none;
margin: 0 0 5px;
padding: 10px 0 0;
}
.post h3 a, #content h1 a:visited {
color: #333333;
font-size: 22px;
font-weight: normal;
margin: 0 0 5px;
padding: 10px 0 0;
}
.post h3 a:hover {
color: #CF152A;
text-decoration: none;
}
color: #333333;
font-size: 16px;
font-family: Tahoma, Arial, Verdana;
font-weight: normal;
text-decoration: none;
margin: 0 0 5px;
padding: 10px 0 0;
}
.post h3 a, #content h1 a:visited {
color: #333333;
font-size: 22px;
font-weight: normal;
margin: 0 0 5px;
padding: 10px 0 0;
}
.post h3 a:hover {
color: #CF152A;
text-decoration: none;
}
Ganti kode diatas ( hanya yang seperti diatas dan depannya .post ) dengan kode di bawah ini :
.post h1, .post h2 {
color:$titlecolor;
font-size: 160%;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 4px;
}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong {
color:$titlecolor;
display: block;
font-weight: bold;
text-decoration: none;
}
.post h1 strong, .post h1 a:hover,.post h2 strong, .post h2 a:hover {
color: #333333;
}
color:$titlecolor;
font-size: 160%;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 4px;
}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong {
color:$titlecolor;
display: block;
font-weight: bold;
text-decoration: none;
}
.post h1 strong, .post h1 a:hover,.post h2 strong, .post h2 a:hover {
color: #333333;
}
5. Cari kode seperti ini :
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Ganti dengan kode diatas dengan kode di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
6. Cari kode seperti ini :
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
Ganti dengan kode di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
7. Temukan dan cari kode seperti ini :
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:include name='title'/>
</h1>
Ganti kode tersebut dengan kode Judul di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'>
</b:include></h1>
<b:else>
<div class='title' style='font-size: 24px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;'>
<b:include name='title'>
</b:include></div>
</b:else></b:if>
<h1 class='title'>
<b:include name='title'>
</b:include></h1>
<b:else>
<div class='title' style='font-size: 24px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;'>
<b:include name='title'>
</b:include></div>
</b:else></b:if>
8. Lakukan pengeditan HTML disini .
9. Save Template.
jangan lupa follow facebook saya di bawah ini !
0 komentar:
Posting Komentar