Cara Membuat Template Blog Responsive dan Ringan 2

Gambar 319. Meta SEO pada template memiliki peranan penting pada sebuah situs, salah satunya adalah SEO

Memanggil fungsi yang telah dideklarasikan

Pada materi sebelumnya Cara Membuat Template Blog Responsive dan Ringan kita sudah membuat struktur dasar sebuah template blog.  Oleh karena itu pada artikel ini kita akan menambahkan fungsi yang telah dideklarasikan pada tag <head> sebelumnya. Akan tetapi sebelum melangkah pada Cara Membuat Template Blog Responsive dan Ringan 2 kita juga akan menambahkan deklarasi untuk tag meta SEO pada template yang kita buat. Dimana meta tag ini memiliki peranan penting pada sebuah situs, salah satunya adalah SEO. Oleh karena itu didalam materi Cara Membuat Template Blog Responsive dan Ringan 2 ini kita akan terlebih dahulu menambahkan meta tag SEO. Dan untuk itu silahkan salin dan tempel tag meta berikut dibawah tag <head> pembuka.

<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 cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

<!-- 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/></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>

Sekarang tambahkan b:section yang dikemas dalam tag div dengan id=wrapper dan tag head dengan id=header-wrapper seperti berikut di dalam tag <body>:

Cara Membuat Blog Gratis

<div id='wrapper'>
 <header id='header-wrapper'>
  <b:section class='header' id='header' maxwidgets='1'>
	<b:widget id='Header1' locked='true' title='Cara Membuat Template Blog Responsive Fast Loading (Header)' type='Header'></b:widget>
  </b:section>
 </header>
</div>

Setelah kita tambahkan b:section pada tag head, untuk melengkapi struktur HTML tambahkan juga dibawahnya b:section yang berfungsi untuk tubuh konten dan footer. Salin dan tempel script kode dibawah ini dibawah tag </head> penutup seperti berikut:

<div id='wrapper'>
  <header id='header-wrapper'>
		<b:section class='header' id='header' maxwidgets='1'>
			<b:widget id='Header1' locked='true' title='Cara Membuat Template Blog Responsive Fast Loading (Header)' type='Header'></b:widget>
		</b:section>
  </header>
	<div class='clearfix'/>
	 <aside id='content-wrapper'>
		<b:section class='main' id='main'>
		 <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
		</b:section>
	 </aside>
	 <aside id='sidebar-wrapper'>
		<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
	 </aside>
	<div class='clearfix'/>

	<footer id='footer-wrapper'>
			<b:section class='footer' id='footer' showaddelement='yes'></b:section>
	</footer>
</div>

Sebelumnya kita menambahkan deklarasi pada tag <head> dan </head> seperti dibawah:

body {background-color: #fff;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}

Saya mendapati bahwa itu kurang tepat dan akan membuat desain kurang baik, oleh karena itu silahkan hapus dan kita akan menggantinya dengan deklarasi berikut ini:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: &#8221;;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #fff;background-position: center center;}

a:link {font-family: &#39;PT Serif Caption&#39;, serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}

#wrapper {background: #fff; width: 90%; padding: 20px; margin: 20px auto;}
#header-wrapper {background:#fff; width: 100%; height:auto; margin: 0 auto; border:1px solid #eaeaea;}
.header {text-align:center}
#content-wrapper {background: transparent; width:65%; float:left; border:1px solid #eaeaea; margin:10px 0;}
#sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #eaeaea; margin:10px 0;}
#footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}
 .title {font-size:36px;}

 #sidebar-wrapper #sidebar .ul,li {color:transparent;margin-left:0;padding-left:0;}
 #sidebar #PopularPosts1 ul {margin-left:0;padding-left:0;}
 #sidebar-wrapper #sidebar .item-content{margin-left:0;padding-left:0;}
 #sidebar-wrapper #sidebar .item-thumbnail{width:25%;float:left;}
 #sidebar-wrapper #sidebar .item-title{width:70%;float:right;}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: &quot; &quot;; clear: both; height: 0;}

#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}

.status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative}
.status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative}
.status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1}
.status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4}
.status-msg-hidden{visibility:hidden;padding:.3em 0}
.status-msg-wrap a{padding-left:.4em;text-decoration:underline}

Supaya template blog yang kita buat responsive dan dapat menyesuaikan ukuran layar pengguna(phonsel, android, dan tabled), maka tambahkan dibawahnya deklarasi untuk penyesuaian layar pengguna berikut:

@media screen and (max-width:1024px){
 #content-wrapper {background: transparent; width:65%; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #content-wrapper img{width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #content-wrapper .icon-action{width:32px; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #eaeaea; margin:10px 0;}
 #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}
}
@media screen and (max-width:880px){
 #content-wrapper {background: transparent; width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #content-wrapper img{width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #content-wrapper .icon-action{width:32px; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #sidebar-wrapper {background: transparent; width:100%; float:right; border:1px solid #eaeaea; margin:10px 0;}
 #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}
}
@media screen and (max-width:480px){
 #content-wrapper {background: transparent; width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #content-wrapper img{width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #content-wrapper .icon-action{width:32px; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #sidebar-wrapper {background: transparent; width:100%; float:right; border:1px solid #eaeaea; margin:10px 0;}
 #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}
}
@media screen and (max-width:320px){
 #content-wrapper {background: transparent; width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #content-wrapper img{width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #content-wrapper .icon-action{width:32px; float:left; border:1px solid #eaeaea; margin:10px 0;}
 #sidebar-wrapper {background: transparent; width:100%; float:right; border:1px solid #eaeaea; margin:10px 0;}
 #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}
}

Sebuah blog haruslah memiliki menu navigasi yang dapat memudahkan pengguna atau pengunjung untuk memilih halaman berkaitan dengan konten-konten yang kita sediakan. Oleh karenanya silahkan salin dan tambahkan kode script untuk menu dibawah ini dan tempel di bawah </head> penutup:

<div class='menu-wrapper' id='menu-wrapper'>
<!--Menu Wrapper-->
<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<div class='show-menu' id='show-menu'><a href='javascript:void(0)' onclick='document.getElementById(&apos;mobile-menu-show&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;close-menu&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show-menu&apos;).style.display=&apos;none&apos;'><i aria-hidden='true' class='fa fa-bars'/></a></div>
<div id='close-menu'><a href='javascript:void(0)' onclick='document.getElementById(&apos;mobile-menu-show&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;close-menu&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-menu&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></a></div>

<!-- This Menu -->
<div class='nav-menu' id='nav-menu'>
<ul class='nav navigation-menu' id='mobile-menu-show'>
  <li class='homex'><a expr:title='data:blog.title' href='/' itemprop='url'>Home</a></li>
  <li><a href='#' itemprop='url' title='Introduction'><span itemprop='name'>Menu 1</span></a></li>
  <li><a href='#' itemprop='url' title='Modernity'><span itemprop='name'>Menu 2</span></a></li>
  <li><a href='#' itemprop='url' title='Quality'><span itemprop='name'>Menu 3</span></a></li>
  <li class='mobile-button'><a class='dropdown-toggle parent' href='javascript:void(0)'>Dropdown</a>
   <ul class='menu-dropdown'>
    <li><a href='#' itemprop='url' title='Dropdown 1'><span itemprop='name'>Dropdown Menu 1</span></a></li>
    <li><a href='#' itemprop='url' title='Dropdown 2'><span itemprop='name'>Dropdown Menu 2</span></a></li>
   </ul>
  </li>
  <li><a href='#' itemprop='url' title='Relationship'><span itemprop='name'>Menu 4</span></a></li>
  <li><a href='#' itemprop='url' title='Download this theme'><span itemprop='name'>Menu 5</span></a></li>
  <li class='viral_social social-facebook'><a href='#' target='_blank' title='Follow Us on Facebook'><i class='fa fa-facebook'/></a></li>
  <li class='viral_social social-twitter'><a href='#' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/></a></li>
  <li class='viral_social social-instagram'><a href='#' target='_blank' title='Follow us on Instagram'><i class='fa fa-instagram'/></a></li>
  <li class='viral_social social-googleplus'><a href='#' target='_blank' title='Follow us on G+'><i class='fa fa-google-plus'/></a></li>
</ul>
 </div>
  <div class='clear'/>
</nav>
  <div class='clear'/>
</div>

Dengan script menu diatas, menu yang dihasilkan masih berupa menu vertikal dan hanya berupa link. Menu ini belum memiliki desain sama sekali, bahkan belum responsive. Oleh karena itu kita harus menambahkan css untuk mendeklarasikan desain menu yang kita inginkan ditambah dengan penambahan javascript dan jquery. Pada tag style tambahkan kode css berikut ini:

.menu-wrapper{margin:0 auto;padding:0}
.nav-menu{background:#343434;width:100%;padding:0;margin:0;font-size:100%;font-weight:700;font-family: &quot;Poppins&quot;, &quot;Arial&quot;, sans-serif;border-top: 5px solid #b34545;}
.navigation-menu{padding:0;margin:0 auto;max-width:100%}
.navigation-menu:before,.navigation-menu:after {content: &quot; &quot;;display: table;}
.navigation-menu:after {clear: both;}
.navigation-menu ul {list-style: none;margin:0 auto;width:12em; padding-left:0;}
.navigation-menu a {display:block;padding:0 15px;}
.navigation-menu li {margin:0;list-style:none;display:inline-block;transition:all 400ms ease-in-out;position:relative;text-transform:capitalize}
.navigation-menu &gt; li {float: left;}
.navigation-menu &gt; li &gt; a {color:#1b589c ; padding: 14px 10px 12px; margin-right:20px;display:inline-block;text-decoration:none;}
.navigation-menu li a:hover{background-color:#b34545;color:#fff;}
.nav-menu ul ul {list-style:none;opacity:0;position:absolute;top:100%;visibility:hidden;width:190px;z-index:0;overflow:hidden;transition:all .3s ease-out;box-shadow:0 0 3px rgba(0,0,0,.16),0 3px 7px rgba(0,0,0,.1);}
.nav-menu ul li:hover ul {display:block;margin-top:0;opacity:1;z-index:99999;top:100%;visibility:visible}
.nav-menu ul ul li a {background:#343434;color:#1b589c;float:none;display:inline-block;padding:8px 15px;text-align:left;width:190px}
.nav-menu ul ul li a:hover {background:#b34545;color:#fff!important}
.navigation-menu li .parent:after {content: &quot;f107&quot;;font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;padding-left:6px;}
.navigation-menu li.viral_social{margin-left:-4px!important;float:right;font-size:18px!important}
.navigation-menu li.viral_social a i{font-weight:normal}
.navigation-menu li.viral_social a{margin:auto;width:55px;text-align:center;}
.navigation-menu li.social-facebook{background-color:#39aee4;}
.navigation-menu li.social-twitter{background-color:#39aee4;}
.navigation-menu li.social-instagram{background-color:#39aee4;}
.navigation-menu li.social-googleplus{background-color:#39aee4;}
#show-menu,#close-menu{transition:all .3s ease-in;display:none}

@media screen and (max-width:1024px){
.navigation-menu {margin:0; padding-left:10px;}
}
@media screen and (max-width:880px){
/* This Menu mobile */
.navigation-menu li.homex{margin-left:0}
.nav-menu{border-top:1px solid #eee}
.navigation-menu li{list-style:none;display:block;width:100%;transition:all 400ms ease-in-out;border-bottom:1px solid #e10433;position:relative;text-transform:capitalize}
.navigation-menu li a{color:#fff ;padding:14px 0;display:block;text-align:left;width:100%;text-decoration:none}
.nav-menu ul ul,.nav-menu ul li a:hover ul {position:relative;top:auto;visibility:hidden;width:100%;z-index:100;box-shadow:none;display:block;visibility:visible;color:#fff!important;opacity:1;padding-left:0px;}
.nav-menu ul ul li a,.navigation-menu ul li a {background:#343434;color:#fff!important;display:block;padding:10px 0 10px 15px;text-align:left;width:100%}
	.nav-menu ul ul li a:hover,.navigation-menu ul li a:hover {background:#b34545;}
.navigation-menu li.viral_social{width:25%;display:inline-block;float:none;}
/* This togle menu */
#show-menu,#close-menu{position:absolute;top:24px;left:10px}
#show-menu a:hover,#close-menu a:hover{}
#show-menu{display:block;z-index:3;height:55px;}
#show-menu a,#close-menu a{background:#343434;cursor:pointer;color:#FFF !important;height:55px;line-height:55px;width:55px;text-align:center!important;float:left;border:1px solid #e2e2e2;color:#f80538;font-size:22px;font-weight:700}
#show-menu a:hover,#close-menu a:hover{border-color:#f80538;color:#000!important;background:#343434}
#mobile-menu-show{display:none}
#close-menu{display:none}
}
@media screen and (max-width:480px){
#show-menu,#close-menu{top:10px}
}

Kemudian dibawahnya tambahkan jquery agar menu navigasi dapat bekerja dengan baik. Karena kita menggunakan font-awesome, tambahkan juga deklarasi untuk memanggil font-awesome.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>

Untuk melengkapi menu navigasi agar dapat berfungsi sebagaimana kita inginkan tambahkan javascript diatas tag </body> penutup seperti berikut:

<script type='text/javascript'>
//<![CDATA[
var mql = window.matchMedia('screen and (max-width: 880px)');if (mql.matches){
jQuery(document).ready(function(o){o(".dropdown-toggle").click(function(){var n=o(this).parents(".mobile-button").children(".menu-dropdown").is(":hidden");o(".mobile-button .menu-dropdown").hide(),o(".mobile-button .dropdown-toggle").removeClass("active"),n&&o(this).parents(".mobile-button").children(".menu-dropdown").toggle().parents(".mobile-button").children(".dropdown-toggle").addClass("active")}),o(document).bind("click",function(n){o(n.target).parents().hasClass("mobile-button")||o(".mobile-button .menu-dropdown").hide()}),o(document).bind("click",function(n){o(n.target).parents().hasClass("mobile-button")||o(".mobile-button .dropdown-toggle").removeClass("active")})});};
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 60em)');if (mql.matches){
$(document).ready(function() {
	var stickyNavTop = $('.nav-menu').offset().top;
	var stickyNav = function(){
		var scrollTop = $(window).scrollTop();  
		if (scrollTop > stickyNavTop) {
		 $('.nav-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999,'right':0, 'left':0 });
		} else {
			$('.nav-menu').css({ 'position': 'relative' });
		}
	};
	stickyNav();
	$(window).scroll(function() {
		stickyNav();
	});
});}
//]]>
</script>

Dan sekarang kita memiliki dokumen HTML  didalam materi Cara Membuat Template Blog Responsive dan Ringan 2 seperti dibawah ini:

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

  <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 cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
  <b:else/>
  <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
  </b:if>
  </b:if>

  <!-- 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/></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>

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[
  ]]></b:skin>

<style type='text/css'>
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;height: auto;border-top-width: 0;border-bottom-width: 0;border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: &#8221;;content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
body {background-color: #fff;background-position: center center;}

a:link {font-family: &#39;PT Serif Caption&#39;, serif; font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a {color: #3094db;}

#wrapper {background: #fff; width: 90%; padding: 20px; margin: 20px auto;}
#header-wrapper {background:#fff; width: 100%; height:auto; margin: 0 auto; border:1px solid #eaeaea;}
.header {text-align:center}
#content-wrapper {background: transparent; width:65%; float:left; border:1px solid #eaeaea; margin:10px 0;}
#sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #eaeaea; margin:10px 0;}
#footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}
 .title {font-size:36px;}

 #sidebar-wrapper #sidebar .ul,li {color:transparent;margin-left:0;padding-left:0;}
 #sidebar #PopularPosts1 ul {margin-left:0;padding-left:0;}
 #sidebar-wrapper #sidebar .item-content{margin-left:0;padding-left:0;}
 #sidebar-wrapper #sidebar .item-thumbnail{width:25%;float:left;}
 #sidebar-wrapper #sidebar .item-title{width:70%;float:right;}

 @media screen and (max-width:1024px){
	 #content-wrapper {background: transparent; width:65%; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #content-wrapper img{width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #content-wrapper .icon-action{width:32px; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #sidebar-wrapper {background: transparent; width:30%; float:right; border:1px solid #eaeaea; margin:10px 0;}
	 #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}
 }
 @media screen and (max-width:880px){
	 #content-wrapper {background: transparent; width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #content-wrapper img{width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #content-wrapper .icon-action{width:32px; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #sidebar-wrapper {background: transparent; width:100%; float:right; border:1px solid #eaeaea; margin:10px 0;}
	 #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}
 }
 @media screen and (max-width:480px){
	 #content-wrapper {background: transparent; width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #content-wrapper img{width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #content-wrapper .icon-action{width:32px; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #sidebar-wrapper {background: transparent; width:100%; float:right; border:1px solid #eaeaea; margin:10px 0;}
	 #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}
 }
 @media screen and (max-width:320px){
	 #content-wrapper {background: transparent; width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #content-wrapper img{width:100%; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #content-wrapper .icon-action{width:32px; float:left; border:1px solid #eaeaea; margin:10px 0;}
	 #sidebar-wrapper {background: transparent; width:100%; float:right; border:1px solid #eaeaea; margin:10px 0;}
	 #footer-wrapper {background:transparent; width:100%; border:1px solid #eaeaea; margin:10px 0;}
 }

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: &quot; &quot;; clear: both; height: 0;}

#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center;margin: 20px 0px 0px 1px;}

.status-msg-wrap{font-size:110%;width:90%;margin:10px auto;position:relative}
.status-msg-border{border:1px solid #000;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative}
.status-msg-bg{background-color:#ccc;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1}
.status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4}
.status-msg-hidden{visibility:hidden;padding:.3em 0}
.status-msg-wrap a{padding-left:.4em;text-decoration:underline}

.menu-wrapper{margin:0 auto;padding:0}
.nav-menu{background:#343434;width:100%;padding:0;margin:0;font-size:100%;font-weight:700;font-family: &quot;Poppins&quot;, &quot;Arial&quot;, sans-serif;border-top: 5px solid #b34545;}
.navigation-menu{padding:0;margin:0 auto;max-width:100%}
.navigation-menu:before,.navigation-menu:after {content: &quot; &quot;;display: table;}
.navigation-menu:after {clear: both;}
.navigation-menu ul {list-style: none;margin:0 auto;width:12em; padding-left:0;}
.navigation-menu a {display:block;padding:0 15px;}
.navigation-menu li {margin:0;list-style:none;display:inline-block;transition:all 400ms ease-in-out;position:relative;text-transform:capitalize}
.navigation-menu &gt; li {float: left;}
.navigation-menu &gt; li &gt; a {color:#1b589c ; padding: 14px 10px 12px; margin-right:20px;display:inline-block;text-decoration:none;}
.navigation-menu li a:hover{background-color:#b34545;color:#fff;}
.nav-menu ul ul {list-style:none;opacity:0;position:absolute;top:100%;visibility:hidden;width:190px;z-index:0;overflow:hidden;transition:all .3s ease-out;box-shadow:0 0 3px rgba(0,0,0,.16),0 3px 7px rgba(0,0,0,.1);}
.nav-menu ul li:hover ul {display:block;margin-top:0;opacity:1;z-index:99999;top:100%;visibility:visible}
.nav-menu ul ul li a {background:#343434;color:#1b589c;float:none;display:inline-block;padding:8px 15px;text-align:left;width:190px}
.nav-menu ul ul li a:hover {background:#b34545;color:#fff!important}
.navigation-menu li .parent:after {content: &quot;f107&quot;;font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;padding-left:6px;}
.navigation-menu li.viral_social{margin-left:-4px!important;float:right;font-size:18px!important}
.navigation-menu li.viral_social a i{font-weight:normal}
.navigation-menu li.viral_social a{margin:auto;width:55px;text-align:center;}
.navigation-menu li.social-facebook{background-color:#39aee4;}
.navigation-menu li.social-twitter{background-color:#39aee4;}
.navigation-menu li.social-instagram{background-color:#39aee4;}
.navigation-menu li.social-googleplus{background-color:#39aee4;}
#show-menu,#close-menu{transition:all .3s ease-in;display:none}

@media screen and (max-width:1024px){
.navigation-menu {margin:0; padding-left:10px;}
}
@media screen and (max-width:880px){
/* This Menu mobile */
.navigation-menu li.homex{margin-left:0}
.nav-menu{border-top:1px solid #eee}
.navigation-menu li{list-style:none;display:block;width:100%;transition:all 400ms ease-in-out;border-bottom:1px solid #e10433;position:relative;text-transform:capitalize}
.navigation-menu li a{color:#fff ;padding:14px 0;display:block;text-align:left;width:100%;text-decoration:none}
.nav-menu ul ul,.nav-menu ul li a:hover ul {position:relative;top:auto;visibility:hidden;width:100%;z-index:100;box-shadow:none;display:block;visibility:visible;color:#fff!important;opacity:1;padding-left:0px;}
.nav-menu ul ul li a,.navigation-menu ul li a {background:#343434;color:#fff!important;display:block;padding:10px 0 10px 15px;text-align:left;width:100%}
	.nav-menu ul ul li a:hover,.navigation-menu ul li a:hover {background:#b34545;}
.navigation-menu li.viral_social{width:25%;display:inline-block;float:none;}
/* This togle menu */
#show-menu,#close-menu{position:absolute;top:24px;left:10px}
#show-menu a:hover,#close-menu a:hover{}
#show-menu{display:block;z-index:3;height:55px;}
#show-menu a,#close-menu a{background:#343434;cursor:pointer;color:#FFF !important;height:55px;line-height:55px;width:55px;text-align:center!important;float:left;border:1px solid #e2e2e2;color:#f80538;font-size:22px;font-weight:700}
#show-menu a:hover,#close-menu a:hover{border-color:#f80538;color:#000!important;background:#343434}
#mobile-menu-show{display:none}
#close-menu{display:none}
}
@media screen and (max-width:480px){
#show-menu,#close-menu{top:10px}
}
</style>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>
</head>

<body>
<div id='wrapper'>
 <header id='header-wrapper'>
		<b:section class='header' id='header' maxwidgets='1'>
			<b:widget id='Header1' locked='true' title='Cara Membuat Template Blog Responsive Fast Loading (Header)' type='Header'></b:widget>
		</b:section>
 </header>
	<div class='menu-wrapper' id='menu-wrapper'>
	<!--Menu Wrapper-->
	<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
	<div class='show-menu' id='show-menu'><a href='javascript:void(0)' onclick='document.getElementById(&apos;mobile-menu-show&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;close-menu&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;show-menu&apos;).style.display=&apos;none&apos;'><i aria-hidden='true' class='fa fa-bars'/></a></div>
	<div id='close-menu'><a href='javascript:void(0)' onclick='document.getElementById(&apos;mobile-menu-show&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;close-menu&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-menu&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></a></div>

	<!-- This Menu -->
	<div class='nav-menu' id='nav-menu'>
	<ul class='nav navigation-menu' id='mobile-menu-show'>
	<li class='homex'><a expr:title='data:blog.title' href='/' itemprop='url'>Home</a></li>
	<li><a href='#' itemprop='url' title='Introduction'><span itemprop='name'>Menu 1</span></a></li>
	<li><a href='#' itemprop='url' title='Modernity'><span itemprop='name'>Menu 2</span></a></li>
	<li><a href='#' itemprop='url' title='Quality'><span itemprop='name'>Menu 3</span></a></li>
	<li class='mobile-button'><a class='dropdown-toggle parent' href='javascript:void(0)'>Dropdown</a>
	 <ul class='menu-dropdown'>
	  <li><a href='#' itemprop='url' title='Dropdown 1'><span itemprop='name'>Dropdown Menu 1</span></a></li>
	  <li><a href='#' itemprop='url' title='Dropdown 2'><span itemprop='name'>Dropdown Menu 2</span></a></li>
	 </ul>
	</li>
	<li><a href='#' itemprop='url' title='Relationship'><span itemprop='name'>Menu 4</span></a></li>
	<li><a href='#' itemprop='url' title='Download this theme'><span itemprop='name'>Menu 5</span></a></li>
	<li class='viral_social social-facebook'><a href='#' target='_blank' title='Follow Us on Facebook'><i class='fa fa-facebook'/></a></li>
	<li class='viral_social social-twitter'><a href='#' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/></a></li>
	<li class='viral_social social-instagram'><a href='#' target='_blank' title='Follow us on Instagram'><i class='fa fa-instagram'/></a></li>
	<li class='viral_social social-googleplus'><a href='#' target='_blank' title='Follow us on G+'><i class='fa fa-google-plus'/></a></li>
	</ul>
	</div>
	<div class='clear'/>
	</nav>
	<div class='clear'/>
	</div>

	<div class='clearfix'/>
	 <aside id='content-wrapper'>
		<b:section class='main' id='main'>
		 <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
		</b:section>
	 </aside>
	 <aside id='sidebar-wrapper'>
		<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
	 </aside>
	<div class='clearfix'/>

	<footer id='footer-wrapper'>
			<b:section class='footer' id='footer' showaddelement='yes'></b:section>
	</footer>

</div>

<script type='text/javascript'>
//<![CDATA[
var mql = window.matchMedia('screen and (max-width: 880px)');if (mql.matches){
jQuery(document).ready(function(o){o(".dropdown-toggle").click(function(){var n=o(this).parents(".mobile-button").children(".menu-dropdown").is(":hidden");o(".mobile-button .menu-dropdown").hide(),o(".mobile-button .dropdown-toggle").removeClass("active"),n&&o(this).parents(".mobile-button").children(".menu-dropdown").toggle().parents(".mobile-button").children(".dropdown-toggle").addClass("active")}),o(document).bind("click",function(n){o(n.target).parents().hasClass("mobile-button")||o(".mobile-button .menu-dropdown").hide()}),o(document).bind("click",function(n){o(n.target).parents().hasClass("mobile-button")||o(".mobile-button .dropdown-toggle").removeClass("active")})});};
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 60em)');if (mql.matches){
$(document).ready(function() {
	var stickyNavTop = $('.nav-menu').offset().top;
	var stickyNav = function(){
		var scrollTop = $(window).scrollTop();  
		if (scrollTop > stickyNavTop) {
		 $('.nav-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999,'right':0, 'left':0 });
		} else {
			$('.nav-menu').css({ 'position': 'relative' });
		}
	};
	stickyNav();
	$(window).scroll(function() {
		stickyNav();
	});
});}
//]]>
</script>

</body>
</HTML>

Jika kalian melakukanya dengan benar, maka hasilnya akan sama seperti tampak pada gambar dibawah:

Cara membuat template blog responsive fast loadig

Sekarang template blog yang kita buat sudah memiliki bentuk, coba buat satu buah post, tambahkan sebuah gadget post populer pada sidebar, dan tambahkan juga gadget lain pada footer. Hasil dari materi Cara Membuat Template Blog Responsive dan Ringan 2 ini mengakhiri belajar kita. Pada materi Cara Membuat Template Blog Responsive dan Ringan 3 kita akan belajar Cara desain Main Content Blog dan Sidebar yang sedang kita buat.

Anda telah menyelesaikan Materi langkah 2 dari 5 langkah Cara Membuat Template Blog Responsive Dan Ringan:

 

Post Terkait
Author

Administrator

22 Juli 2018

Hey..... Apa kabar? Semua artikel dan layanan yang kami sediakan di sini semata-mata untuk kepentingan pengguna dan klien. Jadi jika Anda merasa membutuhkan pelayanan kami silahkan jangan ragu untuk menghubungi. Kami juga bersedia untuk melayani konsultasi online melalui media sosial, melalui komentar dan melalui halaman testimonial yang telah kami sediakan. Selain itu Anda juga dapat menggunakan kontak form yang tersedia.

Jika apa yang anda dapatkan dari situs ini bermanfaat, silahkan dukung dengan like dan share . Terimakasih telah berkunjung, silahkan kembali kapanpun anda merasa membutuhkan layanan yang kami sediakan.

Status Akun Iklan 11 Juni 2024

Saya sampaikan bahwa status akun iklan sudah saya cek dan saya kelola. Sehingga pagi ini siap untuk di jalankan.

Abaikan notifikasi/tanda yang ada; Dibatasi anggaran, merah, kuning, apapun itu mohon di abaikan. Saya sudah pertimbangkan dan sesuaikan di masing-masing akun. Pagi ini, pukul 04.45 WIB saya baru selesai periksa dan setting semua akun. Sehingga tidak ada lagi yang perlu di tanyakan. Silahkan jalankan iklan.
Ingin berbagi dengan multibisnisindo dan memberikan kontribusi....? Tulis pengalamanmu Di Sini

Terimakasih
JOPanda

Tidak ada komentar terkait posting ini, Ingin memberi komentar?