[Bagian 1] Bikin Template Blogger Sendiri Dengan Bootstrap

Discussion in 'HTML & Website Design' started by Achmad Muharya, Mar 18, 2015.

  1. Achmad Muharya

    Achmad Muharya Member

    Joined:
    Apr 29, 2014
    Messages:
    424
    Likes Received:
    23
    Trophy Points:
    18
    [​IMG]​

    Selamat siang menjelang sore, Aden dan Ajeng para penghuni forum Bersosial ini,

    Sekarang saya mau membagikan tutorial membuat template blog (Blogger) sendiri dengan framework Bootstrap. Kalo ada yang belum tau sama framework ini, silahkan cari dulu di gugle atau bagi yang males, saya jelasin aja deh disini, tapi cuman dikit doang ya *berkeringat*, soalnya saya juga lagi belajar main sama Bootstrap ini jadi maklumilah jika ada kesalahan-kesalahan yang saya buat disini hhihihiiihi :D.

    Gimana sekarang udah paham kan sama yang namanya Bootstrap ? *:eek: Apa masih belum paham ?!*. Ya dipaham-pahamin ajalah saya aja masih belajar, mungkin ada salah satu member di Bersosial ini yang lebih paham dari saya jadi jangan cuman ngeliatin thread ini aja ya.

    Sebenarnya saya pengen bikin thread sekaligus dari tahap awal sampai akhir, namun saya rasa itu kurang greget aja kalau sekalian dibikin semuanya dalam satu thread, lagipula saya sudah bilang disini beberapa kali kan "Saya masih belajar". Jadi kalau saya bikin sekaligus semua tahap-tahapnya takutnya ada yang salah pengertian gitu, ntar malah dosa yang saya dapet karena ngasih info yang salah-salah.

    Yoosh !, di thread bagian pertama dalam edisi membuat template sendiri dengan bootstrap, dimulai dengan membuat kerangkanya dulu alias bikin pondasinya dulu.

    HTML:
    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
    <meta expr:content='data:blog.metaDescription' name='description'/>

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

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

</head>

<body>
<!-- Header -->

<div class='bs-example'> <!-- Blog Navigation Start -->
    <nav class='navbar navbar-default'>
  <div class='container-fluid'>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class='navbar-header'>
      <button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
        <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'/>
        <span class='icon-bar'/>
        <span class='icon-bar'/>
      </button>
      <a class='navbar-brand' href='#'>
        <img alt='Brand' src='Logo kamu / atau bisa diganti dengan tulisan disini'/>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
      <ul class='nav navbar-nav'>
        <li class='active'><a href='#'>Link <span class='sr-only'>(current)</span></a></li>
        <li><a href='#'>Link</a></li>
        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
          <ul class='dropdown-menu' role='menu'>
            <li><a href='#'>Action</a></li>
            <li><a href='#'>Another action</a></li>
            <li><a href='#'>Something else here</a></li>
            <li class='divider'/>
            <li><a href='#'>Separated link</a></li>
            <li class='divider'/>
            <li><a href='#'>One more separated link</a></li>
          </ul>
        </li>
        <li><a href='/?m=1'>Mobile View</a></li>
      </ul>
      <form class='navbar-form navbar-left' expr:action='data:blog.homepageUrl + &quot;search&quot;' role='search'>
        <div class='form-group'>
              <input class='form-control' name='q' placeholder='Search' type='text'/>
        </div>
        <button class='btn btn-default' type='submit'>Submit</button>
      </form>
      <ul class='nav navbar-nav navbar-right'>
        <li><a href='#'>Link</a></li>
        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
          <ul class='dropdown-menu' role='menu'>
            <li><a href='#'>Action</a></li>
            <li><a href='#'>Another action</a></li>
            <li><a href='#'>Something else here</a></li>
            <li class='divider'/>
            <li><a href='#'>Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div> <!-- Blog Navigation End -->

<div class='container outer-wrapper'> <!-- Blog Outer Wrapper Start -->

<div class='blog-header'> <!-- Blog Header Start -->
    <div class='container'>
  <b:section class='header' id='header1' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
  </b:section>
  </div>
</div>

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

<aside class='col-xs-4 blog-sidebar'> <!-- Blog Sidebar Wrapper Start -->
  <b:section class='sidebar' id='sidebar' preferred='yes'>
  <b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'/>
  </b:section>
      </aside> <!-- Blog Sidebar Wrapper End -->
  </div> <!-- Blog Row End -->

      <!-- spacer for skins that want sidebar and main to be the same height-->
  <div class='clear'/>

  </div> <!-- Blog Content Wrapper End -->

<footer class='blog-footer'> <!-- Blog Footer Start -->
      <p>Blog template built for <a href='http://getbootstrap.com'>Bootstrap</a> by <a href='https://twitter.com/AchmadMuharya'>@AchmadMuharya</a>.</p>
      <p>
        <a href='#'>Back to top</a>
      </p>
    </footer> <!-- Blog Footer End -->

</body> <!-- End Body -->

</HTML>
    Mungkin ada yang binung dengan kode "col-...". okelah, disini saya akan jelasin sedikit apa yang saya dapat di halaman resminya bootstrap:
    • col-xs-... : Untuk "Ponsel yang ukurannya (<768px)"
    • col-sm-... : Untuk "Tablet yang ukurannya (=768px)"
    • col-md-... : Untuk "Desktop yang ukurannya (=992px)"
    • col-lg-... : Untuk "Desktop yang ukurannya (=1200px)"
    Dan sesudah kode "col-..." itu pasti kamu akan melihat sebuah angka bukan ?. Nah angka itu sebenarnya yang menentukan lebar dari kolom yang nanti akan kamu buat. Ada beberapa angka yang bisa kamu gunakan, mulai dari angka 1 sampai dengan angka 12. Silahkan kamu atur lagi sesuai selera kamu.

    Dan hasilnya dari kerangka diatas nantinya akan jadi tempate yang memiliki dua kolom, kalau ada yang minta nambahin kolomnya silahkan langsung aja ke W3school atau ke Get Bootstrap, sebernanya sih dua situs ini sama aja ngejelasainnya tapi ya silahkan dipilih ajalah mana yang lebih mudah. Dan jangan lupa atur sendiri angkanya seperti yang sudah saya katakan diatas tadi.

    Gak ngeh (Ngerti) dengan penjelasan saya ? *kesepian*........ yasudah lah kalo masih gak ngeh. Diatas tadi saya udah ngasih tautan ke halaman resmi silahkan di klik lihat penjelasannya yang lebih detil disana.

    Kalau ada yang mau lebar templatenya mengikuti ukuran browser alias full-width, kode yang kaya gini:

    HTML:
    <div class='container outer-wrapper'> <!-- Blog Outer Wrapper Start -->
    Class container-nya bisa ditambahkan "-fluid". Yang nantinya jadi seperti ini:

    HTML:
    <div class='container-fluid outer-wrapper'> <!-- Blog Outer Wrapper Start -->
    Dan salah satu yang membuat saya jatuh cinta *kagum* plus kesel *stres* sama framework ini adalah.....sistem gridnya yang super sekali *bagus*. Jadi setiap grid itu punya lebar yang berbeda-beda, misalnya col-sm-4 (dari 1-12) punya lebar kurang lebih 290px (kalo gak salah). Jadi gak perlu lagi nentuin lebar elemen satu persatu alias manual. Semua serba dipermudah di Bootstrap ini.

    Kalaupun merasa kurang enak dengan ukuran yang sudah ditetapkan oleh Bootstrap, aden dan ajeng bisa kok masang kode css sendiri untuk menentukan ukuran yang sesuai, tapi masalahnya adalah.....nambah kerjaan lagi kalo gitu. Tapi kalo situ pinter mainin CSS dan keluarganya saya rasa ini bukan masalah besar hihihihi :D

    Oiya saya hampir lupa, jika aden dan ajeng lihat lihat di kerangka template diatas, bagian:
    HTML:
    <div class='col-md-8 blog-main'> <!-- Blog Main Wrapper Start -->
Organ dalam blog.
<div><!-- Blog Main Wrapper End -->
    Dan:
    HTML:
    <aside class='col-xs-4 blog-sidebar'> <!-- Blog Sidebar Wrapper Start -->
Organ dalam sidebar.
<div> <!-- Blog Sidebar Wrapper End -->
    Disitu kan biasanya terdapat banyak bingitzz kode macam:

    HTML:
    <b:includable id='main' var='top'>
<b:includable id='backlinkDeleteIcon' var='backlink'>
....
........
......... dan lain-lain disini
    Nah untuk mengisi organ-organ dalam yang penting di dalam template ini aden dan ajeng gak perlu bingung-bingung *pusing*, caranya tinggal:

    Gimana setelah melihat thread yang panjang ini, apakah aden dan ajeng sudah mengerti ? masih belum paham juga ?!!............ Sama dong kalau begitu :D. Tapi gak apa-apa kok kalau masih belum paham, dipelajari sedikit-sedikit ntar lama-lama kan bisa juga hihihi *jail*

    Baiklah, untuk sementara segitu dulu ya yang saya bagikan disini. Dan untuk yang penasaran sama hasilnya sabar ya, ditunggu aja edisi membuat template lainnya di Bersosial ini *keren1*.

    Dan kalau ada salah-salah tolong di koreksi alias CeMI-IuW (CMIIW) ya *berkeringat*, siapa tau saya ada salah dalam menjelaskan disini dan biar kita bisa sama-sama belajar disini. *Fly Away *tendang**

    Thread lainnya tentang Bootstrap, masukan dari @KangAndre, siapa tau bermanfaat:

    Website Langsung Ngacirr dengan Bootstrap Framework

    [Bagian 1] Bikin Template Blogger Sendiri Dengan Bootstrap <- Kamu lagi ada disini
    [Bagian 2] Memasang CDN Bootstrap di Template Blogger
    [Bagian 3] Mendesain Template Bootstrap
     
    Last edited: Mar 22, 2015
    Achmad Muharya, Mar 18, 2015
    #1
    Heri Hartono likes this.
  2. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,239
    Likes Received:
    319
    Trophy Points:
    83
    Google+:
    Saya kira pakai aplikasi tertentu. Lumayan paham deh :D
     
    Ardilas, Mar 18, 2015
    #2
  3. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,280
    Likes Received:
    2,723
    Trophy Points:
    413
    KangAndre, Mar 18, 2015
    #3
  4. Hari Agustomo Nugroho

    Hari Agustomo Nugroho Active Member

    Joined:
    Mar 13, 2015
    Messages:
    1,195
    Likes Received:
    78
    Trophy Points:
    48
    Google+:
    Waduh*pusing* itu sudah tingkat dewa,,,
    saya masih pemula*huh*
     
    Hari Agustomo Nugroho, Mar 18, 2015
    #4
  5. Achmad Muharya

    Achmad Muharya Member

    Joined:
    Apr 29, 2014
    Messages:
    424
    Likes Received:
    23
    Trophy Points:
    18
    Mungkin diluar dari blogspot yang harus pakai aplikasi om :D
     
    Achmad Muharya, Mar 19, 2015
    #5
  6. Gesper

    Gesper Member

    Joined:
    Mar 1, 2015
    Messages:
    242
    Likes Received:
    9
    Trophy Points:
    18
    Google+:
    Ini harus malam baca nya, biar konsen
     
    Gesper, Mar 19, 2015
    #6
  7. Achmad Muharya

    Achmad Muharya Member

    Joined:
    Apr 29, 2014
    Messages:
    424
    Likes Received:
    23
    Trophy Points:
    18
    Achmad Muharya, Mar 19, 2015
    #7
  8. Achmad Muharya

    Achmad Muharya Member

    Joined:
    Apr 29, 2014
    Messages:
    424
    Likes Received:
    23
    Trophy Points:
    18
    Gak haru jadi dewa kok om kalo mau bisa bikin template sediri *jail*

    Ntar malah loh ngantuk baca malam-malam *berkeringat*
     
    Achmad Muharya, Mar 19, 2015
    #8
  9. lembing

    lembing Active Member

    Joined:
    Aug 21, 2014
    Messages:
    1,179
    Likes Received:
    91
    Trophy Points:
    48
    Terima jadinya gan
     
    lembing, Mar 19, 2015
    #9
  10. Achmad Muharya

    Achmad Muharya Member

    Joined:
    Apr 29, 2014
    Messages:
    424
    Likes Received:
    23
    Trophy Points:
    18
    Silahkan :D, tapi musti nunggu beberapa bagian lagi yang sekarang masih belum saya tulis :D
     
    Achmad Muharya, Mar 19, 2015
    #10
  11. Hari Agustomo Nugroho

    Hari Agustomo Nugroho Active Member

    Joined:
    Mar 13, 2015
    Messages:
    1,195
    Likes Received:
    78
    Trophy Points:
    48
    Google+:
    Betul juga,,,
    Kalau niat dan mau belajar mungkin kita bisa,,,
    tapi kalau gak konsen susah juga, soalnya masih awam dengan kode semacam itu,,,
     
    Hari Agustomo Nugroho, Mar 19, 2015
    #11
  12. Achmad Muharya

    Achmad Muharya Member

    Joined:
    Apr 29, 2014
    Messages:
    424
    Likes Received:
    23
    Trophy Points:
    18
    Awalnya saya juga gak konsen mau bikin yang kaya ginian, tapi ya dipaksain ajalah :D
     
    Achmad Muharya, Mar 19, 2015
    #12
    Heri Hartono likes this.
  13. Hari Agustomo Nugroho

    Hari Agustomo Nugroho Active Member

    Joined:
    Mar 13, 2015
    Messages:
    1,195
    Likes Received:
    78
    Trophy Points:
    48
    Google+:
    Memang harus dipaksa kalau pingin bisa:)
     
    Hari Agustomo Nugroho, Mar 19, 2015
    #13
  14. nawi667

    nawi667 Member

    Joined:
    Jul 5, 2013
    Messages:
    113
    Likes Received:
    6
    Trophy Points:
    18
    Google+:
    Yah ... akan aku pelajari lagi secara lebih detil, enakan langsung praktek lah ...... Thanks atas pencerahannya
     
    nawi667, Apr 19, 2015
    #14
  15. rajautan

    rajautan Active Member

    Joined:
    Mar 21, 2015
    Messages:
    1,353
    Likes Received:
    57
    Trophy Points:
    48
    Izin coba gan,,, ,,
     
    rajautan, Aug 3, 2015
    #15
  16. ys. herbi

    ys. herbi Well-Known Member

    Joined:
    Mar 6, 2016
    Messages:
    1,251
    Likes Received:
    190
    Trophy Points:
    63
    Google+:
    Bookmark den... hehe
     
    ys. herbi, Jan 23, 2018
    #16
  17. Rswd

    Rswd Member

    Joined:
    Dec 11, 2017
    Messages:
    115
    Likes Received:
    4
    Trophy Points:
    18
    Awam banget sama yg beginian, lumayan baca ini pala jadi cenut cenut hahaha
     
    Rswd, Feb 4, 2018
    #17
Loading...
Similar Threads - [Bagian Bikin Template
  1. Achmad Muharya

    [Bagian 3.1] Mengganti Tema Bootstrap

    Achmad Muharya, Mar 22, 2015, in forum: HTML & Website Design
    Replies:
    10
    Views:
    9,319
    dewaz
    Jan 23, 2016
  2. Achmad Muharya

    [Bagian 3] Mendesain Template Bootstrap

    Achmad Muharya, Mar 21, 2015, in forum: HTML & Website Design
    Replies:
    12
    Views:
    4,272
    Kang Jaka
    Jul 13, 2017
  3. Achmad Muharya

    [Bagian 2] Memasang CDN Bootstrap di Template Blogger

    Achmad Muharya, Mar 19, 2015, in forum: HTML & Website Design
    Replies:
    17
    Views:
    5,839
    nawi667
    Apr 19, 2015
  4. Agni Astuti

    Game Berbasis HTML yang Bikin Ketagihan Sampai Main 3 Jam Non-Stop

    Agni Astuti, Jun 19, 2023, in forum: HTML & Website Design
    Replies:
    2
    Views:
    1,540
    KangAndre
    Jun 22, 2023
  5. Adang Hudayana

    [ASK] Maaf Mau Nanya , Kalo Bikin Draf Isi Otomatis Di Postingan Wordpress Gimana Ya

    Adang Hudayana, Mar 22, 2018, in forum: HTML & Website Design
    Replies:
    13
    Views:
    5,746
    Blackboo
    Dec 20, 2018

Share This Page