Cara desain Main Content Blog dan Sidebar
Cara desain Main Content Blog dan Sidebar
Layout sebuah blog terdiri dari kepala halaman atau header, main konten atau halaman konten, sidebar(bilah kanan atau kiri blog), dan footer. Saat ini kita akan belajar Cara desain Main Content Blog dan Sidebar, dimana keduanya merupakan satu kesatuan yang sangat umum pada sebuah blog dan sangat penting. Cara desain Main Content Blog dan Sidebar akan menjelaskan serta memberikan langkah-langkah praktis bagaimana sebuah blog dapat menampilkan snippet dan thumbnail dari post-post yang telah dibuat, serta bagaimana sebuah blog dapat menampilkan thumbnail serta snippet dari entri post populer. Semua akan dibahas dalam artikel ini. Pada materi Cara Membuat Template Blog Responsive dan Ringan 2, kita telah sampai pada peninjauan hasil pembuatan template yang pertama(sementara). Dan dapat kita lihat hasilnya masih sangat sederhana, dapat dikatakan hasilnya masih 20%. Akan tetapi sampai pada tahap itu pula kalian telah mencapai dan berhasil menyerap 35% Cara Membuat Template Blog. Berikut adalah dokumen HTML dari template yang telah kita buat sebelumnya:
<?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>Selanjutnya pada materi ini kita akan belajar cara membuat Blog keren melalui template yang telah kita buat supaya lebih rapi dan menarik. Desain Main Content Blog akan kita buat menjadi dua bagian, gambar thumbnail akan berada di sisi kiri, dan deskripsi konten disisi sebelah kanan. Mari kita mulai...., berikut adalah cara mempercantik blog yang baik.
Pada dokumen HTML tersebut terdapat file atau kode css untuk mendeklarasikan desain template kita, dan dibagian paling atas diantara kode css tersebut terdapat potongan kode berikut:
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;}Silahkan hapus img atau fungsi(img) dari baris kode css diatas, sehingga menjadi seperti berikut:
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, 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;}Kemudian dibawah #sidebar-wrapper #sidebar tambahkan baris kode css berikut ini:
.post-outer {margin:30px 20px 50px 0;}
.post-footer{background:#eee;}
.post-title.entry-title a{font-size:24px; text-decoration:none;}
.post-footer span a, .post-share-buttons a{margin:5px;}
.post-body.entry-content{padding:0px 0px 25px 10px;}
.comments{padding:25px 0 10px 10px;}Simpan perubahan yang baru saja kita buat dan kunjungi blog untuk melihat hasilnya. Kalian akan dapati tampilan konten post sudah lebih rapi dari sebelumnya. Selanjutnya kita akan membuat entri post yang tampil menjadi hanya beberapa kata dan membuat readmore. Untuk itu tambahkan script berikut diatas tag </head> dan diatas bootstrap:
<!-- Readmore -->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color:#0457A9 !important;background:transparent; font:bold 13px Arial;padding:5px;}
.read-more a:hover{color:#FFF !important; background:#0457A9;}
.pic{border: 10px solid #fff;float:left;height:165px;width:200px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #ebebeb;}
.grow img{height:165px;width:270px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 165;
img_thumb_width = 280;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>
<!-- Readmore end -->Masih pada editor template, sekarang cari kode <data:post.body/> gunakan ctrl+f lalu tempel <data:post.body/> dan enter 2x. Sekarang ganti kode <data:post.body/> dengan kode dibawah ini:
<!-- Custom for readmore -->
<!-- data:post.body/ -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='read-more'>
<a expr:href='data:post.url'>Baca Selengkapnya »</a>
</div>
</b:if>
</b:if>
<!-- Custom for readmore -->Simpan perubahan dan lihat hasilnya. Sampai batas ini kita telah menyelesaikan Cara Membuat Template Blog Responsive dan Ringan bagian 3 dan kita sudah memiliki desain main konten serta sidebar sesuai yang kita harapkan. Pada sesi yang ke-4 nanti kita akan belajar Cara membuat Header 2 kolom dalam 2 Langkah Praktis.
Anda telah menyelesaikan Materi langkah 3 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
Yudha
Tutorialnya sangat membantu gan..
Jangan lupa kunjungan balik ya gan ,
Thanks, Salam.
Yudha Blogs