Blog Pribadi tempat Berbagi Ilmu dan Pengalaman

Kerangka Blogger Dasar Bootstrap 3.3.2


Kali ini saya mau nge-share Kerangka Template Blogger yang dibuat menggunakan Bootstrap 3.3.2. Kode sederhana dengan bootstrap, konsekuensi menggunakan fitur seperti ini tidak 100% fitur Blogger yang disediakan bisa digunakan.

Kamu akan lebih banyak meng-edit di kolom "edit HTML" dibandingkan hanya sekedar di kolom "tataletak". Namun menurut saya ini sedikit enak bagi kita yang tidak mau repot.
Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.






Di ambil dari Wikipedia
Monggo di ambil, bisa buat belajar.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>

<!-- Start Heading -->
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

<!-- Start Title -->

<title><data:blog.pageTitle/></title>

<!-- End Title -->

<!-- Start Style -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>

<b:skin><![CDATA[
/* -----------------------------------------------------
Name:     Tulis Nama Template
Author:   Nama Kamu
URL:      Website Kamu
-------------------------------------------------------- */

]]></b:skin>
<!-- End Style -->

</head>

<!-- End Heading -->
<!-- Start Body -->

<body>
<!-- Header -->

<div class="container-fluid">
<div class="row">
  <div class="col-xs-6">
     <b:section class='header' id='header1' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
     </b:section>
  </div>

  <div class="col-xs-6">
     <b:section class='header' id='header2' maxwidgets='1' showaddelement='no'/>
  </div>
</div>

<!-- Nav -->
<ul class="nav nav-tabs">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Kategori <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Template</a></li>
    </ul>
  </li>
</ul>

<!-- Content -->

<div class="row">
  <div class="col-md-8">
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
  </div>

  <div class="col-md-4">
    <b:section class='sidebar' id='sidebar' preferred='yes'>
        <b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'/>
    </b:section>
  </div>
</div>
<!-- Footer -->
<div class="row">
  <div class="col-md-4">
<b:section class='footer' id='footer1' preferred='yes'/>
  </div>
  <div class="col-md-4">
<b:section class='footer' id='footer2' preferred='yes'/>
  </div>
  <div class="col-md-4">
<b:section class='footer' id='footer3' preferred='yes'/>
  </div>
</div>

<hr class='featurette-divider'/>
<!-- Credit -->
<footer id='footer'>
<p class='pull-right'><a href='#'>Back to top</a></p>
<p>Copyright &#169; 2015 <a href='/'>fahmirabbani.com</a></p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
<!-- End Body -->

</HTML>
Sekian Artikel ini, di Comment yaa... :D

No comments:

Post a Comment