Cara Menciptakan Sajian Navigasi Blog Horizontal Sederhana
Salah satu ciri blog yang disukai oleh pengunjung ialah mempunyai hidangan navigasi yang terperinci 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> <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'> /* 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: ”;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: " "; 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> <!--<head/>--> <body> <div id='wrapper'> <header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Ganteng id (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> <!--</body>--> </HTML> Pada serial keempat dari 11 seri panduan menciptakan template blog sendiri ini kita akan berguru bagaimana cara menciptakan hidangan navigasi blog yang sederhana.
Saya sebut sederhana alasannya ialah hidangan navigasi ini murni merupakan modifikasi CSS saja, sehingga dijamin sangat ringan.
Ide dasar hidangan navigasi ini berasal dari Unordered List HTML, yang dipanggil memakai tag ul (unordered list). Setiap itemnya berada di dalam tag li (list).
Karena kita akan menciptakan hidangan navigasi, maka tag ul dan tag li sanggup diletakkan di dalam tag nav menyerupai berikut.
<nav> <ul> <li><a href="https://teknomia.blogspot.co.id/">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>
Di sini Anda juga sanggup melihat tag a untuk menciptakan link. Makara dikala hidangan navigasi di-klik masing-masing akan mengarah menuju halaman yang kita tentukan.
Posisi hidangan 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 epilog header.
... </b:section> </header> /* Menu Navigasi di sini */ <div class='clearfix'/> <aside id='content-wrapper'> ...
Jika Anda kesulitan mencari tag epilog header, gunakan fitur pencarian dengan menekan Ctrl+F di dalam Template Editor.
Coba praktekkan dan simpan template blog Anda. Seharusnya tampilan blog Anda akan menyerupai gambar di bawah ini.
Selanjutnya akan kita atur tampilannya memakai CSS, pertama menghilangkan bullet atau bulat hitam yang berada di depan menu. Caranya ialah dengan menambahkan atribut list-style-type:none di dalam tag ul.
#menu {width:100%;} #menu ul {list-style-type: none;} Width 100% saya tambahkan di sini biar lebar hidangan navigasi sama dengan lebar wrapper (horizontal).
Jangan lupa menambahkan ID CSS di dalam tag nav biar CSS di atas sanggup dimuat.
<nav id='menu'>
Sekarang kita sanggup melihat hidangan navigasi kita sudah tidak ada bullet-nya.
Sekarang kita akan menciptakan setiap item hidangan navigasi yang terletak di dalam tag li tersusun secara horizontal, bukan vertikal. Caranya sanggup dilakukan dengan menerapkan CSS float:left pada tag li.
#menu {width: 100%;} #menu ul {list-style-type: none;} #menu ul li {float: left;} Sekarang hidangan navigasi kita telah tersusun menyamping, bukan ke bawah lagi. Tetapi tampilannya masih kacau, masih perlu sentuhan beberapa CSS lagi untuk mempercantik hidangan navigasi kita.
Ubah warna background menjadi warna gelap (background-color), dan tentukan ketinggian niscaya hidangan navigasi (height).
#menu {width: 100%; background-color: #4d4544; height: 35px;} #menu ul {list-style-type: none;} #menu ul li {float: left;} Tampilan blog Anda kini menjadi menyerupai ini.
Tambahkan CSS berikut untuk mengatur tampilan tag a di dalam kotak hidangan 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;} Display:block dan line-height ditambahkan biar bukan hanya text link saja yang sanggup 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 dikala kotak hidangan 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;} CSS color di atas akan menciptakan warna link teks bermetamorfosis #000 (hitam). Background mengatur warna kotak hidangan yang bertindak sebagai latar belakang.
Tampilan blog Anda dengan hidangan navigasi yang gres saja kita buat seharusnya menyerupai gambar di bawah ini.
Sekarang saya ingin menciptakan goresan pena di dalam hidangan navigasi menjadi karakter 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;} 
Kemudian saya ingin menghilangkan garis bawah pada tulisan. Caranya dengan menambahkan text-decoration:none di dalam tag a hidangan 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;} 
Sepertinya tata letak hidangan navigasi kita agak ke tengah sedikit. Saya ingin hidangan 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;} 
Kemudian saya ingin menambahkan garis border berwarna biru di bab bawah hidangan navigasi. Caranya ialah 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;} 
Sepertinya border bawah kurang cocok, saya ingin memberi pembatas pada tiap-tiap menu. Lakukan dengan menambahkan saja border-right pada tag a hidangan 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;} 
Saya pikir pembatas antar hidangan sudah biasa, saya ingin tiap hidangan mempunyai 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;} 
Wow, saya suka hidangan navigasi warna-warni ini, tetapi goresan pena menu-menunya jadi sulit untuk dibaca. Solusinya dengan mengubah warnya tulisannya menjadi lebih kontras dengan memainkan color pada tag a hidangan navigasi. Di sini saya akan menciptakan 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;} 
Sempurna! Saya akan memakai hidangan navigasi warna-warni ini. Sekarang source code template blog kita menjadi menyerupai berikut.
<?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'> /* 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: ”;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: " "; 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> <!--<head/>--> <body> <div id='wrapper'> <header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Ganteng id (Header)' type='Header'></b:widget> </b:section> </header> <nav id='menu'> <ul> <li><a href="https://teknomia.blogspot.co.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> <!--</body>--> </HTML> Selamat, Anda gres saja menuntaskan serial keempat dari 11 serial panduan menciptakan template blog sendiri. Sekarang Anda sanggup melanjutkan membaca serial kelima panduan menciptakan template blog sendiri berikut : Membuat Desain Header.
Pemahaman Anda sudah mencapai 30%. Kini Anda sudah mengerti bagaimana cara menciptakan hidangan navigasi blog horizontal sederhana.
30%
0 Response to "Cara Menciptakan Sajian Navigasi Blog Horizontal Sederhana"
Posting Komentar