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.
- Pertama Masuk Kehalaman Tempate pada blog.
- Kemudian hapus semua kode ada,disarankan dibackup dulu.
- Setelah dihapus kemudian masukan kode dibawah ini.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- Setelah itu ganti kode <title> </title> dengan kode dibawah ini.
<!-- 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 == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
- Kemudian Masukan Css Bootstrap dibawah ini dan diletakan di diatas </head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
- Kemudian copy dan paste kode dibawah </head>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name : Bootstrap Blogger
Author : g-artmedia group
URL : http://www.g-artmedia.com/
Date : February 2015
----------------------------------------------- */
]]></b:skin>
- Anda bisa menambahkan css diatas,seperti biasanya. ]]></b:skin>
- Setelah selesai menambahkan kode diatas Sekarang kita masukan headernya didalam <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 == "BEHIND"'>
<!--
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='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' 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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<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 -->
- Kemudian kita masukan konten/isi postingannya tepat dibawah </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 -->
- Kemudian tambahkan sidebarnya tepat diatas </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 -->
- Sekarang tambahkan element footernya tepat diatas </body>
<!-- Footer -->
<footer id='footer'>
</footer>
<!-- Footer End -->
</div> <!-- Container End -->
- Kemudian masukan jquery dan javascript,letakan atas </body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->Setelah selesai menambahkan semuanya sekarang anda simpan dan lihat hasilnya,kemudian anda perbaiki sesuai desain anda dengan css bootstrap,jika masih belum mengerti bisa meliha video ini.
<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>
No comments
# Terima Kasih Telah Berkunjung Semoga Artikel Yang Kamu Baca Bermanfaat :)