Blog: ikramlink.com

Postingan

Belajar Membuat Custom Element Dan Shadow DOM Dasar di Javascript

Ihsan Magazine - Kali ini kita akan mencoba belajar membuat Custom Element dasar di Javascript, apa itu Custom Element? Gampang nya Custom Element se…

Contoh Nested Custom Element Di Javascript

Ketika menggunakan custom element, mungkin terdapat keadaan di mana kita membutuhkan custom element berada di dalam custom element lain. Contohnya, b…

<!DOCTYPE html><html><head></head><body>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/4290687098-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY4cxh1N1OP4eW-vyz-JIJTw6eP3MQ:1714905575231';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2325189521171498965','//www.ikramlink.com/search?updated-max\x3d2020-05-10T09:59:00-07:00\x26max-results\x3d10\x26reverse-paginate\x3dtrue\x26start\x3d10\x26by-date\x3dfalse','2325189521171498965');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2325189521171498965', 'title': 'ikramlink.com', 'url': 'https://www.ikramlink.com/search?updated-max\x3d2020-05-10T09:59:00-07:00\x26max-results\x3d10\x26reverse-paginate\x3dtrue\x26start\x3d10\x26by-date\x3dfalse', 'canonicalUrl': 'https://www.ikramlink.com/search?updated-max\x3d2020-05-10T09:59:00-07:00\x26max-results\x3d10\x26reverse-paginate\x3dtrue\x26start\x3d10\x26by-date\x3dfalse', 'homepageUrl': 'https://www.ikramlink.com/', 'searchUrl': 'https://www.ikramlink.com/search', 'canonicalHomepageUrl': 'https://www.ikramlink.com/', 'blogspotFaviconUrl': 'https://www.ikramlink.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-117925985-1', '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\x22ikramlink.com - Atom\x22 href\x3d\x22https://www.ikramlink.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22ikramlink.com - RSS\x22 href\x3d\x22https://www.ikramlink.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ikramlink.com - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2325189521171498965/posts/default\x22 /\x3e\n', 'meTag': '\x3clink rel\x3d\x22me\x22 href\x3d\x22https://www.blogger.com/profile/07261723555514381852\x22 /\x3e\n', 'adsenseClientId': 'ca-pub-9921482121876360', '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/a26ecadc30bb77e6', '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': 'Twitter', 'key': 'twitter', 'shareMessage': 'Bagikan ke Twitter', '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': true, 'jumpLinkMessage': 'Read more \xbb', 'pageType': 'index', 'pageName': '', 'pageTitle': 'ikramlink.com', 'metaDescription': 'Blog Seputar Teknologi Masa Terkini, blogger, template blogger,Tips Seo, Adsense, Game, Cheat'}}, {'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': 'ikramlink.com', 'description': 'Blog Seputar Teknologi Masa Terkini, blogger, template blogger,Tips Seo, Adsense, Game, Cheat', 'url': 'https://www.ikramlink.com/search?updated-max\x3d2020-05-10T09:59:00-07:00\x26max-results\x3d10\x26reverse-paginate\x3dtrue\x26start\x3d10\x26by-date\x3dfalse', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': false, 'isSearch': true, 'isLabelSearch': false, 'search': {}}}, {'name': 'widgets', 'data': [{'title': 'License Key', 'type': 'HTML', 'sectionId': 'license', 'id': 'HTML15'}, {'title': 'ikramlink.com (Header)', 'type': 'Header', 'sectionId': 'header-title', 'id': 'Header1'}, {'title': 'Try \x27Adventure with ikramlink.com\x27', 'type': 'BlogSearch', 'sectionId': 'header-search', 'id': 'BlogSearch1'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'header-icon', 'id': 'TextList000'}, {'title': 'Contributors', 'type': 'Profile', 'sectionId': 'header-icon', 'id': 'Profile1'}, {'title': 'Additional Menu', 'type': 'PageList', 'sectionId': 'nav-widget-1', 'id': 'PageList002'}, {'title': 'Social Media', 'type': 'LinkList', 'sectionId': 'nav-widget-1', 'id': 'LinkList002'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'nav-widget-2', 'id': 'HTML000'}, {'title': 'Scroll Menu', 'type': 'LinkList', 'sectionId': 'notif-widget', 'id': 'LinkList001'}, {'title': 'Notification', 'type': 'HTML', 'sectionId': 'notif-widget', 'id': 'HTML0'}, {'title': 'Ad Placement', 'type': 'HTML', 'sectionId': 'top-widget', 'id': 'HTML92'}, {'title': 'Pinned Post', 'type': 'FeaturedPost', 'sectionId': 'top-widget', 'id': 'FeaturedPost1', 'postId': '6139423987246643143'}, {'title': 'Ad Placement - Desktop only', 'type': 'HTML', 'sectionId': 'main-widget', 'id': 'HTML93'}, {'title': 'Postingan Blog', 'type': 'Blog', 'sectionId': 'main-widget', 'id': 'Blog1', 'posts': [{'id': '1757691459477955416', 'title': 'Belajar Membuat Custom Element Dan Shadow DOM Dasar di Javascript', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tZl9jHiOdn27bqblGgO78isMw4flHKIlyO9I8tS59Xi8dlVymWpwlj1eCTOvsPn0zuDsZ8pCmYRMPmy_fZ9yLneSKws2LvzIs9SYPMFZiyrbK4PaOkarg4JGK8KR-OJm_V29-gqNuvFFVy2eY76WEkrd84a-DM9CaFBs0t6gabScPMCagfn4LhLCikrKs', 'showInlineAds': false}, {'id': '2459668044679708409', 'title': 'Contoh Nested Custom Element Di Javascript', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sd_gqHUY7_MuOLMZ9IQGNXMKBtt_IbXZ413foAhgLvaX3kRdWDaFxA5C9d9S__2bAsaYkdnbwIDi9VwO7IDux9WwePC3VbSpdMBGiaD6JWahDgq9T4KkJJZAQRGs40kzqE3BwBLr3TJJn654TyGTIoj3s7-K6flNmNliK_F9D6WdH7ybePXAgLpd3bsQ', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'in'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'in'}]}, {'title': 'Cisco', 'type': 'HTML', 'sectionId': 'main-widget', 'id': 'HTML2'}, {'title': 'Android', 'type': 'HTML', 'sectionId': 'main-widget', 'id': 'HTML3'}, {'title': 'Middle Post Ad 01', 'type': 'HTML', 'sectionId': 'main-widget', 'id': 'HTML01'}, {'title': 'Middle Post Ad 02', 'type': 'HTML', 'sectionId': 'main-widget', 'id': 'HTML02'}, {'title': 'Recurring Post Ad', 'type': 'HTML', 'sectionId': 'main-widget', 'id': 'HTML04'}, {'title': 'Ad Placement', 'type': 'HTML', 'sectionId': 'add-widget', 'id': 'HTML94'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'side-widget', 'id': 'PopularPosts00', 'posts': [{'title': 'Kunci Jawaban Game Bot Tebak Tebakan di Grup Line', 'id': 2384773347808183333}, {'title': 'Perbedaan mode Trunk dan Access', 'id': 750231723904995114}, {'title': 'Cara Membuat Objek Transparan di CorelDraw X7', 'id': 7371325039037368390}, {'title': 'Kode Whatsapp error dengan menekan tombol titik Hitam', 'id': 2247417601310593460}, {'title': 'Cara Mengaktifkan USB OTG di Realme 2 Pro', 'id': 4229479528199076335}]}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'side-widget', 'id': 'Label00'}, {'title': 'Table of contents', 'type': 'HTML', 'sectionId': 'side-widget', 'id': 'HTML11'}, {'title': 'Sticky Ad - Desktop only', 'type': 'HTML', 'sectionId': 'side-sticky', 'id': 'HTML95'}, {'title': 'Mobile Menu', 'type': 'TextList', 'sectionId': 'mobile-menu', 'id': 'TextList99'}, {'title': 'Made with coffee by', 'type': 'HTML', 'sectionId': 'footer-widget-1', 'id': 'HTML77'}, {'title': 'Social Media Link', 'type': 'LinkList', 'sectionId': 'footer-widget-1', 'id': 'LinkList1'}, {'title': 'Company', 'type': 'LinkList', 'sectionId': 'footer-widget-2', 'id': 'LinkList2'}, {'title': 'Product \x26amp; Service', 'type': 'LinkList', 'sectionId': 'footer-widget-3', 'id': 'LinkList3'}, {'title': 'Support', 'type': 'LinkList', 'sectionId': 'footer-widget-4', 'id': 'LinkList4'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'credit-widget', 'id': 'HTML88'}, {'title': 'Back to top', 'type': 'TextList', 'sectionId': 'credit-widget', 'id': 'TextList88'}, {'title': 'Anchor Ad - Mobile only', 'type': 'HTML', 'sectionId': 'anchor-ad', 'id': 'HTML99'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'error-404', 'id': 'HTML404'}, {'title': 'Cookie Consent', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML21'}, {'title': 'Oops!', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML22'}, {'title': 'AdBlock Detected!', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML23'}, {'title': 'Enable JavaScript!', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML25'}, {'title': 'Country Block', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML26'}]}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML15', 'license', document.getElementById('HTML15'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header-title', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch1', 'header-search', document.getElementById('BlogSearch1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList000', 'header-icon', document.getElementById('TextList000'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'header-icon', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList002', 'nav-widget-1', document.getElementById('PageList002'), {'title': 'Additional Menu', 'links': [{'isCurrentPage': false, 'href': '/p/sitemap.html', 'title': 'Sitemap'}, {'isCurrentPage': false, 'href': '/p/disclaimer.html', 'title': 'Disclaimer'}, {'isCurrentPage': false, 'href': '/p/privacy-policy.html', 'title': 'Privacy'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList002', 'nav-widget-1', document.getElementById('LinkList002'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML000', 'nav-widget-2', document.getElementById('HTML000'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList001', 'notif-widget', document.getElementById('LinkList001'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML0', 'notif-widget', document.getElementById('HTML0'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML92', 'top-widget', document.getElementById('HTML92'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost1', 'top-widget', document.getElementById('FeaturedPost1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML93', 'main-widget', document.getElementById('HTML93'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main-widget', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'main-widget', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'main-widget', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML01', 'main-widget', document.getElementById('HTML01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML02', 'main-widget', document.getElementById('HTML02'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML04', 'main-widget', document.getElementById('HTML04'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML94', 'add-widget', document.getElementById('HTML94'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts00', 'side-widget', document.getElementById('PopularPosts00'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label00', 'side-widget', document.getElementById('Label00'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'side-widget', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML95', 'side-sticky', document.getElementById('HTML95'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList99', 'mobile-menu', document.getElementById('TextList99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML77', 'footer-widget-1', document.getElementById('HTML77'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'footer-widget-1', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList2', 'footer-widget-2', document.getElementById('LinkList2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList3', 'footer-widget-3', document.getElementById('LinkList3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList4', 'footer-widget-4', document.getElementById('LinkList4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML88', 'credit-widget', document.getElementById('HTML88'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList88', 'credit-widget', document.getElementById('TextList88'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML99', 'anchor-ad', document.getElementById('HTML99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'error-404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'addons-widget', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML22', 'addons-widget', document.getElementById('HTML22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML23', 'addons-widget', document.getElementById('HTML23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML25', 'addons-widget', document.getElementById('HTML25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML26', 'addons-widget', document.getElementById('HTML26'), {}, 'displayModeFull'));
</script>
</body></html>