Langsung ke konten utama

MARI MENGEDIT TEMPLATE BLOGGER: bag 1: tema "TERKEMUKA"

Edit Blog terinsipirasi dari seorang pelajar SMA yang minta tolong di ajarkan mengedit blog tanpa latar pengatahuan koding. Karena mengedit tema (atau template) sangat berbeda dengan membuat sebuah template. Kesamaannya hanyalah pada dasar dari template yang kita pergunakan: Sama sama didesain berdasarkan platform blogger, sama kodenya, sama tujuan pemakaiannya. Hanya pada selebihnya desainer bermain dengan template dengan nilai estetika, rekayasa kecepatan dan nilai lebih SEO. Maka saya pribadi beranggapan mengedit tema hanya sedikit membutuhkan pengetahuan koding.

Pada perkenalan pertama blog ini akan memberikan contoh beberapa template yang telah di edit, atau bahkan di re-desain ulang tanpa meninggalkan ciri ciri khas asli bawaannya.
Gambar Navigasi menu pada tema "terkemuka" setelah di edit
Gambar tampilan footer tema "terkemuka" setelah diedit

APA SAJA YANG AKAN BERUBAH SETELAH TEMA BAWAAN DI EDIT?
1. Tampilan, tampilan yang dirobah bisa berupa warna, dan juga tataletak atau posisi widget, lebar konten, sidebar hingga gaya header dan footer. Ini benar benar akan berpedoman kepada selera estetika sang pengedit. Tool blogger yang terdapat pada dasbor blog dapat kita manfaatkan untuk melakukan hal ini.
Caranya masuk ke dasbor blog, pilih Tema, lalu pilih sesuaikan maka akan muncul opsi "DESAINER TEMA BLOGGER" dimana terdapat tool atau alat untuk memilih template (Saat ini blog edit tema blog sedang memakai template "Terkemuka")

Selanjutnya ada opsi pilihan seperti pilihan font atau jenis dan gaya hurup yang akan kita pakai buat konten, judul hingga link termasuk pilihan ukuran font atau berapa kecil dan besarnya huruf yang akan kita pergunakan buat blog. Masih disana ada terdapat opsi mengganti warna latar blog, warna huruf, warna header dan seterusnya. Itu langkah pertama pada saat mengedit template "edittemablog" ini

2. Merobah posisi widget. Pada tema atau template bawaan "terkemuka" dan template blog bawaan pada umumnya telah ada terdapat widget widget bawaan untuk kebutuhan blogging, misalnya popular post, label, arsip blog dll. dan tersedia tool untuk menambahkan widget baru dengan pilihan: entry yang di unggulkan, html/javascript, daftar link, gambar, pengikut dsb. Widget juga dapat digeser turun naik atau dipindahkan dari sidebar ke halaman utama atau naik ke header. 

Ketika kita merasa komposisi warna dan tataletak widget telah memenuhi harapan kita bisa meneruskan proyek pengeditan ini ke tingkat lebih lanjut.

3. Selanjutnya adalah MENAMBAHKAN WIDGET. Bisa berupa widget bawaan, namun agar tema terlihat cantik dan premium kita harus menambahkan widget widget yang tidak disertakan dalam opsi tema bawaan. Widget widget ini biasanya berupa:
  1. Navigasi menu yang responsive. Ingat walaupun tema "terkemuka" telah memiliki sidebar yang dapat kita rekayasa menjadi menu yang berisi daftar isi dengan merekayasa widget widget "arsip blog" menjadi daftar isi blog, namun menu navigasi yang langsung dapat dilihat oleh pembaca nampaknya adalah masih menjadi pilihan pavorit para blogger ternama di dunia ini. Karena menu tersebut terdapat pada website besar seperti kompas, Apple website, Samsung website,  dll. Cara membuat navigasi menu pada template terkemuka bisa melalui edit HTML atau dengan cara menambahkan widget HTML/javascript atau kombinasi keduanya, untuk tema terkemuka akan menjadi sangat responsive jika menggunakan elemen css. Menu navigasi juga harus mobile friendly, jangan sampai menu hanya bisa terlihat dan dipergunakan untuk ukuran desktop dan tidak terlihat atau tidak dapat dipergunakan mobile pada saat dibuka dilayar ponsel.
  2. Artikel terkait. Artikel terkait bisa kita buat dengan cara menambahkan widget tersebut melalui opsi edit HTML.
  3. Back to top widget bisa dibuat dengan cara menambahkan widget langsung melalui tambahkan widget dengan memilih widget HTML/javascript dan mengkopi paste kodenya dari internet - namun cara ini harus disesuaikan dengan template apa yang sedang dipakai, karena setiap template memiliki struktur kode yang berbeda beda - jadi sebaiknya memang dengan cara edit HTML.
  4. Memasang kode font awsome. Sangat berguna untuk mempercantik tampilan blog, misal jika kita ingin menampilkan ikon ikon tertentu pada widget blog.
  5. Atribusi. Mempercatik atau merobah atribusi blog sehingga footer blog menjadi tampak berbeda.
  6. Mempercepat blog. Bisa kita lakukan dengan mencegah perenderan paruh atas blog yang sangat mempengaruhi kecepatan blog setelah selesai pengeditan. Yang perlu kita robah adalah kode <head>, </head>, <body>, </body> misalnya merobah kode <head> dengan &lt;head&gt; dan kode </head> dengan &lt;/head&gt;&lt;!--<head/>--&gt; dan seterusnya.
    Artikel ini hanya sebagai pembukaan atau langkah awal tutorial mendesain ulang tema bawaan blog secara sederhana dan mudah. Kami dengan rutin akan menulis dan memperagakan contoh contoh tema tema yang telah kami edit dan re-desain ulang dan akan membagikannya secara gratis atau cuma cuma kepada pembaca. Anda akan melihat tema tema yang cantik dan premium namun dapat anda pakai dengan bebas tanpa kuatir hak cipta.
    Lihat demo tema blog ini DISINI

    Atau silahkan simak videonya:

    Nantikan artikel berikutnya!

    Komentar

    Postingan populer dari blog ini

    CARA MEMBERI NOMOR URUT UNTUK "POPULAR POSTS" BLOGGER

    Kalau kita bosan dengan tampilan widget bawaan blog tidak ada salahnya mengedit widget tersebut melalui "edit HTML" Dalam hal ini jika yang ingin kita robah tampilannya adalah widget "popular posts". Kita dapat memberi penomoran dengan label penomoran berwarna seperti contoh popular post milik EditBlog dibawah ini: Gambar popular posts tema editblog Caranya masuk kepengaturan dasbor blogger, pilih tema dan lalu pilih "edit HTML". Cari kode:   ]]></b:skin> Dan letakan kode dibawah ini tepat diatasnya: /*--- TRI Popular Posts --- */ .popular-posts ul { padding-left: 0px; counter-reset: popcount; } .popular-posts ul li:before { list-style-type: none; margin-right: 15px; padding: 0.3em 0.6em; counter-increment: popcount; content: counter(popcount); font-size: 16px; background: #FF1493; color: #ffffff; position: relative; font-weight: bold; font-family: georgia; float: left; border: 2px solid #FF1493; box-shadow: 1px 2px 9px #666666; } .popular-posts u...

    MEMBUAT RECENT POST RESPONSIVE GAYA EDITBLOG

    Recent post adalah adalah ujud lain dari thumbnail dan snippet home page blogger yang di olah secara singkat dari isi posingan blog secara berurut di mulai dari yang terbaru, untuk melengkapi tutorial pemakaian tema blogger editblog mungkin ada yang tertarik menambahkan widget ini ke dalam tema blog. Jika tidak abaikan saja. Image recent post pada side bar editblog Cara pemasangan recent post sangat mudah tingga masuk ke pengaturan blog masuk ke lay out pilih HTM/Java script kopi pastekan saja kode dibawa ini kedalam kotak widget HTM/Java script tadi: Setelah HTML/Javascript kita pilih akan muncul kotak dialog widget yang dapat ditulis atau di pastekan kode seperti ganbar dibawah ini: Kopi pastekan kode dibawah ini kedalam kotak widget tersebut: <div class="recentpoststyle"> <script type="text/javascript"> function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.lin...

    CARA MENGGUNAKAN TEMPLATE EDITBLOGTEMA UNTUK DIPAKAI SENDIRI SECARA GRATIS

    Jika kita belum berniat atau mampu membeli tema blogger, sedangkan tema bawaan jika tidak di modifikasi dengan benar akan kelihatan sangat standar. Maka kami memberikan solusinya dengan tema tema buatan kami, baik hasil edit/modifikasi penuh template bawaan hingga tema tema buatan kami sendiri. Semua gratis. Simple, bersih anda tidak perlu kuatir repot membuang script. Tema ini sudah dicoba dipergunakan oleh beberapa teman dari Indonesia, Malaysia, Singapore hingga Australia, Dan sebagian menyarankan kami agar memberikan dukungan teknis pemasangan. Selebihnya Alhamdulillah mereka menyatakan puas terutama karena dukungan teknis yang kami berikan secara inbox. Jadi sebelum menggunakannya kami ingatkan langkah langkah yang harus anda tempuh terlebih dahulu: 1. Mengosongkan Blanko Editorial HTML blogger.  Masuk ke pengaturan blog, pilih "Tema" lalu langsung masuk ke opsi "edit HTML"  Gambar opsi "edit HTML" Akan muncul HTML editor berisi kode kode bawaan blogg...