Langsung ke konten utama

Buat Header Dan Banner Sejajar

Setiap blog yang telah di modifikasi template, widget, domain dan struktur kelengkapan lainnya akan mempunyai kode/script yang berbeda-beda. Bahkan versi editor pada blog juga mengalami perubahan. Perubahan itu terjadi sebab teknologi blog dan website yang terus berkembang, contohnya versi HTML dan pembaharuan isyarat yang mendukung teknologi baru.

Ada seorang blogger yang mengalami duduk perkara menciptakan header dan banner bersebelahan. Dia mencoba browsing sampai menerapkan trick yang ia temukan di lebih 10 blog tetapi selalu gagal. Alasannya header dan banner tidak sejajar alias tumpang tindih tidak karuan. Ternyata ia gres menyadari bahwa isyarat default pada blognya berbeda dan sebagian besar trick yang ia dapatkan dari banyak blog tersebut ternyata hasil copy-paste dari blog lainnya. Lalu bagaimana solusinya?
Berikut cara gampang menambahkan widget untuk banner semoga sejajar dengan header :

Persiapan awal :

A. Buatlah gambar Header berukuran 342 X 110 dan Banner berukuran 468 X 90 dengan format PNG bila background ingin transparan atau dengan format JPG bila background berwarna. Untuk gambar banner, silahkan anda upload ke Google Photo. Setelah di upload, anada klik gambar kemudian klik kanan pilih “Copy Image Address”, buka notepada atau MS Word kemudian pastekan alamatnya dan simpan.

B.Masuk ke dashboard pilih Tema/Themes kemudian ubah setting lebar halaman menjadi 990, biasanya halaman default blogger punya ukuran lebar 930. Bila anda memakai 2 sidebar maka setting kepingan kiri 200 dan kepingan kanan 250 sampai 260. Atau boleh kiri 210 - kanan 250 kemudian terapkan.

Langkah 1 :
- Klik back to blogger semoga masuk ke sajian dashboard kemudian pilih Tata Letak/Layout.
- Tambahkan Add Gadget/Widget berupa HTML/Java Script. Biarkan kosong dulu.
- Pindah ke sajian Tema/Themes, pilih edit HTML. Cari isyarat HTML <header>, untuk mempercepat tekan CTRL + F bersamaan kemudian copy paste isyarat <header>. Anda  akan menemukan kode  tepat di bawah <header> yaitu <div class='header-outer'>. Kode tersebut panjang sampai ke epilog isyarat HTML </header>. Berikut isyarat HTML-nya :

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
 <div class='cap-left'/>
<div class='cap-right'/>
</div>
....................................
....................................
.....................................
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>
 Setiap blog yang telah di modifikasi template Buat header dan banner sejajar
Layout

Catatan : Ganti semua isyarat berwarna merah tersebut di atas dengan isyarat berikut :

<div style='clear: both;'/>
<div class='row' id='header-wrappers'>
<div class='headerleft'>
<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Atauruz (Header)' type='Header' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
<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='&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'>
<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'><h1 style='display:none'/>
<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'>
<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'>
<h3 class='description'><span><data:description/></span></h3>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='headerright'>
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title=' ' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<Only display title if it's non-empty >
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

 <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
<div style='clear: both;'/>
 </div>

Setelah isyarat tersebut anda copy paste kemudian save. Itu yaitu langkah pertama mengganti isyarat HTML.
Selanjutnya mengganti isyarat CSS. Berikut cara mengganti isyarat CSS :

Langkah II :
- Cari isyarat <b:skin>, Klik CTRL + F untuk mempercepat.anda akan melihat isyarat <b:skin>...</b:skin> kemudian klik saja titik-titik itu. Masukkan isyarat CSS berikut diatas </b:skin> :

#header-wrappers{height:auto;padding:0}body#layout .headerleft{float:left;width:342px;max-height:none;margin:0;padding:0}body#layout #headerleft{background-color:#b57dcc !important;border-color:#8a52a1 !important}body#layout .headerleft .widget-content{border-color:#8a52a1}body#layout .headerright{float:right;width:342px;margin:0}body#layout

.headerright,.headerleft{float:left;width:468px;text-align:center;height:auto;margin:0 auto;clear:both}.headerleft img{margin:2px;padding-bottom:8px}.headerright{margin:5px auto 0}}@media only screen and (max-width: 980px)
#headerright .widget-content,body#layout #ads-inter .widget-content,body#layout #ads-home .widget-content,body#layout #post-ads-footer .widget-content{border-color:#f1c410 !important}body#layout #headerright .draggable-widget .widget-wrap2,body#layout #ads-inter .draggable-widget .widget-wrap2,body#layout #ads-home .draggable-widget .widget-wrap2,body#layout #post-ads-footer .draggable-widget .widget-wrap2{background-color:#f1c410 !important;cursor:move}]]></b:skin>

Setelah anda mengganti isyarat CSS tersebut, kemudian save.

Sekarang giliran mengatur widget tambahan. Masuk ke dashboard sajian kemudian pilih Tata Letak/Layout.
Widget berupa HTML/Java Script yang tadi anda tambahkan klik edit. Isilah dengan isyarat alamat gambar atau  banner berukuran 468 X 90 dari uploader Blogger. Kodenya ibarat mirip ini:

<a href="https://3.bp.blogspot.com/-MabDjQBp7xI/WnArbKoBzeI/ACAAAAAABA0/xNlSFjD7Tj0TIiBVwsPxkEr7XqUl-J7BACLcBGAs/s1600/banner468X90.png" imageanchor="1"><img alt=" Setiap blog yang telah di modifikasi template Buat header dan banner sejajar" border="0" data-original-height="90" data-original-width="468" src="https://3.bp.blogspot.com/-NaaDjQBp7xI/WqArbKdBzeI/AAAAAAAABA0/xNlSFjD7Tj0TIiBVwsPxkEr7XqUl-J7BACLcBGAs/s1600/banner468X90.png" title="Buat header dan banner sejajar" /></a>

 Setiap blog yang telah di modifikasi template Buat header dan banner sejajar
Upload gambar
Cara mendapat isyarat gambarnya melalui upload ke blogger.Ini caranya :
Buka dashboard dan pilih “Posts” kemudian buatlah New Post dalam mode Compose.Kemudian upload gambarnya.Klik gambarnya pilih “Original Size” dan isi property gambarnya.Contoh : Alt text = banner468x90. Alt = banner.Save tapi jangan di publish.Ubah ke mode HTML kemudian copy alamat gambarnya yang ibarat isyarat diatas.Setelah di copy kemudian masukkan isyarat tersebut ke widget/gadget tanpa diberikan judul.Demikian trick lengkap menciptakan header dan banner sejajar kiri-kanan jikalau isyarat blog anda berbeda dengan isyarat blog lain. Bila ada pertanyaan, silahkan bertanya sesuai topik dengan cara klik goresan pena “comment” dibawah posting ini.

Komentar