Skip to main content

TRIK MODIFIKASI CSS TEMA CONTEMPO UNTUK 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.

Comments

  1. Saya salut nich dengan blog ini, sebab menyediakan konten2 yang berguna buat para blogger.

    ReplyDelete
    Replies
    1. Makasih kang hitung hitung menerapkan pelajaran koding ๐Ÿ˜Š

      Delete
  2. Di langkah ke 2. Tidak dapat import tema mas.

    Kami tidak dapat menyimpan tema Anda.
    Tema Anda tidak dapat diurai karena tidak diformat dengan baik. Pastikan semua elemen XML ditutup dengan benar. Pesan error XML:
    Open quote is expected for attribute "href" associated with an element type "a".

    ReplyDelete
    Replies
    1. Mas Imam, maaf itu benar, bukan XML tidak ditutup dengan tidak benar tapi penggalan kode HTML hilang/tidak tercopy penuh pada saat dipindah ke artikel ini: Khusus untuk langkah ke: 2 kami berikan perbaikannya, coba ulangai lagi.

      Terimakasih banyak atas koreksinya

      Delete
    2. Tanya lagi mas ๐Ÿ˜.

      Untuk langkah 3 itu kan di copas dlam tag ini kan?


      <![CDATA[

      Nah pertanyaan nya, kode asli di hapus apa langsung tambahkan?

      Soalnya di contempo bawaan efeknya tata letak menjadi melebar hilang sebagian.

      Delete
    3. Ditambahkan. Itu hanya untuk memperbaiki lay out contempo karena meninggalkan titik...titik pada saat dibuka melalui dasbor atau pengaturan blog contempo. Bisa diabaikan saja karena tidak akan mempengaruhi tampilan blog.

      Kecuali kalau mas mau jual template mungkin itu penting karena menyangkut estika. Hanya pemilik yang bisa melihat efeknya orang lain tidak.

      Delete
  3. Sangat bermanfaat gan lanjutkan

    ReplyDelete

Post a Comment

Ajukan pertanyaan dan berikan detailnya untuk memudahkan kami menganalisa dan troubleshooting agar kami dapat membantu atau membantu memecahkan masalah seputar kode kode HTML, CSS dan JS template blog kalian

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Bagaimanapun pertanyaan, kritik, saran dan masukan dari kalianlah yang membuat blog ini tetap bertahan dan ada.

Terimakasih

Salam dari Admin
Anissa Auliasari

Popular Posts

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

Tulisan ini di posting adalah karena terdapat problem yang muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTema yang dibuat untuk sementara berdasarkan tema sederhana bawaan blogger.
Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal sudah di publish ke hadapan pembaca. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering dan Add Bullets" yang tidak bekerja.

Sudah tentu ini pasti celah kelemahan tema jadi harus segera di perbaiki.

Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tesebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau list tadi hanya menampilkan tulisa…

BENANG MERAH CINTA SANG PENCIPTA

Andy Weir menulis sebuah cerpen pada tahun 2009, cerpen yang sangat menarik, indah sekaligus menakutkan jika dia bercerita perihal ide realitas hidup kita, semacam multiverse dalam fiksi sains dan fisika.
Aku adalah Tuhan dan Kamu sedang dalam perjalanan pulang ke rumah ketika kamu meninggal... Sebuah kecelakaan mobil, sebenarnya bukan peristiwa luarbiasa tetapi kematian tidak pernah memberikanmu pilihan. Kamu meninggalkan seorang isteri dan dua orang anak. Kematianmu itu tidak terlalu menyakitkan, paramedis telah berusaha menyelamatkan hidupmu, tetapi tidak ada harapan, tubuhmu telah hancur, dan itu lebih baik, percayalah kepadaku....
Dan disana, kamu akhirnya bertemu dengan Aku.

"Apa yang terjadi? " kamu bertanya. " Dimanakah aku kini ? " 
"Kamu sudah meninggal," Jawabku dengan suara datar. Bukan seperti nada yang menarik seperti yang kamu harapkan. 
"Apakah tadi aku ditabrak truk?...Sebuah tanjakan.." 
"Benar" Jawabku 
"Aku....…

Kisah UAS Dan Mellya Juniarti: Tidak ada yang abadi.

Sudah lama saya tidak menulis di halaman blog ini, karena lebih banyak terfokus pada pekerjaan sehari hari. Sampai akhirnya saya tergelitik untuk ikutan menulis tentang UAS, setelah membaca berita yang bertebaran di internet.
Menulis menurut sudut pandang saya sendiri. Atau lebih spesifiknya sebagai seorang blogger.

Fakta 1. Ustad Abdul Somad - Mellya Juniarti Resmi bercerai.
Peristiwa ini menarik perhatian saya apalagi tentang hubungan dua insan yang pernah bertekad memilih hidup bersama selamanya. Siapa sih yang ingin berpisah? Gambar di atas sudah bertebaran di internet, di medsos dan tidak akan dapat di hapus lagi dari dunia maya karena jalin menjalin sangat kuat di dalam library di dunia website.

Saya tahu itu karena saya peminat web dan mengerti segala impikasinya terhadap kehidupan dan privasi manusia pada saat ini. Dunia sekarang telah hampir kepada dimana dinding, lantai dan langit dapat mendengarkan setiap perkataan dan bahkan helaan nafas kita.

Ya, photo itu telah di postin…

PANDUAN LENGKAP MENGEDIT TEMPLATE EMPORIO

Untuk template blogger default versi 3 Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan bloggerKelebihan varian terbaru template bloggerMerombak heading blogger agar dinamisMemasang related postMemasang menu navigasiMenambahkan CSSMenambahkan HTMLMenambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.Pilih blog untuk diperbarui.Di menu sebelah kiri, klik Tema.Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.Buat perubahan yang Kalian inginkan.Klik Simpan tema. Template adalah bagian terpenting dari sebuah blog tidak perduli sobat ngeblognya pakai platform Wordpress, Jimdo, Wix atau Blogspot dan lain lain. Tidak perduli sobat memakai template premium berbeli atau hanya sekedar memakai template yang telah tersedia secara defau…

ALASAN MENGAPA MENGGANTI SISTEM ANDROID KE SISTEM OPERASI BARU NYARIS MUSTAHIL AKAN SUKSES

Huawei jelas sedang mencoba dan itu pasti akan ada harganya: Akan hadir sebuah sistem baru yang akan membuat kita panasaran seperti apa bentuk dan performanya jika dibanding dengan Android yang selama ini telah memberikannya "nyawa" untuk hidup dan menjadi sebesar sekarang.
Karena kita tahu sehebat apapun sebuah mesin gagdet tiada akan ada artinya tanpa sistem operasi, software dan aplikasi, maka suatu gadget  itu ibarat raga tanpa nyawa. Dilatari nasibnya yang ter"aniaya" oleh Trump (baca:Amerika)  tentu sangat menarik untuk mengikuti perkembangan nasib dari Huawei. Akankah Huawei tetap menjadi besar setelah menggunakan sistem operasinya sendiri?

Baca juga:
Siapa pemenang, siapa pacundang Amerika atau Cina? bagian pertamaSiapa pemenang, siapa pacundang Amerika atau Cina? bagian Kedua Oke mari kita simak penjelasan yang saya simpulkan dari pendapat para ahli mengapa hal itu sulit menjadi kenyataan:
1. Terlihat sederhana Platform mobile beserta ekosistemnya itu sanga…
Copyright © editblogtema. All rights reserved.