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.

35 comments:

UnknownMarch 11, 2015 at 7:51 PM
nyimak :)
Mang NanungMarch 16, 2015 at 9:22 PM
mantap neh tutorial ijin nyimak ya
UnknownMay 29, 2015 at 1:16 PM
Ok sip. Terimakasih
http://kedaiacemaxs.com/pengobatan-herbal-penyakit-sinusitis/
primitive NotesJuly 29, 2015 at 10:49 AM

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
Vegan vigiSeptember 12, 2015 at 12:24 AM
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..
Andi MariadiOctober 18, 2015 at 11:12 PM
Tutorial yang bagus gan. Mampir http://study-newbie.blogspot.com :)
BocahapiNovember 15, 2015 at 7:33 PM
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
AqilastoreDecember 20, 2015 at 11:13 PM
info yang sangat bermanfaat buat saya, kebetulan sedang belajar bootstrap
thx admin...
izin share...
http://www.taksipickup.com
AuthorFebruary 8, 2016 at 2:55 PM
tutorialnya mantab gan

kunjungi blog ane ya http://ademulyawanskw.blogspot.co.id/
UnknownMarch 1, 2016 at 7:54 AM
Thanks gan... domain authority checker
Donald KornMay 12, 2016 at 9:56 PM
Mantap gan. Mampir ke Anas Blogging Tips
Donald KornMay 12, 2016 at 9:56 PM
Mantap gan. Mampir ke Anas Blogging Tips
Jasa Edit KtpJune 28, 2016 at 5:29 AM
keren.. buat yg butuh fake id unutk verifikasi socmed silakan mampir gan http://bos-ektp.blogspot.com
EnvyAugust 30, 2016 at 11:18 AM
Mas kalo ini kenapa?

Error parsing XML, line 1796, column 6: The processing instruction target matching "[xX][mM][lL]" is not allowed
MitaTRAVEL.idMarch 20, 2017 at 12:17 PM
MitaTRAVEL.id : Mantab juragan :D
Inzar SalfikarMay 5, 2017 at 11:29 AM
Nyimak jg. Kalo bisa ada contoh hasilnya bro.btw thanks ilmunya bermanfaat banget
IME NayakiMay 10, 2017 at 12:13 AM
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
PamungkasJuly 17, 2017 at 12:20 PM
silahkan kunjungi web ane gan http://www.zkrip.com/2017/06/cara-membuat-style-subheading-keren.html
inuJuly 21, 2017 at 6:55 PM
mungkin bisa membantu, yang mau themplate dan ebook gratis caksewu.blogspot.com
Rio wendaDecember 3, 2017 at 9:47 PM
mantab gan , kunjugi juga blog ane
Travel Malang JemberApril 12, 2018 at 10:16 AM
Keren tutrialnya min
tambah sukses........
Fariz Al FaiqFebruary 26, 2020 at 8:57 PM
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/)
SekarFebruary 27, 2020 at 8:56 PM
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/)
RobiansyahMarch 2, 2020 at 3:23 PM
saya ROBIANSYAH dari campus STIMIK ATMA LUHUR PANGKAL PINANG. Tutorial ini sangat-sangat membantu saya dalam belajar sebagai pemula. yukk kepo website kita campus kita juga (https://www.atmaluhur.ac.id/). TERIMAHHHHH KASIHHHHHHHHH
indahMarch 4, 2020 at 5:00 PM
mantap...
Tutorial ini sangat bermanfaat bagi saya dan semua orang,membantu saya belajar lebih mudah dan saya lebih mudah memahaminya.
nama saya indah mahasiswa STMIK ATMA LUHUR Pangkalpinang.
jangan lupa mampir ke website kampus kita(https://www.atmaluhur.ac.id/)
Titania YulandaMarch 4, 2020 at 5:18 PM
Terimakasih artikelnya kak, sangat bermanfaat, artikelnya juga mudah dipahami. Perkenalkan nama saya Titania Yulanda mahasiswa STMIK ATMA LUHUR Pangkalpinang. Ini website kampus saya https://www.atmaluhur.ac.id
Dicky SanjayaMarch 4, 2020 at 6:15 PM
Mantap sekali bang, membantu banget siii untuk pemula seperti saya ini, tetap semangat bang dalam buat blog, nama saya : Dicky Sanjaya dan ini website kampus saya https://www.atmaluhur.ac.id/
Muklas Angga marendraMarch 5, 2020 at 9:13 PM
This comment has been removed by the author.
Muklas Angga marendraMarch 5, 2020 at 9:17 PM
Terima kasih kak, sangat membatu dan bermanfaat. Semangat terus kak
Nama saya muklas Angga marendra dari kampus Stmik Atma Luhur Pangkalpinang. Jangan lupa kunjungi website kampus saya kak https://www.atmaluhur.ac.id
UnknownMarch 5, 2020 at 9:35 PM
Terima kasih kak,Tutorial jelas dan sangat mudah di mengerti dan sangat bermanfaat dalam mengembangkan sebuah website.Nama saya Ira Meidianti Nim 1822500067 dari kampus Stmik Atma Luhur Pangkalpinang. Jangan lupa kunjungi website kampus saya kak https://www.atmaluhur.ac.id
UnknownMarch 5, 2020 at 10:26 PM
Wowww Amazinggg tutorial cara membuat blogger sangat membantu saya Elisa ramadani dari kampus STIMIK ATMA LUHUR PANGKAL PINANG sebagai pemula. Jangan lupa ya kunjugi website kampus kita https://www.atmaluhur.ac.id
Nusa Trans TravelAugust 27, 2022 at 4:05 PM
Hallo sobat Trevel Nusa Trans solusi perjalanan Aman, nyaman, dan terpercaya
trevel bondowoso malang

Sastro Design

Cara Membuat Template Blogger Dengan Bootstrap

35 comments:

Sastro Link

Subscribe

Tutorials