CSS - Nubie Program

<style>/*<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

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

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

HTML Code Tester Sederhana dengan Fungsi Preview Dinamis

Dalam era digital saat ini, kemampuan untuk menguji dan menampilkan kode HTML secara cepat dan efisien menjadi sangat penting bagi pengemba...

18 Jan, 2024

CSS , HTML

Crop Image pada HTML dengan CSS Object-Fit

Kali ini gue mau ngasih tau tips trik gimana caranya menampilkan gambar yg ter-crop dengan menggunakan CSS dan HTML. Misal, pernah kan punya...

22 Oct, 2020

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1807328581-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5gec1rta-amMIttSUaUeHR6ldKdw:1714208402807';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3832545569691888627','//nubieprogram.blogspot.com/search/label/CSS?max-results\x3d10','3832545569691888627');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3832545569691888627', 'title': 'Nubie Program', 'url': 'https://nubieprogram.blogspot.com/search/label/CSS?max-results\x3d10', 'canonicalUrl': 'https://nubieprogram.blogspot.com/search/label/CSS?max-results\x3d10', 'homepageUrl': 'https://nubieprogram.blogspot.com/', 'searchUrl': 'https://nubieprogram.blogspot.com/search', 'canonicalHomepageUrl': 'https://nubieprogram.blogspot.com/', 'blogspotFaviconUrl': 'https://nubieprogram.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', '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\x22Nubie Program - Atom\x22 href\x3d\x22https://nubieprogram.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Nubie Program - RSS\x22 href\x3d\x22https://nubieprogram.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nubie Program - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3832545569691888627/posts/default\x22 /\x3e\n', 'meTag': '\x3clink rel\x3d\x22me\x22 href\x3d\x22https://www.blogger.com/profile/11421763528817788909\x22 /\x3e\n', 'adsenseClientId': 'ca-pub-5689893095572067', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/16e657cb9c57b8a2', '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': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', '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': 'index', 'searchLabel': 'CSS', 'pageName': 'CSS', 'pageTitle': 'Nubie Program: CSS'}}, {'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': 'Nubie Program', 'description': 'Kumpulan kode program untuk belajar pemograman dasar', 'url': 'https://nubieprogram.blogspot.com/search/label/CSS?max-results\x3d10', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': false, 'isSearch': true, 'isLabelSearch': true, 'search': {'label': 'CSS', 'resultsMessage': 'Showing posts with the label CSS', 'resultsMessageHtml': 'Showing posts with the label \x3cspan class\x3d\x27search-label\x27\x3eCSS\x3c/span\x3e'}}}, {'name': 'widgets', 'data': [{'title': 'Upload Image', 'type': 'Image', 'sectionId': 'upload-image', 'id': 'Image10'}, {'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': '#CSS Related Article', 'type': 'HTML', 'sectionId': 'before-post', 'id': 'HTML1'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'blog-post', 'id': 'Blog1', 'posts': [{'id': '6037934246967179977', 'title': 'HTML Code Tester Sederhana dengan Fungsi Preview Dinamis', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR49kL29Mu_9TM-ul1AMYaTbKKB9eMDnXTfpPByRN4dNnu_1uAplJyDZUqSimRF-FlM7PU3NoFbFzXICVyX92TlQC-aA7O1J07tXywCqwtcoqs8iL-ekFHdUZxXiuxHQTmkQBSD6x-XXk/s320/JavaScript.jpg', 'showInlineAds': false}, {'id': '4573232559570399812', 'title': 'Crop Image pada HTML dengan CSS Object-Fit', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyexr9NAU77pdIkI5nirljGHsMFtrzjwRvy27hPPKWo0GSiUtxLzCoZgwfr9T1U_r1sNApyBeWDCXrH1v-6VuC7JpjnDyGOMQW14gBtsiGqdFe9LuNHjFTYH5En3rye5wA2ZS6emh4l2E/w320-h320/HTML-CSS.jpg', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'timestamp', 'label': 'd MMM, yyyy'}, {'name': 'share', 'label': ''}, {'name': 'backlinks', 'label': 'You might like'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Tags'}]}, {'regionName': 'footer3', 'items': [{'name': 'reactions', 'label': 'Post Navi'}]}], 'allBylineItems': [{'name': 'timestamp', 'label': 'd MMM, yyyy'}, {'name': 'share', 'label': ''}, {'name': 'backlinks', 'label': 'You might like'}, {'name': 'labels', 'label': 'Tags'}, {'name': 'reactions', 'label': 'Post Navi'}]}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML13'}, {'title': '#You may also like', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML15'}, {'title': 'Translate', 'type': 'Translate', 'sectionId': 'sidebar-static', 'id': 'Translate1'}, {'title': '#Recent Post', 'type': 'HTML', 'sectionId': 'sidebar-static', 'id': 'HTML19'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'sidebar-static', 'id': 'PopularPosts10', 'posts': [{'title': 'Crop Image pada HTML dengan CSS Object-Fit', 'id': 4573232559570399812}, {'title': 'FIXED : PHP module not installed pada Owncloud X', 'id': 894086463956048593}, {'title': 'Install dan Update PHP 7.2 Pada Ubuntu 18.04 LTS', 'id': 6219307083037706912}, {'title': 'Cara Menghapus White Space dan Karater dengan Trim() di PHP', 'id': 4358390860916746289}, {'title': 'Membaca BASEURL dan URL Segment di Javascript', 'id': 3033185426614208796}]}, {'title': 'About Us', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML21'}, {'title': 'Bahasa Pemograman', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList13'}, {'title': 'Blogroll', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList1'}, {'title': 'Newsletter', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML22'}, {'title': '#Code Style', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML2'}, {'title': 'Copyright', 'type': 'HTML', 'sectionId': 'copyright', 'id': 'HTML23'}, {'title': 'SVG Icons', 'type': 'HTML', 'sectionId': 'jet-options', 'id': 'HTML24'}]}]);
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image10', 'upload-image', document.getElementById('Image10'), {'resize': false}, 'displayModeFull'));
_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-post', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'blog-post', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'navMessage': 'Showing posts with label \x3cb\x3eCSS\x3c/b\x3e. \x3ca href\x3d\x22https://nubieprogram.blogspot.com/\x22\x3eShow all posts\x3c/a\x3e', 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1666805145-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML13', 'ads-post', document.getElementById('HTML13'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML15', 'ads-post', document.getElementById('HTML15'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TranslateView', new _WidgetInfo('Translate1', 'sidebar-static', document.getElementById('Translate1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML19', 'sidebar-static', document.getElementById('HTML19'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts10', 'sidebar-static', document.getElementById('PopularPosts10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'footer-widget', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList13', 'footer-widget', document.getElementById('LinkList13'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'footer-widget', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML22', 'footer-widget', document.getElementById('HTML22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'footer-widget', document.getElementById('HTML2'), {}, '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>