CARA MENGHAPUS GRADASI WARNA TEMA VIOMAGZ TERBARU DAN MENGGANTINYA DENGAN WARNA INFINITY

Tampilan Navigasi tema buatan Mas Sugeng

Ada pertanyaan yang diajukan melalui email (gmail):

Dear Mas Sofyan,
Saya membeli dan memakai viomag terbaru buatan mas Sugeng tapi saya ingin merobah tampilan menu navigasinya menjadi berwarna warni daripada sekedar gradasi dua warna, bisakah anda memberikan tutorial cara membuat menu navigasinya berwarna warni sperti layaknya infinity color buatan Arlina...bla..bla..bla..

Template viomag terbaru ini sebenarnya sudah memiliki warna gradasi dua warna pada navigasi menunya, yang sebelah kanan dan sebelah kirinya bisa dirubah berbeda warna dengan mudah melalui opsi pengaturan blogger yakni melalui Desainer Tema Blogger. Tapi ada yang mencoba untuk merobah tampilannya menjadi infinity color.

Mas Sugeng sendiri kayaknya gak akan keberatan kalau pengguna ingin memodifikasi sedikit tampilan tema buatannya, tapi saya tekankan secara kesluruhan viomag sudah sangat bagus, stabil dan memenuhi kriteria standard blogging, tapi yah yang namanya kita manusia gak akan pernah ada puasnya.

Sebenarnya saya ragu untuk memenuhinya karena pertanyaan serupa pernah diajukan melalu blog comment di blog ini pada salah satu tutorial:

CARA MEMBUAT GRADASI WARNA PADA HEADER BLOGGER

Dan saya telah menjawabnya, akan tetapi karena pertanyaan terulang saya akan memberikan triknya sbb:

1. Buka template viomag anda melalui pengaturan blogger seperti biasa saat anda mau menambahkan widget pada blog.
2. Pilih "Tema atau Template"
3. Pilih editHTML

Pada halaman HTML cari kode berikut di template mas Sugeng yang keren ini:

/* HEADER */
#header-container {

Dibawah kode tersebut terdapat kode dibawah ini:

background: $(header.background.kiri);

background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));

-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);

box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);

position: fixed;

top: 0;

left: 0;

right: 0;

width: 100%;

z-index: 999;

height: 48px;

}

Dan lalu hapus saja seluruh kode yang saya sorot dengan warna kuning tersebut silahkan diganti dengan kode yang telah saya modifikasi di bawah ini:

background: linear-gradient(-50deg, #F0FFFF, #FFB6C1, #20aadb, #87CEFA);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Lalu SAVE template.

KELEMAHAN:

Navigasi akan kehilangan "sticky" alias tidak fix berada diatas header pada saat di scroll , namun anda bisa memodifikasinya dan akan kami sediakan tutorialnya dilain waktu. Banyak juga yang berpendapat Tutorial diatas sudah cukup membantu karena tidak semua orang menyukai menu navigasi yang sticky.

Kode dibawah ini tidak akan berfungsi lagi untuk opsi "sticky mode" pada viomag versi terbaru tersebut. Saya berencana akan memodifikasinya.

position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;
}

Bukan bermaksud meng-adu suhu Mas Sugeng sama Mbak Arlina ya, dua duanya adalah Master dalam hal ngeblog karena sudah sakti mandraguna, hanya saja kita butuh sedikit kebebasan untuk mendesain ulang beberapa tema yang sebenarnya sudah cantik cantik tersebut agar tampak lebih fresh, lebih update atau malah lebih hancur ha ha ha...

Semoga bermanfaat jika ada pertanyaan, kami akan menjawab dan memberikan penjelasan se simpel mungkin.