Membuat Template Blogger Sendiri dengan Bootstrap
Bootstrap adalah framework atau kerangka HTML, CSS, dan Java Script paling populer digunakan untuk mendesain sebuah desain template Website yang sudah responsif.
Sebagaimana saya gunakan pada template ini. Pada awalnya saya melihat tampilan-tampilan template yang menurut saya keren, dari situ saya mencari-cari info. Kemudian saya mendarat di situs getbootstrap.com.
Bootstrap bagi saya sangat membantu pembuatan template ini. Saya sangat awam sekali mengenai Coding-coding HTML, CSS, apa lagi Java Script. Tapi setelah berusaha untuk serius sedikit (hehehe...) ternyata mudah. Saya hanya menyalin dan memodifikasi sedikit, terutama CSS.
Bagi saya bootstrap cocok untuk pemula, bahkan fasilitas ini digunakan juga oleh para pakar desainer Web. Mungkin saya karena tidak terlalu fokus dengan bahasa desain, karena saya kuliah Fisika. Maka untuk bisa menggunakan bootstarp supaya mudah.
Mulai dari Navigasi menunya, drop downnya, sampai CSS Basic Text, CSS buttons, dll.
Contoh framework bootstrap :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Hasilnya INI DEMONYA [SILAHKAN DI KLIK]
Jika anda ingin belajar banyak, Kunjungi halaman Web bootstrap. GETBOOTSTRAP.com.
Dan juga penjelasan teori juga bisa di halaman W3school.com.
bermanfaat gan, namun harus di liat juga untuk optimasi SEOnya :D Jangan Lupa Mampir (y)
ReplyDeleteBermanfaat kak .
ReplyDeleteTapi saya biasa pakai dreamweaver . :D
Judul sama posting nggak sejalur :3
ReplyDeletebiarin ah... hahaha...
Delete