ELEMEN DESAIN TEMPLATE

tema blog redesign: alternative bagus untuk tema blogger premium

AvatarOleh:
Saya sangat tertarik dengan desain Envanto untuk tema tema mobile yang dikhuskan buat ponsel, mereka mampu membuat homepage yang responsive dan memukau, warna warni gradasi yang indah dan mengikuti standar estiteka yang sederhana. Disana mereka juga menjual apa yang mereka sebut sebagai "Envanto Element" yang dapat mempercantik tampilan blog secara drastis. Fokus mereka adalah mobile dan mobile template yang mereka jual juga lebih banyak AMP disamping HTML klasik.

Envanto hanyalah bahan referensi saya disamping desainer dunia lainnya, untuk Indonesia saya mengidolakan mas Sugeng, kang Ismet dan Arlina, namun tentu saja kita harus memiliki teknik dan seni kita sendiri, disini jelas pengaruh envanto sangat kuat pada saat saya mencoba mendesain sebuah tema:
  • Bersih, simple
  • Tidak ada kode kotor script yang mengarah kepada directlink
  • Stabil dan dukungan update.
Prinsipnya mendesain tema itu sederhana saja, buat rencana dengan mengikuti standar pengkodean, saya biasa mencorat coret buku harian kerja di perusahaan disela sela jam istirihat jika saya bosan kepada tema yang telah saya pergunakan buat blog, atau menyuruh seseorang membuat temanya. Misalnya saya akan membuat gambar baku seperi ini: (Hanya gambaran sederhananya)
Saya jelaskan apa maksudnya:

1. Header Wrapper
Header wrapper umumnya berisi judul dan keterangan blog. Letaknya pada bagian paling atas blog, pada beberapa desainer bisa saja elemen ini dipindah asal masih sesuai dengan ketentuan kode

2. Outer Wrapper
Outer wrapper mencakupi semua elemen dalam blog. Sesungguhnya semua elemen-elemen dalam blog disusun di dalam sebuah outer wrapper ini.

3. Header Wrapper
Header wrapper umumnya terdiri dari judul dan deskripsi blog. Letaknya pada bagian paling atas blog.

4. Content Wrapper
Content wrapper meliputi main wrapper dan sidebar wrapper. Letaknya tepat di bawah header.

5. Main Wrapper
Main wrapper berisi konten atau isi blog dan dikemas dalam bentuk posting, sering utak atik data:post.body ya letaknya di situ situ saja.

6. Sidebar Wrapper
Sidebar wrapper berfungsi sebagai tempatnya dari widget blog, merupakan penunjang sekaligus pelengkap sebuah blog. Widget widget yang membuat blog menjadi lengkap dan juga indah.

7. Footer Wrapper
Footer wrapper umumnya, berisi informasi-informasi tambahan misalnya desainer template yang digunakan, kapan blog tersebut dibuat, dan pada beberapa blog juga dapat memasang widget pada footer wrapper.

DESAIN DAN REDESAIN
a. Desain
Desain berarti mendesain dari awal, dan akan memakan waktu yang lama, saya tidak berpikir orang akan melakukan desain tanpa memiliki librari pribadi terlebih dahulu. Menulis koding dengan bantuan tool online saja bisa memakan waktu berhari hari sampai 3 hari. Walaupun banyak kode css cantik tersedia secara online namun kadang ktia harus mengeditnya terlebih dahulu agar sesuai dengan rancangan kita.

"Librari" yang saya maksud adalah kumpulan - yang bisa berupa: widget, tool tool dan elemen dasar desainer yang telah  kita simpan dan siap di modifikasi untuk pembuatan sebuah template yang benar benar berbeda. Semua itu saya simpan dengan cara teratur di dalam laptop.

Saya menyimpan tool tool lazyload dan tinyPNG untuk kecepatan blog misalnya, dan menyimpan ribuan widget yang sewaktu waktu bisa saya pakai atau untuk dimodifikasi ke dalam template blog buatan saya. Semua itu gratis, bahkan kode css Meyer paling sering saya pakai kedalam template.

Membuat template juga sama dengan membuat hal lain, membuat rumah misalnya kita butuh bahan semen dan pasir yang sama, atap dan kayu yang sama dengan para desainer lain. Jadi jika masuk kedalam hutan  web dan memakai tool yang sama, apakah kita meniru? Tidak, kita hanya melakukan hal yang memang seharusnya kita lakukan, dan mereka lebih dahulu melakukannya.

Anda bisa memanfaatkan dasbor blog dengan masuk ke Edit HTML dan hapus semua kode html didalam template bawaan, dan lalu mulailah menulis rancangan anda sendiri. Keuntungan memanfaatkan dasbor blogger adalah anda dapat mengkompile langsung hasil kerja proyek desain tema anda dengan mudah, jika dia sudah benar dan tidak lagi eror berarti anda sukses menulis kode kode anda sendiri.

Google tidak melarang kita melakukan itu, dia menganjurkannya.

b. Re-desain
Kita bisa juga melakukan redesain template yang sudah ada dengan cara yang sama namun lebih cepat dan terjamin keamanannya. Hanya tinggal memperbaiki, menambah dan atau mendesain ulang beberapa aspek daripada template yang sudah ada. Perhatikan empat tema bawaan blogger pada gambar di bawah ini:
Anda sangat mengenalnya bukan?

Dan tema tema itu telah tersedia di blogger. Walaupun terbatas jumlahnya namun dapat di desain ulang sehingga benar benar tampil beda! Pilihan tema atau template juga tergantung selera masing masing orang, namun perlu diperhatikan, semakin awal urutannya, semakin baru usianya. Dan tema yang terbaru selalu membawa update yang disesuaikan dengan masa terkini. Sebaliknya semakin kebawah temanya semakin tua usianya, semakin jauh gapnya dengan masa kekinian.

Tema tema seperti: Contempo, Soho, Emperio dan Terkemuka adalah template yang dibuat mengikuti perkembangan zaman, tema tema ini sangat responsive dan mobile friendly. Dapat di buktikan melalui opsi mobile friendly tema ini berjalan paralel antara versi desktop dengan mobilenya, tidak ada setting mobile diperlukan untuk tampilan ponsel, keempat tema ini sudah otomatis menyesuaikan ukuran tampilannya disegala layar gagdet anda.

Tidak seperti tema tema yang lebih tua yang memerlukan opsi pilihan setting tema mobile, custom, atau desktop, Ke empat tema tema diatas sudah sangat responsive dan sangat mobile friendly.

Namun kalau kita tidak atau kurang menyukai tampilan monoton bawaa tema, dan ingin memeberikan sentuhan desain, tentu saja kita dapat melakukannya. Kita dapat menambahkan tool elemen font awsome kedalam template, kita dapat memberikan sentuhan yang lebih baik. Saya meberikan contoh re-desain template yang sedang kami kerjakan di dalam video dibawah ini:
Itu adalah Contempo yang satunya tampilan pada layar iPad dengan sistem operasi iOS sedangkan yang lainnya jika dia tampil pada hape Android dengan layar yang lebih kecil.
Dan saya juga merombak tampilan tema "SOHO" seperti contoh pada demo:
DEMO TEMPLATE TERKEMUKA"
Struktur kode css pada 4 template bawaan diatas sangat bersih dan ringan, salut buat pembuatnya, yang saya lakukan hanya menggunting, menambah, dan mengedit elemen kode yang telah ada, lalu menambahkan tool dan widget yang dapat menopang tampilan plus kecepatan.

Artikel Terkaitnya:

6 comments

  1. Template yang dipake bagiin dong

    ReplyDelete
    Replies
    1. Pakudin tapi bukan tema AMP yo..dan linknya harus dibersihkan sendiri he he he ...minta ijin Anissa dulu

      Delete
  2. Sobat jika ingin belajar tentang hal-hal seperti ini (templete, HTML, bahasa Program dan lain-lain); adakah tempat kursus yang terpercaya dan kredibel?

    ReplyDelete
    Replies
    1. Kalau belajar harus percaya pada diri sendiri. Kami banyakan belajar sendiri dengan Tekat Dan kemauan. Insyaallah zaman sekarang bisa, dicoba dulu mas

      Delete
  3. setting main wrappernya gimana mz.. masih bingung di situ

    ReplyDelete
    Replies
    1. Risna baiknya belajar gunakan bootstrap deh. Dengan bantuan tool spt ini sepertinya kita bisa "short cut" membuat desain Dan mempersingkat Waktu. Aku percaya kalau Risna pasti bisa.

      Delete

Home

Labels

Abadi account action addicted adobe photoshop fix adobe photoshop mix adobe photoshop touch adsense agama AI akal alam Albert Einstein alexander the great. Allien Amerika AMP anak Androd android angkasa angkasa luar animal animal planet animasi antithieft aplikasi hebat Appe apple Apple Face ID Artifical Intelligent artificial inteligent artikel artis asesories asus atheis autoCAD autodidact awas Ayu Ting Ting badai bahasa bahasa. bakteri batam BBM beginning benar bencana berbagi berita berjalan berlari bijaksana bing bisnis kecil black hole Blackberry blackberry Messenger blog blogger blogger logo blogger moblie blogging bluetooth keyboard bluetooth mouse bocor bot BPJS buku bully buruh burung langka business camera cat cellphone ceramah cerita charles Darwin chat China cinta classic Cloud cloud drive contempo contempohybrid coolest covid 19 CSS curhat custom ROM cybercrime Darwin dasbor Deep mind Demo desain Design dewa dilema docomo dollar amerika download DPR RI drama Drive DSLR dunia earn money editblogtema Education ekonomi Email emas emporio endorse enggang English entertainment error etika evolusi Facebook fakta fanpage favicon feature fiksi fiksi sains filem filsafat finansial fisika flashdisk Florence Nightingle Florida food. forbes Free friendship fun futuristik G+ Gadget gagal Gagdet Galaxy Mega 6.3 Galaxy note 10.1 2014 edition gambir serawak game gaya hidup genetika Genius GENOM girl global gojek gold Google google adsense Google Rewards Opinion google%20drive google+ grafis Hack hacker handphone hantu hapeseken hari tua harimau harun yahya harvey heart secret hebat help me hewan hiburan hoax Hobit. hollywood horor HTML http://justdelete.me Huawei P20 pro hubungan hujatan hukum human humanbeing humor Hutan Lindung ICBM iis sugianto ilmuwan immortality impian Indosat infinity war iniJawabannya! insiden insipirasi intelligent Internasional internet invansion investment iOS iOS 11 iOS 8 iPad iPad Air ipad pro iphone iPhone 6 iPhone Case iPhone X iPhone Xs iphone. iPhoneX islam Israel isu sara jailbreak Jaime Sanjuan Ocabo Jalan Tikus janji Javascript Jenius Jerusalem jitu Job Jokowi Jokowi aja bekerja keras jokowi aja kreatif Jonru Ginting judi kamera kamera hape kantor Kaskus keabadian keadilan keamanan Kebenaran kecanduan kecelakaan kecerdasan buatan kehidupan keluarga kemajuan kemanan kemiskinan kemudahan hidup kenyamanan keruntuhan kesetiaan keyakinan keyboard external PC keyboard fisik tablet keyboard fisik tambahan keywords khairil anwar khotbah kiamat kisah klasik kode koding koes plus komedi komputer Konsipirasi konten kotak pandora kreatif kriminal krisis kristen kucing kuyang lagu lapangan kerja laptop leisure Lenovo Life lifehack lingkungan listrik logika logitech LOGO loneliness Lotgitech lowongan luar lucu MacBook madonna magis malam minggu Malaysia manipulatif manusia masa depan masa lalu mati tertawa media medis medsos membela diri mencari uang menggambar mengintip rahasia menulis meretas Messenger Micorosft Office Microsoft microsoft office microsoft%20office milk lover miras mitos mobile modal motivasi motivation motivation. movie Muhammad murai batu musik myths naluri NASA navigasi blogspot template network new news ngeblog Nokia X nuklir nyanyian nyata obat kuat Office office%20365 old time job online operating system oppo organisme original Otodidak pademi pahlawan pamali Pandora panduan paradox password PC pegawai negeri pekerja pekerjaan pemrograman pemula pencipta pendidikan pengarang penghasilan pension pensiun penulis perbankan perekamLayar perkawinan phablet phising PHK phone phone camera photographi phtography pilihan hidup pilosofi Play Store politik ponsel postingan potografer powered by blogger prabowo subianto prediksi teknologi premium pria pribadi prilaku privasi produktivitas programming promosi prostitusi psikologi Puasa publisher Puisi qoute Raffi Ahmad rahasia ramadhan rano karno rasialis relativitas reliji remaja renungan responsive review rhoma irama riba Robot ROM. stock ROM ruang waktu rumah sakit Rusia Safir screen sahabat sains salah Samsung samsung galaxy foldable Samsung Galaxy note 2014 Samsung S8 samsung tabS2 screenRecorder scy-fi SECRET secrets sejarah seken selebritis medsos self learning self-confident semesta sentinel SEO simalangkama simple singularity smarphone smartohone smartphone Smartwatch social soho song sony sosial spam spoiler Spy Stephen Hawking steve job strategi struktur success sukses suku terasing supernatural tablet tablet 7" TabletAndroid takhyul taktik tantangan target tauhid technic Technology teknik teknologi teknologi hoax telkomsel tema template tenaga kerja teologi teori terbaik theme thomas alpha edison Time traveller tips toko online Tokoh tourism town tragedi trik triks troubleshooting Tuhan Tutorial Tutorial. tweeter twiteer uang UFO ultrabook unggas langka United States universe usaha video viral virtual vivo waktu website widget Windows 8 Windows PC wisata women WORDPRESS xiomi xml xperia Yahoo yahudi

Get Updates