google-site-verification=UES8Z0aRJbtE1Gb4ZyHBN69EWU5404X-VqbouzRkOVI Cara Menciptakan Tema Blogger Dari Nol - 100% Bisa. #1 - PUSATRIK.COM

Cara Menciptakan Tema Blogger Dari Nol - 100% Bisa. #1

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1
Sobat , senang rasanya kali ini aku sanggup menyempatkan waktu lagi untuk sharing kepada sobat semua, sesudah beberapa waktu kemudian disibukkan dengan duduk kasus Flash Firmware Hp Sony Xperia C4 Dual aku yang punya duduk kasus bootloop, dan dilanjut bolak - balik ke SAMSAT Jakarta Selatan untuk mengurus mutasi kendaraan beroda empat (InsyaAlloh akan aku sharingkan proses mutasinya pada kesempatan berikutnya), dan Alhamdulillah kini punya waktu luang lagi untuk mengembangkan manfaat kepada sobat semua.

Sobat, pada kesempatan kali aku ingin sharing perihal "Cara Membuat Tema Blogger / Blogger Theme Dari Nol" yang aku dasarkan dari pengalaman (otodidak) aku ketika menciptakan "Tema Edu - 100% Responsive & SEO Friendly" dan Alhamdulillah bila dilook - look tema tersebut tampaknya juga layak bila ingin sobat gunakan sebagai tema dari Blog sobat. Bila sobat tertarik, silahkan untuk melook Demo dan link downloadnya di alamat ini: http://ThemaEdu.blogspot.com dengan motto "Angger otak - atik seng penting mathuk".

Sobat yang berbahagia, sangat besar cita-cita aku kepada sobat semua untuk berkenan mengoreksi dan memberi masukan terhadap cara yang aku lkitakan dalam tutorial ini apabila ada sesuatu hal yang keliru, lantaran memang cara ini aku lkitakan murni belajar sendiri dan berdasar pada pengalaman baca - baca dari banyak sekali sumber. Yang jelas, "Angger otak - atik seng penting mathuk".

Cara Membuat Tema Blogger / Blogger Theme Dari Nol.

Sobat, sebelum memulai membuat sebuah Tema Blogger, hal pertama yang harus sobat persiapkan yaitu menciptakan rancangan dari tema yang ingin sobat buat, apakah satu kolom, dua kolom, tiga kolom dan seterusnya. Untuk kesempatan kali ini aku ingin membuat Tema Blogger dua kolom dengan rancangan menyerupai gambar di bawah ini:

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Setelah sobat memilih desain temanya, saran aku buatlah sebuah blog anyar yang khusus sobat gunakan sebagai alat percobaan. Jangan gunakan blog utama milik sobat ketika mendesain sebuah tema, nanti sesudah tema rancangan sobat sendiri siap untuk dipakai anyar sanggup sobat aplikasikan ke blog utama sobat. Untuk menciptakan blog anyar sanggup sobat baca tutorialnya di sini.

Setelah sobat berhasil menciptakan blog anyar, jangan lupa atur setelan privasi terhadap mesin penelusur (opsional) biar blog tidak bermasalah dengan Google. Caranya, masuk "Setelan" >> "Lainnya" >&gt pada kolom "Privasi" atur pada pertanyaan "Tambahkan blog Anda ke cantuman kami?" dan "Biarkan mesin pencari menemukan blog Anda?" untuk sobat jawab "Tidak".

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1


Step - step Membuat Tema Blogger / Blogger Theme Dari Nol.

Dalam rangkaian tutorial "Cara Membuat Tema Blogger / Blogger Theme Dari Nol" akan aku bagi menjadi beberapa bagian, diantaranya:

  • Bagian #1
    Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #1. Aktif.
    Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #2.
  • Bagian #2
    Merapikan Tampilan.
  • Bagian #3
    Membuat Menu Navigasi.
  • Bagian #4
    Membuat Menu Drop Down.
  • Bagian #5
    Membuat Blog Fast Loading (Page Speed Insights).
  • Bagian #6
    Membuat Widget Untuk Banner Pada Header Sebelah Kanan.
  • Bagian #7
    Membuat Widget Footer Tiga Kolom.
  • Bagian #8
    Membuat Blog Resposive (Mobile Friendly Test) & SEO Friendly.
  • Bagian #9
    Merapikan Tampilan Layout.

Bagian #1 Membuat Tema Blogger Dari Nol (Tampilan Dasar) #1

Sobat , pada bagian #1 ini, kita akan menciptakan Tema Blog 100% dari nol, jadi yang perlu sobat lkitakan pertama kali yaitu menghapus seluruh isyarat yang terdapat pada tema bawaan. Caranya, pada "dashbor" blog pilih "Tema" >> "Edit HTML" >> pada bidang yang berisi isyarat HTML "klik kanan" >> "Select all" atau "Ctrl+A" >> kemudian "Delete / Backspace", sesudah semua isyarat terhapus, tulis isyarat "HTML standar" di bawah ini:

<html>
<head>
</head>
<body>
</body>
</html>

Setelah semua isyarat sobat tulis, kemudian klik "Simpan tema". Pada fase ini akan terjadi "error" dan akan muncul pesan menyerupai gambar di bawah ini:

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Sobat, pesan error di atas muncul lantaran pada struktur tema HTML yang sobat tulis di atas tidak terdapat "tag skin". Untuk mengatasinya cukup tambahkan isyarat ini <b:skin/> di antara tag pembuka dan epilog "head". Maka isyarat keseluruhan akan menjadi menyerupai ini:

<html>
<head>
  <b:skin/>
</head>
<body>
 </body>
</html>

Setelah sobat tambahkan "tag skin" coba sobat klik "Simpan tema" lagi. Apa yang terjadi? ternyata masih error. Dan akan muncul pesan:

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Pesan ini muncul lantaran pada isyarat tema tidak terdapat "tag b:section". Untuk mengatasinya, silahkan sobat tambahkan isyarat berikut ini <b:section/> di antara tag pembuka dan epilog "body". Sehingga isyarat akan menjadi menyerupai ini:

<html>
<head>
  <b:skin/>
</head>
<body>
  <b:section/>
</body>
</html>

Oke, sesudah isyarat <b:section/> sobat tambahkan, klik "Simpan tema" sekali lagi, dan ternyata masih terdapat error. Kali ini pesan errornya menyerupai ini:

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Pada pesan error di atas menyebutkan bahwa "setiap "section" harus mempunyai sebuah "id" yang unik". Maka cara untuk mengatasinya kita harus menambahkan "id" pada section tersebut. Selain "id" di sini aku juga ingin menambahkan "class" pada section tadi, biar memudahkan kita untuk memberi "selector" nantinya ketika meambahkan "style css-nya".

Maka isyarat HTML untuk tema blog kita nantinya akan menjadi menyerupai ini:

<html>
<head>
  <b:skin/>
</head>
<body>
  <b:section class='header' id='header'/>
</body>
</html>

Selanjutnya, klik lagi "Simpan tema" dan coba sobat perhatikan...! Sudah tidak ada lagi pesan error yang muncul, itu artinya isyarat HTML yang kita masukkan tadi sudah sanggup diterima dan berhasil disimpan. Tapi jangan senang dulu, lantaran bila hanya isyarat HTML yang tadi saja, maka bila sobat mencoba untuk "Melook blog", di sana hanya akan terlook sebuah halaman putih kosong. Coba saja bila sobat ingin membuktikan.

Benarkan? yang sobat look hanya sebuah halaman putih kosong.

Membuat Header.

Oke, sesudah berhasil menyimpan isyarat HTML dasar pada blog, langkah selanjutnya yaitu menambahkan "Gadget" pada blog. Caranya, buka "Tata Letak / Layout" dan pada "header" klik "Tambahkan Gadget".

Saran aku buka sajian "Tata Letak" pada tab anyar biar kita gampang untuk berpindah dari tab "Tema" dan "Tata Letak".
Caranya, pada "Tata Letak" klik kanan dan pilih "Buka link pada tab anyar / Open link in new tab".


Selanjutnya silahkan sobat masuk pada sajian "Tata Letak". Bila isyarat HTML yang sobat masukkan tadi sama persis menyerupai yang di atas, maka pada sajian "Tata Letak" akan terdapat satu buah section dengan nama "header". Klik "Tambahkan Gadget" dan pilih "Header Halaman" >> isi "Deskripsi Blog" kemudian klik "Simpan".

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Setelah menciptakan "Header", kini sobat pindah tab lagi menuju "Editor HTML" kemudian Refresh / Reload halaman dengan cara tekan tombol panah melingkar pada browser atau tekan F5. Apabila muncul jendela pop-up menyerupai di bawah ini,

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Pilih "Reload" dan browser akan memuat ulang halaman.

Setelah halaman selesai memuat, maka akan terdapat beberapa isyarat anyar yang sudah terisi secara otomatis. Kode yang termuat secara otomatis tadi yaitu isyarat dari "Widget Header" yang tadi kita tambahkan melalui "Tata Letak". Kodenya akan terlook menyerupai ini:

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Membuat Area Posting.

Setelah selesai menciptakan "Header", selanjutnya kini kita menciptakan "Area Posting". Caranya, tambahkan "tag b:section", jangan lupa tambahkan pula "class" beserta "id-nya", kemuadian tambahkan lagi "widget" dengan type "Blog", terakhir jangan lupa "tag epilog b:section". Letakkan isyarat sempurna di atas tag epilog </body>. Susunan isyarat "Area Posting" yaitu menyerupai ini:

<b:section class='main' id='main'>
     <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Sehingga kodenya akan terlook dari menyerupai ini:

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Setelah semua isyarat untuk "Area Posting" sobat tambahkan (tepat di atas </body>), kemudian klik "Simpan tema". Bila semua benar maka tidak akan muncul pesan error di sini. Setelah selesai menciptakan "Area Posting", tidak perlu reload halaman, pribadi kita lanjut step berikutnya.

Membuat Sidebar dan Footer.

Sobat , untuk menciptakan Sidebar dan Footer, caranya sama persis menyerupai ketika kita menciptakan Header di atas. Kita cukup tambahkan "tag b:section", jangan lupa tambahkan pula "class" beserta "id-nya". Untuk Sidebar, isi class dan id-nya dengan nama sidebar, sedangkan Footer, isi class dan id-nya dengan nama footer. Kemudian letakkan sempurna di atas </body>.

Untuk isyarat menciptakan Sidebar dan Footer yaitu menyerupai di bawah ini:

<b:section class='sidebar' id='sidebar'/>
<b:section class='footer' id='footer'/>

Sehingga sesudah kita tambahkan maka isyarat keseluruhannya akan terlook dari menyerupai ini:

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Kemudian klik "Simpan tema". Bila terjadi error, coba periksa isyarat sekali lagi, mungkin ada tag penutup yang terlewat. Karena dalam section yang kita tulis tadi masih kosong (belum ada widget yang ditambahkan), maka untuk tag penutupnya cukup kita tambahkan tanda garis miring) pada tamat tag sebelum tanda kurung kerucut akhir ( > ), sehingga bentuk tamat dari tag b:section yaitu menyerupai ini " /> ".

Sobat, hingga di sini kita telah berhasil menciptakan tema standar blogger (berisi header, posting area, sidebar dan footer). Kemudian langkah kita selanjutnya yaitu "Menambahkan Gadget" untuk Sidebar dan Foter.

Silahkan sobat masuk ke sajian "Tata Letak", bila tab tata letak yang tadi pada ketika kita menciptakan Header belum sobat tutup, maka sobat perlu me-reload halaman untuk memunculkan sajian "Tambahkan Gadget" pada section Sidebar dan Footer yang tadi telah kita buat. Setelah reload, tampilan "Tata Letak" blog kita akan menjadi menyerupai gambar di bawah ini:

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Pada section "Sidebar" silahkan tambahkan dua gadget utama sebuah blog, yaitu "Arsip Blog" dan "Label". Kedua Gadget ini sangat penting untuk kita tambahkan pada blog, selain untuk memudahkan user atau pengunjung blog kita, kedua gadget ini konon katanya termasuk syarat kelayakan apabila kita ingin mengikuti kegiatan Adsense.

Untuk menambahkan gadget, caranya sama menyerupai ketika kita menciptakan Header. Yaitu, klik "Tambahkan Gadget" >> scorll kebawah dan cari "Arsip Blog" kemudian klik tanda PLUS ( + ) yang terletak pada kanan atas disetiap sajian pilihan gadget >> dan "Simpan". Lkitakan dua kali pada section sidebar, yaitu pertama untuk menambahkan "Arsip Blog" dan yang kedua untuk menambahkan "Label".

Setelah selesai menambahkan gadget pada Sidebar, selnjutnya menuju pada section Footer. Pada umumnya footer dipakai untuk meletakkan gosip perihal blog yang bersangkutan dan untuk meletakkan atribusi Blogger. Maka dari itu alangkah baiknya bila section Footer ini kita tambahkan gadget "Atribusi". Caranya sama persis menyerupai section sidebar, hanya saja di sini yang kita pilih yaitu "Atribusi", kemudian isi cuilan gosip atribusi dengan nama blog sobat, kemudian klik "Simpan".

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Oke, sesudah gadget sobat tambahkan semua, kini saatnya melook hasil jerih payah kita sedari tadi. Silahkan sobat klik pada sajian "Lihat blog" yang terletak pada cuilan kiri atas (di bawah nama blog kita). Apabila yang sobat lkitakan sama menyerupai yang aku lkitakan tadi, maka hasil yang akan kita peroleh pada tampilan blog sobat akan menyerupai ini.

Cara gampang menciptakan tema blogger dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #1

Pada tampilan blog kita terdapat notifikasi "Belum ada postingan" sedangkan widget "Label" dan "Arsip Blog" juga tidak kelookan. Hal ini disebabkan belum ada satupun postingan yang kita tulis pada blog ini. Untuk itu, biar kita sanggup melanjutkan pada step berikutnya, silahkan sobat menciptakan setidaknya satu postingan saja (terserah sobat mau menulis apa), dan jangan lupa pada "Label" juga sobat isi setidaknya dua label.

Bersambung: Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #2.

Sobat bermanfaat, hingga di sini dulu kebersamaan kita kali ini. Like, komentar dan share dari sobat semua sangat bermanfaat bagi blog ini. Apabila ada kesalahan dan atau ada yang mau sobat tambahkan, silahkan kirim melalui komentar.

Akhir kata, "Semoga bermanfaat", Sukses untuk kita semua Aamiin...


Sumber http://yang-bermanfaat.blogspot.com

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel