Maaf, situs ini tidak berfungsi dengan baik tanpa JavaScript.

Cara Gampang Integrasikan Material Design 3 dengan bundle.js

- Maret 13, 2024

Pernah denger ‘Material Design 3’? Itu lho, desain terbaru dari Google yang bikin UI aplikasi kamu makin ciamik. Nah, kali ini aku mau kasih tau gimana caranya membuat halaman dengan Material Design 3 dengan file bundle.js yang telah di render. Di file ini udah include semua yang kamu butuh buat Material Design 3, file ini layaknya css. Gak perlu ribet, cukup ikutin langkah-langkah di bawah ini.

Caranya, bisa dengan cara copas dari https://nanangsb.github.io/material/bundle.js dan letakkan ke head HTML kamu atau import di file JS dengan script di bawah.

 <script src="https://nanangsb.github.io/material/bundle.js"></script>

Mulai Gunakan Komponen Sekarang kamu bisa mulai gunakan komponen-komponen Material Design 3. Mau button, card, atau apa aja, tinggal pilih dan sesuaikan dengan kebutuhanmu. Untuk dokumentasinya bisa dilihat di https://github.com/material-components/material-web/tree/main/docs/components

Gimana? Gampang kan? Dengan cara ini, kamu bisa bikin aplikasi atau website yang gak cuma fungsional, tapi juga punya tampilan yang modern dan menarik. Selamat mencoba, dan semoga sukses dengan proyekmu!

Semoga artikel singkat ini bisa membantu kamu dalam membuat blog catatanmu. Kalau ada yang mau ditanyakan lagi, jangan ragu buat nanya, ya!

Nanang SB

Berdakwah dengan media

Komentar


<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY65v5SfStyYWdb_IkiPOaRzldzCyA:1732170611228';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1832080860071802872','//www.nanang.id/2024/03/cara-gampang-integrasikan-material.html','1832080860071802872');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1832080860071802872', 'title': 'Nanang', 'url': 'https://www.nanang.id/2024/03/cara-gampang-integrasikan-material.html', 'canonicalUrl': 'https://www.nanang.id/2024/03/cara-gampang-integrasikan-material.html', 'homepageUrl': 'https://www.nanang.id/', 'searchUrl': 'https://www.nanang.id/search', 'canonicalHomepageUrl': 'https://www.nanang.id/', 'blogspotFaviconUrl': 'https://www.nanang.id/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'id', 'localeUnderscoreDelimited': 'id', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nanang - Atom\x22 href\x3d\x22https://www.nanang.id/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Nanang - RSS\x22 href\x3d\x22https://www.nanang.id/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nanang - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1832080860071802872/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nanang - Atom\x22 href\x3d\x22https://www.nanang.id/feeds/5336646285800045524/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-9476201042763346', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/8f7002974bbf4dbb', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Dapatkan link', 'key': 'link', 'shareMessage': 'Dapatkan link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Bagikan ke Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Bagikan ke X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Bagikan ke Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27id\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Baca selengkapnya', 'pageType': 'item', 'postId': '5336646285800045524', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1yF59jzQRhzTlL0gDadsoSgD-bdRUz5nt6VTyWvzM6ySuSAu0uoqpekB8iEtSR3I4NyrgmoIIh0XRzLIskgGb9hKuRFcdDt57QpFouo-BTxhmXcMXFdX1yc10A06pD-k6xQzLtCo7rT35RVt71E5MvWyrBcPGjY-cJ6BOyj8UvewV2pO615U1vQpf5Pc/s72-c/Screenshot_2024-03-13-18-40-59-993-edit_com.android.chrome.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1yF59jzQRhzTlL0gDadsoSgD-bdRUz5nt6VTyWvzM6ySuSAu0uoqpekB8iEtSR3I4NyrgmoIIh0XRzLIskgGb9hKuRFcdDt57QpFouo-BTxhmXcMXFdX1yc10A06pD-k6xQzLtCo7rT35RVt71E5MvWyrBcPGjY-cJ6BOyj8UvewV2pO615U1vQpf5Pc/s16000/Screenshot_2024-03-13-18-40-59-993-edit_com.android.chrome.jpg', 'pageName': 'Cara Gampang Integrasikan Material Design 3 dengan bundle.js', 'pageTitle': 'Nanang: Cara Gampang Integrasikan Material Design 3 dengan bundle.js'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Khusus', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Cara Gampang Integrasikan Material Design 3 dengan bundle.js', 'description': 'Pernah denger \u2018Material Design 3\u2019? Itu lho, desain terbaru dari Google yang bikin UI aplikasi kamu makin ciamik. Nah, kali ini aku mau kasih...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1yF59jzQRhzTlL0gDadsoSgD-bdRUz5nt6VTyWvzM6ySuSAu0uoqpekB8iEtSR3I4NyrgmoIIh0XRzLIskgGb9hKuRFcdDt57QpFouo-BTxhmXcMXFdX1yc10A06pD-k6xQzLtCo7rT35RVt71E5MvWyrBcPGjY-cJ6BOyj8UvewV2pO615U1vQpf5Pc/s16000/Screenshot_2024-03-13-18-40-59-993-edit_com.android.chrome.jpg', 'url': 'https://www.nanang.id/2024/03/cara-gampang-integrasikan-material.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 5336646285800045524}}, {'name': 'widgets', 'data': [{'title': 'Custom SVG Icons', 'type': 'LinkList', 'sectionId': 'elcreative_panel_top', 'id': 'LinkList998'}, {'title': 'Custom SVG Pack (SVG Sprites)', 'type': 'HTML', 'sectionId': 'elcreative_panel_top', 'id': 'HTML994'}, {'title': 'Nanang (Header)', 'type': 'Header', 'sectionId': 'section_app_bar', 'id': 'Header1'}, {'title': 'Navigation Drawer Menu', 'type': 'LinkList', 'sectionId': 'section_navigation', 'id': 'LinkList999'}, {'title': 'More Menu', 'type': 'PageList', 'sectionId': 'section_navigation', 'id': 'PageList999'}, {'title': 'Posts Label Search Description', 'type': 'LinkList', 'sectionId': 'section_main_widget', 'id': 'LinkList997'}, {'title': 'Postingan Blog', 'type': 'Blog', 'sectionId': 'section_main_widget', 'id': 'Blog1', 'posts': [{'id': '5336646285800045524', 'title': 'Cara Gampang Integrasikan Material Design 3 dengan bundle.js', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1yF59jzQRhzTlL0gDadsoSgD-bdRUz5nt6VTyWvzM6ySuSAu0uoqpekB8iEtSR3I4NyrgmoIIh0XRzLIskgGb9hKuRFcdDt57QpFouo-BTxhmXcMXFdX1yc10A06pD-k6xQzLtCo7rT35RVt71E5MvWyrBcPGjY-cJ6BOyj8UvewV2pO615U1vQpf5Pc/s16000/Screenshot_2024-03-13-18-40-59-993-edit_com.android.chrome.jpg', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': '-'}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comments'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Label:'}]}], 'allBylineItems': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': '-'}, {'name': 'comments', 'label': 'Comments'}, {'name': 'labels', 'label': 'Label:'}]}, {'title': 'Muslim.or.id', 'type': 'Feed', 'sectionId': 'section_main_bottom_widget', 'id': 'Feed1'}, {'title': 'Label', 'type': 'Label', 'sectionId': 'section_aside_widget', 'id': 'Label1'}, {'title': 'Custom Vanilla JavaScript', 'type': 'HTML', 'sectionId': 'elcreative_panel_bottom', 'id': 'HTML998'}, {'title': 'Custom jQuery Script', 'type': 'HTML', 'sectionId': 'elcreative_panel_bottom', 'id': 'HTML999'}, {'title': 'Formulir Kontak', 'type': 'ContactForm', 'sectionId': 'hidden', 'id': 'ContactForm1'}]}]);
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList998', 'elcreative_panel_top', document.getElementById('LinkList998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML994', 'elcreative_panel_top', document.getElementById('HTML994'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'section_app_bar', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList999', 'section_navigation', document.getElementById('LinkList999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList999', 'section_navigation', document.getElementById('PageList999'), {'title': 'More Menu', 'links': [{'isCurrentPage': false, 'href': 'http://www.nanang.id/', 'title': 'Home'}, {'isCurrentPage': false, 'href': 'https://www.nanang.id/p/privacy-policy.html', 'id': '7420869234303871715', 'title': 'Privacy Policy'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList997', 'section_main_widget', document.getElementById('LinkList997'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'section_main_widget', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2646514562-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeedView', new _WidgetInfo('Feed1', 'section_main_bottom_widget', document.getElementById('Feed1'), {'title': 'Muslim.or.id', 'showItemDate': true, 'showItemAuthor': true, 'feedUrl': 'https://muslim.or.id/feed', 'numItemsShow': 5, 'loadingMsg': 'Memuat...', 'openLinksInNewWindow': false, 'useFeedWidgetServ': 'true'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'section_aside_widget', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML998', 'elcreative_panel_bottom', document.getElementById('HTML998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML999', 'elcreative_panel_bottom', document.getElementById('HTML999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'hidden', document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Mengirim...', 'contactFormMessageSentMsg': 'Pesan sudah dikirim.', 'contactFormMessageNotSentMsg': 'Pesan tidak dapat dikirim. Coba lagi nanti.', 'contactFormInvalidEmailMsg': 'Alamat email harus valid.', 'contactFormEmptyMessageMsg': 'Bidang pesan harus diisi.', 'title': 'Formulir Kontak', 'blogId': '1832080860071802872', 'contactFormNameMsg': 'Nama', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Pesan', 'contactFormSendMsg': 'Kirim', 'contactFormToken': 'AOuZoY592MysVt9Ze4oYE0uNExsGi2_0aw:1732170611229', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>
</body>