Ditulis oleh: Ditulis pada: 6/11/2019
Bagian 2 Lanjutan Belajar Membuat Tema Kustom Blogger Dari Awal - Pada tutorial lanjutan belajar membuat tema kustom blogger dari awal bagian 2 ini, kita akan merubah dan membuat header blogger menjadi dinamis sehingga menjadi lebih SEO friendly.
Setelah kemarin kita berhasil membuat sebuah custom template, tetapi tampilan dan lainnya masih sangat sederhana. Untuk itu diperlukan tindakan lanjutan, salah satunya yang akan kita lakukan sekarang adalah merubah dan membuat header blogger menjadi dinamis sehingga menjadi lebih SEO friendly.
Secara default, header blogger menggunakan tag H1 untuk semua halaman. Dan akan menjadi masalah jika kita menggunakan logo untuk Title Blog yaitu tag H1 menghilang.
Nah sekarang kita akan merubah header blog menjadi lebih dinamis dan SEO friendly. Kita akan menggunakan Title Blog sebagai header H1 di halaman bukan postingan dan menggunakan Title Post sebagai header H1 di halaman postingan.
Dan juga kita akan memperbaiki H1 yang menghilang ketika menggunakan logo atau gambar untuk Title Blog.
Merubah Title Blog
Kemarin kita mendapatkan kode default header blogger seperti berikut ini.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Membuat Blog (Header)' type='Header'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>-1</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
<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:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
<data:title/>
</b:tag>
</b:includable>
</b:widget>
</b:section>Sekarang kita rubah menjadi H1 selain di halaman postingan, sementara di halaman postingan menjadi tag p (H1 di postingan menjadi Judul Postingan).
Perhatikan kode di atas yang ditandai seperti berikut ini.
<h1 class='title'>
<b:include name='title'/>
</h1>Silahkan ganti dengan kode di bawah ini.
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>Kemudian kita perbaiki kode header ketika kita menggunakan gambar atau logo. Perhatikan kode di atas yang ditandai seperti berikut ini.
<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>Silahkan ganti dengan kode di bawah ini.
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title-img'>
<a expr:href='data:blog.homepageUrl' expr:title='data:title'>
<img expr:alt='data:title' expr:src='data:sourceUrl' expr:id='data:widget.instanceId + "_headerimg"' height='50' width='200'/><span><data:title/></span>
</a>
</h1>
<b:else/>
<p class='title-img'>
<a class='logo-img' expr:href='data:blog.homepageUrl' expr:title='data:title'>
<img expr:alt='data:title' expr:src='data:sourceUrl' expr:id='data:widget.instanceId + "_headerimg"' height='50' width='200'/><span><data:title/></span>
</a>
</p>
</b:if>Kemudian kita rapihkan tampilannya. Silahkan cari CSS berikut.
.header h1 {
font-size: 30px;
margin: 0;
padding: 0;
}
.header h1 a{
color: #333;
text-decoration: none;
}Dan silahkan ganti dengan CSS di bawah ini.
#header h1.title,
#header p.title {
font-size: 30px;
margin: 0;
padding: 0;
font-weight: bold
}
#header h1.title-img span,
#header p.title-img span,
#header p.title-img a span,
#header h1.title-img a span {
position: fixed;
top: -3000px;
left: -3000px;
font-size: 0;
}
#header h1.title-img img,
#header p.title-img img {
width: auto;
max-width: 100%;
height: 50px;
vertical-align: -8%
}
.header h1.title a,
#header p.title a{
color: #333;
text-decoration: none;
}Merubah Title Post
Kemudian setelah itu kita rubah Title Post menjadi H1 di halaman postingan dan menjadi H2 selain di halaman postingan.
Secara default, kode Title Post Blogger seperti berikut ini.
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>Anda bisa mencarinya di bagian ini
<b:includable id='post' var='post'>Setelah ketemu, silahkan ganti kode default Title Post Blogger tersebut dengan kode berikut ini.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='headline'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title' itemprop='headline'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>Kemudian kita rapihkan tampilannya. Cari kode CSS berikut.
h3.post-title {
font-size: 20px;
font-weight: bold;
margin: 20px 0;
}
h3.post-title a {
color: #333;
text-decoration: none;
}Dan silahkan ganti dengan CSS di bawah ini.
h1.post-title,
h2.post-title {
font-size: 20px;
font-weight: bold;
margin: 20px 0;
}
h1.post-title a,
h2.post-title a {
color: #333;
text-decoration: none;
}Nah, sampai di sini kita sudah merubah header default Blogger menjadi dinamis dan lebih SEO friendly.
Silahkan Anda coba judul blog diganti dengan gambar atau logo melalui tata letak.
Demikianlah postingan lanjutan belajar membuat blog dari nol atau dari awal bagian 2, silahkan ikuti terus seri postingan ini di postingan lainnya.
Atau silahkan tonton video tentan cara membuat blogger custom template dari awal bagian 2 ini agar lebih jelas.
Semoga bermanfaat.