Zone Plus

• Silahkan kalian login dengan email dan password Anda ke blogger,

• Selanjutnya, pada dasboard blog Anda silahkan pilih Template,

• Selanjutnya, anda pilih Edit Html dan jangan lupa ceklist Expand Template Widget,
• Silahkan Anda cari kode yang mirip seperti di bawah 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>

• Ganti kode tersebut dengan kode di bawah ini,

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>

• Selanjutnya cari kode yang mirip seperti di bawah ini,

<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>

• Ganti kode di atas dengan kode di bawah ini,

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>

• Selanjutnya, cari lagi kode seperti di bawah ini,

<h1 class='title'>
<b:include name='title'/>
</h1>

• Ganti kode di atas dengan kode di bawah ini,

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='font-size:30px; font-weight:bold;letter-spacing:-1px;line-height:normal;margin:5px 5px 0;padding:15px 20px 3px 0;'>
<b:include name='title'/>
</p>
</b:if>

Note : Agar tampilannya sesuai dengan template Anda, mari kita mulai dengan mengedit Css pada template Anda.

• Silahkan Anda cari kode Css yang mirip di bawah ini,

.post h3 {
.......................
.......................
.......................
.......................
}
.post h3 a, #content h1 a:visited {
.......................
.......................
.......................
}
.post h3 a:hover {
.......................
}

• Ganti kode Css di atas dengan kode css 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;
}

• Selanjutnya, cari kode css yang mirip di bawah ini,

#header h1 {
.......................
.......................
.......................
}

#header h1, #header p {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

• Berikutnya, merubah tampilan Title Heading pada judul widget Anda dengan H3,

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2></b:if>

• Atau dengan melihat contohnya di bawah ini,

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h3 class='title'><data:title/></h3>
</b:if>

• Agar tampilan judul widget Anda sesuai dengan Title Heading Widget yang sudah dirubah menjadi h3, silahkan cari kode css di bawah ini,