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.

19 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Edit blog tema bisa jadi tempat service tema nih..mantap

    BalasHapus
    Balasan
    1. He he he...bukan, cuma service gratis saja

      Hapus
  2. Masih belum berani ngutak ngatik saya mas

    BalasHapus
  3. Bang Day gpp, temanya yang saya pinjam sudah mulai saya rombak, terbentur kesibukan kerja di alam nyata ha ha ha

    BalasHapus
  4. bermanfaat…. tapi saya buta tehnik meng-edit...hehehe
    thank you for sharing

    BalasHapus
  5. Wih mantap mas sofyan, jelas bangen panduannya. Next bahas tips editing wordpress dong hihihi

    BalasHapus
    Balasan
    1. Mas Bintang saya kurang mengerti wordpress, platform blognya jelas beda, perlu latihan lagi nih, tapi idenya bagus. Terimakasih sudah menginsipirasi 😊

      Hapus
    2. Template AMP yang mas kirim sudah valid dan cepat sekali..termakasih banyak Mas :)

      Hapus
  6. sungguh pandai sekali admin blog ini
    saya tidak paham gradasi itu apanya

    BalasHapus
    Balasan
    1. Gradient=gradasi warna warni hidup saya gak pandai, mas. Sedang giat belajar dan lalu berbagi

      Hapus
  7. kalo urusannya dgn kode2 beginian saya masih nggak mudeng mas....mungkin harus dibaca berkali-kali sambil mempraktekkannya..

    BalasHapus
    Balasan
    1. Mas aris masa depanmu masih panjang hehehe

      Hapus
  8. Artikel seperti ini biasanya akan mudah mendapatkan terafik, karena para blogger membutuhkan informasi dan tutorialnya.

    BalasHapus
  9. mantap tutorialnya kang,, saya kudu banyak belajar.. belum berani ngotak ngatik kang takut gabisa nih. kudu banyak belajar. thanks for sharing kang

    BalasHapus
    Balasan
    1. Template Ratu Tips....sudah bagus dan responsive klo bisa jangan di utak atik kecuali jika memang harus di update menyesuaikan dengan tuntutan update global, untuk masa sekarang kayaknya belum perlu deh

      Hapus
  10. Mas Sofyan, tombol balas komentar saya dan milik teman saya tidak berfungsi, sehingga kalau membalas komentar milik komentator diblog saya balasan komentar saya muncul paling bawah.

    biasanya bisa diklik dan muncul dibawah koment milik komentator,seperti blog mas ini.

    Tolong dong buatkan tutorialnya,di google tutorialnya sulit dimengerti utk dijalankan.

    BalasHapus
    Balasan
    1. Baik Kang. Tapi biasanya hal itu terjadi justeru pada template berbeli yang telah kita utak atik dan kehilangan beberapa untaian kode perintah.

      Klo template ini memang sudah bawaannya he he he

      Hapus
Lebih baru Lebih lama

Formulir Kontak