<style>/*<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4147900496059744420&zx=9643909b-d422-4ec2-94b7-798915146919' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4147900496059744420&zx=9643909b-d422-4ec2-94b7-798915146919' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8134287425360604&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-8134287425360604 -->

</head><body>*/</style>

Cara Membuat Tampilan Web Menjadi Responsif Di Semua Perangkat

Bareh

22 Nov, 2022

Cara Membuat Tampilan Web Menjadi Responsif Di Semua Perangkat

Desain Web Responsif adalah cara untuk membuat situs web kamu terlihat menarik di semua ukuran perangkat.

Desain Web Responsif adalah cara untuk membuat situs web kamu menarik di berbagai jenis perangkat. Kita tahu bahwa saat ini orang mengakses website, ada yang dari ponsel, tablet, atau bahkan yang berukuran besar seperti televisi. Karena itu penting untuk membuat website kamu menjadi responsif.

Ada banyak teknik untuk membuat website kamu menjadi responsif, tanpa perlu membuat atau mengubah setiap tampilannya secara keseluruhan.

Yang pasti adalah, kamu perlu memberi tahu halaman tersebut jika tidak ingin diperbesar pada perangkat yang lebih kecil.

Berikut ini adalah potongan kode untuk membuat situs web kamu menjadi responsif :

<meta name="viewport" content="width=device-width, initial-scale=1">

Bungkus potongan kode tersebut dalam tag <head></head>, seperti potongan kode dibawah ini :

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Berikut ini contoh tampilan web yang belum responsif :

Tampilan web yang belum responsif

Berikut ini contoh tampilan web yang telah ditambahkan potongan kode diatas, sehingga menjadi responsif :

Tampilan web yang telah responsif

Sekian pembahasan tutorial Cara Membuat Tampilan Web Menjadi Responsif Di Semua Perangkat. Bagaimana menurut kamu tentang tutorial di atas, apakah cukup membantu? Kalau masih bingung komen aja di bawah! Terima kasih.

Bareh

Comparing two bad things doesn't make one of them better.

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7W4FX7K8H6ZCN8s-zOf6c0vtls1g:1732564124946';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4147900496059744420','//www.codein.my.id/2022/11/cara-membuat-tampilan-web-menjadi.html','4147900496059744420');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4147900496059744420', 'title': 'CODEin', 'url': 'https://www.codein.my.id/2022/11/cara-membuat-tampilan-web-menjadi.html', 'canonicalUrl': 'https://www.codein.my.id/2022/11/cara-membuat-tampilan-web-menjadi.html', 'homepageUrl': 'https://www.codein.my.id/', 'searchUrl': 'https://www.codein.my.id/search', 'canonicalHomepageUrl': 'https://www.codein.my.id/', 'blogspotFaviconUrl': 'https://www.codein.my.id/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-244888837-1', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', '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\x22CODEin - Atom\x22 href\x3d\x22https://www.codein.my.id/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22CODEin - RSS\x22 href\x3d\x22https://www.codein.my.id/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22CODEin - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/4147900496059744420/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22CODEin - Atom\x22 href\x3d\x22https://www.codein.my.id/feeds/5869520480522987223/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-8134287425360604', '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/da8f33dd880cc4f1', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to 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: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '5869520480522987223', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijm-bKopOEQQkc4wV57ysaL0rY6DkrZAt4kk7xU1sx7DWpOIeHA-4s3KNXkDOpcf9fqse0zFA3NGdOOZO2xZzPVrFyoh-1SF44q6DNxFUfL8jHYvEHKy5oAtEiv8uGtnumwGhMmZ3Aq0JF5GOMnvF66jkhyerOSOPPwZoX9lbnZQq3-Fxdqc-eSxC_5w/s72-c/responsive_web_design-min.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijm-bKopOEQQkc4wV57ysaL0rY6DkrZAt4kk7xU1sx7DWpOIeHA-4s3KNXkDOpcf9fqse0zFA3NGdOOZO2xZzPVrFyoh-1SF44q6DNxFUfL8jHYvEHKy5oAtEiv8uGtnumwGhMmZ3Aq0JF5GOMnvF66jkhyerOSOPPwZoX9lbnZQq3-Fxdqc-eSxC_5w/s16000/responsive_web_design-min.jpg', 'pageName': 'Cara Membuat Tampilan Web Menjadi Responsif Di Semua Perangkat', 'pageTitle': 'CODEin: Cara Membuat Tampilan Web Menjadi Responsif Di Semua Perangkat', 'metaDescription': 'Temukan cara mudah membuat tampilan website yang responsif di semua perangkat dengan teknik desain responsif. Tingkatkan pengalaman pengguna Anda.'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', '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 Membuat Tampilan Web Menjadi Responsif Di Semua Perangkat', 'description': 'Temukan cara mudah membuat tampilan website yang responsif di semua perangkat dengan teknik desain responsif. Tingkatkan pengalaman pengguna Anda.', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijm-bKopOEQQkc4wV57ysaL0rY6DkrZAt4kk7xU1sx7DWpOIeHA-4s3KNXkDOpcf9fqse0zFA3NGdOOZO2xZzPVrFyoh-1SF44q6DNxFUfL8jHYvEHKy5oAtEiv8uGtnumwGhMmZ3Aq0JF5GOMnvF66jkhyerOSOPPwZoX9lbnZQq3-Fxdqc-eSxC_5w/s16000/responsive_web_design-min.jpg', 'url': 'https://www.codein.my.id/2022/11/cara-membuat-tampilan-web-menjadi.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 5869520480522987223}}, {'name': 'widgets', 'data': [{'title': 'Logo', 'type': 'HTML', 'sectionId': 'header-main', 'id': 'HTML10'}, {'title': 'Icons, Dark, Search', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList10'}, {'title': 'Menu', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList11'}, {'title': '#ads', 'type': 'HTML', 'sectionId': 'before-blog', 'id': 'HTML1'}, {'title': '#ads', 'type': 'HTML', 'sectionId': 'before-post', 'id': 'HTML2'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'blog-post', 'id': 'Blog1', 'posts': [{'id': '5869520480522987223', 'title': 'Cara Membuat Tampilan Web Menjadi Responsif Di Semua Perangkat', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijm-bKopOEQQkc4wV57ysaL0rY6DkrZAt4kk7xU1sx7DWpOIeHA-4s3KNXkDOpcf9fqse0zFA3NGdOOZO2xZzPVrFyoh-1SF44q6DNxFUfL8jHYvEHKy5oAtEiv8uGtnumwGhMmZ3Aq0JF5GOMnvF66jkhyerOSOPPwZoX9lbnZQq3-Fxdqc-eSxC_5w/s16000/responsive_web_design-min.jpg', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': 'd MMM, yyyy'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Labels:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': 'd MMM, yyyy'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'icons', 'label': ''}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'Labels:'}]}, {'title': '#You may also like', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML15'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'sidebar-static', 'id': 'PopularPosts10', 'posts': [{'title': 'Download NetBeans 8.2 dan JDK 8u231: Cara Install dengan Gambar', 'id': 8671065171286002469}, {'title': 'Cara Hosting Web di InfinityFree', 'id': 4090541664125966658}, {'title': 'Cara Unggah File Situs Web Dengan Menggunakan FileZilla', 'id': 8369800170722494852}, {'title': 'Cara Menyimpan Halaman Web (Full Page) Menjadi Gambar (JPG, PNG, \x26 PDF)', 'id': 8663584697463169597}, {'title': 'SEO vs SEM: Apa Perbedaan dan Mana yang Lebih Baik untuk Bisnis Anda?', 'id': 1126498958708981883}]}, {'title': 'This Blog is protected by DMCA.com', 'type': 'HTML', 'sectionId': 'sidebar-sticky', 'id': 'HTML8'}, {'title': '#ads', 'type': 'HTML', 'sectionId': 'sidebar-sticky', 'id': 'HTML7'}, {'title': 'Information', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList1'}, {'title': 'Learn More', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList13'}, {'title': 'Newsletter', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML22'}, {'title': 'Copyright', 'type': 'HTML', 'sectionId': 'copyright', 'id': 'HTML23'}, {'title': 'SVG Icons', 'type': 'HTML', 'sectionId': 'jet-options', 'id': 'HTML24'}]}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML10', 'header-main', document.getElementById('HTML10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList10', 'header-main', document.getElementById('LinkList10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList11', 'header-main', document.getElementById('LinkList11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'before-blog', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'before-post', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'blog-post', 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('_HTMLView', new _WidgetInfo('HTML15', 'ads-post', document.getElementById('HTML15'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts10', 'sidebar-static', document.getElementById('PopularPosts10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML8', 'sidebar-sticky', document.getElementById('HTML8'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML7', 'sidebar-sticky', document.getElementById('HTML7'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'footer-widget', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList13', 'footer-widget', document.getElementById('LinkList13'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML22', 'footer-widget', document.getElementById('HTML22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML23', 'copyright', document.getElementById('HTML23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML24', 'jet-options', document.getElementById('HTML24'), {}, 'displayModeFull'));
</script>
</body>*/</style>