Membuat dan Mendesain Template Blogger Responsif
HTML (Wajib)
CSS (Wajib)
JavaScript (Opsional)
XML (Opsional)
Kerangka Responsif (Opsional).
Komponen yang Anda butuhkan:
1. Editor HTML/CSS. Offline disarankan. Notepad ++, Sublime Text, Dreamweaver, Geany dll. Di mana Anda lebih suka membuat kode.
2. Notebook untuk menyimpan kode penting, tip, dll. Mungkin, Anda telah mencoba mengupload template HTML rancangan Anda di Blogger secara manual atau copy-paste. Tapi setiap kali Anda gagal untuk melihat perubahan karena banyak kesalahan yang ditampilkan pada bilah notifikasi di Editor HTML Blogger.
Mungkin, Anda telah mencoba mengupload template HTML rancangan Anda di Blogger secara manual atau copy-paste. Tapi setiap kali Anda gagal untuk melihat perubahan karena banyak kesalahan yang ditampilkan pada bilah notifikasi di Editor HTML Blogger.
Hari ini Anda tidak akan gagal melihat template HTML rancangan Anda melalui platform Blogger. Tidak hanya tampilan perubahan Template Anda, tetapi juga Anda akan membuat template HTML Anda dinamis seperti Header, Post Title, Post Body, Sidebar, Footer akan menampilkan data yang dihasilkan. Anda dapat menyesuaikan logo, Judul Blog, Bilah Sisi, dll melalui Dasbor Blogger tanpa menyesuaikan kode HTML apa pun.
1. Dari Dasbor Blogger → Tema → Edit HTML dan bersihkan semua kode. Pilih semua dengan Ctrl + A dan DELETE atau Backspace.
2. Sekarang rekatkan HTML mentah dari halaman dasar di ruang kosong. Kemudian simpan tema tersebut. Asumsikan, kode yang kami pilih adalah sebagai berikut :
<html>
<head>
<title>Title of Blog</title>
</head>
<body>
style="text-align: justify;"> <p>Hello World</p>
</body>
</html>
style="text-align: justify;">
b:skin>
<![CDATA[
/****CSS CODE*****/
]]>
</b:skin>
<b:section id="hello" class="hello"></b:section>
Membuat Posting Baru untuk Melihat Tampilannya
Mari buat postingan baru dari Dasbor Blogger → Posting → Posting Baru dan tulis beberapa teks dummy untuk melihat apa yang terjadi di Blog yang dipublikasikan.
Setelah menerbitkan posting baru, kami tidak melihat posting dan teks kami. Anda berseru, “Apa !!! Tidak ada yang bisa dilihat! Dimana postingan kita? Kenapa ini?".
Inilah sebabnya kami tidak memberi tahu Blogger di mana pos akan ditampilkan. Kami tidak membuat dan memilih bagian apa pun untuk blog. Tidak hanya untuk posting blog jika kita ingin menampilkan Header, Sidebar, Footer kita harus menentukannya dengan membuat bagian dan widget. Langsung, salin-tempel kode-kode berikut :
b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'/>
</b:section />
Jika Anda memuat ulang Editor Blogger, Anda akan melihat beberapa kode tambahan telah dibuat secara otomatis.
Beberapa kode telah dibuat sebelum tag <head> dan Beberapa kode telah dibuat di dalam <b:widget></b:widget> Kode yang dihasilkan sebelum tag <head> menentukan versi xml dan lainnya untuk merender template ini dengan benar.
Jika Anda memperluas kode di dalam widget blog, Anda akan melihat utama, posting, formulir komentar, tombol bagikan, dll. Ini untuk tools bawaan yang dibutuhkan saat kita memublikasikan postingan.
Pengertian Bagian dan Widget di Blogger Meskipun Anda telah berhasil memublikasikan blog Anda dengan mengikuti petunjuk di atas, mungkin Anda tidak mengerti tentang bagian dan widget. Kenapa ini? Anda harus mempelajari alasannya. Karena akan dibutuhkan di masa depan untuk membuat bagian dan widget baru, lagipula kita tidak melihat bagaimana sidebar dinamis, header bekerja.
Karena kita ingin belajar dan membuat tema Blogger profesional, kita harus mengerjakan template HTML yang didesain ulang namun responsif penuh yang berisi Header, Navbar, Main, Sidebar, Footer, dll.
Fitur ini tidak tersedia di template HTML tempat kita bekerja saat ini. Ini akan menjadi keputusan yang lebih baik untuk menggunakan kerangka kerja responsif penuh seperti Bootstrap, W3CSS, dll.
Tapi saya lebih suka bekerja dengan Bootstrap dan blog ini juga dibangun dengannya. Anda tidak perlu mengunduh Bootstrap. Ini adalah template kosong html Bootstrap yang sudah jadi dan kami akan mengerjakan template ini.
Buka Dasbor Blogger → Tema → Edit HTML dan bersihkan semua kode dari tema Anda saat ini. Anda dapat mencadangkan tema Anda setelah menghapus. Sekarang rekatkan templat HTML Bootstrap berikut ke editor dan simpan.
Sekarang kita akan mengerjakan template ini dan melupakan template sebelumnya. Ini adalah template kelinci percobaan kami.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>My First Blogger Theme</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<b:skin>
<![CDATA[
/**PUT YOUR ALL CSS HERE**/
]]>
</b:skin>
</head>
<body>
<div class="header-wrapper">
<div class="container">
<div class="brand">
<!--Put Header Section Here-->
</div>
</div>
</div>
<div class="content-wrapper">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="post-wrapper">
<!--Put Main Section Here-->
</div>
</div>
<div class="col-md-3">
<div class="sidebar-wrapper">
<!--Put Sidebar Section Here-->
</div>
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="container">
<p>Powered by <a href="http://www.blogger.com">Blogger</a></p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
Kami telah mengatakan untuk menunjukkan pos yang kami buat, perlu bagian. Membuat bagian pada tema Blogger sangat mudah.
Apa itu bagian di Blogger? Bagian blogger adalah ruang yang dialokasikan pada tema Blogger untuk memuat widget.
Aturan membuat bagian di Blogger
1. Setiap bagian memiliki tag awal dan tag akhir. Tag pembuka adalah <b:section> dan tag penutup adalah </b:section>. Setelah menerbitkan posting jika Anda memeriksa bagian dari browser dengan elemen Inspeksi, Anda akan melihat kelas div, bukan bagian. Tapi di Editor HTML Blogger bagian tidak diubah menjadi kelas div.
2. Setiap bagian harus memiliki class dan id yang unik. Penamaan kelas dan id dari satu bagian ke bagian lain adalah ilegal. Karena section diubah menjadi div, class dan id dari section tetap berada di div sebagai atribut. Jadi kami dapat menyesuaikan desain bagian dengan kelas dan id ini.
3.Anda tidak diizinkan membuat bagian bersarang. Di bawah bagian, membuat bagian lain tidak valid.
4. Anda hanya dapat menyisipkan atribut yang diberikan. 5. Akan lebih baik untuk membuat bagian di bawah div.
Apa itu widget di Blogger? Kita bisa menyebutnya plugin Blogger. Jika kita ingin menyisipkan atau memasang gadget eksternal maka widget dapat membuat ruang lingkup ke plugin bagian Blogger. Secara default Popular posts, Search Bar, Email Subscription, Link List, Images, Text, Labels, HTML/CSS/JavaScript Code dll tersedia di Blogger sebagai gadget.
Aturan widget Anda dapat menggunakan tag awal dan akhir dalam mendeklarasikan widget. Tag pembuka adalah <b:widget> dan tag penutup adalah </b:widget>. Atau Anda hanya dapat menggunakan tag penutup tunggal sebagai <b:widget/> . Setelah menerbitkan posting jika Anda memeriksa widget dari browser dengan elemen Inspeksi, Anda akan melihat kelas div, bukan widget. Namun di Editor HTML Blogger, widget tidak diubah menjadi kelas div. Setiap widget harus memiliki id unik dan atribut tipe. Penamaan kelas dan id dari satu bagian ke bagian lain adalah ilegal. Karena widget diubah menjadi div, id widget tetap berada di div sebagai atribut. Jadi kita bisa menyesuaikan desain widget dengan id ini. Anda tidak diizinkan membuat widget bersarang. Di bawah widget, membuat widget lain tidak valid. Anda hanya dapat menyisipkan atribut yang diberikan. Anda harus membuat widget di dalam bagian buat. Anda tidak diperbolehkan memasukkan HTML ke dalam widget.
Keuntungan penamaan kelas bagian:
1. Meskipun memberi nama kelas bagian itu opsional, kita harus menambahkannya karena penamaan akan membantu Blogger untuk menentukan cara mentransfer konten blog saat mengubah tema.
2. Nama asli kelas adalah 'navbar' untuk menu navigasi, 'header' untuk bagian header, 'main' untuk bagian posting, 'sidebar' untuk bagian sidebar tempat kita meletakkan posting populer, posting terbaru, label, dll. dan 'footer ' untuk bagian footer blog. Sekarang buat bagian dan widget baru, tempat Anda ingin meletakkannya. Tanpa header & widget blog, saya sarankan, buat semua bagian tetapi akan lebih baik tidak membuat widget di editor, karena Anda dapat menambahkan widget dari Dashboard → Layout.
Cara Membuat Menu Responsif Seluler Blogger Anda dapat membuat menu navigasi responsif bilah atas untuk tema Blogger seperti yang telah Anda lakukan pada template HTML mentah. Menggunakan menu Navigasi statis di Blogger adalah cara terbaik untuk menghindari banyak masalah. Meskipun Anda dapat menggunakan gadget 'Laman', 'Daftar tautan' untuk menyisipkan tautan secara dinamis ke dalam menu Anda, akan sulit untuk menu tarik-turun. Jadi Anda tidak perlu data dinamis seperti yang Anda lakukan dan lakukan untuk tata letak lain di Blogger. Jika Anda menggunakan Kerangka Kerja Bootstrap, Anda dapat menggunakan navebar dari sini Atau Anda dapat memeriksa artikel yang dapat ditindaklanjuti tentang menu responsif dari w3schools. Masukkan kode ke dalam tema XML Anda, tempat Anda ingin menampilkan bilah menu navigasi. Setelah membuat menu responsif Seluler, cukup rekatkan URL penargetan ke dalam tag jangkar. Contoh:
ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
Menjadikan Blogger Dinamis Karena struktur dasar Tema Blogger adalah:
1. Header
2. Blog
3. Sidebar
4. Footer
kita harus membuat ini dinamis sehingga kita tidak memerlukan kode lagi.