Cara Membuat Template Blogspot yang Responsive dengan Bootstrap V3
Kesempatan kali ini http://mahirngoding.blogspot.com ingin berbagi tentang bagaimana cara membuat template Blogger/Blogspot yang responsif dengan menggunakan Bootstrap. Rencananya tema Blogspot yang dibuat ini akan menggunakan plugin CSS Bootstrap V3 untuk desain yang responsif dan juga memakai Font Awesome untuk mempercantik tampilan blog serta menggunakan Jquery untuk membuat tampilan blog agar lebih dinamis. Rancangan template blog tersebut secara garis besarnya akan seperti ini:
Dokumen HTML
Sebagai langkah awal, buka Notepad dan salin struktur dokumen HTML di bawah ini:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta content='text/html; charset=utf-8' http-equiv='Content-type'/> <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin version='1.0.0'><![CDATA[ ]]></b:skin> <b:include data='blog' name='google-analytics'/> </head> <body> <!--tag html--> </body> </html>
CSS Bootstrap V3
Kemudian salin syntax di bawah ini untuk memanggil fungsi CSS Bootstrap:
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
Letakkan code tersebut di atas code ini:
<b:skin version='1.0.0'><![CDATA[
Javascript Jquery
Kemudian tambahkan code untuk memanggil fungsi-fungsi Javascript Jquery, salin code di bawah ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
Lalu tempelkan code tersebut di atas code berikut ini:
<b:include data='blog' name='google-analytics'/>
Javascript Bootstrap
Jangan lupa tambahkan pula script Javascript bawaan dari Bootstrap. Salin code di bawah ini:
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
Letakkan code tersebut di bawah code berikut ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
Fonts Awesome
Selanjutnya tambahkan Fonts Awesome. Salin code di bawah ini:
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Letakkan code ini tepat di bawah code:
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
Hasil
Jadi secara keseluruhan nantinya struktur dokumen tersebut akan seperti ini:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta content='text/html; charset=utf-8' http-equiv='Content-type'/> <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/> <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> <b:skin version='1.0.0'><![CDATA[ ]]></b:skin> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/> <b:include data='blog' name='google-analytics'/> </head> <body> <!--tag html--> </body> </html>
Bersambung ke Cara Membuat Tema Blogspot Bagian 1 Tahap Perencanaan
Categorized in Blogger, Blogging, Blogspot, Bootstrap, Responsive, Template
0 Readers Interaction:
Post a Comment