Article

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
Labels ,
Newer Post Older Post
Post A Comment
  • Blogger Comment using Blogger
  • Facebook Comment using Facebook
  • Disqus Comment using Disqus

10 comments :

  1. Muhammad Adam Hussein, S.Pd, CM4 March 2015 at 05:08

    Wah keren ilmunya sangat mendasar, jadi penasaran dengan kelanjutannya.

    Datang juga ya berkunjung, ^.^

    ReplyDelete
    Replies
    1. bani fahmi4 March 2015 at 07:24

      insyaAllah nanti ada lanjutannya... tinggal nunggu mood nulis lagi, hehehe...

      Delete
  2. Achmad Muharya5 March 2015 at 05:41

    Ditunggu om kelanjutannya :D

    Kebetulan lagi pengen bikin template dari Bootstraps, tapi bingung sama stukturnya :)

    ReplyDelete
    Replies
    1. Riyadhul Quran5 March 2015 at 06:52

      lagi bikin template blogger dari bootstrap? Mantap dah bung... lanjutin... :)

      Delete
    2. Achmad Muharya5 March 2015 at 17:33

      Masih rencana om, soalnya bingung sama strukturnya :)

      Delete
  3. Wahab Saputra5 March 2015 at 06:18

    keren...

    ReplyDelete
  4. Hajir ™5 March 2015 at 22:15

    mantep gan, nunggu template berikutnya nih

    ReplyDelete
    Replies
    1. bani fahmi7 March 2015 at 15:46

      InsyaAllah, dech... :) ditunggu aja... tapi ane juga masih belajar nih... juga butuh masukan dari agan...

      Delete
  5. Unknown16 July 2015 at 04:35

    terus dikayak gimanain gan ?
    maklum pemula :d

    ReplyDelete
  6. PeluangBisnisRumahanMudah.blogspot.com28 August 2015 at 20:16

    wah lama gk maen di blog temen, kapan nih update lagi, bahas cara2 bikin template blogspot dong

    ReplyDelete

Jangan lupa Komentarnya...


Subscribe to: Post Comments (Atom)

Berita