Cara praktis membuat template blogger
Karena harga sewa server begitu mahal, maka mencoba memanfaatkan blogger sebagai tempat penyimpanan artikel dan server gratisan atau semi gratis untuk halamannya
Maka rencanya adalah meletakkan halaman-halaman statis di server-server semi gratis seperti firebase dan meletakkan artikel-artikel di blogger
Oleh karena itu, tampilan blogger harus sama persis seperti tampilan halaman utamanya, yang sebenarnya beda url dan beda server
Terapkan. Jika sudah, pilih menu sesuaikan, dan pilih edit HTML. Hapus seluruh bagian <head> dan <body>
Buka template boostrap yang sudah di download
copykan bagian ini
<meta charset="utf-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
ini penting untuk tampilan di smartphone atau layar yang lebih kecil
selanjutnya copykan semua link bootstrap yang diperlukan (catatan : setiap template bootstrap kadang berbeda sumbernya)
contoh :
<!--Bootstrap Icons-->
<link href="https://madian.web.app/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet"></link>
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css">
selanjutnya masukkan link css, ini bisa diambil dari situs yang sudah jadi (templatenya)
contoh:
<link href="https://madian.web.app/assets/css/style.css" rel="stylesheet">lt;/link>
Setelah itu masukkan kode untuk persiapan css
<![CDATA[
]]>
nantinya didalamnya bisa dimasukkan kode css untuk tampilan blogger
masukkan tag buka tutup body yaitu <body></body>
didalamnya masukkan bagian atas situs, biasanya header dan navigasi
contoh:
<!--======= Header =======-->
<header class="fixed-top" id="header">
<div class="container d-flex align-items-center justify-content-between">
<h1 class="logo"><a href="https://madian.web.app/index.html">Madian</a></h1>
<!--Uncomment below if you prefer to use an image logo-->
<!--<a href="index.html" class="logo"><img src="https://madian.web.app/assets/img/logo.png" alt="" class="img-fluid"></a>-->
<nav class="navbar" id="navbar">
<ul>
<li><a class="nav-link scrollto active" href="https://madian.web.app/#hero">Beranda</a></li>
<li><a class="nav-link scrollto" href="https://madian.web.app/#about">Tentang</a></li>
<li><a class="nav-link scrollto" href="https://madian.web.app/#services">Services</a></li>
<li><a class="nav-link scrollto" href="https://madian.web.app/#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="https://madian.web.app/#team">Team</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a class="nav-link scrollto" href="https://madian.web.app/#contact">Contact</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!--.navbar-->
</div>
</header><!--End Header-->
ganti setiap href link, menuju situs utama
Setelah header kita masukkan footer beserta bagian bawahnya (biasanya termasuk script javascript).
Antara header dan footer nanti kita masukkan section main, bagian ini nantinya akan kita masukkan script untuk blogg
Ini contoh bagian footer beserta javascript, letaknya tepat diatas tag penutup <body>
contoh
<!--======= Footer =======-->
<footer id="footer">
</footer><!--End Footer-->
<a class="back-to-top d-flex align-items-center justify-content-center" href="#"><i class="bi bi-arrow-up-short"></i></a>
<!--Vendor JS Files-->
<script src="https://madian.web.app/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://madian.web.app/assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="https://madian.web.app/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="https://madian.web.app/assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="https://madian.web.app/assets/vendor/php-email-form/validate.js"></script>
<!--Template Main JS File-->
<script src="https://madian.web.app/assets/js/main.js"></script>
nah bagian tengah antara header dan footer diisi dengan <b:section> contoh
<section id="tengah" class="tengah">
<b:section id='main'>
</b:section>
</section>
sekarang pada "<b:section id='main'>" kita masukkan beberapa widget
widget pertama via kode
widget ini berisi list tulisan yang sudah dimasukkan kedalam blog
ketikkan
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' version='2' visible='true'></b:widget>