<!--<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=6907051131914541276&zx=04023b48-b323-4c22-9626-d15b4404b2a7' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=6907051131914541276&zx=04023b48-b323-4c22-9626-d15b4404b2a7' 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-1718279142884347 -->

</head>-->

Cara memasang Bootstrap Di Blogger | nafasmedia

Update : Juli 06, 2020

nafasmedia | Halo apa kabar? seperti yang kalian lihat di thumbnail, kali ini saya akan memberikan cara memasang Bootstrap Di Blogger.

Apa itu Bootstrap? Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web. Kerangka kerja ini berisi templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript. source wikipedia

Bootstrap merupakan framework untuk membangun desain web secara responsif dan cepat. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Sehingga, user akan mendapatkan pengalaman yang lebih baik dalam berselancar tanpa mempertimbangkan perangkat apa yang harus digunakan.

Baiklah teman teman cara memasang bootstrap di blogger sangatlah mudah pertama silahkan copy kode dibawah dan letakkan dibawah kode <head>.

<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" rel="stylesheet"/>

Dan selanjutnya copy juga kode dibawah dan letakkan tepat diatas kode </body>

<script crossorigin="anonymous" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Selamat kalian sudah berhasil memasang Bootstrap di Blog kalian. Langkah selanjutnya adalah mencoba komponen komponen yang disediakan oleh Bootstrap, salah satunya yaitu komponen button.

Oh iya untuk mengaplikasikan komponen Bootstrap seperti button,form,tabledll, kalian juga harus memasang Jquery Library untuk bekerja offline, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet).

Nah itu dia cara memasang Bootstrap di blogger. Sangat mudahkan? baiklah itu saja yang bisa saya sampaikan, Terimakasih sudah berkunjung dan sampai jumpa dinext artikel.

Additional Info:

0 Comments

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1601900224-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY4DzVG_6ZDIhLrbLN8gF3WX0NgXmA:1761947127935';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6907051131914541276','//filmmedia18.blogspot.com/2020/07/cara-memasang-bootstrap-di-blogger.html','6907051131914541276');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6907051131914541276', 'title': 'filmmedia18', 'url': 'https://filmmedia18.blogspot.com/2020/07/cara-memasang-bootstrap-di-blogger.html', 'canonicalUrl': 'https://filmmedia18.blogspot.com/2020/07/cara-memasang-bootstrap-di-blogger.html', 'homepageUrl': 'https://filmmedia18.blogspot.com/', 'searchUrl': 'https://filmmedia18.blogspot.com/search', 'canonicalHomepageUrl': 'https://filmmedia18.blogspot.com/', 'blogspotFaviconUrl': 'https://filmmedia18.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': '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\x22filmmedia18 - Atom\x22 href\x3d\x22https://filmmedia18.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22filmmedia18 - RSS\x22 href\x3d\x22https://filmmedia18.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22filmmedia18 - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6907051131914541276/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22filmmedia18 - Atom\x22 href\x3d\x22https://filmmedia18.blogspot.com/feeds/157704467298958349/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1718279142884347', '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/93b5482d11d1bbee', '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': '157704467298958349', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcxKTP03uQs3OQW0w2fLalSVRw9U5RrLdW16LqyEVoqt8BoeeB235VVEAbtHXgiTRQ1Q7wj88svKzE0k_kCwtZA5GIy0QRQIrdw3wj_g0TMkYLQdSem6C8VMPRpcwc_e9X4z-KQqQOVNaQ/s72-c/thumbnail20.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcxKTP03uQs3OQW0w2fLalSVRw9U5RrLdW16LqyEVoqt8BoeeB235VVEAbtHXgiTRQ1Q7wj88svKzE0k_kCwtZA5GIy0QRQIrdw3wj_g0TMkYLQdSem6C8VMPRpcwc_e9X4z-KQqQOVNaQ/s320/thumbnail20.jpg', 'pageName': 'Cara memasang Bootstrap Di Blogger | nafasmedia', 'pageTitle': 'filmmedia18: Cara memasang Bootstrap Di Blogger | nafasmedia'}}, {'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 memasang Bootstrap Di Blogger | nafasmedia', 'description': '    nafasmedia | Halo apa kabar? seperti yang kalian   lihat di thumbnail, kali ini saya akan memberikan cara memasang Bootstrap Di   Blogge...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcxKTP03uQs3OQW0w2fLalSVRw9U5RrLdW16LqyEVoqt8BoeeB235VVEAbtHXgiTRQ1Q7wj88svKzE0k_kCwtZA5GIy0QRQIrdw3wj_g0TMkYLQdSem6C8VMPRpcwc_e9X4z-KQqQOVNaQ/s320/thumbnail20.jpg', 'url': 'https://filmmedia18.blogspot.com/2020/07/cara-memasang-bootstrap-di-blogger.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 157704467298958349}}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'HeaderBrand', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'Banner_Index_Post1', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'Blog', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/6096503-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'Sidebar', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'Sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'Sidebar', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label99', 'Sidebar', document.getElementById('Label99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'Banner_Index_Post3', document.getElementById('HTML4'), {}, 'displayModeFull'));
</script>
</body>-->