Kali ini saya akan melanjutkan Tutorial Cara Membuat Template Blogger Sendiri Part 2 yang sebelumnya sudah saya pulikasikan sekarang kita lanjutkan dengan Cara memasang atau membuat Header di Template Blogger yang kita buat.
Yosh, langsung saja mari kita mulai.
Cara Membuat Template Blogger Sendiri Part 3
Pertama, buat terlebih dahulu kode CSS untuk template yang kita buat, jika kurang mengaerti bisa gunakan kode dibawah ini dan pastekan sebelum kode ]]></b:skin> atau </style>.
/* Header Wrapper */
#header{position:relative;display:block;overflow:hidden;}
#header .title{color:#222;font-size:260%;letter-spacing:1px;line-height:normal;margin:0;padding:0 0 20px 0;}
#header .title a {color:#222;}
#header .title a:hover {color:#dd5252;}
#header p.description {margin:5px auto 0 auto;color:#444;}
Kedua, buat kode HTML untuk memanggil kode CSS yang telah kita buat tadi atau gunakan kode yang sudah saya siapkan dibawah ini.
1. Copy dan Pastekan kode di bawah ini sebelum kode <aside id='main-wrapper'> atau dibawah kode <div id='wrapper'>.
<div id='header' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:section id='header' maxwidgets='1' showaddelement='no'>
</b:section>
</div>
2. Buat widget untuk gadget header yang telah di buat atau jika ingin lebih praktis gunakan kode dibawah ini dan pastekan tepat dibawah <b:section id='header' maxwidgets='1' showaddelement='no'>.
<b:widget id='Header1' locked='true' title='Demo Belajar Membuat Template Blogger (Header)' type='Header' version='1'>
<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'>
<b:include name='title'/>
</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'>
<b:include name='title'/>
</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'>
<b:include name='title'/>
</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.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'><data:title/></span>
</a>
</h1>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'><data:title/></span>
</a>
</h2>
</b:if>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'><data:title/></span>
</a>
</h2>
</b:if>
</b:includable>
</b:widget>
Ganti Title dangan judul blog sobat.
Nah, coba simpan template dan lihat hasilnya. Hasil dari part ini bisa anda lihat pada demo dibawah ini.
Jika kurang jelas atau belum mengerti silahkan hubungi saya di Contact Form blog ini, Selamat Mencoba.
