Cara Memasang Material Design Color Palette di Blog - Rek Blogging

<!--<head>
<link href='https://www.blogger.com/static/v1/widgets/55013136-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=5268344369279514160&zx=6c69f9fa-25a6-4f86-83f2-67e20c12fcca' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=5268344369279514160&zx=6c69f9fa-25a6-4f86-83f2-67e20c12fcca' 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-2015942787513606 -->

</head>-->

Home Tips Blogging Cara Memasang Material Design Color Palette di Blog

Sunday, September 30, 2018

Cara Memasang Material Design Color Palette di Blog

Diterbitkan September 30, 2018

Cara Memasang Material Design Color Palette di Blog - Bagi Kamu yang suka oprek template blog pasti sering menemui kode warna dalam sebuah tema. Memang dalam koding, tiap warna memiliki kode tersendiri. Fungsi dari Material Design Color Palette ini adalah untuk membantu dan memudahkan Kamu mencari kode dari sebuah warna. dan memilih warna yang disukai untuk mempercantik tampilan blog.

membuat color palette di halaman statis

Beberapa ada yang menggunakan color picker, namun fungsinya sama saja dengan color palette ini. Nah di sini akan Saya bagikan script bagaimana membuat dan memasang material design color palette di blog, tepatnya di halaman statis. Itung-itung untuk tidak lagi mencari-cari ke website lainnya ketika membuka tutorial di blog Saya ini. hehe.

Baca juga: Mengubah warna address bar blog di HP

Silahkan juga bagi Kamu yang tertarik dengan script list color palette ini bisa Kamu pasang di blog Kamu untuk menambah tools online. Langsung saja ke cara membuat material designnya.

Cara Memasang Color Palette di Halaman Statis Blog

1. Buka dashbor blogger Kamu.

2. Pilih menu Pages atau halaman.

3. Buat Halaman statis baru dengan klik "new page".

4. Pilih bagian penulisan HTML bukan Compose.

5. Copy paste kode di bawah ini.

<iframe title="Color Palette" src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/color-palettes2.html" frameborder="0" style="height:575px;width:100%"></iframe>

6. Kamu bisa mengganti url tersebut dengan list url di bawah ini untuk pilihan tampilan color pelette yang berbeda.

https://s.codepen.io/rezal-muis/debug/vVEvQo/dGMXWdpmRqxk https://s.codepen.io/rezal-muis/debug/oagJVO/bYMdyeNYWxYr https://s.codepen.io/rezal-muis/debug/Jmowzw/jVMpoyRjPXKk https://s.codepen.io/rezal-muis/debug/EdaGJe/ZoMBaKpoZywk

7. Kemudian publikasikan.

Baca juga: Cara Membuat Banner Iklan 125x125

Demikian cara bagaimana memasang material design color palette di halaman statis blog. Simpel bukan? Silahkan coba di blog Kamu. Apabila ada pertanyaan bisa Kamu sampaikan di kolom komentar. Semoga artikel tips blogging ini bermanfaat.

Inspiration: kompiajaib, enrico matiazzi, ali, dorijan covran

Muiz

EmoticonEmoticon

Subscribe to: Post Comments (Atom)

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY4vtRps5Yb35CHFMQuxaX1r0eJeZg:1732395249447';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5268344369279514160','//www.rekblogging.com/2018/09/cara-memasang-material-design-color.html','5268344369279514160');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '5268344369279514160', 'title': 'Rek Blogging', 'url': 'https://www.rekblogging.com/2018/09/cara-memasang-material-design-color.html', 'canonicalUrl': 'https://www.rekblogging.com/2018/09/cara-memasang-material-design-color.html', 'homepageUrl': 'https://www.rekblogging.com/', 'searchUrl': 'https://www.rekblogging.com/search', 'canonicalHomepageUrl': 'https://www.rekblogging.com/', 'blogspotFaviconUrl': 'https://www.rekblogging.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-89547797-2', '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\x22Rek Blogging - Atom\x22 href\x3d\x22https://www.rekblogging.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Rek Blogging - RSS\x22 href\x3d\x22https://www.rekblogging.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Rek Blogging - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/5268344369279514160/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Rek Blogging - Atom\x22 href\x3d\x22https://www.rekblogging.com/feeds/6098472001684253606/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-2015942787513606', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d78375fb222d99b3', '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': '6098472001684253606', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSJnfP_Ch9nZ75UwzPU36FtQBWGQdwWRKX1d7q4o_d7_fYrutuMUWtKlovYFwEbRf9HXTtSmuTZB5ElxKsRBKgrLkM9jVqy_33vqxmvCDZ0mnnFX90BYmKpKsOEHJQd2vsTt0vJGZIG2k/s72-c/color+palette.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSJnfP_Ch9nZ75UwzPU36FtQBWGQdwWRKX1d7q4o_d7_fYrutuMUWtKlovYFwEbRf9HXTtSmuTZB5ElxKsRBKgrLkM9jVqy_33vqxmvCDZ0mnnFX90BYmKpKsOEHJQd2vsTt0vJGZIG2k/s400/color+palette.jpg', 'pageName': 'Cara Memasang Material Design Color Palette di Blog', 'pageTitle': 'Rek Blogging: Cara Memasang Material Design Color Palette di Blog', 'metaDescription': 'Berikut ini tutorial bagaimana cara membuat dan memasang color palette atau color picker d halaman statis blog dengan cara yang sederhana.'}}, {'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': false, '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 Material Design Color Palette di Blog', 'description': 'Berikut ini tutorial bagaimana cara membuat dan memasang color palette atau color picker d halaman statis blog dengan cara yang sederhana.', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSJnfP_Ch9nZ75UwzPU36FtQBWGQdwWRKX1d7q4o_d7_fYrutuMUWtKlovYFwEbRf9HXTtSmuTZB5ElxKsRBKgrLkM9jVqy_33vqxmvCDZ0mnnFX90BYmKpKsOEHJQd2vsTt0vJGZIG2k/s400/color+palette.jpg', 'url': 'https://www.rekblogging.com/2018/09/cara-memasang-material-design-color.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 6098472001684253606}}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'headerdua', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'banner', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', 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('HTML6', 'sidebar', document.getElementById('HTML6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML7', 'sidebar', document.getElementById('HTML7'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sidebar', document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'sidebar', document.getElementById('HTML5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '5268344369279514160', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'AOuZoY4OBbVPcP9_A605R-lp8ZngPanxqg:1732395249448', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>
</body>-->