-->
› › › › › ›

Cara Membuat Menu Navigasi Blog Horizontal Sederhana Blogger

22 November 2019

Cara Membuat Menu Navigasi Blog Horizontal Sederhana Blogger - Salah satu ciri blog yang disukai oleh pengunjung adalah memiliki menu navigasi yang jelas sehingga tidak membingungkan pengunjung dalam menelusuri halaman-halaman yang ada di blog tersebut.

Pada serial sebelumnya kita telah berhasil membuat struktur dasar template blog dengan source code berikut.


 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
&lt;head&gt;
<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'>
/* RESET */
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: #cab894;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;}

.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}
</style>

&lt;!--<head/>--&gt;
<body>
<div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Ferlyando Sandala (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>
&lt;!--</body>--&gt;
</HTML>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.

Pada panduan membuat template blog sendiri ini kita akan belajar bagaimana cara membuat menu navigasi blog yang sederhana.

Saya sebut sederhana karena menu navigasi ini murni merupakan modifikasi CSS saja, sehingga dijamin sangat ringan.

Ide dasar menu navigasi ini berasal dari Unordered List HTML, yang dipanggil menggunakan tag ul (unordered list). Setiap itemnya berada di dalam tag li (list).

Karena kita akan membuat menu navigasi, maka tag ul dan tag li dapat diletakkan di dalam tag nav seperti berikut.
<nav>
<ul>
  <li><a href='https://ferlyandosandala.my.id/'>Home</a></li>
  <li><a href='#'>News</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>About</a></li>
</ul>
</nav>


1.
2.
3.
4.
5.
6.
7.
8.

Di sini Anda juga dapat melihat tag a untuk membuat link. Jadi ketika menu navigasi di-klik masing-masing akan mengarah menuju halaman yang kita tentukan.

Posisi menu navigasi diletakkan di bawah header wrapper, di atas content dan sidebar wrapper. Sehingga di dalam source code template blog Anda, tag nav diletakkan di bawah tag penutup header.
...
</b:section>
</header>
  /* Menu Navigasi di sini */
<div class='clearfix'/>
<aside id='content-wrapper'>
...

1.
2.
3.
4.
5.
6.
7.

Jika Anda kesulitan mencari tag penutup header, gunakan fitur pencarian dengan menekan Ctrl+F di dalam Template Editor.


Coba praktekkan dan simpan template blog Anda. Seharusnya tampilan blog Anda akan seperti gambar di bawah ini.


Selanjutnya akan kita atur tampilannya menggunakan CSS, pertama menghilangkan bullet atau lingkaran hitam yang berada di depan menu. Caranya adalah dengan menambahkan atribut list-style-type:none di dalam tag ul.
#menu {width:100%;}
#menu ul {list-style-type: none;}

1.
2.

Width 100% saya tambahkan di sini agar lebar menu navigasi sama dengan lebar wrapper (horizontal).

Jangan lupa menambahkan ID CSS di dalam tag nav agar CSS di atas dapat dimuat.

<nav id='menu'>

1.

Sekarang kita dapat melihat menu navigasi kita sudah tidak ada bullet-nya.


Sekarang kita akan membuat setiap item menu navigasi yang terletak di dalam tag li tersusun secara horizontal, bukan vertikal. Caranya dapat dilakukan dengan menerapkan CSS float:left pada tag li.
#menu {width: 100%;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}

1.
2.
3.

Sekarang menu navigasi kita telah tersusun menyamping, bukan ke bawah lagi. Tetapi tampilannya masih kacau, masih perlu sentuhan beberapa CSS lagi untuk mempercantik menu navigasi kita.


Ubah warna background menjadi warna gelap (background-color), dan tentukan ketinggian pasti menu navigasi (height).
#menu {width: 100%; background-color: #4d4544; height: 35px;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}

1.
2.
3.

Tampilan blog Anda sekarang menjadi seperti ini.


Tambahkan CSS berikut untuk mengatur tampilan tag a di dalam kotak menu navigasi.
#menu {width: 100%; background-color: #4d4544; height: 35px;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px;}

1.
2.
3.
4.

Display:block dan line-height ditambahkan agar bukan hanya text link saja yang dapat diklik, tetapi juga kotak background menunya. Padding ditambahkan untuk mengatur jarak dalam antar menu.

Tambahkan CSS untuk mengatur tampilan tag a:hover di bawah ini, berfungsi mengatur tampilan ketika kotak menu navigasi disorot oleh kursor (hover).
#menu {width: 100%; background-color: #4d4544; height: 35px;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px;}
#menu ul li a:hover {color: #000; background: #BABABA;}

1.
2.
3.
4.
5.

CSS color di atas akan membuat warna link teks berubah menjadi #000 (hitam). Background mengatur warna kotak menu yang bertindak sebagai latar belakang.

Tampilan blog Anda dengan menu navigasi yang baru saja kita buat seharusnya seperti gambar di bawah ini.


Sekarang saya ingin membuat tulisan di dalam menu navigasi menjadi huruf kapital semua, maka saya cukup menambahkan text-transform:uppercase di dalam tag menu.
#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px;}
#menu ul li a:hover {color: #000; background: #BABABA;}

1.
2.
3.
4.
5.

Kemudian saya ingin menghilangkan garis bawah pada tulisan. Caranya dengan menambahkan text-decoration:none di dalam tag a menu navigasi.
#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none;}
#menu ul li a:hover {color: #000; background: #BABABA;}

1.
2.
3.
4.
5.


Sepertinya tata letak menu navigasi kita agak ke tengah sedikit. Saya ingin menu Home dimulai dari pojok kiri, berarti saya harus mengatur padding tag ul menjadi nol.


#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none; padding: 0;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none;}
#menu ul li a:hover {color: #000; background: #BABABA;}

1.
2.
3.
4.
5.


Kemudian saya ingin menambahkan garis border berwarna biru di bagian bawah menu navigasi. Caranya adalah dengan menambahkan border bottom pada tag menu.
#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase; border-bottom: 4px solid #3094db;}
#menu ul {list-style-type: none; padding: 0;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none;}
#menu ul li a:hover {color: #000; background: #BABABA;}

1.
2.
3.
4.
5.


Sepertinya border bawah kurang cocok, saya ingin memberi pembatas pada tiap-tiap menu. Lakukan dengan menambahkan saja border-right pada tag a menu navigasi.
#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none; padding: 0;}
#menu ul li {float: left;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none; border-right: 1px solid #cab894;}
#menu ul li a:hover {color: #000; background: #BABABA;}

1.
2.
3.
4.
5.


Saya pikir pembatas antar menu sudah biasa, saya ingin tiap menu memiliki warna background yang berbeda saja. Caranya tambahkan tag nth-child berikut.
#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none; padding: 0;}
#menu ul li {float: left;}
#menu ul li:nth-child(1){background-color:#4285F4;}
#menu ul li:nth-child(2){background-color:#EA4335;}
#menu ul li:nth-child(3){background-color:#FBBC05;}
#menu ul li:nth-child(4){background-color:#34A853;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none;}
#menu ul li a:hover {color: #000; background: #BABABA;}

1.
2.
3.
4.
5.
6.
7.
8.
9.


Wow, saya suka menu navigasi warna-warni ini, tetapi tulisan menu-menunya jadi sulit untuk dibaca. Solusinya dengan mengubah warnya tulisannya menjadi lebih kontras dengan memainkan color pada tag a menu navigasi. Di sini saya akan membuat warnanya menjadi putih.
#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none; padding: 0;}
#menu ul li {float: left;}
#menu ul li:nth-child(1){background-color:#4285F4;}
#menu ul li:nth-child(2){background-color:#EA4335;}
#menu ul li:nth-child(3){background-color:#FBBC05;}
#menu ul li:nth-child(4){background-color:#34A853;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none; color:#fff;}
#menu ul li a:hover {color: #000; background: #BABABA;}

1.
2.
3.
4.
5.
6.
7.
8.
9.


Sempurna! Saya akan menggunakan menu navigasi warna-warni ini. Sekarang source code template blog kita menjadi seperti berikut.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
&lt;head&gt;
<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'>
/* RESET */
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: #cab894;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}

#menu {width: 100%; background-color: #4d4544; height: 35px; text-transform: uppercase;}
#menu ul {list-style-type: none; padding: 0;}
#menu ul li {float: left;}
#menu ul li:nth-child(1){background-color:#4285F4;}
#menu ul li:nth-child(2){background-color:#EA4335;}
#menu ul li:nth-child(3){background-color:#FBBC05;}
#menu ul li:nth-child(4){background-color:#34A853;}
#menu ul li a {display: block; line-height: 35px; padding: 0 15px; text-decoration:none; color:#fff;}
#menu ul li a:hover {color: #000; background: #BABABA;}

#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;}

.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}
</style>

&lt;!--<head/>--&gt;
<body>
<div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Ferlyando Sandala (Header)' type='Header'></b:widget>
</b:section>
</header>
<nav id='menu'>
<ul>
  <li><a href="https://ferlyandosandala.my.id/">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>
</nav>
<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>
&lt;!--</body>--&gt;
</HTML>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.

Selamat, Anda baru saja menyelesaikan Cara Membuat Menu Navigasi Blog Horizontal Sederhana Blogger.

 Postingan ini lanjutan panduan membuat template blog sendiri.

Mau lihat demonya disini.


Pemahaman Anda sudah mencapai 30%. Kini Anda sudah mengerti bagaimana cara membuat menu navigasi blog horizontal sederhana.




Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel