kerangka template responsif


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<meta content='description' name='description'/>
<meta content='keyword' name='keywords'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <link href='https://plus.google.com/+URLG+?rel=publisher' rel='author'/>
<link href='https://www.blogger.com/change-favicon.do' rel='icon' type='image/gif'/>
<meta content='GSV' name='google-site-verification'/>
<meta content='Alexa ID' name='alexaVerifyID'/>
</b:if>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex,follow' name='robots'/>
<meta content='noindex,follow' name='googlebot'/>
</b:if>

<!--:[ START STYLE ]:-->
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[/]]></b:skin>
<style type='text/css'>
/* -----------------------------------------------------
Name:     Jancukers Tulungagung
Author:   Cindy Nailla Azzahra
URL:      http://www.newbanie.blogspot.com
-------------------------------------------------------- */
#navbar-iframe{display:none;height:0;visibility:hidden}

html{-webkit-text-size-adjust:none}

body{background:#f8f8f8}

#outer-wrapper{width:980px;margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(100,100,100,.3);-moz-box-shadow:0 2px 6px rgba(100,100,100,.3);-webkit-box-shadow:0 2px 6px rgba(100,100,100,.3);color:#222;font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;font-size:1em;line-height:1.575em;text-align:left}

#header-wrapper{margin:0 auto}
#header{width:100%;height:120px;clear:both}
#header-inner{margin:20px;padding:20px}

#header h1,#header h3{color:#222;font-family:Lucida sans unicode,Georgia, Times New Roman;font-weight:400;margin:0;padding:0;font-size:35px}
#header h2{color:#888;font-family:Georgia, Times New Roman;font-weight:400;text-decoration:none;margin:0;padding:0;font-size:12px}

#header-navigation{border-top:1px solid #ddd;border-bottom:1px solid #ddd}
#header-navigation ul{padding:0}
#header-navigation li{width:20px;padding:10px;list-style:none;display:inline;text-decoration:none}

#main-wrapper{margin:10px}
#content-wrapper{float:left;width:600px;border-right:1px solid #eee;margin: 0 10px}
.post-body img{padding:5px;border:1px solid #eee;box-shadow:0 2px 4px #999}
.post-body h2{border-bottom:1px solid #ccc;font:Segoe UI, Serif;line-height:1.4em;letter-spacing:.1em;color:#549D50;font-size:1.25em;margin:10px 0 4px;}
.post-body h3{font:Segoe UI, Serif;line-height:1.4em;letter-spacing:.1em;color:#303035;font-size:150%;margin-top:10px;margin-bottom:2px;}
.post-body img{overflow:hidden;border:1px solid #dcd9d9;max-width:100%;padding:5px;box-shadow:0 2px 6px rgba(100,100,100,.3);-moz-box-shadow:0 2px 6px rgba(100,100,100,.3);-webkit-box-shadow:0 2px 6px rgba(100,100,100,.3)}

img{max-width:100%;height:auto}
.video{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.video iframe,.video object,.video embed{position:absolute;top:0;left:0;width:100%;height:100%}

a{color:#00adeb;text-decoration:none}
a:hover{color:#000609}

#sidebar-wrapper{float:right;width:320px;margin:0 10px 0 0}
.sidebar ul{padding:0}
.sidebar li{list-style:none}
.sidebar h2,.sidebar h4{font-size:16px;}
.item-thumbnail{width:72px;height:72px;padding:5px;border:1px solid #eee;box-shadow:0 2px 4px #999}

#footer-wrapper{width:100%;margin:0 auto;border-top:3px double #ccc;padding-top:10px;clear:both}
#footer1{width:33%;float:left;margin:0}
#footer2{width:33%;float:left;margin:0 0 0 5px}
#footer3{width:33%;float:right;margin:0}

.credit{margin-top:20px;border-top:2px solid #ddd}
.credit,.credit a{color:#999}
.credit p{float:left;margin-left:20px}
.credit span{display:block;float:right;margin-right:20px;margin-top:15px;font-size:75%}
.Top{border-bottom:15px solid #000;border-left:15px solid transparent;border-right:15px solid transparent;position:fixed;bottom:0;right:10%;width:0;height:0;z-index:1}

::-webkit-scrollbar{width:15px;background:rgba(0,0,0,.07);}
::-webkit-scrollbar-thumb{background:#790;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;}
@media screen and (max-width:1024px) {
// CSS Untuk reponsive //
}
@media screen and (max-width: 980px) {
body,#outer-wrapper,#header-wrapper,#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{width:95.725%;margin:0 auto}
#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{display:inline-block;width:100%}
}
@media screen and (max-width: 800px){
// CSS Untuk reponsive //
}

@media screen and (max-width: 750px) {
body,#outer-wrapper,#header-wrapper,#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{width:90%;margin:0 auto}
#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{display:inline-block;width:100%}
}
@media screen and (max-width: 770px){
// CSS Untuk reponsive //
}
@media screen and (max-width: 480px){
// CSS Untuk reponsive //
}
@media screen and (max-width: 320px){
// CSS Untuk reponsive //
}
@media screen and (max-width: 240px){
// CSS Untuk reponsive //
}

</style>
<!--:[ END STYLE ]:-->

</head>
<!--:[ END HEADING ]:-->

<!--:[ START BODY ]:-->
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>

<!--:[ Start Outer ]:-->
<div id='outer-wrapper'>

<!--:[ Start Header ]:-->
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Smart Theme (Header)' type='Header'/>
</b:section>
</div>
<!--:[ End Header ]:-->

<!--:[ Start Main Wrapper ]:-->
<div id='main-wrapper'>

<!--:[ Start Header Navigation ]:-->
<div id='header-navigation'>
<b:section class='topmenu' id='topmenu' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Menu' type='LinkList'>
<b:includable id='main'>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
</div>
<!--:[ End Header Navigation ]:-->

<!--:[ Start Content Wrapper ]:-->
<div id='content-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
</div>
<!--:[ End Content Wrapper ]:-->

<!--:[ Start Sidebar Wrapper ]:-->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<div style='clear:both;'/>
<div class='sidebar21' style='float:left;width:42.5%;'>
<b:section class='sidebar' id='sidebar-right-2-1' preferred='yes'/>
</div>
<div class='sidebar22' style='float:right;width:57.5%;'>
<b:section class='sidebar' id='sidebar-right-2-2' preferred='yes'/>
</div>
<div style='clear:both;'/>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
<div style='clear:both;'/>
</div>
<div class='clear' style='height:40px'/>
<!--:[ End Sidebar Wrapper ]:-->

<!--:[ Start Footer Wrapper ]:-->
<div id='footer-wrapper'>
<div id='footer-bottom' style='text-align: center; padding-top:10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer1'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
<div style='clear:both;'/>
<!--:[ End Footer Wrapper ]:-->

<!--:[ Start Credit Links ]:-->
<div class='credit'>
<p>Copyright <a expr:href='data:blog.homepageUrl' title='All Rights Reserved'> <data:blog.title/></a></p>
<span>Designed By: <a href='http://newbanie.blogspot.com' title='Cindy Nailla'>Your Trusted Tutorial</a></span>
<div class='clear'/>
</div>
<!--:[ End Credit Links ]:-->

</div>
<!--:[ End Main Wrapper ]:-->

</div>
<!--:[ End Outer Wrapper ]:-->

<!--:[ START EMBEDDED WIDGET ]:-->
<b:include data='blog' name='google-analytics'/>
<!--:[ END EMBEDDED WIDGET ]:-->
</body>
<!--:[ END BODY ]:-->
</HTML>

Post a Comment for "kerangka template responsif"