{"id":3362,"date":"2020-06-16T15:51:40","date_gmt":"2020-06-16T15:51:40","guid":{"rendered":"https:\/\/www.hostnic.id\/blog\/?p=3362"},"modified":"2020-06-17T12:11:32","modified_gmt":"2020-06-17T12:11:32","slug":"cara-membuat-navbar-mudah","status":"publish","type":"post","link":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/","title":{"rendered":"Cara membuat navbar mudah"},"content":{"rendered":"

Hallo sobat Hostnic…<\/p>\n

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.<\/p>\n

Baca sebelumnya :
\nCara menambahkan Favicon \/ icon pada Judul Website<\/a><\/p>\n

Disini mimin akan membuat navbar dengan library Bootstrap 4. Langsung saja…<\/p>\n

    \n
  1. Buka website Bootstrap 4 lalu cari navbar atau<\/li>\n

    disini<\/a><\/p>\n

  2. Cari model navbar yang kalian butuhkan<\/li>\n

    \"\"<\/p>\n

  3. Salin script yang ada diwebsite kedalam file HTML\/PHP kamu<\/li>\n

    \"\"<\/p>\n

  4. Cek apakah berhasil atau tidak pada web browser<\/li>\n

    \"\"<\/p>\n

  5. Lakukan improvisasi pada navbar yang kalian inginkan<\/li>\n

    \"\"<\/p>\n<\/ol>\n

    Sekian yang bisa mimin dapat bagikan, membuat navbar sekarang bisa lebih mudah hanya mengambil dari library Bootstrap 4 saja. Jadi untuk web developer pun tidak menghabiskan waktu untuk mengoding navbar.
    \nSelamat mencoba…<\/p>\n","protected":false},"excerpt":{"rendered":"

    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 : Cara menambahkan Favicon \/ icon […]<\/p>\n","protected":false},"author":18,"featured_media":3368,"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-3362","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-tutorial","category-v4","category-website"],"yoast_head":"\nCara membuat navbar mudah - 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\/cara-membuat-navbar-mudah\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara membuat navbar mudah - Hostnic.id\" \/>\n<meta property=\"og:description\" content=\"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 : Cara menambahkan Favicon \/ icon […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostnic.id\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-16T15:51:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-17T12:11:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?v=1592395288\" \/>\n\t<meta property=\"og:image:width\" content=\"1365\" \/>\n\t<meta property=\"og:image:height\" content=\"696\" \/>\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\\\/cara-membuat-navbar-mudah\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/\"},\"author\":{\"name\":\"Monic\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"headline\":\"Cara membuat navbar mudah\",\"datePublished\":\"2020-06-16T15:51:40+00:00\",\"dateModified\":\"2020-06-17T12:11:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/\"},\"wordCount\":140,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Screenshot_2-3.png?fit=1365%2C696&ssl=1?v=1592395288\",\"articleSection\":[\"Bootstrap\",\"Tutorial\",\"v4\",\"Website\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/\",\"name\":\"Cara membuat navbar mudah - Hostnic.id\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Screenshot_2-3.png?fit=1365%2C696&ssl=1?v=1592395288\",\"datePublished\":\"2020-06-16T15:51:40+00:00\",\"dateModified\":\"2020-06-17T12:11:32+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Screenshot_2-3.png?fit=1365%2C696&ssl=1?v=1592395288\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Screenshot_2-3.png?fit=1365%2C696&ssl=1?v=1592395288\",\"width\":1365,\"height\":696},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/cara-membuat-navbar-mudah\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara membuat navbar mudah\"}]},{\"@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":"Cara membuat navbar mudah - 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\/cara-membuat-navbar-mudah\/","og_locale":"id_ID","og_type":"article","og_title":"Cara membuat navbar mudah - Hostnic.id","og_description":"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 : Cara menambahkan Favicon \/ icon […]","og_url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/","og_site_name":"Hostnic.id","article_published_time":"2020-06-16T15:51:40+00:00","article_modified_time":"2020-06-17T12:11:32+00:00","og_image":[{"width":1365,"height":696,"url":"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?v=1592395288","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\/cara-membuat-navbar-mudah\/#article","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/"},"author":{"name":"Monic","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"headline":"Cara membuat navbar mudah","datePublished":"2020-06-16T15:51:40+00:00","dateModified":"2020-06-17T12:11:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/"},"wordCount":140,"commentCount":0,"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1365%2C696&ssl=1?v=1592395288","articleSection":["Bootstrap","Tutorial","v4","Website"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/","url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/","name":"Cara membuat navbar mudah - Hostnic.id","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/#primaryimage"},"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1365%2C696&ssl=1?v=1592395288","datePublished":"2020-06-16T15:51:40+00:00","dateModified":"2020-06-17T12:11:32+00:00","author":{"@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"breadcrumb":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/#primaryimage","url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1365%2C696&ssl=1?v=1592395288","contentUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/Screenshot_2-3.png?fit=1365%2C696&ssl=1?v=1592395288","width":1365,"height":696},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnic.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara membuat navbar mudah"}]},{"@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_2-3.png?fit=1365%2C696&ssl=1?v=1592395288","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8D2mv-Se","jetpack-related-posts":[{"id":3377,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/","url_meta":{"origin":3362,"position":0},"title":"Membuat navbar lebih rapih","author":"Monic","date":"2020-06-17","format":false,"excerpt":"\u00a0 Hallo sobat Hostnic... 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 \u00a0 Nah\u2026","rel":"","context":"dalam "Bootstrap"","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":3373,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menghubungkan-html-dengan-css\/","url_meta":{"origin":3362,"position":1},"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 "Bootstrap"","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":3393,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/","url_meta":{"origin":3362,"position":2},"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 "Bootstrap"","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":3362,"position":3},"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 "Teknologi"","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":3486,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/","url_meta":{"origin":3362,"position":4},"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 "Bootstrap"","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":3237,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/cara-menggunakan-bootstrap\/","url_meta":{"origin":3362,"position":5},"title":"Cara menggunakan Bootstrap 4 di Website (Offline)","author":"Monic","date":"2020-06-10","format":false,"excerpt":"Hai sobat hostnic... Kali ini mimin mau share nih cara menggunakan Bootstrap di Website kamu. Sebelumnya mimin udah share cara install aplikasi text editor yang akan kita gunakan nanti untuk coding website ini. Silahkan dibaca dulu Cara Install VS Code (Visual Studio Code) Pengertian Bootstrap \u00a0Bootstrap merupakan sebuah library framework\u2026","rel":"","context":"dalam "Website"","block_context":{"text":"Website","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/06\/1_9HanDsRU11ZMsgDGJwN96w.png?fit=1024%2C860&ssl=1%3Fv%3D1591800030&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3362","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=3362"}],"version-history":[{"count":3,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3362\/revisions"}],"predecessor-version":[{"id":3372,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3362\/revisions\/3372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media\/3368"}],"wp:attachment":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media?parent=3362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/categories?post=3362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/tags?post=3362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}