{"id":3377,"date":"2020-06-17T14:40:06","date_gmt":"2020-06-17T14:40:06","guid":{"rendered":"https:\/\/www.hostnic.id\/blog\/?p=3377"},"modified":"2020-06-17T14:49:42","modified_gmt":"2020-06-17T14:49:42","slug":"membuat-navbar-lebih-rapih","status":"publish","type":"post","link":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/","title":{"rendered":"Membuat navbar lebih rapih"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3381\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/attachment\/screenshot_8-3\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_8-2.png?fit=1365%2C196&amp;ssl=1?v=1592405117\" data-orig-size=\"1365,196\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_8\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_8-2.png?fit=1024%2C147&amp;ssl=1?v=1592405117\" class=\"aligncenter wp-image-3381 size-large\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_8-2.png?resize=740%2C106&#038;ssl=1\" alt=\"\" width=\"740\" height=\"106\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_8-2.png?resize=1024%2C147&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_8-2.png?resize=300%2C43&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_8-2.png?resize=768%2C110&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_8-2.png?w=1365&amp;ssl=1 1365w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/p>\n<p>Hallo sobat Hostnic&#8230;<\/p>\n<p>Nah sekarang saatnya mimin kasih tau agar navbar atau Navigation Bar di website kita bisa lebih rapih dan yang pasti enak untuk dilihat terutama HRD perusahaan yang akan kita lamar nantinya.<\/p>\n<p>Sebelumnya dibaca juga :<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hostnic.id\/blog\/uncategory\/cara-menghubungkan-html-dengan-css\/\">Cara menghubungkan HTML dengan CSS<\/a><\/li>\n<li><a href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/\">Cara membuat navbar mudah<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Nah sekarang udah tau kan syarat-syarat gimana caranya buat navbar bisa lebih ? Yaps, kalian harus menghubungkan file html dengan file css sobat. Dan harus buat navbar simple dulu dari library Bootstrap 4.<\/p>\n<p>Sekarang kita buat navbar di website yang akan kita buat agar lebih rapih dan enak dilihat :<\/p>\n<ul>\n<li>Buka file css kalian di VS Code<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3374\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menghubungkan-html-dengan-css\/attachment\/screenshot_5-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1365%2C767&amp;ssl=1?v=1592399805\" data-orig-size=\"1365,767\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_5\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1024%2C575&amp;ssl=1?v=1592399805\" class=\"aligncenter wp-image-3374\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?resize=742%2C418&#038;ssl=1\" alt=\"\" width=\"742\" height=\"418\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?resize=310%2C175&amp;ssl=1 310w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?w=1365&amp;ssl=1 1365w\" sizes=\"auto, (max-width: 742px) 100vw, 742px\" \/><\/li>\n<li>Masukkan script ke dalam file CSS, bisa didownload untuk source codenya\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/14zZpGgLg9kJAGEeWInrzMrmb5CueGIt_\/view?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">Navbar Keren<\/a><\/li>\n<li>Hasil setelah menggunakan CSS<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3378\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/attachment\/screenshot_7-3\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-2.png?fit=1365%2C699&amp;ssl=1?v=1592404616\" data-orig-size=\"1365,699\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_7\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-2.png?fit=1024%2C524&amp;ssl=1?v=1592404616\" class=\"aligncenter wp-image-3378\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-2.png?resize=746%2C383&#038;ssl=1\" alt=\"\" width=\"746\" height=\"383\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-2.png?resize=300%2C154&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-2.png?resize=1024%2C524&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-2.png?resize=768%2C393&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_7-2.png?w=1365&amp;ssl=1 1365w\" sizes=\"auto, (max-width: 746px) 100vw, 746px\" \/><\/li>\n<li>Gimana sobat ? Lebih keren kan dari sebelumnya, udah pasti dong.<\/li>\n<\/ul>\n<p>Nah sampai sini dulu ya untuk pembuatan navbarnya, nanti akan dilanjut untuk pembuatan &#8220;jumbotron&#8221; atau cover di website kita.<\/p>\n<p>Selamat mencoba dan selamat mengoding&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Hallo sobat Hostnic&#8230; Nah sekarang saatnya mimin kasih tau agar navbar atau Navigation Bar di website kita bisa lebih rapih dan yang pasti enak untuk dilihat terutama HRD perusahaan yang akan kita lamar nantinya. Sebelumnya dibaca juga : Cara menghubungkan HTML dengan CSS Cara membuat navbar mudah &nbsp; Nah sekarang udah tau kan syarat-syarat [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3374,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[246,79,248,82],"tags":[],"class_list":["post-3377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-tutorial","category-v4","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Membuat navbar lebih rapih - Hostnic.id<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat navbar lebih rapih - Hostnic.id\" \/>\n<meta property=\"og:description\" content=\"&nbsp; Hallo sobat Hostnic&#8230; Nah sekarang saatnya mimin kasih tau agar navbar atau Navigation Bar di website kita bisa lebih rapih dan yang pasti enak untuk dilihat terutama HRD perusahaan yang akan kita lamar nantinya. Sebelumnya dibaca juga : Cara menghubungkan HTML dengan CSS Cara membuat navbar mudah &nbsp; Nah sekarang udah tau kan syarat-syarat [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostnic.id\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-17T14:40:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-17T14:49:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?v=1592399805\" \/>\n\t<meta property=\"og:image:width\" content=\"1365\" \/>\n\t<meta property=\"og:image:height\" content=\"767\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Monic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Monic\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/\"},\"author\":{\"name\":\"Monic\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"headline\":\"Membuat navbar lebih rapih\",\"datePublished\":\"2020-06-17T14:40:06+00:00\",\"dateModified\":\"2020-06-17T14:49:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/\"},\"wordCount\":157,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Screenshot_5-1.png?fit=1365%2C767&ssl=1?v=1592399805\",\"articleSection\":[\"Bootstrap\",\"Tutorial\",\"v4\",\"Website\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/\",\"name\":\"Membuat navbar lebih rapih - Hostnic.id\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Screenshot_5-1.png?fit=1365%2C767&ssl=1?v=1592399805\",\"datePublished\":\"2020-06-17T14:40:06+00:00\",\"dateModified\":\"2020-06-17T14:49:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Screenshot_5-1.png?fit=1365%2C767&ssl=1?v=1592399805\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Screenshot_5-1.png?fit=1365%2C767&ssl=1?v=1592399805\",\"width\":1365,\"height\":767},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-navbar-lebih-rapih\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat navbar lebih rapih\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\",\"name\":\"hostnic.id\",\"description\":\"Info, Tips dan Tutorial Seputar Layanan Hostnic\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\",\"name\":\"Monic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"caption\":\"Monic\"},\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/author\\\/blog-writer\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat navbar lebih rapih - Hostnic.id","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/","og_locale":"id_ID","og_type":"article","og_title":"Membuat navbar lebih rapih - Hostnic.id","og_description":"&nbsp; Hallo sobat Hostnic&#8230; Nah sekarang saatnya mimin kasih tau agar navbar atau Navigation Bar di website kita bisa lebih rapih dan yang pasti enak untuk dilihat terutama HRD perusahaan yang akan kita lamar nantinya. Sebelumnya dibaca juga : Cara menghubungkan HTML dengan CSS Cara membuat navbar mudah &nbsp; Nah sekarang udah tau kan syarat-syarat [&hellip;]","og_url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/","og_site_name":"Hostnic.id","article_published_time":"2020-06-17T14:40:06+00:00","article_modified_time":"2020-06-17T14:49:42+00:00","og_image":[{"width":1365,"height":767,"url":"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?v=1592399805","type":"image\/png"}],"author":"Monic","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Monic","Estimasi waktu membaca":"1 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/#article","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/"},"author":{"name":"Monic","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"headline":"Membuat navbar lebih rapih","datePublished":"2020-06-17T14:40:06+00:00","dateModified":"2020-06-17T14:49:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/"},"wordCount":157,"commentCount":0,"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1365%2C767&ssl=1?v=1592399805","articleSection":["Bootstrap","Tutorial","v4","Website"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/","url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/","name":"Membuat navbar lebih rapih - Hostnic.id","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/#primaryimage"},"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1365%2C767&ssl=1?v=1592399805","datePublished":"2020-06-17T14:40:06+00:00","dateModified":"2020-06-17T14:49:42+00:00","author":{"@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"breadcrumb":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/#primaryimage","url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1365%2C767&ssl=1?v=1592399805","contentUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1365%2C767&ssl=1?v=1592399805","width":1365,"height":767},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnic.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat navbar lebih rapih"}]},{"@type":"WebSite","@id":"https:\/\/www.hostnic.id\/blog\/#website","url":"https:\/\/www.hostnic.id\/blog\/","name":"hostnic.id","description":"Info, Tips dan Tutorial Seputar Layanan Hostnic","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostnic.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2","name":"Monic","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","caption":"Monic"},"url":"https:\/\/www.hostnic.id\/blog\/author\/blog-writer\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1365%2C767&ssl=1?v=1592399805","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8D2mv-St","jetpack-related-posts":[{"id":3373,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menghubungkan-html-dengan-css\/","url_meta":{"origin":3377,"position":0},"title":"Cara menghubungkan HTML dengan CSS","author":"Monic","date":"2020-06-17","format":false,"excerpt":"Hallo sobat Hostnic... Kembali lagi nih sama mimin, sekarang kita akan melanjutkan project pembuatan website pribadi yaa. Nah sebelumnya kita sudah membuat navbar dengan library Bootstrap 4, sekarang kita edit dengan menggunakan CSS agar tampilannya makin segar dilihat. Cara membuat navbar mudah Sebelum kita mengedit navbar, langkah sebelumnya adalah menghubungkan\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_5-1.png?fit=1200%2C674&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3362,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/","url_meta":{"origin":3377,"position":1},"title":"Cara membuat navbar mudah","author":"Monic","date":"2020-06-16","format":false,"excerpt":"Hallo sobat Hostnic... Ketemu lagi nih sama mimin, hari ini mimin akan membahas tentang cara membuat Navbar atau Navigation Bar di website yang akan kita buat. Navbar adalah sebuah menu di website sehingga pengunjung tidak perlu mencari-cari informasi yang butuhkan tetapi langsung klik button pada navbar saja. Baca sebelumnya :\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1200%2C612&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3486,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/","url_meta":{"origin":3377,"position":2},"title":"Membuat jumbotron di Website","author":"Monic","date":"2020-07-02","format":false,"excerpt":"\u00a0 Hallo sobat Hostnic... Oke, kita lanjutkan project website yang sudah pernah kita buat. Kali ini kita akan membuat jumbotron di website kita. Apa sih Jumbotron itu ? Jumbotron merupakan suatu elemen pada website yang digunakan untuk menyampaikan informasi dari website atau pengumuman pada website. Website yang akan kita buat\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1200%2C586&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1200%2C586&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1200%2C586&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1200%2C586&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1200%2C586&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3393,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/","url_meta":{"origin":3377,"position":3},"title":"Cara menambahkan icon di Website","author":"Monic","date":"2020-06-18","format":false,"excerpt":"\u00a0 Hallo sobat Hostnic... Kembali lagi nih sama mimin, melanjutkan project yang kita buat sebelumnya mimin mau kasih tau nih agar nantinya website yang kita buat tambah kece yaitu penambahan icon. Dengan adanya icon, website tidak menjadi monoton karena bukan hanya sekedar tulisan tetapi ada gambar\/icon yang kita tambahkan. Untuk\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1%3Fv%3D1592496652&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1%3Fv%3D1592496652&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1%3Fv%3D1592496652&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1%3Fv%3D1592496652&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Font-Awesome.png?fit=1120%2C630&ssl=1%3Fv%3D1592496652&resize=1050%2C600 3x"},"classes":[]},{"id":7123,"url":"https:\/\/www.hostnic.id\/blog\/teknologi\/framework-front-end-bootstrap-membangun-antarmuka-yang-menarik\/","url_meta":{"origin":3377,"position":4},"title":"Framework Front-End Bootstrap: Membangun Antarmuka yang Menarik","author":"Monic","date":"2023-09-12","format":false,"excerpt":"Hostnic.id -\u00a0Halo pembaca yang budiman! Bagaimana kabar kalian? Semoga kalian semua dalam keadaan baik-baik saja. Kali ini, kita akan membahas tentang Framework Front-End Bootstrap: Membangun Antarmuka yang Menarik. Bootstrap merupakan salah satu framework yang populer di dunia pengembangan website. Dengan Bootstrap, kita dapat dengan mudah membuat antarmuka yang menarik dan\u2026","rel":"","context":"dalam &quot;Teknologi&quot;","block_context":{"text":"Teknologi","link":"https:\/\/www.hostnic.id\/blog\/.\/teknologi\/"},"img":{"alt_text":"Framework Front-End Bootstrap: Membangun Antarmuka yang Menarik","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/B.png?fit=1190%2C619&ssl=1%3Fv%3D1694532838&resize=1050%2C600 3x"},"classes":[]},{"id":3337,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/bootstrap\/cara-menggunakan-bootstrap-4-di-website-secara-online\/","url_meta":{"origin":3377,"position":5},"title":"Cara menggunakan Bootstrap 4 di Website secara Online","author":"Monic","date":"2020-06-15","format":false,"excerpt":"Hallo sobat Hostnic.. Kemarin kita pernah juga membahas Cara menggunakan Bootstrap 4 di Website (Offline) nah sekarang mimin akan kasih tau juga cara menggunakan Bootstrap secara online. Jadi kalian gak perlu repot-repot download Source Code nya dulu, tapi tinggal copas ajah hehehe. Disini kita masih menggunakan Bootstrap versi terbaru ya\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/download-2-300x150.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/comments?post=3377"}],"version-history":[{"count":4,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3377\/revisions"}],"predecessor-version":[{"id":3384,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3377\/revisions\/3384"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media\/3374"}],"wp:attachment":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media?parent=3377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/categories?post=3377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/tags?post=3377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}