TRIK MODIFIKASI CSS TEMA CONTEMPO BAGIAN HEADER

Anggaplah pada lay out, komponen blog dibawah ini letaknya selalu berdekatan dengan header:

1. Letak Konten
2. Jarak judul ke Navigasi menu
3. Navigasi Menu
4. Menu atau tombol pencarian

Dan jika sobat pernah mengutak atik HTMLnya Contempo materialnya adalah CSS dan mengedit css bisa bikin pusing kepala sampai tujuh keliling dan mata berkunang kunang penuh bintang sepenuh alam semesta ha ha ha...becanda saja sobat.

1. LETAK KONTEN YANG MENINGGI SEPERTI MAU MENTOK KE JUDUL

Pernah gak sobat perhatikan kalau konten pas dibaca pada contempo asli kontennya naik ke atas kayak melewati garis batas perhatikan gambar ya.

Untuk membuat konten agar tidak terlihat "mengapung naik" seperti gambar diatas sobat cukup masuk ke dasbor atau pengaturan blog:

Sumber gambar ilustrasi: Blogger

1. Pilih Tema atau Theme
2. Pilih editHTML

Dan tinggal mencari kode CSS di bawah ini:

<Group description="Backgrounds">
<Variable name="body.background.height" description="Background height"
type="length"
min="420px"
max="640px"
default="120px" value="175px"/>
<Variable name="body.background" description="Background"
color="$(body.background.color)"
type="background"
default="$(color) none repeat scroll top left" value="$(color) none no-repeat scroll center center"/>
<Variable name="body.background.color" description="Body background color"
type="color"
default="#fff" value="#fff"/>
<Variable name="posts.background.color" description="Post background color"
type="color"
default="#fff" value="#fff"/>
<Variable name="body.background.blur" description="Background blur"
type="length"
min="0px"
max="50px"
default="0px" value="50px"/>
</Group>

Yang saya beri sorot nilai dengan warna kuning adalah nilai terendah (175px) nilai bawaan yang di setting secara default (secara bawaan) oleh tema blogger contempo.

Ganti angka yang disorot warna kuning tadi dari dari 120px jadi 100px saja dan 175 menjadi 75px atau 70px saja agar tampilannya menjadi flat atau rata gak perlu pakai "kroak" lagi, maka tampilan  tema contempo Blogger anda jadi tampak rapi ( termasuk pada tampilan hape) seperti yang di tunjukan pada gambar di bawah ini, namun jangan lupa SAVE template anda terlebih dahulu:

Namun jika anda tidak ingin ada warna batas abu abu pada header anda ganti saja nilainya menjadi "0px". namun tampilan kotak pencarian jadi tidak terlihat pada laptop namun masih terlihat pada tampilan hape.

Selamat sobat berhasil membuat tampilan nyundul menjadi tampilan flat yang nampak kokoh pada Tema Contempo sobat.

2. JARAK JUDUL KE NAVIGASI MENU

Jika sobat melakukan pemasangan menu navigasi custom pada template contempo sobat akan melihat letak judul yang terlalu tinggi dan jauh dari atas Menu Navigasi, cara mengatasinya lagi lagi terletak pada kode css nya. Kode css tambahan pada kotak css di menu desainer blogger gak bakalan mempan merobah jarak ini, jadi kita memang harus langsung merombak ke jantungnya.

1. Pilih Tema atau Theme
2. Pilih editHTML

Dan tinggal mencari kode CSS di bawah ini ketik saja: .Header h1 { 
pada kotak pencarian dengan menekan ctrl+f  atau ketik saja: .Header h1 {
  color: $(blog.title.color);
Kode lengkapnya seperti ini:

.Header h1 {
color: $(blog.title.color);
font: $(blog.title.font);
line-height: normal;
margin: 15px 0px 30px 0;
text-align: center;
width: 100%;
}

Perhatikan kode:  margin: 15px 0px 30px 0; Sobat ganti nilai angkanya menajadi:  margin: 25px 0px 50px 0; Karena menurut hemat saya 25px:50px adalah jarak pengaturan yang ideal judul ke Navigasi menu sehingga dapat menjadi sejajar letaknya dengan tombol menu pencarian pada tampilan mobile/smartphone (pada saat blog di tampilkan di hape)

Save dan....Selamat Sobat sukses merapatkan judul ke Menu Navigasi blogger!

3. NAVIGASI MENU

Menu navigasi untuk template bawaan terbaru blogger termasuk contempo dapat dibuat dari laman dengan memasukan link label blog daripada konten atau postingan yang telah kita buat. Saya akui sangat responsive dan mobile friendly.

Tetapi sekali lagi desainnya yaah...lagi lagi standard banget sobat harus memiliki pengatahuan HTML yang memadai jika misalnya ingin menambahkan menu dropdown pada menu bar model demikian.

Jadi ikuti saja trik dari kami sebagai berikut:

1. Masuk kepengaturan blogger>>Pilih Tema>>Masuk ke opsi edit HTML

Cari kode </head> atau kalau sobat sudah memodifikasinya demi kecepatan loading biasanya menjadi: &lt;/head&gt;&lt;!--<head/>--&gt;

Setelah ketemu letakan kode dibawah ini tepat diatasnya:

<style>
#menutop{width:100%;margin:0 auto;height:45px;background:#0F466E;
background:-webkit-linear-gradient(right,#E6E6FA0%,#5093C4 75%);
background:-moz-linear-gradient(right,#F0F8FF0%,#DA70D6 75%);
background:-o-linear-gradient(right,#F0F8FF 0%,#5093C4 75%);
background:-ms-linear-gradient(right,#F0F8FF 0%,#DA70D6 75%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#5093C4&#39;,endColorstr=&#39;#0F466E&#39;,GradientType=1);__ESCAPED_SOURCE_END_CLEAN_CSS__
;;border-bottom:1px solid #F0F8FF;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:40px}
#menutop li{float:left;display:inline;position:relative;font-family:&#39;trebuchet MS&#39;;font-size:16px;
font-weight:bold;}
#menutop a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#F5F5F5;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer}
#menutop label{font-family:&#39;trebuchet MS&#39;;font-size:30px;font-weight:400;display:none;width:35px;height:40px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:40px;line-height:40px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover &gt; ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
@media screen and (max-width:960px) {
#menutop li:hover &gt; ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#5093C4;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#fff}
#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#666;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#666;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#666;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}</style> <script type='text/javascript'>
//<![CDATA[
var cb=function(){var e=document.createElement('link');
e.rel='stylesheet',e.href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
var t=document.getElementsByTagName('head')[0];
t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener('load',cb);
//]]></script>

Perhatikan kode warna yang saya sorot merah jambu, sobat bisa menggantinya dengan kode warna HEX yang dapat di copy paste dari internet untuk menghasilkan kombinasi warna gradasi yang sesuai dengan selera.

2. Langkah berikutnya cari kode </header> jika sudah ketemu copy kode HTML dibawah ini dan pastekan diatasnya:

<nav id='menutop'><input type='checkbox'/>
<label/>
<ul>
<li><a href='your-link'>About</a></li>
<li><a href='your-link'>Contact</a></li>
<li><a href='your-link'>Sitemap</a></li>
<li class='sorting-01 facebook'><a href='your-link'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='your-link'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='your-link'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 rss-square'><a href='your-link'><i class='fa fa-rss-square fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='your-link'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>

3. Langkah ke selanjutnya untuk memperbaiki lay outContempoHybrid akibat pemasangan kode diatas adalah sbb: copy kode berikut dibawah ini:

body#layout .outer-wrapper {width:970px}
body#layout .content-wrapper {width:970px}
body#layout #header {width:450px;float:left;margin-top:30px}
body#layout #header2 {width:450px;float:right}
body#layout .main-wrapper {width:750px}
body#layout .sidebar-wrapper,.sidebar1-wrapper {width:330px;float:right}
body#layout #footer {width:800px}
.footer {width:215px;float:left}
body#layout ul {display: none}

Lalu cari kode <b:skin><![CDATA[ pada Contempo Hybrid letaknya persis dibawah kode ]]></b:skin> jika sobat bertemu dengan dua kurung siku sperti ini: >...< dengan tiga buah titik ditengahnya, double klik saja tepat pada titik tersebut sampai kode [CDATA[ muncul, dan pastekan kode diatas tepat dibawahnya.
Kode yang saya modifikasi diatas dapat menghilangkan error dan memvalidasi tampilan tema contempo hybrid secara keseluruhan.

Silahkan mengganti tanda pagar ('#') dengan link menu navigasi sobat sendiri dan menghapus link yang disorot warna kuning dan menggantikannya dengan link sobat sendiri.

Save Template, perhatikan Menu pada tema ContempoHybrid yang memakai menu Navigasi ini.

4. MEROBAH POSISI TOMBOL PENCARIAN BAWAAN CONTEMPO

Tombol atau menu pencarian bawaan contempo sesungguhnya sudah keren sekali jadi sayang kalau dibuang, namun sayangnya letaknya yang sudah FIX gak bisa digeser geser melalui pengaturan lay out dasbor blogger, tombol ini tidak mau berada di dalam dan diujung menubar buatan kita dengan cara demikian, kecuali kalau kita "memaksanya" agar berada di ujung menubar buatan kita, lihat contoh menu navigasi buatan kami yang telah kami "paksa" tombol pencarian bawaan contempo berada diujung sebelah kanannya:

Cantik bukan?

Cara menerapkannya adalah sbb:

1. Masuk kepengaturan blogger>>Pilih Tema>>Masuk ke opsi edit HTML:
2. Cari kode dibawah (dengan cara tekan ctrl+f) ketikan sebagian kode dibawah ini dan tekan enter.

.search .flat-icon-button.ripple {

box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
right: 90px;
top: 100px;
position: absolute;
background: transparent;
}

Perhatikan baik baik, kode:

right: 90px; dirobah menjadi right: 15px; agar posisi tombol pencarian tersebut pas berada diujung menu navigasi

Sedangkan  top: 90px; dirobah menjadi  right: 84px; agar posisinya tepat ditengah tinggi menu Navigasi

Demikian tips dan trik dari kami. Trik ini kami pelajari berdasarkan referensi W3School, kode pen dan beberapa pelajaran Hack (60% adalah hasil pekerjaan seorang cewek remaja cakep: Anissa). Tidak ada tutorial mengenai cara merombak kecuali jika sobat berusaha mengetahui trik triknya sendiri, dan jika sobat berhasil memodifikasi template yang satu ini tolong berbagi dan tuliskan agar bersama sama kita pelajari.