<style>/*<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1575214712636951960&zx=fb183e5c-89bf-4add-8673-20bae430a1af' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1575214712636951960&zx=fb183e5c-89bf-4add-8673-20bae430a1af' rel='stylesheet'/></noscript>
<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-8654034443581125 -->

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

GitHub HTML Preview - Tool untuk melihat tampilan file HTML di GitHub

Kang Ismet

Mar 28, 2024

2

Cara melihat file .html di GitHub - Selama ini saya menggunakan 2 cara untuk menampilkan file dengan ekstensi .html yang disimpan di GitHub. Pertama dangan GitHub Pages, Kedua dengan CDN Statically. Karena CDN Statically error, atau mungkin melakukan pembatasan, maka saya merekomendasikan menggunakan GitHub Page.

Cara melihat tampilan file HTML di GitHub

Apabila kalian tidak menggunakan Halaman Github (GitHub Page) tenang saja, ada caranya. Silahkan copy paste, kode di bawah ini ke browser. Jangan lupa ganti URL_GITHUB dengan link yang akan dipreview.

https://previewhtml.github.io/?url=URL_GITHUB

contoh : (untuk uji coba, silahkan copy kode di bawah dan paste di browser)

https://previewhtml.github.io/?url=https://github.com/kanguis/kanguis.github.io/blob/main/demo/copy-code.html

Menggunakan Tool

Cara yang lebih mudah sudah saya siapkan Tool. Silahkan isi URL GitHub, kemudian klik Preview.

Semoga bermanfaat...

Djangkaru Bumi
Profil: https://www.blogger.com/profile/00526825525563935443
30 Maret, 2024

Saya juga menggunakan github
- Kang Ismet
  Profil:https://www.blogger.com/profile/07706142952405337288
  30 Maret, 2024
  
  lumayan buat hosting gratis :D
Reply

Tambahkan Komentar

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/745881458-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5mAtF110Hd-yl-HPz4qXpDxtJ67w:1735246415154';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1575214712636951960','//www.kang-ismet.com/2024/03/github-preview.html','1575214712636951960');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1575214712636951960', 'title': 'Blog Kang Ismet', 'url': 'http://www.kang-ismet.com/2024/03/github-preview.html', 'canonicalUrl': 'http://www.kang-ismet.com/2024/03/github-preview.html', 'homepageUrl': 'http://www.kang-ismet.com/', 'searchUrl': 'http://www.kang-ismet.com/search', 'canonicalHomepageUrl': 'http://www.kang-ismet.com/', 'blogspotFaviconUrl': 'http://www.kang-ismet.com/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\x22Blog Kang Ismet - Atom\x22 href\x3d\x22http://www.kang-ismet.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Blog Kang Ismet - RSS\x22 href\x3d\x22http://www.kang-ismet.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Blog Kang Ismet - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1575214712636951960/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Blog Kang Ismet - Atom\x22 href\x3d\x22http://www.kang-ismet.com/feeds/2182693835853123786/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-8654034443581125', '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/361ce9cf7a112c52', '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': true, 'jumpLinkMessage': 'Read more \xbb', 'pageType': 'item', 'postId': '2182693835853123786', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMK_KnAtevc4Zf_jB6PRqB2W-KK9Fb2Y8jXdX-2kb6p0TZrl7adS8cBEehbqDz8A0JuPBNAJZTZ4JczR-sunKww1_XsKIXI1qsDo2dpxnISRv47oLbOm2AhLvIiPWkK_Pdwu0XVRP1EarLbQZN3_ioEN85PAD3fJJcxZe7pk6vpIcLWjXWaFtc4ucB5wM/s72-c/github-html-preview.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMK_KnAtevc4Zf_jB6PRqB2W-KK9Fb2Y8jXdX-2kb6p0TZrl7adS8cBEehbqDz8A0JuPBNAJZTZ4JczR-sunKww1_XsKIXI1qsDo2dpxnISRv47oLbOm2AhLvIiPWkK_Pdwu0XVRP1EarLbQZN3_ioEN85PAD3fJJcxZe7pk6vpIcLWjXWaFtc4ucB5wM/s600/github-html-preview.jpg', 'pageName': 'GitHub HTML Preview - Tool untuk melihat tampilan file HTML di GitHub', 'pageTitle': 'Blog Kang Ismet: GitHub HTML Preview - Tool untuk melihat tampilan file HTML di GitHub', 'metaDescription': 'Cara melihat preview file HTML di GitHub'}}, {'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': 'GitHub HTML Preview - Tool untuk melihat tampilan file HTML di GitHub', 'description': 'Cara melihat preview file HTML di GitHub', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMK_KnAtevc4Zf_jB6PRqB2W-KK9Fb2Y8jXdX-2kb6p0TZrl7adS8cBEehbqDz8A0JuPBNAJZTZ4JczR-sunKww1_XsKIXI1qsDo2dpxnISRv47oLbOm2AhLvIiPWkK_Pdwu0XVRP1EarLbQZN3_ioEN85PAD3fJJcxZe7pk6vpIcLWjXWaFtc4ucB5wM/s600/github-html-preview.jpg', 'url': 'http://www.kang-ismet.com/2024/03/github-preview.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2182693835853123786}}, {'name': 'widgets', 'data': [{'title': 'Upload Image', 'type': 'Image', 'sectionId': 'upload-image', 'id': 'Image10'}, {'title': 'Blog Kang Ismet (Header)', 'type': 'Header', 'sectionId': 'header-main', 'id': 'Header1'}, {'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': 'ExtraMenu', 'type': 'LinkList', 'sectionId': 'extra-menu', 'id': 'LinkList15'}, {'title': 'ExtraMenu', 'type': 'LinkList', 'sectionId': 'extra-menu2', 'id': 'LinkList16'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'special-home', 'id': 'HTML25'}, {'title': '#CostumPost by Label', 'type': 'HTML', 'sectionId': 'special-home', 'id': 'HTML3'}, {'title': '#CSS', 'type': 'Image', 'sectionId': 'special-categories', 'id': 'Image11'}, {'title': '#JavaScript', 'type': 'Image', 'sectionId': 'special-categories', 'id': 'Image12'}, {'title': '#Blogger', 'type': 'Image', 'sectionId': 'special-categories', 'id': 'Image13'}, {'title': '#Bootstrap', 'type': 'Image', 'sectionId': 'special-categories', 'id': 'Image15'}, {'title': '#Desain', 'type': 'Image', 'sectionId': 'special-categories', 'id': 'Image14'}, {'title': '#Tool', 'type': 'Image', 'sectionId': 'special-categories', 'id': 'Image16'}, {'title': 'Featured Post', 'type': 'FeaturedPost', 'sectionId': 'before-blog', 'id': 'FeaturedPost1', 'postId': '5657302662223296166'}, {'title': 'Postingan Blog', 'type': 'Blog', 'sectionId': 'blog-post', 'id': 'Blog1', 'posts': [{'id': '2182693835853123786', 'title': 'GitHub HTML Preview - Tool untuk melihat tampilan file HTML di GitHub', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMK_KnAtevc4Zf_jB6PRqB2W-KK9Fb2Y8jXdX-2kb6p0TZrl7adS8cBEehbqDz8A0JuPBNAJZTZ4JczR-sunKww1_XsKIXI1qsDo2dpxnISRv47oLbOm2AhLvIiPWkK_Pdwu0XVRP1EarLbQZN3_ioEN85PAD3fJJcxZe7pk6vpIcLWjXWaFtc4ucB5wM/s600/github-html-preview.jpg', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Diposting oleh'}, {'name': 'timestamp', 'label': 'MMM d, yyyy'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Labels:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Diposting oleh'}, {'name': 'timestamp', 'label': 'MMM d, yyyy'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'Labels:'}]}, {'title': '#You may also like', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML15'}, {'title': '#CustomPost by Label', 'type': 'HTML', 'sectionId': 'after-blog', 'id': 'HTML26'}, {'title': 'Recent Posts', 'type': 'HTML', 'sectionId': 'sidebar-static', 'id': 'HTML6'}, {'title': 'Recent Update', 'type': 'HTML', 'sectionId': 'sidebar-static', 'id': 'HTML5'}, {'title': 'Popular Post', 'type': 'PopularPosts', 'sectionId': 'sidebar-static', 'id': 'PopularPosts10', 'posts': [{'title': 'Download Logo BAWASLU Vector CorelDraw dan PNG', 'id': 403736012767932391}, {'title': 'Membuat Blogger Visitor Counter dengan Google Apps Script ', 'id': 3191105258630817458}, {'title': 'Membuat Pesan di atas Form Komentar Blogger', 'id': 6022403128983322943}]}, {'title': 'Komentar Sahabat', 'type': 'HTML', 'sectionId': 'sidebar-static', 'id': 'HTML1'}, {'title': 'Hashtag', 'type': 'Label', 'sectionId': 'sidebar-static', 'id': 'Label11'}, {'title': 'About Us', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML21'}, {'title': 'Learn More', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList13'}, {'title': 'Follow Us', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList14'}, {'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': 'HTML27'}, {'title': 'License Key', 'type': 'HTML', 'sectionId': 'jet-options', 'id': 'HTML28'}, {'title': 'Formulir Kontak', 'type': 'ContactForm', 'sectionId': 'section-contact-form', 'id': 'ContactForm005'}]}]);
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image10', 'upload-image', document.getElementById('Image10'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header-main', document.getElementById('Header1'), {}, '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('_LinkListView', new _WidgetInfo('LinkList15', 'extra-menu', document.getElementById('LinkList15'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList16', 'extra-menu2', document.getElementById('LinkList16'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML25', 'special-home', document.getElementById('HTML25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'special-home', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image11', 'special-categories', document.getElementById('Image11'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image12', 'special-categories', document.getElementById('Image12'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image13', 'special-categories', document.getElementById('Image13'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image15', 'special-categories', document.getElementById('Image15'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image14', 'special-categories', document.getElementById('Image14'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image16', 'special-categories', document.getElementById('Image16'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost1', 'before-blog', document.getElementById('FeaturedPost1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'blog-post', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3846405171-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('_HTMLView', new _WidgetInfo('HTML26', 'after-blog', document.getElementById('HTML26'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML6', 'sidebar-static', document.getElementById('HTML6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'sidebar-static', document.getElementById('HTML5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts10', 'sidebar-static', document.getElementById('PopularPosts10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar-static', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label11', 'sidebar-static', document.getElementById('Label11'), {}, '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('LinkList14', 'footer-widget', document.getElementById('LinkList14'), {}, '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('HTML27', 'jet-options', document.getElementById('HTML27'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML28', 'jet-options', document.getElementById('HTML28'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm005', 'section-contact-form', document.getElementById('ContactForm005'), {'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': '1575214712636951960', 'contactFormNameMsg': 'Nama', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Pesan', 'contactFormSendMsg': 'Kirim', 'contactFormToken': 'AOuZoY77sMckrq0f7c30HL-34tK33ekOzg:1735246415155', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>
</body>*/</style>