=============================
<link href='//fonts.googleapis.com/css?family=.|Open+Sans+Condensed:light,normal,bold|Open+Sans:light,normal,bold|Open+Sans:light,normal,bold|Open+Sans:light,normal,bold|Open+Sans:light,normal,bold' rel='stylesheet' type='text/css'/>
<!-- Stylesheets for Responsive 5.0 -->
<link href='//cdn.shopify.com/s/files/1/1005/3022/t/20/assets/styles.scss.css' media='all' rel='stylesheet' type='text/css'/>
<link href='//cdn.shopify.com/s/files/1/1005/3022/t/20/assets/custom.css' media='all' rel='stylesheet' type='text/css'/>
<!-- jQuery and jQuery fallback -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<script src='//cdn.shopify.com/s/files/1/1005/3022/t/20/assets/jquery.min.js'/>
<script src='//cdn.shopify.com/s/files/1/1005/3022/t/20/assets/app.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
window.jQuery || document.write("
//]]>
</script>
<script src='https://upsells.boldapps.net/v2_ui/js/index.js' type='text/javascript'/>
Untuk menambahkan widget
=============================
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' locked='false' showaddelement='yes' visible='true'>
<b:widget id='HTML5' locked='false' title='' type='HTML' version='1'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
=========================================
Untuk menambah pembatas :
========================================
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='pembatas' style='border: 2px solid #F2F2F2; width:100%;'/>
</b:if>
==========================================
Menambah widget main wrapper :
=========================================
<div id='main-wrapper'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.searchLabel != "Articles"'>
<b:section class='main' id='produk-populer' showaddelement='yes'/>
</b:if>
</b:if>
</b:if>
==========================================
Widget search form :
=========================================
<form action='/search' class='search-wrapper cf'>
<input method='get' name='q' placeholder='Ketikan Nama Produk atau Kode Produk / SKU disini... ' required='' type='text'/>
<button type='submit'>Cari</button>
</form>
====================================
Menaruh div dan style langsung dibawah body:
=====================================
<div id='header-center'>
<style>
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/* Form wrapper styling */
.search-wrapper {
width: 520px;
margin:10px 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
/* Form text input */
.search-wrapper input {
width: 422px;
height: 20px;
padding: 10px;
float: left;
font: bold 14px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}
.search-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.search-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.search-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.search-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 1px;
padding: 0;
cursor: pointer;
height: 40px;
width: 78px;
font: bold 14px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #3C91E1;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
.search-wrapper button:hover{
background: #3C91E1 ;
}
.search-wrapper button:active,
.search-wrapper button:focus{
background: #3C91E1 ;
outline: 0;
}
.search-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #3C91E1 transparent;
top: 12px;
left: -6px;
}
.search-wrapper button:hover:before{
border-right-color: #3C91E1 ;
}
.search-wrapper button:focus:before,
.search-wrapper button:active:before{
border-right-color: #3C91E1 ;
}
.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
</style>
</div>
=================================================
Menaruh div sekaligus dengan widget dan section nya:
===================================================
<div id='header-wrap'>
<div class='header'>
<div id='header-left'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML2' locked='false' mobile='no' title='' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'><li style="background-color: rgba(255, 255, 255, 0.952941); box-sizing: inherit; color: #333333; display: table-cell; font-family: Lato, sans-serif; font-size: 13px; position: relative; vertical-align: top; width: 225px;"><div class="" style="box-sizing: inherit;">
<div class="logo-section" style="box-sizing: inherit; height: 75px; margin-bottom: 5px; margin-top: 5px; padding-left: 0px; width: 245px;">
<a class="inline-block" href="http://murahmareh786.blogspot.co.id/" id="logo-header" style="background-color: transparent; box-sizing: inherit; color: #0095da; cursor: pointer; display: inline-block !important; outline: 0px; position: relative; text-decoration: none; z-index: 11;"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOD_qq3SwlVTN54-RzDh6pnJS8ymgFu2BDOsU_z0XgAgAS34LNzLHTaplnnGQzquqWw5Z_bju4rhlvbtjzlHQHHoQvieAWBzkMCa67GgbBjWwLSS3N2v6i2Sf7Pmo8GBLUKaI5Y_QkeJE/s600/logo-MM-trans.png" style="border: 0px; box-sizing: inherit; display: inline-block; padding-top: 3px; padding-left: 0px;height: auto; max-width: 100%; vertical-align: middle;" /></a></div></div></li></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
======================================================
Main wrapper dari website murah mareh :
=======================================================
<div id='main-wrapper'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.searchLabel != "Articles"'>
<b:section class='main' id='produk-populer' showaddelement='yes'/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<div class='ind' style='overflow:hidden; width:100%;padding-top:20px;'>
</div>
</b:if>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>true</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
<b:widget-setting name='showAuthor'>true</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>true</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='top'>
<!-- posts -->
=====================================================================
contoh penerapan div pada navbar murah mareh :
====================================================================
<!-- Start Navbar -->
<div id='navbar-wrap'>
<div class='navbar'>
<div class='jam-buka'>
<!-- Navbar Menu -->
<li>SENIN - JUMAT BUKA JAM: 09:00 - 20:00, SABTU : 09:00 - 15.00, MINGGU: OFFLINE</li></div>
<li><a href='#' title='Free Ongkir'/></li>
<div class='contact-wrap'>
<!-- Phone BBM Email -->
<div class='phone'>SMS/WA: 0857-9707-5546 (Fast Respon)</div>
<div class='scart'><a href='../../p/cart.html' title='Shopping Cart'><span class='simpleCart_quantity'>0</span> item(s)</a></div>
</div>
</div>
</div>
<!-- End Navbar -->
