Senin, Februari 01, 2021

Membuat template blogger

Jutaan blog telah banyak tercipta menggunakan platform Blogger milik perusahaan raksasa Google. Selain design backend yang sangat user friendly, blogger juga memberikan kapasitas unlimited untuk setiap konten tulisan yang dibuat melalui platform tersebut. Tidak hanya itu, bloggerpun juga memberikan kesempatan bagi para konten creator-nya untuk bisa mendapatkan uang melalui tulisan yang mereka buat pada blog melalui program iklan adsense yang bisa ditautkan pada platform Blogger tersebut. Dengan Blogger semua orang bisa menjadi penulis dan sekaligus menghasilkan uang dari tulisan tersebut. Namun, jika berbicara masalah Adsense, jumlah tulisan pada blog saja tidaklah cukup untuk bisa mendapatkan penghasilan yang kompetitif. Beberapa faktor lain yang juga harus selalu menjadi perhatian utama seorang penulis adalah kecepatan akses para pengunjung untuk mengunjungi situs atau blog tulisan yang telah dibuat. Jika tulisan yang telah dibuat pada blog sudah banyak, namun akses blog yang dimiliki sangat lambat, maka bounce rate pada blog juga akan menjadi tinggi dan sudah pasti akan berakibat negatif pada blog, baik itu penurunan jumlah pengunjung ataupun juga pelemahan peringkat pada mesin pencari. Untuk itu, sangat penting bagi seorang Blogger untuk memerhatikan jenis template apa yang digunakan pada suatu blog, apakah template tersebut mobile friendly ataupun juga fast response sehingga blog yang telah dibuat dapat bisa diakses secara cepat oleh para pengunjung blog. Anehnya beberapa design template bawaan yang disediakan langsung oleh Blogger pun juga masih belum terlalu responsif, bahkan penulis sendiripun harus melakukan beberapa modifikasi supaya bisa menggunakan template bawaan dari Blogger itu sendiri, seperti membuang beberapa kode-kode bawaan yang tersedia pada template, supaya akses blog menjadi lebih cepat dan bisa digunakan untuk kepentingan publikasi. Karena permasalahan tersebut, salah satu solusi yang sering dilakukan oleh seorang Blogger untuk mengatasi perlambatan akses pada blog karena template yang kurang responsif adalah dengan mengganti template tersebut menggunakan template gratis yang bisa di-download pada situs-situs penyedia template gratis, ataupun juga membeli langsung dari para designer template, khususnya template Blogger. Namun demikian, hal ini terkadang juga tetap mendatangkan kekecewaan bagi para Blogger.

 

kenapa?

Karena kebanyakan template yang tersedia di internet adalah template yang design-nya sudah dipatenkan, atau meskipun template tersebut gratis, sebagian besar design template tersebut tidak bisa diedit. Dan meskipun bisa, hasil dari modifikasi template tersebut tidak bisa digunakan untuk menampilkan iklan Adsense, karena terkait masalah pelanggaran hak cipta ataupun isu pelanggaran privasi lainnya. Jika demikian, lantas kenapa seorang Blogger tidak membuat sendiri template yang sesuai dengan keinginannya sendiri? baik itu template yang mobile friendly ataupun juga yang fast responsif. Jawabannya, adalah karena template yang digunakan pada Blogger modifikasinya masih menggunakan kode XML yang berbasis skrip, dan masih jarang sekali platform editor template yang penggunaannya berbasis GUI yang dapat digunakan untuk merancang template blog secara dinamis dan mudah, meskipun ada, tetap saja masih memiliki keterbatasan dalam pembuatan design-nya. Karena kendala yang sering dialami oleh Blogger tersebut, maka pada tulisan ini akan sedikit dibahas bagaimana cara untuk merancang sebuah template Blogger secara sederhana menggunakan skrip XML. 

step-by-step...

Pengembangan template Blogger atau Blogger template bukanlah sesuatu yang mudah untuk dilakukan. Namun dengan mengikuti beberapa tahapan panduan berikut, para pengguna diharapkan dapat mulai memahami serta dapat mengembangkan sendiri template Blogger yang responsif dan mobile friendly yang sesuai dengan keinginan pada blog pribadi masing-masing. 

Sebelumnya, sempat dibahas bahwa, selain menggunakan template gratis ataupun premiun yang tersedia di internet, seorang Blogger juga bisa menggunakan beberapa platform atau software designer yang tersedia di internet untuk membuat sebuah template. Namun, pengembangan dengan menggunakan software atau platform tersebut tetap saja memiliki batasan dalam penggunaannya, yang tentunya tidak terlalu disukai oleh para pengguna Blogger. 


Beberapa Kerugian Menggunakan Software Designer Template untuk BLogger
satu, Design yang dibuat jumlahnya terbatas hanya pada design yang disediakan oleh Perangkat design.
dua, Pengguna Blogger tidak bisa belajar bagaimana cara menggunakan kode program pada template Blogger. Sehingga pengguna Blogger tidak bisa melakukan kostumisasi template sesuai dengan kebutuhan.
tiga, Pengguna Blogger tidak bisa memahami struktur dasar dari sebuah template yang digunakan pada Blogger, dan lain sebagainya.

Bayangkan,... jika setelah mempelajari materi ini pengguna blog bisa merancang templatenya sendiri sesuai dengan kebutuhan yang diinginkan, sangat luar biasa sekali kan?

Cara Membuat Blogger Template Mulai Dari Dasar
Sebelum memulai proses pengembangan template, beberapa kemampuan harus harus dimiliki atau diketahui oleh seorang perancang adalah materi tentang HTML dan CSS. Disarankan untuk mempelajari beberapa materi tersebut terlebih dahulu, baik melalui buku ataupun melalui tutorial online yang tersedia di Internet supaya lebih mudah untuk memahami proses penulisan kode program pada template, serta beberapa materi lain yang sifatnya opsional seperti JavaScript, XML, dan Framework.

Komponen atau Perangkat yang Dibutuhkan untuk Perancangan Template.
satu, HTML atau CSS Editor, diutamakan perangkat editor berbasis offline seperti Notepad++, Sublime Text, Dreamweaver, Geany, dan lain sebagainya, yang digunakan sebagai perangkat design kode template.
dua, Notebook yang digunakan untuk menyimpan kode program dan lain sebagainya.

SELAMAT PAGI JAMAL



Setelah masuk blogger, pada menu Blogger Dashboard, pilih Theme, selanjutnya pilih EDIT HTML dan bersihkan semua kode program yang terdapat pada bagian laman tersebut, dengan cara menekan tombok keyboard CTRL dan A bersamaan kemudian tekan DELETE atau BACKSPACE seperti diperlihatkan pada gambar 1.

Paste kode program berikut pada laman yang telah dihapus atau dikosongkan sebelumnya. Setelah itu, tekan tombol SAVE, 


Jika tema atau template Blogger tersebut telah disimpan, maka akan muncul notifikasi "There should be one and only one skin in the theme, and we found: 0".  Tulisan tersebut muncul karena pada bagian tag HTML yang dibuat belum terdapat kode untuk menempatkan skin atau tampilan CSS. Untuk mengatasi masalah ini selanjutnya letakkan kode program berikut diantara tag <HEAD></HEAD>.


Copy dan Paste kode program tersebut, kemudian letakkan diantara kode html yang telah dibuat sebelumnya. Tepatnya, diantara tag <HEAD></HEAD> setelah kode <TITLE/>. Setelah selesai, sekarang tekan tombol SAVE kembali setelah kode program selesai di Paste

Opss! Muncul Kode Notifikasi lagi! dengan tulisan "We did not find any section in your theme. A theme must have at least one b:section tag."

Blogger Editor menampilkan kode notifikasi kedua tersebut karena pada kode template belum ditambahkan section apapun pada bagian tag body. Untuk mengatasi masalah tersebut, silahkan Paste kode program berikut didalam tag <BODY>, sebelum kode <P>SELAMAT PAGI JAMAL</P>.


Selanjutnya, tekan tombol SAVE kembali. Maka sudah tidak muncul notifikasi apapun lagi. Setelah selesai silahkan klik tombol Preview (gambar mata), atau langsung menuju ke laman blog yang telah dibuat. 

Setelah selesai, maka pada blog akan muncul tulisan "SELAMAT PAGI JAMAL". hahaha.., 

Jika tulisan tersebut telah muncul maka, perancang telah berhasil membuat rancangan dasar dari template Blogger. 

MEMPOSTING TULISAN BARU PADA BLOG DAN LIHAT HASILNYA

Setelah proses sebelumnya selesai dilakukan, selanjutnya ciptakan sebuah postingan baru pada blog dengan cara membuka menu Blogger Dashboard, selanjutnya pilih menu POST, dan pilih NEW POST. Buat sebuah tulisan atau teks  sample pada blog untuk melihat hasil seperti apa yang akan muncul pada blog yang telah dilakukan modifikasi kode sebelumnya seperti diperlihatkan pada gambar 2.

Jika tulisan atau teks sample telah selesai dibuat dan dipublikasi, maka pada blog tidak akan muncul postingan baru apapun.

What?, koq postingan baru yang saya buat tidak muncul di blog, cuma muncul tulisan "SELAMAT PAGI JAMAL", lagi pula siapa itu jamal, kenapa namanya begitu pamiliar ditelingaku??

Kondisi ini terjadi karena kode template yang telah dibuat sebelumnya pada teks editor Blogger tidak memberitahukan dimana posting terbaru tersebut akan muncul. Dimana, pada teks editor tidak dibuat ataupun dipilih section apapun untuk ditampilkan pada blog. Tidak hanya untuk menampilkan hasil postingan blog, pun jika ingin menampilkan Header, Sidebar, Footer, ataupun yang lainnya pada blog, memang suatu hal yang wajib pada teks editor untuk menampilkan kode section dan juga widget pada Editor HTML Blogger, supaya section-section yang ingin dimunculkan pada blog tersebut dapat terlihat sesuai dengan pengaturan yang telah ditentukan sebelumnya. 

Untuk memperjelas, silahkan copy dan paste kode program berikut pada bagian tag body dalam teks editor Blogger.


Setelah selesai, simpan kembali template tersebut melalui tombol SAVE. Lakukan preview ulang dengan cara menekan tombol preview atau gambar mata pada bagian Editor atau langsung mengetik alamat blog yang telah di-SAVE sebelumnya, maka posting tulisan yang telah dibuat sebelumnya akan muncul pada laman blog. 

Setelah postingan muncul pada laman blog, selanjutnya kembali kebagian teks editor Blogger, lakukan reload atau tekan tombol F5 pada keyboard, maka backend Editor HTML Blogger akan melakukan reload pada laman tersebut dan kode program yang telah dibuat sebelumnya akan muncul kembali namun dengan kode program yang lebih banyak daripada yang diketik sebelumnya. 

Loh, koq bisa, kode program yang dibuat sebelumnya kemana?

Jika diperhatikan lebih jelas, kode program yang telah dibuat sebelumnya sama sekali tidak hilang pada bagian editor, namun pada kode program yang telah dibuat tersebut dibeberapa bagian mengalami penambahan stuktur:

satu, Terjadi penambahan kode program pada bagian tag <HEAD>.
dua, Terjadi penambahan kode program pada bagian tag <b:widget><b:widget>.
tiga, Terjadi penambahan kode program berupa tag defini versi dari XML dan lainnya sebelum bagian tag <HEAD>.

PEMAHAMAN TENTANG SECTION DAN WIDGET PADA BLOGGER

Jika ingin membuat sebuah template profesional pada Blogger, maka perancang harus membuat ulang template HTML yang telah dirancang sebelumnya dengan hasil yang lebih responsif, yang terdiri dari Header, Navbar, Main, Sidebar, Footer, dan bagian lainnya. Namun, sebelum mempelajari bagian-bagian tersebut, terlebih dahulu harus dipahami apa yang dimaksud dengan section dan widget pada Blogger seperti diperlihatkan pada gambar 3.

SECTION PADA BLOOGER 
Section adalah sebuah ruang kosong yang dialokasikan pada tema blog yang didalamnya mengandung widget-widget.

ATURAN PEMBUATAN SECTION PADA BLOGGER
satu, Setiap section harus dimulai dengan tag awalan dan diakhiri dengan tag akhiran. Tag awalan section adalah <b:section> dan tag akhiran section adalah </b:section>. Setelah menerbitkan sebuah postingan tulisan pada blog, kemudian postingan blog tersebut dilihat pada web browser, dan kemudian dilakukan inspect element (klik kanan blog, pilih inspect element), maka tag section akan terlihat sebagai tag div. Namun, jika dilihat kembali pada Editor HTML BLOGGER bagian section tersebut tidak mengalami perubahan apapun.
dua, Setiap section harus memiliki sebuah class dan id yang unik atau berbeda dari yang lain. Penggunaan nama id dan class yang sama untuk dua jenis section atau lebih adalah hal yang ilegal. Karena bagian section akan dikonversi ke dalam tag div ketika dijalankan pada browser, maka class dan id dari section juga tetap akan berada pada tag div section itu sendiri. Sehingga dapat dilakukan kostumisasi design atau bentuk dari sebuah section dengan menggunakan nama class dan nama id tersebut (CSS).
tiga, Tidak diperbolehkan membuat section di dalam section atau section bersarang. Pembuatan sebuah section yang berada dalam section lainnya adalah hal yang tidak valid.
empat, Pada section hanya bisa menggunakan beberapa atribut yang memang tersedia untuk section itu sendiri.
lima, Lebih baik jika membuat sebuah section yang terletak dalam tag div.


ATRIBUT DARI TAG SECTION
pada tabel 1 diperlihatkan daftar dari beberapa atribut yang dapat digunakan dalam sebuah section.


WIDGET PADA BLOGGER
Widget juga disebut sebagai plug-in Blogger. Jika ingin menambahkan sebuah gadget eskternal pada blog, maka dapat digunakan widget yang selanjutnya akan menciptakan sebuah scope atau bidang bagi gadget untuk dimasukkan ke dalam sebuah section pada blog. Beberapa widget default yang disediakan oleh Blogger adalah Popular posts, Search Bar, Email Subscription, Link List, Image, Text, Labels, MTML/CSS/JavaScript Code, dan lain sebagainya seperti diperlihatkan pada gambar 4.

ATURAN PEMBUATAN WIDGET PADA BLOGGER
satu, Dapat digunakan tag awalan dan tag akhiran widget secara bersamaan. Tag awalan widget adalah <b:widget> dan tag akhiran widget adalah </b:widget>. Atau, juga dapat digunakan akhiran tag widget saja <b:widget/> saja. Setelah melakukan posting tulisan pada blog, kemudian hasil posting tersebut dilihat menggunakan web browser, dan selanjutnya dilakukan inspect element, maka bagian widget akan terlihat sebagai tag div pada inspect element. Namun, pada Editor HTML Blogger widget tidak akan mengalami perubahan apapun.
dua, Setiap widget harus memiliki sebuah class dan id yang unik atau berbeda dari yang lain. Penggunaan nama id dan class yang sama untuk dua jenis widget atau lebih adalah hal yang ilegal. Karena bagian widget akan dikonversi ke dalam tag div ketika dijalankan pada browser, maka class dan id dari widget juga tetap akan berada pada tag div widget itu sendiri. Sehingga dapat dilakukan kostumisasi design atau bentuk dari sebuah widget dengan menggunakan nama class dan nama id tersebut (CSS).
tiga, Tidak diperbolehkan membuat widget di dalam widget atau widget bersarang. Pembuatan sebuah widget yang berada dalam widget lainnya adalah hal yang tidak valid.
empat, Pada widget hanya bisa menggunakan beberapa atribut yang memang tersedia untuk widget itu sendiri.
lima, Widget hanya bisa dibuat di dalam sebuah section.
enam, Tidak diperbolehkan menambahkan kode HTML didalam sebuah widget.

ATRIBUT DARI TAG WIDGET
Berikut ini diperlihatkan pada tabel 2 beberapa atribut yang digunakan pada tag widget.


PERBEDAAN ANTARA SECTION DAN WIDGET PADA BLOGGER
Berikut ini diperlihatkan pada tabel 3 perbedaan antara section dan widget pada Blogger.


PERSAMAAN ANTARA SECTION DAN WIDGET PADA BLOGGER
Berikut ini diperlihatkan pada tabel 4 persamaan antara section dan widget pada Blogger.


PEMBERIAN NAMA CLASS PADA SEBUAH SECTION
satu, Meskipun bersifat opsional, penamaan sebuah class memberikan keuntungan ketika melakukan tranfer konten blog atau ketika dilakukan penggantian atau perubahan template blog.
dua, Nama asli dari class menu navigasi adalah 'navbar', class 'header' untuk bagian header, class 'main' untuk bagian main atau bagian utama, class 'sidebar' untuk bagian sidebar, dan class 'footer' untuk bagian footer blog.

MEMBUAT BLOGGER DINAMIS
Ada empat struktur dasar dari section sebuah blog, yang terdiri dari:
satu, Header, Bagian ini merupakan tempat judul blog atau title blog yang diletakkan bersama kode CSS dan Meta tag blog. Section header berbeda dengan Header pada bagian HTML.
dua, Main, Bagian ini merupakan tempat posting dan isi blog yang ditelakkan bersama dengan atribut-atribut pengaturan yang mengikutinya seperti komentar, jumlah posting, lokasi pembuat posting, nama pengarang, dan lain sebagainya. 
tiga, Sidebar, Bagian ini merupakan bagian sisi samping (biasanya samping kanan) dari blog, yang sering digunakan untuk meletakkan widget-widget bawaan pada blog.
empat, Footer, Bagian ini Merupakan bagian bawah dari blog, biasanya berisi post credit dari pengarang atau nama pembuat template blog.

MEMBUAT HEADER SETION DINAMIS
Letakkan kode program berikut pada bagian tag header html.


MEMBUAT MAIN SECTION BLOG POST DINAMIS
Letakkan kode program berikut pada bagian tag body html.


MEMBUAT SIDEBAR SECTION DINAMIS
Letakkan kode program berikut pada bagian body html, setelah section main dan letakkan diantara kode tag <ASIDE></ASIDE> untuk membuat section tersebut berada pada posisi samping blog.


MEMBUAT FOOTER SECTION DINAMIS
Letakkan kode program berikut setelah bagian main dan sidebar, atau bagian paling akhir pada body html. 


Ada banyak tag data pada Blogger yang dapat digunakan untuk menampilkan data tertentu pada blog yang dipublikasi, dimana tag data tersebut hanya berfungsi pada widget blog seperti diperlihatkan pada tabel 5.


Informasi yang lebih lengkap tetang Blogger Data Tags dapat dicari melalui link Blogger Support berikut: https://support.google.com/blogger/answer/47270.

HYPERLINK DINAMIS PADA BLOGGER
Hyperlink dinamis pada Blogger merupakan tag anchor HTML yang dikonversi bersamaan dengan sebuah URL. Contoh, jika pada hyperlink URL yang digunakan adalah https://kertasf4.blogspot.com/, maka kode hyperlink atau anchor-nya adalah: 
<a href="https://kertasf4.blogspot.com">Home blog</a>

Maka pada Editor HTML Blogger bisa menggunakan hyperlink dinamis dengan menggunakan kode berikut, tanpa perlu menyertakan alamat URL dari blog tersebut (lebih dinamis kan!!):
<a expr:href='data:blog.homepageUrl' >Homepage</a>

Pada tabel 6 diperlihatkan beberapa tag anchor atau hyperlink dinamis pada template Blogger.

Catatan: Kode hyperlink pada tabel 6 hanya bisa berfungsi ada HTML Editor Blogger, namun tidak bisa jika digunakan pada bagian html posting blog.

OPERASI DINAMIS TINGKAT LANJUT
Melakukan kostumisasi template Blogger melalui page type dan URL
Jika ingin menyembunyikan sidebar pada bagian Homepage namun tetap ingin menampilkannya pada bagian post, maka page atau halaman yang telah dipublikasi dapat dilakukan kostumisasi dengan menggunakan Conditional tags. Dengan menggunakan conditional tags, maka dapat dilakukan penambahan ataupun modifikasi pada bagian HTML, CSS, JavaScript sesuai keinginan dari perancang blog, dimana hal ini akan membuat tampilan blog menjadi lebih dinamis.

Menciptakan Landing Page Pada Blogger
Letakkan kode program berikut ini pada bagian sebelum tag Head atau setelah tag Body pada editor tema blog.


Pemahaman Conditional tags atau statement tag merupakan suatu hal yang penting dan juga harus menjadi fokus utama, Untuk dapat mengembangkan sebuah tema atau template Blogger yang dapat memahami bentuk PageType yang ada pada template Blogger itu sendiri. Dimana pemahaman ini sangat bermanfaat jika seorang perancang ingin melakukan kostumisasi dengan berbagai style atau bentuk tampilan untuk setiap target halaman atau url yang berbeda dengan tampilan template yang berbeda pula. Contoh, Jika ingin membuat sebuah template dimana pada bagian landing page untuk beranda yang tidak menampilkan sidebar, namun ketika salah satu post blog di klik maka tampilan sidebar kemudian dapat muncul pada blog tersebut dan lain sebagainya.

Untuk dapat membuat template Blogger yang dapat menghasilkan respon atau bentuk tampilan yang berbeda pada tiap url, maka template harus bisa memahami berbagai bentuk perbedaan tersebut, yakni dengan menggunakan suatu cara pengkondisian tertentu dengan menggunakan conditional tags.

Bentuk umum dari statement kondisional Blogger atau conditional tags


Statement IF akan dieksekusi perintahnya jika persyaratan dari kondisi IF terpenuhi. jadi, Jika IF bernilai benar, maka perintah dijalankan, jika tidak terpenuhi atau salah maka perintah tidak akan dieksekusi atau dijalankan.

If else statement:


Pada kondisi ini, statement IF akan dieksekusi jika persyaratan dari kondisi IF terpenuhi, jika tidak maka konsidi ELSE akan dieksekusi. Jadi, Jika If bernilai benar, maka perintah yang ada pada statement IF akan dijalankan, jika Salah maka statement yang terdapat pada perintah ELSE akan dijalankan.

Pola dari Conditional tags:
Conditional tags pada Blogger dapat dipergunakan untuk berbagai tujuan pada template blog.

Conditional tags untuk judul atau title:


Jika cond='data:blog.pageType nilainya adalah sama dengan nilai "item", maka perintah <title><data:blog.pageName/> - <data:blog.title/></title> akan dijalankan. Jika tidak, maka tidak ada program pada statement IF yang akan dijalankan atau dieksekusi.

Conditional tags untuk CSS:


Jika cond='data:blog.pageType nilainya adalah sama dengan nilai "item", maka perintah <style type="text/css"> /**CSS CODE HERE**/ </style> akan dijalankan.

Conditional tags untuk HTML:


Jika cond='data:blog.pageType adalah bernilai sama dengan nilai "item", maka perintah <div class="section_two"> <p>This is HTML Code</p> </div> akan dijalankan. 

Beberapa bentuk lain dari atribut Conditional tags:

Tujuan utama dari penggunaan conditional tags pada Blogger adalah untuk menarget halaman spesifik mana dari sebuah URL. Berikut ini adalah beberapa bentuk dari halaman spesifik target.

satu, Target Indek atau Home Page; digunakan untuk menarget halaman atau page dari sebuah post. Contoh, menampilkan post melalui katerogi label tertentu atau kueri pencarian tertentu, dan lain sebagainya.


dua, Target Dinamis atau Item Page; digunakan untuk menarget post tunggal yang dibuat oleh 'Create Post'.

catatan: Halaman dinamis maksudnya adalah halaman yang dipublikasi dengan bentuk URL sebagai berikut; https://www.elfanmauludi.id/2021/02/merancang-template-blogspot-super-mudah.html

tiga, Target static page; digunakan untuk menarget post tunggal yang dibuat oleh 'Create New Page'.

catatan: Halaman static maksudnya adalah halaman yang dipublikasi dengan bentuk URL sebagai berikut; https://www.elfanmauludi.id/p/metopen.html

empat, Target error page; digunakan untuk menarget page error (404).


lima, Target archive page; digunakan untuk menarget post arsip. 

catatan: Umumnya, bentuk URL dari post arsip adalah sebagai berikut; https://www.elfanmauludi.id/2021_02_07_archive.html

enam, Target search page; digunakan untuk menarget halaman hasil pencarian melalui index page.


tujuh, Target label page; digunakan untuk menarget halaman dengan list posting berdasarkan label tertentu.



Dapat pula ditarget dengan menggunakan kode program berikut ini.


URL Target Spesifik
Untuk statement Conditional tags, juga sangat dimungkinkan untuk melakukan penargetan suatu halaman dengan menggunakan URL tertentu menggunakan pengkondisian data:blog.url.

satu, Home Page URL; digunakan untuk menarget halaman home atau beranda yang terdapat pada blog.


dua, Specific URL; digunakan untuk menarget URL tertentu yang telah ditentukan.


Conditional Tags dengan beberapa target tambahan.


Setelah memahami fungsi dari Conditional Tags pada Editor HTML Blogger, maka akan dilanjutkan dengan membuat kostumisasi template yang lebih dinamis dengan menggunakan kombinasi antara Blogger Data Tags dan Conditional Tags.

Membuat Tag Title Dinamis
untuk dapat membuat judul atau title pada blog menjadi lebih dinamis, maka ganti kode program yang terdapat pada tag <title></title> dengan kode program berikut ini:


Kostumisasi Design Template Blogger dengan CSS
Semua bentuk kostumisasi template dengan menggunakan kode program CSS akan ditempatkan pada bagian tag <b:skin>. Berikut akan diberikan penjelasan umum tentang urutan aturan yang biasa digunakan dalam pembuatan design template menggunakan CSS.


Ketimbang menjelaskan fungsi seluruh dari penggunaan CSS, yang penjelasannya akan sangat panjang, maka berikut akan diberikan contoh CSS untuk struktur layout inti pada template Blogger.


Dari contoh kode CSS tersebut, dapat dilakukan inspeksi secara lebih sederhana terkait pemahaman fungsi kode CSS terhadap design yang ditampilkan pada tampilan blog. Untuk pemahaman yang lebih lengkap, berikut dapat dipelajari file keseluruhan dalam bentuk XML yang bisa di-upload ke dalam tema blog secara langsung.

Download Template Sederhana Blog...]
Demo Template Sederhana Blog...]

Sampai disini...e.n.d

Catatan: Membuat sebuah template profesional tergantung pada bagaimana cara seorang perancang menggunakan kode program yang telah mereka kuasai, bagaimana cara melakukan inspect element yang ada pada pustaka editor blog, bagaimana cara menyusun dan menggunakan styleshhet (CSS), dan bagaimana cara mengkonsep sebuah tampilan agar terlihat menarik dan profesional bagi para pembaca, serta bagaimana cara perancang itu sendiri berkreasi untuk merealisasikan ide yang dimilikinya ke dalam bentuk rancangan kode program. Meskipun pada artikel ini telah menyediakan panduan untuk membuat template Blogger secara profesional, upaya dan kesabaran tetaplah merupakan penentu akhir bagaimana hasil karya dapat diciptakan secara nyata.

8 komentar:

  1. Apa saja tipe-tipe design template blog yang populer?

    BalasHapus
    Balasan
    1. 1. Blog Fashion.
      2. Blog Food.
      3. Blog Travel.
      4. Blog Musik.
      5. Blog Lifestyle.
      6. Blog Fitness.
      7. Blog Kerajinan.
      8. Blog Olahraga.
      9. dll.

      Hapus
  2. Bagaimana cara membuat template blog secara garis besar?

    BalasHapus
    Balasan
    1. Step 1: Pilih Platform pengembangan blog.
      Step 2: Pilih warna skema dan tipografinya.
      Step 3: Rancang bagian headernya.
      Step 4: Rancang bagian sidebarnya.
      Step 5: Rancang bagian konten atau bagian mainnya.
      Step 6: Rancang bagian footer.
      Step 7: Eksport template ke dalam platform blog yang digunakan.

      Hapus
  3. Apakah tema pada WordPress dapat dipergunakan pada Blogger?

    BalasHapus
    Balasan
    1. Tidak seperti WordPress, Blogger tidak memerikan akses ke banyak tipe file yang digunakan untuk membentuk template Blogger. Sebagai gantinya, file CSS yang terdapat pada WordPress dapat diimpor dan dipergunakan ke dalam Blogger, kemudian file tersebut dimodifikasi dan disesuaikan dengan tampilan modifikasi kode program pada Blogger.

      Hapus
  4. penasaran, kenapa dari dulu google tidak pernah memberikan template yg lebih mudah dikostumisasi kayak WordPress, padahalkan tidak semua blogger itu paham bahasa pemrograman,,

    BalasHapus
  5. pernah dulu gonta ganti template blog sampe beberapa, bahkan udah di optimasi secepat mungkin, cuma pas udh ditempeli iklan adsense tetap aja jebluk kecepatannya,, hadeh

    BalasHapus

Respon komentar 7 x 24 jam, so please be patient :D