Cara Membuat Template Blogger Dengan Bootstrap

Anda pasti sudah tidak asing lagi jika mendengar Bootstrap, Bootstrap adalah sebuah css framework yang dikembangkan oleh Twitter. Dengan menggunakan framework ini, segala pekerjaan kita dalam desain web menjadi lebih cepta dan mudah. Selain itu, mangatur web agar responsive adalah hal yang menyusahkan, namun anda tidak perlu khawatir karena hal tesebut ditangani oleh bootstrap dengan baik. Lalu apakah bootstrap bisa diterapkan pada semua template termasuk template blogger? Tentu bisa. Berikut akan saya jelaskan langkah-langkah membatnya.

Cara Membuat Template Blogger Menggunakan Bootstrap

Silahkan masuk ke dashboard blogger kemudian pilih Template > Edit HTML. Hapus semua kode yang ada, jika perlu backup terlebih dahulu.
Siapkan sebuah file xml sederhana seperti ini, copy dan letakkan di area template.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
</body>
</html>

Kemudian kita tambahkan title untuk, menampilkan judul blog kita, disini saya menggunakan SEO Title Tag. Copy kode dibawah ini dan ganti kode <title></title> dengan kode dibawah.


<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

Selanjutnya, kita akan mengimpor css dari bootstrap, copy kode dibwah ini dan letakkan tepat diatas kode </head> bootstrap yang digunakan adalah versi 3.3.2

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>

Untuk tamppilannya kita akan menggunakan css, agar css bekerja dengan baik maka copy kode dibawah ini dan letakkan tepat diatas kode </head> untuk deskripsinya bisa anda ganti sendiri.

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : Bootstrap Blogger 
Author : Muhammad Dimas Saputro (Dimas Aresuki)
URL : http://www.dimasaresuki.com/
Date : February 2015
----------------------------------------------- */

]]></b:skin>

Anda bisa menambahkan css di atas kode ]]></b:skin>

Tambahkan juga Header blog, copy kode dibawah ini dan letakkan tepat dibawah kode <body>

<div class="container"><!-- Container Start -->
<!-- Header Start -->
<div class="jumbotron">
<header>
 <b:section class='header section' id='header' showaddelement='no'>
  <b:widget id='Header1' locked='false' title='Sastro Design (Header)' type='Header'>
    <b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
    <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
    <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
  </b:widget>
</b:section>
</header>
</div>
<!-- Header End -->

Header telah ditambahkan, untuk menampilkan posting maka copy kode dibawah ini dan letakkan tepat dibewah kode </header>

<!-- Post Content Start -->
<div class="col-md-8">
<div id='main-wrapper' itemprop='mainContentOfPage'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
</div>
<!-- Post Content End -->

Kita juga akan menampilkan widget, copy kode dibawah ini dan letekkan tepat diatas kode </body>

<!-- Sidebar -->
<div class="col-md-4">
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</aside>
</div>
<!-- Sidebar End -->

Tambahkan sebuah footer, yang bisa anda isi dengan widget atau link kredit, copy kode dibawah ini dan letakkan tepat diatas kode </body>

<!-- Footer -->
<footer id='footer'>

</footer>
<!-- Footer End -->
</div> <!-- Container End -->

Setelah tadi diatas kita mengimpor css bootstrap kita juga perlu mengimpor jQuery dan Javascript dari Bootstrap. Copy kode dibawah ini dan letakkan tepat diatas kode </body>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Setelah selesai, silahkan simpan dan lihat hasilnya, hasilnya pasti masih jelek karena kita belum menambahkan Css. Untuk css silahkan anda atur sesuai dengan design dan keinginan anda, selain itu anda juga bisa menmbahkan beberapa widget.

Jika masih bingung silahkan simak video dibawah ini.

28 comments:

  1. mantap neh tutorial ijin nyimak ya

    ReplyDelete
  2. Ok sip. Terimakasih
    http://kedaiacemaxs.com/pengobatan-herbal-penyakit-sinusitis/

    ReplyDelete

  3. Peluang Bisnis Dahsyat Yusuf Mansur. "Orang islam harus KAYA"
    dan "Beli Kembali Aset Indonesia" dengan INDONESIA BERJAMAAH
    Segera Amankan Posisi Anda, Segera JOIN bersama
    Komunitas VSI , bisnis terbaru Ustadz Yusuf Mansur
    Dengan Produk V-pay ( Virtual Payment ) Anda akan
    dimudahkan dalam hal urusan pembayaran listrik,
    telpon, pulsa, PDAM, TV Berbayar, Internet, Asuransi,
    Kartu Kredit dan lain-lain. Transaksi dapat dilakukan
    melalui Website, SMS, Android, BlackBerry, iPhone dan YM.
    jadikanlah pengeluaran anda(mw g' mw anda pasti beli pulsa makanya di namakan pengeluaran OK) menjadi penghasilan dan investasi masa depan anda..
    Penasaran Dengan gmana cara menjadikan pengeluaran menjadi penghasilan dan investasi masa depan anda gabung di
    Bisnis Vpay Kunjungi Website: http://suksespaytren.com/wan-vsi

    ReplyDelete
  4. mas ini kan saya sudah download file bootsrap yang landing page, setelah saya ekstrak ada tiga folder, untuk memasukan foleder tersebut dipecah dulu dengan notepad++ , lalu gmna lagi mas? klo yang diatas kan masih berbentuk link mas ya..

    ReplyDelete
  5. Tutorial yang bagus gan. Mampir http://study-newbie.blogspot.com :)

    ReplyDelete
  6. Nambahin aja list untuk belajar Cara Membuat Website atau Membuat Template Bootstrap silahkan kunjungi situs kami di www.onphpid.com
    dengan konten
    Cara Membuat Theme Wordpress dengan Bootstrap
    Cara Membuat Website dengan Wordpress
    Cara Menggunakan Bootstrap pada Wordpress

    dan masih banyak lagi Tutorial PHP dan tutorial wordpress lainnya.

    trimakasih dan semoga bermanfaat

    ReplyDelete
  7. info yang sangat bermanfaat buat saya, kebetulan sedang belajar bootstrap
    thx admin...
    izin share...
    http://www.taksipickup.com

    ReplyDelete
  8. tutorialnya mantab gan

    kunjungi blog ane ya http://ademulyawanskw.blogspot.co.id/

    ReplyDelete
  9. keren.. buat yg butuh fake id unutk verifikasi socmed silakan mampir gan http://bos-ektp.blogspot.com

    ReplyDelete
  10. Mas kalo ini kenapa?

    Error parsing XML, line 1796, column 6: The processing instruction target matching "[xX][mM][lL]" is not allowed

    ReplyDelete
  11. Nyimak jg. Kalo bisa ada contoh hasilnya bro.btw thanks ilmunya bermanfaat banget

    ReplyDelete
  12. BUAT pemula seperti saya kayanya sayang banget kalau belajar design web / blog tapi gak belajar SEO bagi yang butuh ref belajar SEO klik BELAJAR SEO YANG GAMPANG DI PAHAMI

    ReplyDelete
  13. silahkan kunjungi web ane gan http://www.zkrip.com/2017/06/cara-membuat-style-subheading-keren.html

    ReplyDelete
  14. mungkin bisa membantu, yang mau themplate dan ebook gratis caksewu.blogspot.com

    ReplyDelete
  15. mantab gan , kunjugi juga blog ane

    ReplyDelete
  16. Wahh gan keren banget tutorial Cara Membuat Template Blogger Dengan Bootstrap, sangat membantu dalam mempelajari tentang bootstrap, perkenalkan nama saya Fariz Al Faiq, kampus saya STMIK ATMA LUHUR (https://www.atmaluhur.ac.id/)

    ReplyDelete
  17. Wow,amazing banget tutorialnya kak,ini sangat membantu saya yang baru memahami untuk belajar membuat template blogger dengan Bootstrap.Terima kasih atas ilmunya kak. Semoga Bermanfaat Dan Sukses Selalu,Dan perkenalkan nama saya SEKAR WIDYA LESTARI, kampus saya STMIK ATMA LUHUR jangan lupa kunjungi website kampus kita kak. (https://www.atmaluhur.ac.id/)

    ReplyDelete