Mecha versi 2.6.4 sudah dirilis!

Tema Open-Source untuk Blogger

Berikut ini merupakan salah satu tema Blogger buatan Hermawan Yogi dengan kode sumber yang terbuka yang dapat kalian kembangkan untuk menciptakan tema yang lebih kompleks.

Tabel Konten
  1. Struktur Sumber 
  2. Konfigurasi 
  3. Struktur Produk 
Open-Source Blogger Theme
Tema Blogger Dasar: BloggerPack.

Sangat sulit mencari komunitas pengembang tema Blogger yang memiliki semangat keterbukaan kode sumber seperti Saya. Selain karena Blogger bukan merupakan layanan blog yang terbuka, minimnya dokumentasi resmi akan kode-kode pada tema Blogger memaksa kita untuk menggunakan waktu dan tenaga yang banyak untuk mempelajari setiap kode yang ada secara otodidak dan tanpa bimbingan. Akibatnya, orang-orang yang berhasil tahu dan/atau menemukan sesuatu yang baru pada mesin Blogger lebih memilih untuk mengembangkan dan merilis tema-tema mereka secara mandiri dan bahkan sembunyi-sembunyi tanpa memberitahu kita tentang apa-apa saja yang telah mereka lakukan dan kembangkan pada tema yang mereka buat.

Topik-topik seperti cara menandai komentar administrator, cara menghapus CSS dan JavaScript bawaan Blogger, cara membuat komentar berbalas, dan cara menyisipkan kode CSS dan JavaScript kustom pada postingan tertentu pernah begitu populer sepanjang pengamatan Saya dari pertama kali Saya mengenal Blogger sampai sekarang.

Berat rasanya untuk membagikan temuan-temuan tersebut secara cuma-cuma karena kebanyakan dari kita selama ini memang hanya bisa menebak-nebak saja pada apa yang terjadi pada kode-kode XML Blogger dari sisi peladen dengan melihat melalui kode keluaran HTML-nya saja. Sangat memprihatinkan memang, tapi Saya bisa memaklumi hal tersebut karena dahulu Saya juga pernah menjadi seperti kalian.

Rasanya seperti sedang mencari harta karun. Ketika kalian berhasil menemukannya, maka kalian akan terburu-buru memberitahukannya kepada semua orang di seluruh alam semesta karena kalian takut nanti akan ada orang lain juga yang berhasil menemukannya setelah kalian namun lebih dahulu memberitahukannya. Ada semacam ambisi untuk menjadi yang pertama, dan temuan-temuan sederhana pada Blogger yang serba closed-source membuat kalian seolah layak untuk mendapatkan hak paten dari Pemerintah, sehingga orang lain yang ingin mengimplementasikan temuan kalian akan memiliki kewajiban untuk membayar royalti ratusan juta rupiah kepada kalian. Kalian kemudian akan menjadi orang yang kaya raya berkat Blogger.

Semangat-semangat semacam itulah yang kadang membuat para pengembang Blogger menjadi tertantang. Sampai sekarang Saya bahkan masih belum tahu tentang bagaimana cara mendeteksi kueri ?amp=1 pada URL blog.

Sudah cukup mengkhayalnya ya! Sekarang Saya mau memperkenalkan sebuah proyek tema Blogger dengan kode sumber yang terbuka dari Hermawan Yogi, namanya BloggerPack. Tema ini adalah tema mentah yang tidak bisa digunakan secara langsung tanpa dilakukan kompilasi dan pembangunan terlebih dahulu menggunakan alat pembangun (beliau menggunakan Grunt).

Dokumentasi tingkat lanjut dapat dipelajari pada halaman proyek. Di sini Saya hanya ingin menjelaskan garis besarnya saja untuk kalangan awam (para pengguna), sekedar untuk membantu memahami struktur kode sumber tema yang ada.

Struktur Sumber 

Berikut ini adalah struktur berkas dan folder kode-kode mentah tema sebelum dilakukan kompilasi. Semua kode tersimpan di dalam folder src sebagai komponen-komponen yang terpisah:

.\
└── src\
    ├── _defaultmarkups\
    ├── _js\
    ├── _plugins\
    ├── _scss\
    ├── _views\
    ├── config.json
    ├── …
    └── theme.xml

Berkas-berkas tersebut tidak bisa digunakan secara langsung karena setiap komponen masih terpisah-pisah dan dibuat dengan sintaks kode pra-produksi seperti sintaks SCSS untuk membentuk kode CSS dan sintaks modul ES6 untuk membentuk kode JavaScript versi peramban.

Tujuan kita memisahkan berkas-berkas tema sebagai komponen-komponen individu adalah untuk memudahkan para pengembang dalam menambahkan dan/atau mengurangi fitur tema yang ada. Tapi mungkin itu hanya akan memudahkan dari sisi pengembang saja, sedangkan dari sisi pengguna biasanya akan berpendapat kalau hal-hal tersebut dirasa terlalu rumit.

Pengguna pada dasarnya hanya ingin tahu di sebelah mana dia bisa menemukan tombol mengunduh tema dan bagaimana cara memasang tema tersebut. Pengguna tidak mau tahu seluk-beluk proses pengembangannya secara rinci, mereka hanya peduli pada hasil akhirnya saja dan oleh karena itu penjelasan-penjelasan Saya pada beberapa paragraf di bawah mungkin tidak akan berguna bagi Anda yang hanya berniat untuk segera menggunakan tema. Silakan langsung meloncat pada penjelasan mengenai folder dist.

Konfigurasi 

Kita menggunakan Grunt untuk menggabungkan berkas-berkas pada folder src. Berkas-berkas tersebut nantinya akan dibentuk menjadi beberapa berkas baru yang siap pakai (biasanya sudah dalam bentuk kode yang sudah dikompres dan digabung menjadi satu, terutama pada kode CSS dan JavaScript tema). Berkas-berkas tersebut nantinya akan tersimpan secara otomatis pada folder dist.

Sebelum menjalankan perintah ‘bangun’, terlebih dahulu Anda buka berkas config.json untuk melakukan konfigurasi tema, terutama pada bagian atribusi, versi dan waktu perilisan. Cantumkan nama tema dan nama pembuatnya sesuai kehendak (di bawah lisensi MIT):

{
  "theme": {
    "name": "Tema Pribadi",
    "version": "2.0.0",
    "date": "5 Oktober 2019",
    "homepage": "https://dte-feed.blogspot.com",
    "author": {
      "name": "Taufik Nurrohman",
      "url": "https://github.com/tovic"
    },
    …
    …
  }
}

Setelah selesai, jalankan perintah $ grunt. Saya tidak akan menjelaskannya secara rinci di sini. Silakan pelajari sendiri pada dokumentasi tema dan situs web resmi Grunt bagi Anda yang ingin serius mengembangkan tema ini.

Struktur Produk 

Berikut ini adalah struktur berkas dan folder kode-kode tema setelah dilakukan kompilasi dan pembangunan. Semua kode tersimpan di dalam folder dist:

.\
└── dist\
    ├── css\
    ├── js\
    ├── …
    └── theme.xml

Di situ terdapat berkas bernama theme.xml yang dapat kalian pasang ke Blogger. Folder css dan js berisi hasil akhir dari kompilasi dan pembangunan kode-kode SCSS dan modul ES6 pada folder src. Berkas-berkas tersebut pada dasarnya tidak ada gunanya karena kode-kode CSS dan JavaScript yang sama juga sudah tergabung ke dalam berkas theme.xml secara inline. Berkas-berkas CSS dan JavaScript yang terpisah tersebut hanya akan berguna ketika kalian berniat untuk menyimpan mereka ke ruang penyimpanan web tertentu di luar Blogger, untuk kemudian dapat dimuat melalui tag <link href="./jalur/ke/main.min.css" rel="stylesheet"> dan <script src="./jalur/ke/main.min.js"></script>.

Dokumentasi dan tutorial bawaan masih belum sepenuhnya selesai. Kalian bisa memberikan kontribusi dengan cara membuat permintaan dorong atau membuat isu baru di GitHub.

10 Komentar

Igoy Nawamreh

Motivasi saya membuat Bloggerpack adalah karena saya ingin terkenal seperti mas Taufik Nurrohman. Becanda ya, tapi nama saya akan makin terkenal karena tertulis di artikelnya blog DTE haha :D \o/

Walaupun pada kenyataannya saya tidak juga terkenal seperti mas yang satu ini, saya cuma berharap project ini bisa berkembang dan digunakan oleh banyak orang, kalaupun tidak, minimal ada sesuatu yang bisa diambil, tapi saya sangat menyarankan Anda untuk mendalaminya terlebih dahulu, karena orang bilang "tak kenal maka tak sayang" :v

Konsep

Jika Anda sudah mengetahui web tools seperti Grunt, Gulp, webpack, dll saya yakin Anda tidak akan kesulitan untuk memahami cara kerja Bloggerpack.

Pada dasarnya Bloggerpack memisahkan setiap bagian kode untuk memudahkan dalam pengembangan tema, maupun pemeliharaannya.

Dengan Bloggerpack Anda dapat menggunakan Sass dan ES6.

Tidak hanya itu, Bloggerpack juga dilengkapi dengan:

- Fitur otomatis untuk menargetkan kode CSS dan JavaScript agar mendukung di browser yang ditentukan.
- Code linter untuk menghindari kesalahan penulisan kode dan menjaga agar penulisan kode tetap konsisten.
- dan fitur lainnya, silakan pelajari dari kode sumber.

Selain itu, kode XML Blogger di Bloggerpack dirancang sedemikian rupa untuk memaksimalkan fitur yang ada di Blogger. Kita juga menyediakan koleksi potongan kode Blogger yang bisa Anda gunakan.

Secara bawaan Bloggerpack memiliki tema standar yang dapat Anda kembangkan menjadi tema yang Anda inginkan. Jika Anda sudah benar-benar memahaminya, Anda dapat menghapus tema standar Bloggerpack dan membangun tema Anda sendiri dari awal dengan struktur yang Anda inginkan.

Saat ini Bloggerpack baru merilis v1.0, dan pengembangan masih terus dilakukan.

Terima kasih mas sudah buat artikel ini :bd

Taufik Nurrohman

Ya mas, sama-sama. Masih jarang soalnya barang-barang macam begini jadi Saya tertarik untuk buat artikel.

illvart

Niat banget ngetiknya mas. Aku nyimak aja semoga dapat membantu terkenal :P

Igoy Nawamreh

Maaf ya mas MNF kadang becandaan saya agak kelewatan, kalau masalah terkenal dari dulu saya sudah terkenal, apalagi kalau dikelilingi wanita-wanita cantik, itu sudah biasa :Q

Intinya saya ingin berbagi dan menjadi manusia yang bermanfaat :Ozzz

Walaupun proyek ini open source dan gratis, gak ada salahnya dong kalau saya bikin tema yang berbayar, itung2 beli'in saya ESSE change, kopi dan cemilan buat nemenin saya ketika ngembangin proyek ini, kalau untuk makeup istri saya biar dia cari sendiri, karena saya sudah kasih dia perusahaan, jadi saya gak perlu repot2 lagi :D

Dan tolong ya buat temen2 Blogger kalau berbagi kode/plugin/tutorial kodenya jangan yang versi minified, apalagi kalau sampe di-packed biar gak kelihatan kodenya, mending dibuat plugin seperti pada umumnya, simpan di GitHub, dan buatlah yang lebih fleksibel.

Maaf ya teman2 kalau saya ini orangnya kayak gini.

illvart

Haha santuy mas, kayak baru kenal aja ah. Kita itu sebenernya sama tujuannya kok, keinginan mas juga sama seperti saya inginkan. Tapi memang ndak bisa dipaksakan juga untuk mereka berfikir sendiri, karena memang butuh contoh mas. Sementara yang sudah berlalu yang mereka contoh ya begitu aja, terlalu dramastis dan penuh dengan tipu daya. Coba mas Igoy sambil ngeblog biar makin terkenal dan makin banyak wanita-wanita cantik yang melirik isi dompetmu mas haha :* :P

Padma Aksara Barya

Menarik pernyataan Mas Taufik ini:


Sampai sekarang Saya bahkan masih belum tahu tentang bagaimana cara mendeteksi kueri ?amp=1 pada URL blog.

Jika dalam kueri ?amp=1, seluruh tautan yang berasal dari widget Blogger ikut juga memiliki akhiran ?amp=1. Namun, ketika kita ganti amp dengan view=amp misalnya, tautan yang berasal dari widget Blogger tidak terpengaruh. Bahkan ketika kita buka kueri ?m=1, seluruh tautan widget Blogger tidak lantas memiliki akhiran ?m=1. Pertanyaannya, apa memang Blogger berniat untuk menggunakan ?amp=1 sebagai alternatif di masa mendatang.

Dan ini menjadi masalah terhadap postingan gambar yang amp di data:post.body. Kita tidak bisa merubahnya secara otomatis menggunakan tag kondisional.

Taufik Nurrohman

Saya malah masih mendambakan kehadiran fungsi-fungsi untuk memanipulasi string di Blogger. Misalnya untuk mengecek adanya karakter tertentu atau untuk mengubah karakter tertentu menjadi karakter yang lain dari sisi peladen. Sehingga di masa depan kita nggak perlu memakai JavaScript untuk menambahkan fitur emotikon dan embed URL.

Saat ini yang paling mendekati baru length, size, escaped, jsEscaped, jsonEscaped dan cssEscaped. Akan lebih bagus lagi kalau kita punya fungsi dan metode standar string seperti trim (mungkin akan menjadi trimmed), trimStart, trimEnd, indexOf, toLowerCase, toUpperCase, dan yang paling penting replace. Mungkin penerapannya nanti akan seperti ini:

<b:eval expr='replace(data:post.body, ":)", "😀")'/>

Atau seperti ini. Tapi ini tidak valid XML jadi kemungkinannya akan sangat kecil:

<data:post.body.replace(":)", "😀")/>

Vipin Mishra

How to add new style comments in blogger? The one in Newest Blogger Templates which doesnt have an embedded iframe and looks better than the previous version.

Loker Sumatera

kang, menu html5 dan paragraph/ konverter line to paragraph error 404. tolong diperbaiki donk kang. saya sering pake itu soalnya

Omen

Lahhh ini mah desain mirip template gue diskoncek.com yang pas waktu itu pernah minta bantuan ke det.web.id

Komentar telah ditutup.