{"id":3486,"date":"2020-07-02T10:13:08","date_gmt":"2020-07-02T10:13:08","guid":{"rendered":"https:\/\/www.hostnic.id\/blog\/?p=3486"},"modified":"2020-07-02T10:13:08","modified_gmt":"2020-07-02T10:13:08","slug":"membuat-jumbotron-di-website","status":"publish","type":"post","link":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/","title":{"rendered":"Membuat jumbotron di Website"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3489\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/attachment\/screenshot_14\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1365%2C667&amp;ssl=1?v=1593684479\" data-orig-size=\"1365,667\" 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_14\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1024%2C500&amp;ssl=1?v=1593684479\" class=\"aligncenter size-medium wp-image-3489\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?resize=300%2C147&#038;ssl=1\" alt=\"\" width=\"300\" height=\"147\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?resize=300%2C147&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?resize=1024%2C500&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?resize=768%2C375&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?w=1365&amp;ssl=1 1365w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Hallo sobat Hostnic&#8230;<\/p>\n<p>Oke, kita lanjutkan project website yang sudah pernah kita buat. Kali ini kita akan membuat jumbotron di website kita.<\/p>\n<p>Apa sih Jumbotron itu ?<\/p>\n<p>Jumbotron merupakan suatu elemen pada website yang digunakan untuk menyampaikan informasi dari website atau pengumuman pada website. Website yang akan kita buat adalah portfolio maka dari itu jumbotron yang kita buat berisi informasi dari cv kita.<\/p>\n<p>Sebelumnya kita sudah membuat navbar atau navigation bar.<\/p>\n<p>Baca disini :\u00a0<a href=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/\">Membuat navbar lebih rapih<\/a><\/p>\n<p>Selanjutnya mari eksekusi :<\/p>\n<ol>\n<li>Buka VS Code kalian<\/li>\n<li>Open folder website kalian<\/li>\n<li>Masukkan script html tersebut<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3487\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/attachment\/screenshot_11-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_11.png?fit=1365%2C727&amp;ssl=1?v=1593684023\" data-orig-size=\"1365,727\" 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_11\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_11.png?fit=1024%2C545&amp;ssl=1?v=1593684023\" class=\"aligncenter  wp-image-3487\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_11.png?resize=684%2C365&#038;ssl=1\" alt=\"\" width=\"684\" height=\"365\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_11.png?resize=300%2C160&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_11.png?resize=1024%2C545&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_11.png?resize=768%2C409&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_11.png?w=1365&amp;ssl=1 1365w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" \/><\/li>\n<li>Lalu masukkan script css ini<img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"3488\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/attachment\/screenshot_12-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_12.png?fit=1365%2C729&amp;ssl=1?v=1593684080\" data-orig-size=\"1365,729\" 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_12\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_12.png?fit=1024%2C547&amp;ssl=1?v=1593684080\" class=\"aligncenter  wp-image-3488\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_12.png?resize=696%2C371&#038;ssl=1\" alt=\"\" width=\"696\" height=\"371\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_12.png?resize=300%2C160&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_12.png?resize=1024%2C547&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_12.png?resize=768%2C410&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_12.png?w=1365&amp;ssl=1 1365w\" sizes=\"auto, (max-width: 696px) 100vw, 696px\" \/><\/li>\n<li>Sebelum dan sesudah script tersebut tandai dengan komentar<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>Untuk script lengkap html dan css nya bisa di download\u00a0<a href=\"https:\/\/drive.google.com\/file\/d\/1Nwp5GMoGEZ852zNfTsgoCyInUF-HmIVm\/view?usp=sharing\" target=\"_blank\" rel=\"noopener noreferrer\">disini<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Hallo sobat Hostnic&#8230; 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 adalah portfolio maka dari itu [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":3489,"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,82],"tags":[],"class_list":["post-3486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-tutorial","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 jumbotron di Website - 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-jumbotron-di-website\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat jumbotron di Website - Hostnic.id\" \/>\n<meta property=\"og:description\" content=\"&nbsp; Hallo sobat Hostnic&#8230; 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 adalah portfolio maka dari itu [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostnic.id\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-02T10:13:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?v=1593684479\" \/>\n\t<meta property=\"og:image:width\" content=\"1365\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\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-jumbotron-di-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/\"},\"author\":{\"name\":\"Monic\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"headline\":\"Membuat jumbotron di Website\",\"datePublished\":\"2020-07-02T10:13:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/\"},\"wordCount\":121,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screenshot_14.png?fit=1365%2C667&ssl=1?v=1593684479\",\"articleSection\":[\"Bootstrap\",\"Tutorial\",\"Website\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/\",\"name\":\"Membuat jumbotron di Website - Hostnic.id\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screenshot_14.png?fit=1365%2C667&ssl=1?v=1593684479\",\"datePublished\":\"2020-07-02T10:13:08+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screenshot_14.png?fit=1365%2C667&ssl=1?v=1593684479\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/Screenshot_14.png?fit=1365%2C667&ssl=1?v=1593684479\",\"width\":1365,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/membuat-jumbotron-di-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat jumbotron di Website\"}]},{\"@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 jumbotron di Website - 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-jumbotron-di-website\/","og_locale":"id_ID","og_type":"article","og_title":"Membuat jumbotron di Website - Hostnic.id","og_description":"&nbsp; Hallo sobat Hostnic&#8230; 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 adalah portfolio maka dari itu [&hellip;]","og_url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/","og_site_name":"Hostnic.id","article_published_time":"2020-07-02T10:13:08+00:00","og_image":[{"width":1365,"height":667,"url":"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?v=1593684479","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-jumbotron-di-website\/#article","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/"},"author":{"name":"Monic","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"headline":"Membuat jumbotron di Website","datePublished":"2020-07-02T10:13:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/"},"wordCount":121,"commentCount":1,"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1365%2C667&ssl=1?v=1593684479","articleSection":["Bootstrap","Tutorial","Website"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/","url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/","name":"Membuat jumbotron di Website - Hostnic.id","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/#primaryimage"},"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1365%2C667&ssl=1?v=1593684479","datePublished":"2020-07-02T10:13:08+00:00","author":{"@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"breadcrumb":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/#primaryimage","url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1365%2C667&ssl=1?v=1593684479","contentUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_14.png?fit=1365%2C667&ssl=1?v=1593684479","width":1365,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-jumbotron-di-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnic.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Membuat jumbotron di Website"}]},{"@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\/07\/Screenshot_14.png?fit=1365%2C667&ssl=1?v=1593684479","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8D2mv-Ue","jetpack-related-posts":[{"id":3377,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-navbar-lebih-rapih\/","url_meta":{"origin":3486,"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 &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":3492,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/membuat-efek-ketikan-pada-text-di-website\/","url_meta":{"origin":3486,"position":1},"title":"Membuat efek ketikan pada text di Website","author":"Monic","date":"2020-07-03","format":false,"excerpt":"Pernah gak sih kalian menemukan website terus ngeliat ada tulisan yang kaya diketik gitu padahal kita gak mencet apa-apa ? Tenang itu bukan hantu kok hehehe, itu adalah sebuah fungsi yang dipakai oleh web developer untuk mempercantik tampilan webnya. Terus gimana buatnya ? Iya nanti mimin kasih tau kok caranya\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_15.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\/07\/Screenshot_15.png?fit=1200%2C674&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?fit=1200%2C674&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?fit=1200%2C674&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_15.png?fit=1200%2C674&ssl=1&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":3486,"position":2},"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":3362,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-membuat-navbar-mudah\/","url_meta":{"origin":3486,"position":3},"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":3373,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menghubungkan-html-dengan-css\/","url_meta":{"origin":3486,"position":4},"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":3393,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/cara-menambahkan-icon-di-website\/","url_meta":{"origin":3486,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3486","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=3486"}],"version-history":[{"count":1,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3486\/revisions"}],"predecessor-version":[{"id":3490,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/3486\/revisions\/3490"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media\/3489"}],"wp:attachment":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media?parent=3486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/categories?post=3486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/tags?post=3486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}