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

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

Cara gampang menciptakan tema blogger theme dari nol Cara Membuat Tema Blogger Dari Nol - 100% Bisa. #2
Sobat , Alhamdulillah kita masih diberi kesempatan untuk berjumpa lagi. Setelah kemarin kita membahas perihal Cara Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #1. Sekarang mari kita lanjutkan untuk episode yang ke dua. Dan bagi teman yang teranyar bergabung di sini, silahkan teman baca terlebih dahulu untuk episode yang pertama di sini.

Sebelum kita membahas lebih lanjut, sekali lagi aku ingin memberikan kepada teman semua, bahwa dalam tutorial mengenai "Cara Membuat Tema Blogger Dari Nol" yang aku sampaikan melalui blog ini terbagi menjadi beberapa bagian. Jadi, silahkan teman eksplorasi sendiri sesuai kebutuhan. Beberapa kepingan tersebut diantaranya:

  • Bagian #1
    Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #1.
    Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) #2. Aktif.
  • 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.

Sobat, pada episode pertama yang kemarin kita telah berhasil menciptakan "Header, Area Posting, Sidebar dan Footer" pada tema dasar blogger yang kita buat. Silahkan teman lihat kembali tampilan blog melalui sajian "Lihat blog" atau eksklusif ketik alamat URL yang telah teman buat kemarin. Dan tampilan blog akan menyerupai gambar di bawah ini:

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

Dari tampilan blog di atas, sanggup kita lihat terdapat "Header" sedangkan pada area posting tertulis "Tidak ada postingan" dan "Footer". Sementara widget "Arsip Blog" dan "Label" pada sidebar sama sekali tidak dipengkaung dari.

Penyebab menghilangnya sidebar pada tampilan blog kita yaitu alasannya pada blog kita tidak terdapat satupun postingan, sehingga tidak ada data yang sanggup ditampilkan oleh wiget "Arsip Blog" dan "Label". Sekarang, supaya "Arsip Blog" dan "Label" sanggup muncul dan kita sanggup dengan gampang melihat perbedaan yang terjadi pada tampilan blog ketika kita melkitakan perubahan pada tema silahkan teman menulis setidaknya satu postingan saja (terserah teman mau menulis apapun) dengan catatan "isi juga pada kolom Label" dan jangan lupa klik "publishkan". Silahkan mulai menulis...

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

Setelah selesai menciptakan satu posting berlabel, kini lihat tampilan blog kemudian muat ulang halaman dengan me-reload atau tekan F5 (apabila tab browser belum ditutup) untuk melihat hasil postingan yang teman buat tadi.

Setelah menerbitkan satu postingan, tampilan blog akan dipengkaung dari menyerupai gambar dibawah ini:

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

Terlihat tampilan blog yang kita buat masih berbaris kebawah antara Header, Area Posting, Sidebar dan Footer pada setiap sectionnya. Hal ini masuk akal alasannya kita belum menambahkan tag HTML untuk mengatur setiap section beserta style (css)-nya.

Untuk menata letak setiap kepingan dari blog yang akan kita buat sebagaimana pada gambar rancangan blog pada episode #1 kemarin, maka pertama - tama yang harus kita lkitakan yaitu memilih / menciptakan bungkus (istilah umumnya wrapper) pada setiap kepingan dari elemen blog.

Untuk merubah tampilan dasar sebuah blog yang biasanya Header (berada di atas), Area Post (tengah kiri), Sidebar (tengah kanan) dan Footer (bawah) maka kita harus menciptakan beberapa bungkus (wrapper) untuk membatasi setiap kepingan blog supaya gampang untuk di atur dan tidak melebar ke kanan atau kiri, ke atas ataupun bawah. Untuk lebih jelasnya sanggup teman lihat gambar di bawah ini:

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

Menata Lebar Halaman.

Sobat, dari desain tema blog yang telah kita buat di atas, pertama yang ingin aku atur yaitu lebar halaman, di mana ukuran lebar maksimal halaman akan aku ubah menjadi 1017px dan posisinya terletak di tengah jendela browser. Maka yang harus kita buat yaitu "Bungkus Luar / Outer Wrapper" dan css pengaturnya.

Untuk menciptakan "Bungkus Luar / Outer Wrapper" halaman blog, kita harus menambahkan tag div beserta atribut dan isinya yang mana tag pembukanya menyerupai ini  <div id='bungkus-luar'> dan teman letakkan sempurna di bawah <body> sedangkan untuk tag penutup </div> letakkan sempurna di atas </body>.

Adapun arahan HTML untuk menciptakan "Bungkus Luar" yaitu sebagai berikut.

<body>
<div id='bungkus-luar'>
.....
.....
.....
</div>
</body>

Setelah menambahkan arahan HTML, jangan lupa tambahkan pula css-nya. Untuk css letakkan di dalam b:skin, tepatnya di antara kurung persegi ( <b:skin><![CDATA[ css di sini ]]></b:skin> ), atau sanggup juga css-nya diletakkan di atas tag penutup </head> dengan syarat harus teman tulis di antara tag style ( <style> css di sini </style> ).

Adapun css untuk bungkus luar yaitu sebagai berikut:

#bungkus-luar {   background:white;   width:100%;    max-width:1017px;   margin:0 auto;   overflow:hidden; }

    Keterangan:
  • #bungkus-luar = tagar ( # ) mendefinisikan sebuah "id", sedangkan "bungkus-luar" selector yang mendefinisikan bahwa css untuk mengatur bungkus-luar.
  • Kurung kurawa ( { ... } ) = area untuk meletakkan nilai css sebuah selector.
  • background:white = menandakan bahwa nilai selector mempunyai background warna putih.
  • Titik koma ( ; ) = berfungsi sebagai pemisah antara nilai (value) satu dengan yang lain.
  • width:100%; max-width:1017px = menandakan bahwa halaman blog mempunyai lebar penuh (100%) apabila lebar layar (browser) kurang dari 1017px dan lebar maksimal 1017px apabila lebar layar lebih dari 1017px.
  • margin:0 auto = berfungsi untuk mengatur posisi halaman supaya berada di tengah - tengah.
  • overflow:hidden = berfungsi supaya tidak menampilkan konten yang melebihi batas maksimal.
Sehingga arahan HTML keseluruhan pada tema kita yaitu menyerupai ini:

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

Setelah tag HTML dan css ditambahkan, klik "Simpan tema", kini silahkan teman lihat perbedaannya pada blog sobat. Akan terlihat lebar halaman blog tidak lagi penuh (satu layar penuh) menyerupai sebelumnya, tepatnya lebar kini menjadi 1017px dan posisinya di tengah - tengah.

Sekarang supaya kita sanggup melihat perbedaan antara body dan bungkus luar, kita perlu memberi style (css) pada body, di sini aku ingin mengubah warna background body dari stengkaurnya (putih) menjadi lightgrey. Yang perlu kita lkitakan cukup tambahkan pada css selector body dengan nilai background lightgrey dan letakkan sempurna di atas css #bungkus-luar kemudian klik "Simpan Tema". Kodenya menyerupai ini:

body {   background:lightgrey; }

Dalam menulis selector body pada css jangan ditambahi "titik" ( . ) atau "tengkau pagar" ( # ).

Untuk gambarnya menyerupai di bawah ini:

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

Sekarang coba teman lihat sekali lagi perubahan yang terjadi pada tampilan blog. Sudah sanggup dibedakan antara body dan halaman blog bukan?

Membuat Bungkus Isi.

Sobat, Isi yang aku maksud di sini yaitu komponen utama sebuah blog, yaitu "Konten atau Posting" dan komponen pendukungnya yaitu "Sidebar". Jadi, bungkus isi kita butuhkan untuk membungkus komponen utama pada blog tersebut supaya gampang dalam mengatur tata letaknya.

Yang terang dalam membangun sebuah template atau tema blog kita sebagai developer / kreator / designer atau apapun istilahnya bebas dalam menambahkan atau menguragni komponen yang akan kita buat. So, be happy untuk mencoba dan berkreasi supaya tema yang kita buat nantinya sanggup sesuai dengan harapan kita sebagai pembuatnya. Adapun duduk kasus layak dan tidaknya tema kita untuk dipublikasikan dan disebarkan nantinya biar pemakai yang menilai.

Untuk menciptakan "Bungkus isi" caranya sama persis menyerupai menciptakan "Bungkus luar" kita cukup tambahkan tag HTML berupa <div beserta atributnya pada titik awal (pembuka) dan pada titik final di tutup dengan tag epilog ( </div> ), kemudian tambahkan pula css-nya.

Letakkan tag pembuka <div id='bungkus-isi'> tepat di atas arahan <b:section class='main' id='main'> (kode area posting) dan tag penutupnya </div> tepat di atas kode <b:section class='footer' id='footer'> (kode footer).

Kode untuk menambahkan "Bungkus isi" yaitu sebagai berikut:

<div id='bungkus-isi'>
   <b:section class='mainid='main'>
     .....    
.....    
.....
</div>
  <b:section class='footerid='footer'>

Sedangkan untuk css-nya yaitu sebagai berikut:

#bungkus-isi {   width:100%;   overflow:hidden; }

Setelah arahan bungkus isi dan css-nya ditambahkan, maka arahan keseluruhan dari tema kita akan menyerupai ini:

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

Kemudian klik "Simpan tema" untuk menyimpan perubahan yang teranyarsan kita lkitakan.

Menata Area Posting Pada Posisi Kiri.

Setelah menambahkan "Bungkus isi", kini saatnya kita mengubah letak "Area posting" dari tampilan yang kini menjadi lebar 70% dan posisi berada di sebelah kiri halaman utama. Caranya sama menyerupai yang di atas, tambahkan tag HTML berupa "Bungkus Post", kodenya menyerupai ini <div id='bungkus-post'> latakkan sempurna di bawah <div id='bungkus-isi'> dan tag penutupnya </div> letakkan sempurna di atas <b:section class='sidebar' id='sidebar'> dan jangan lupa tambahkan css sebagai pengaturnya.

Maka kodenya akan terlihat menyerupai ini:

<div id='bungkus-isi'>
<div id='bungkus-post'>
   <b:section class='mainid='main'>    
.....    
.....    
.....
   </b:section>
</div>
  <b:sectionclass='sidebarid='sidebar'>

Untuk css bungkus-post yaitu menyerupai ini:

#bungkus-post {   width:70%;    float:left; }

    Keterangan:
  • width:70% = Lebar maksimal bungkus post yaitu 70% dari total lebar bungkus isi (karena bungkus post merupakan element dari bungkus isi).
  • float:left = css yang mengatur posisi bungkus post berada di kiri (left).

Setelah Kode bungkus post dan css-nya ditambahkan, maka keseluruhan arahan akan dipengkaung dari menyerupai gambar di bawah ini:

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

Menata Sidebar Pada Posisi Kanan.

Untuk mengatur sidebar caranya sama menyerupai ketika mengatur bungkus post. Tinggal tambahkan tag HTML untuk "bungkus sidebar" dan jangan lupa juga tambahkan cssnya.

Adapun tag HTML untuk bungkus sidebar yaitu menyerupai ini <aside id='bungkus-sidebar'> letakkan sempurna di atas <b:section class='sidebar' id='sidebar'> dan tag penutupnya yaitu </aside> letakkan sempurna di atas </div> penutup bungkus isi.

Bila teman resah mencari </div> penutup bungkus isi, sanggup dengan cara meletakkan kode </aside> tepat dibawah tag penutup </b:section> dari sidebar. Agar gampang mencari letak tag penutup </b:section>. Caranya ciutkan kode <b:section class='sidebarid='sidebar'> dengan mengklik area kosong di samping angka baris tag tersebut. 

Penulisan kodde untuk "Bungkus sidebar" menyerupai ini:

</div>
<aside id='bungkus-sidebar'>
    <b:section class='sidebarid='sidebar'>.....</b:section>
</aside>
</div>
    <b:section class='footer' id='footer'>.....</b:section>

Sedangkan css-nya menyerupai ini:

#bungkus-sidebar {   width:30%;    float:right; }

Kode HTML beserta css sehabis ditambahkan semua akan dipengkaung dari menyerupai gambar berikut ini:

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

Setelah semua arahan HTML dan css ditambahkan, klik "Simpan tema". Silahkan dilihat kesannya pada tampilan blog sebelum step selanjutnya.

Mengatur Header dan Footer.

Untuk step terakhir pada tutorial Cara Membuat Tema Blogger / Blogger Theme Dari Nol - 100% Bisa (tampilan dasar), yaitu mengatur "Header" dan "Footer" supaya mempunyai warna background yang berbeda dari section yang lain sebagaimana yang biasa diterapkan pada tema - tema blog secara umum dan mungkin supaya terlihat lebih menarik juga.

Untuk itu, di sini aku hanya ingin menambahkan css pada class "header" dan "footer" saja, tanpa ada penambahan arahan HTML.

Langsung saja, untuk mengatur tampilan class "header" dan "footer" cukup tambahkan arahan css di bawah ini dan letakkan sempurna diatas kode ]]></b:skin>.

.header, .footer {   background:grey;    width:100%;    color:white; }

    Keterangan:
  • Titik ( . ) = menawarkan class (untuk id ditunjukkan memakai tengkau pagar).
  • Koma ( , ) = pemisah selector .header dan f.foter (menunjukkan arahan css untuk 2 selector atau lebih).
  • color:white = warna teks pada "header" dan "footer" yaitu warna putih.

Kemudian klik "Simpan tema". Selesai...

Sobat, sehabis menyimpan css untuk class "header" dan "footer" maka selesai tutorial Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) Bagian #1. dan mari kita lanjutkan pada Bagian #2 yaitu, "Merapikan Tampilan".

Untuk mencocokkan hasil dari tutorial yang aku sampaikan dengan hasil praktek yang teman lkitakan, maka hasil dari tampilan blog sementara yang telah kita buat akan terlihat menyerupai gambar di bawah ini:

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

Lihat juga Membuat Tema Blogger Dari Nol - 100% Bisa (Tampilan Dasar) Bagian #1 versi videonya.


Sebelum aku akhiri kebersamaan kita kali ini, aku ingin mohon maaf kepada teman sekalian atas segala kesalahan yang aku perbuat. Mohon maaf apabila cara aku memberikan terkesan sangat dasar, bukan berarti meremehkan teman sekalian tapi aku ingin teman yang memang betul - betul teranyar mengenal arahan HTML (seperti saya) sanggup memahami setiap arti dari arahan yang ditulis. Selain itu juga sebagai sarana aku untuk berguru memahami lebih dalam.

Saran, share dan komentar dari teman sekalian sangat berarti bagi blog ini. Akhir kata semoga bermanfaat dan sukses selalu untuk kita semua. Aamiin...


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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel