Cara Menciptakan Template Blogger Sendiri Part 3

Kali ini aku akan melanjutkan Tutorial Cara Membuat Template Blogger Sendiri Part 2 yang sebelumnya sudah aku pulikasikan kini kita lanjutkan dengan Cara memasang atau menciptakan Header di Template Blogger yang kita buat.

Yosh, eksklusif saja mari kita mulai.

Cara Membuat Template Blogger Sendiri Part 3

Pertama, buat terlebih dahulu isyarat CSS untuk template yang kita buat, kalau kurang mengaerti dapat gunakan isyarat dibawah ini dan pastekan sebelum isyarat ]]></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 isyarat HTML untuk memanggil isyarat CSS yang telah kita buat tadi atau gunakan isyarat yang sudah aku siapkan dibawah ini.

1. Copy dan Pastekan isyarat di bawah ini sebelum isyarat <aside id='main-wrapper'> atau dibawah isyarat <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 kalau ingin lebih mudah gunakan isyarat dibawah ini dan pastekan sempurna 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 == &quot;BEHIND&quot;'>       <!--       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='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' 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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>         </a>         <!--Show the description-->         <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>           <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 != &quot;item&quot;'>     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>       <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 dapat anda lihat pada demo dibawah ini.

• Result

Jika kurang terang atau belum mengerti silahkan hubungi aku di Contact Form blog ini, Selamat Mencoba.
Sumber https://www.denylistianto.com/

Bagikan Artikel ini