Cara Membuat Template Blog Responsive dan Ringan 2
- Administrator
- Template adsense, Template blog, Tema blogspot, Theme, Create themes, Web Design, UX Design, UI Design, Blogspot, Trik blogspot, Trik blogger
- 2666 Kali Dilihat
- 0 Komentar
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 + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' 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 == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + 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 == "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/></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>
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>:
<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: ”;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: 'PT Serif Caption', 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: " "; 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('mobile-menu-show').style.display='block';document.getElementById('close-menu').style.display='block';document.getElementById('show-menu').style.display='none''><i aria-hidden='true' class='fa fa-bars'/></a></div>
<div id='close-menu'><a href='javascript:void(0)' onclick='document.getElementById('mobile-menu-show').style.display='none';document.getElementById('close-menu').style.display='none';document.getElementById('show-menu').style.display='block''><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: "Poppins", "Arial", sans-serif;border-top: 5px solid #b34545;}
.navigation-menu{padding:0;margin:0 auto;max-width:100%}
.navigation-menu:before,.navigation-menu:after {content: " ";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 > li {float: left;}
.navigation-menu > li > 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: "f107";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 + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' 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 == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + 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 == "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/></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>
<style type="text/css"><!-- /*<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: ”;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: 'PT Serif Caption', 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: " "; 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: "Poppins", "Arial", sans-serif;border-top: 5px solid #b34545;}
.navigation-menu{padding:0;margin:0 auto;max-width:100%}
.navigation-menu:before,.navigation-menu:after {content: " ";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 > li {float: left;}
.navigation-menu > li > 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: "f107";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('mobile-menu-show').style.display='block';document.getElementById('close-menu').style.display='block';document.getElementById('show-menu').style.display='none''><i aria-hidden='true' class='fa fa-bars'/></a></div>
<div id='close-menu'><a href='javascript:void(0)' onclick='document.getElementById('mobile-menu-show').style.display='none';document.getElementById('close-menu').style.display='none';document.getElementById('show-menu').style.display='block''><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:
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:
- Materi 1 Cara Membuat Template Blog Responsive dan Ringan
- Materi 2 Cara Membuat Template Blog Responsive dan Ringan 2
- Materi 3 Cara desain Main Content Blog dan Sidebar
- Materi 4 Cara membuat Header 2 kolom dalam 2 Langkah Praktis
- Materi 5 Cara membuat Footer 3 kolom dalam 3 langkah Praktis
