Ads by Yasya El Hakim
 Membuat Tombol dengan EL Creative GoDev Shortcode.js dan Material.css

Pada tutorial kali ini, saya akan menunjukkan cara membuat tombol dengan menggunakan EL Creative GoDev Shortcode.js dan Material.css yang dikhususkan untuk pengguna Blogger.

Agar plugin ini dapat bekerja dengan sempurna, ikutilah langkah berikut:

Pertama

Cari dan hapus kode <body> pada blog kalian, dan ubah dengan kode berikut:
<body expr:class='data:blog.pageType'>
Catatan:
Kode diatas berfungsi untuk menampilkan class secara otomatis pada setiap halaman yang berbeda.
Jika kode diatas sudah ada pada template blog kalian, maka tidak usah dirubah.

Kedua

Kalian harus menyalin dan meletakkan kode CSS berikut kedalam Blog kalian.

Cari kode <b:skin> atau <b:skin><![CDATA[ dan letakkan kode berikut tepat dibawahnya:
/*
* EL Creative GoDev Material Design CSS v1.0.0
* Copyright 2015 - 2019 by Yasya El Hakim
* Licensed under MIT
*/
:root{--md-red:#F44336;--md-pink:#E91E63;--md-purple:#9C27B0;--md-deeppurple:#673AB7;--md-indigo:#3F51B5;--md-blue:#2196F3;--md-lightblue:#03A9F4;--md-cyan:#00BCD4;--md-teal:#009688;--md-green:#4CAF50;--md-lightgreen:#8BC34A;--md-lime:#CDDC39;--md-yellow:#FFEB3B;--md-amber:#FFC107;--md-orange:#FF9800;--md-deeporange:#FF5722;--md-brown:#795548;--md-bluegrey:#607D8B;--md-grey:#9E9E9E;--md-black:#000;--theme-dark:#fff}button.button,a.elc-button{-ms-flex-align:center;-webkit-box-align:center;align-items:center;border-radius:2px;display:-ms-inline-flexbox;display:-webkit-inline-box;display:inline-flex;height:36px;-ms-flex:0 1 auto;-webkit-box-flex:0;flex:0 1 auto;font-size:14px;font-weight:500;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;margin:6px 8px;min-width:88px;outline:0;text-transform:uppercase;text-decoration:none;-webkit-transition:.3s cubic-bezier(.25,.8,.5,1),color 1ms;-o-transition:.3s cubic-bezier(.25,.8,.5,1),color 1ms;transition:.3s cubic-bezier(.25,.8,.5,1),color 1ms;position:relative;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;color:#1c1c1c;padding:0 16px;cursor:pointer;border-style:none;overflow:hidden;will-change:box-shadow;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}button.button:active,a.elc-button:active{-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}button.button:hover,a.elc-button:hover{text-decoration:none!important}button.button.flat .ripple,button.button.outline .ripple,.elc-button.flat .ripple,.elc-button.outline .ripple{background:currentColor}button.button .elc-button-icons,.elc-button .elc-button-icons,.elc-alert svg{-ms-flex-align:center;-webkit-box-align:center;align-items:center;border-radius:inherit;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;height:inherit;-ms-flex:1 0 auto;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-webkit-transition:.3s cubic-bezier(.25,.8,.5,1);-o-transition:.3s cubic-bezier(.25,.8,.5,1);transition:.3s cubic-bezier(.25,.8,.5,1);white-space:nowrap;width:inherit;fill:currentColor;margin-right:16px}button.button.block,.elc-button.block{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex:1;-webkit-box-flex:1;flex:1}button.button.flat,.elc-button.flat{background-color:transparent!important;-webkit-box-shadow:none;box-shadow:none}button.button.flat::before,.elc-button.flat::before,button.button.outline::before,.elc-button.outline::before{border-radius:inherit;color:inherit;content:"";position:absolute;left:0;top:0;height:100%;opacity:.12;-webkit-transition:.3s cubic-bezier(.25,.8,.5,1);-o-transition:.3s cubic-bezier(.25,.8,.5,1);transition:.3s cubic-bezier(.25,.8,.5,1);width:100%}button.button.flat:hover::before,.elc-button.flat:hover::before{background:currentColor!important}button.button.flat:active,.elc-button.flat:active,button.button.depressed:active,.elc-button.depressed:active,button.button.outline:active,.elc-button.outline:active{-webkit-box-shadow:none;box-shadow:none}button.button.depressed,.elc-button.depressed{-webkit-box-shadow:none;box-shadow:none}{-webkit-box-shadow:none;box-shadow:none}button.button.outline,.elc-button.outline{border:1px solid currentColor;background:transparent!important;-webkit-box-shadow:none;box-shadow:none;color:currentColor}button.button.outline:hover::before,.elc-button.outline:hover::before{background-color:currentColor}button.button.rounded,.elc-button.rounded{border-radius:28px}button.button.small,.elc-button.small{font-size:13px;height:28px;padding:0 8px}button.button.large,.elc-button.large{font-size:15px;height:44px;padding:0 32px}button.button.flat.red,.elc-button.flat.red,button.button.outline.red,.elc-button.outline.red{color:var(--md-red)!important}button.button.flat.pink,.elc-button.flat.pink,button.button.outline.pink,.elc-button.outline.pink{color:var(--md-pink)!important}button.button.flat.purple,.elc-button.flat.purple,button.button.outline.purple,.elc-button.outline.purple{color:var(--md-purple)!important}button.button.flat.deeppurple,.elc-button.flat.deeppurple,button.button.outline.deeppurple,.elc-button.outline.deeppurple{color:var(--md-deeppurple)!important}button.button.flat.indigo,.elc-button.flat.indigo,button.button.outline.indigo,.elc-button.outline.indigo{color:var(--md-indigo)!important}button.button.flat.blue,.elc-button.flat.blue,button.button.outline.blue,.elc-button.outline.blue{color:var(--md-blue)!important;}button.button.flat.lightblue,.elc-button.flat.lightblue,button.button.outline.lightblue,.elc-button.outline.lightblue{color:var(--md-lightblue)!important}button.button.flat.cyan,.elc-button.flat.cyan,button.button.outline.cyan,.elc-button.outline.cyan{color:var(--md-cyan)!important}button.button.flat.teal,.elc-button.flat.teal,button.button.outline.teal,.elc-button.outline.teal{color:var(--md-teal)!important}button.button.flat.green,.elc-button.flat.green,button.button.outline.green,.elc-button.outline.green{color:var(--md-green)!important}button.button.flat.lightgreen,.elc-button.flat.lightgreen,button.button.outline.lightgreen,.elc-button.outline.lightgreen{color:var(--md-lightgreen)!important}button.button.flat.lime,.elc-button.flat.lime,button.button.outline.lime,.elc-button.outline.lime{color:var(--md-lime)!important}button.button.flat.yellow,.elc-button.flat.yellow,button.button.outline.yellow,.elc-button.outline.yellow{color:var(--md-yellow)!important}button.button.flat.amber,.elc-button.flat.amber,button.button.outline.amber,.elc-button.outline.amber{color:var(--md-amber)!important}button.button.flat.orange,.elc-button.flat.orange,button.button.outline.orange,.elc-button.outline.orange{color:var(--md-orange)!important}button.button.flat.deeporange,.elc-button.flat.deeporange,button.button.outline.deeporange,.elc-button.outline.deeporange{color:var(--md-deeporange)!important}button.button.flat.brown,.elc-button.flat.brown,button.button.outline.brown,.elc-button.outline.brown{color:var(--md-brown)!important}button.button.flat.bluegrey,.elc-button.flat.bluegrey,button.button.outline.bluegrey,.elc-button.outline.bluegrey{color:var(--md-bluegrey)!important}button.button.flat.grey,.elc-button.flat.grey,button.button.outline.grey,.elc-button.outline.grey{color:var(--md-grey)!important}button.button.flat.black,.elc-button.flat.black,button.button.outline.black,.elc-button.outline.black{color:var(--md-black)!important}button.button.red,.elc-button.red{background-color:var(--md-red);outline-color:var(--md-red);color:var(--theme-dark)!important}button.button.pink,.elc-button.pink{background-color:var(--md-pink);outline-color:var(--md-pink);color:var(--theme-dark)!important}button.button.purple,.elc-button.purple{background-color:var(--md-purple);outline-color:var(--md-purple);color:var(--theme-dark)!important}button.button.deeppurple,.elc-button.deeppurple{background-color:var(--md-deeppurple);outline-color:var(--md-deeppurple);color:var(--theme-dark)!important}button.button.indigo,.elc-button.indigo{background-color:var(--md-indigo);outline-color:var(--md-indigo);color:var(--theme-dark)!important}button.button.blue,.elc-button.blue{background-color:var(--md-blue);outline-color:var(--md-blue);color:var(--theme-dark)!important}button.button.lightblue,.elc-button.lightblue{background-color:var(--md-lightblue);outline-color:var(--md-lightblue);color:var(--theme-dark)!important}button.button.cyan,.elc-button.cyan{background-color:var(--md-cyan);outline-color:var(--md-cyan);color:var(--theme-dark)!important}button.button.teal,.elc-button.teal{background-color:var(--md-teal);outline-color:var(--md-teal);color:var(--theme-dark)!important}button.button.green,.elc-button.green{background-color:var(--md-green);outline-color:var(--md-green);color:var(--theme-dark)!important}button.button.lightgreen,.elc-button.lightgreen{background-color:var(--md-lightgreen);outline-color:var(--md-lightgreen);color:var(--theme-dark)!important}button.button.lime,.elc-button.lime{background-color:var(--md-lime);outline-color:var(--md-lime);color:var(--theme-dark)!important}button.button.yellow,.elc-button.yellow{background-color:var(--md-yellow);outline-color:var(--md-yellow);color:var(--theme-dark)!important}button.button.amber,.elc-button.amber{background-color:var(--md-amber);outline-color:var(--md-amber);color:var(--theme-dark)!important}button.button.orange,.elc-button.orange{background-color:var(--md-orange);outline-color:var(--md-orange);color:var(--theme-dark)!important}button.button.deeporange,.elc-button.deeporange{background-color:var(--md-deeporange);outline-color:var(--md-deeporange);color:var(--theme-dark)!important}button.button.brown,.elc-button.brown{background-color:var(--md-brown);outline-color:var(--md-brown);color:var(--theme-dark)!important}button.button.bluegrey,.elc-button.bluegrey{background-color:var(--md-bluegrey);outline-color:var(--md-bluegrey);color:var(--theme-dark)!important}button.button.grey,.elc-button.grey{background-color:var(--md-grey);outline-color:var(--md-grey);color:var(--theme-dark)!important}button.button.black,.elc-button.black{background-color:var(--md-black);outline-color:var(--md-black);color:var(--theme-dark)!important}

Catatan: Kode CSS diatas sudah di Minified/Di kompress, jika kalian ingin menggunakan versi yang belum di Minify atau ingin berkontribusi dalam pembuatan tampilan baru, kalian bisa kunjungi halaman Github saya.
Kode CSS diatas hanya untuk Tombol, jika kalian ingin menggunakan semua Shortcode, kalian bisa menyalin kode CSS di halaman Github saya.

Ketiga

Pastikan kalian sudah memasang jQuery pada Blog kalian. Jika sudah, ikutilah langkah berikut:

Cari kode </body> dan letakkan kode berikut tepat diatasnya:
<script type="text/javascript">//<![CDATA[
/*
* EL Creative GoDev Shortcode JS v1.0.0
* Copyright 2015 - 2019 by Yasya El Hakim
* Licensed under MIT
*/
$(document).ready(function(){function parse(string){var validation=!1;var i=0;for(;i<shortcodes.length;i++){var opening="["+shortcodes[i];var replacement='<div class="elcreative-shortcode elc-'+shortcodes[i]+'"';var closing="[/"+shortcodes[i]+"]";var replacementClosing="</div>";var selfClosing="/]";var selfClosingHTML="></div>";var pos=0;var start=0;var length=0;j=0;for(;j<100;j++){pos=string.indexOf(opening,pos);var shortcodeValidation=!0;var text="";if(pos!=-1){var idx=string.indexOf(closing,pos);var index=string.indexOf(selfClosing,pos);if(idx!=-1&&index==-1||idx!=-1&&index!=-1&&idx<index){text=string.substring(pos,idx+closing.length);text=text.replace(closing,replacementClosing);start=idx;length=closing.length}else{if(idx==-1&&index!=-1||idx!=-1&&index!=-1&&idx>index){text=string.substring(pos,index+selfClosing.length);text=text.replace(closing,selfClosingHTML);start=index;length=selfClosing.length}else{shortcodeValidation=!1}}}else{break}
if(shortcodeValidation){validation=!0;text=text.replace(opening,replacement);text=text.replace("]",">");string=string.substring(0,pos)+text+string.substring(start+length)}else{}
pos++}}
if(validation){return string}
return""}
var shortcodes=["alert","button","accordion","item","tab","content"];$("body.item #Blog1").each(function(){var value=$(this).html();value=parse(value);if(value!=""){$(this).html(value)}});$(".elc-alert").each(function(){var code=$(this).html();var type=$(this).attr("type");var style=$(this).attr("style");if(code==null||code==""){code="This is Success Alert"}
if(type==null||type==""){type="success"}
if(style==null||style==""){style="default"}
var $contentReplacement='<div class="elc-alert '+type+" "+style+'"><div class="alert-text">'+code+"</div></div>";$(this).replaceWith($contentReplacement)});$(".elc-alert.dismiss").each(function(){$(this).append('<div class="dismiss-button"><svg class="close" width="24" height="24" viewBox="0 0 24 24"><path d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" /></svg></div>')});$(".elc-alert .dismiss-button").click(function(e){$(this).parent().fadeOut();e.preventDefault()});$(".elc-alert").each(function(){if($(this).hasClass('success')){$(this).prepend('<svg class="icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>')}
if($(this).hasClass('info')){$(this).prepend('<svg class="icon" width="24" height="24" viewBox="0 0 24 24"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>')}
if($(this).hasClass('warning')){$(this).prepend('<svg class="icon" width="24" height="24" viewBox="0 0 24 24"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" /></svg>')}
if($(this).hasClass('error')){$(this).prepend('<svg class="icon" width="24" height="24" viewBox="0 0 24 24"><path d="M23,12L20.56,14.78L20.9,18.46L17.29,19.28L15.4,22.46L12,21L8.6,22.47L6.71,19.29L3.1,18.47L3.44,14.78L1,12L3.44,9.21L3.1,5.53L6.71,4.72L8.6,1.54L12,3L15.4,1.54L17.29,4.72L20.9,5.54L20.56,9.22L23,12M20.33,12L18.5,9.89L18.74,7.1L16,6.5L14.58,4.07L12,5.18L9.42,4.07L8,6.5L5.26,7.09L5.5,9.88L3.67,12L5.5,14.1L5.26,16.9L8,17.5L9.42,19.93L12,18.81L14.58,19.92L16,17.5L18.74,16.89L18.5,14.1L20.33,12M11,15H13V17H11V15M11,7H13V13H11V7" /></svg>')}});$(".elc-button").each(function(){var code=$(this).html(),color=$(this).attr("color"),type=$(this).attr("type"),link=$(this).attr("link"),size=$(this).attr("size"),rel=$(this).attr("rel"),target=$(this).attr("target");if(code==null||code==""){code="This is Button"}
if(color==null||color==""){color=""}
if(type==null||type==""){type=""}
if(size==null||size==""){size=""}
if(link==null||link==""){link="#"}
if(rel==null||rel==""){rel=""}
if(target==null||target==""){target="_self"}
var $contentReplacement='<a class="elc-button '+type+" "+color+" "+size+'" href="'+link+'" rel="'+rel+' " target="'+target+'"><span class="button-content">'+code+"</span></a>";$(this).replaceWith($contentReplacement)});$(".elc-accordion").each(function(){var message="";var type=$(this).attr("type");$(this).find(".elc-item").each(function(){var title=$(this).attr("title");var content=$(this).html();if(title==null||title==""){title="Title"}
if(content==null||content==""){content="Content"}
title='<div class="accordion-item"><h2 class="accordion-title">'+title+'</a><svg class="up" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg><svg class="down" viewBox="0 0 24 24"><path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"></path></svg></h2>';content='<div class="accordion-content">'+content+"</div></div>";message=message+(title+content)});$(this).html(message);if(type==null||type==""){type=""}
var $contentReplacement=type;$(this).addClass($contentReplacement)});$(function(){var Accordion=function(el,multiple){this.el=el||{};this.multiple=multiple||!1;var links=this.el.find('.accordion-title');links.on('click',{el:this.el,multiple:this.multiple},this.dropdown)}
Accordion.prototype.dropdown=function(e){var $el=e.data.el;$this=$(this),$next=$this.next();$next.slideToggle();$this.parent().toggleClass('selected');if(!e.data.multiple){$el.find('.accordion-content').not($next).slideUp().parent().removeClass('selected')}}
var accordion=new Accordion($('.elc-accordion'),!1)})
var id=0;$(".elc-tab").each(function(){var tabTitle="";var tabContent="";var tabCounter=0;$(this).find(".elc-content").each(function(){var title=$(this).attr("title");var content=$(this).html();if(title==null||title==""){title="Title"}
if(content==null||content==""){content="Content"}
var addedClasses="";var tabField="";if(tabCounter==0){addedClasses=' class="active"';tabField=' style="display:block"'}
tabTitle=tabTitle+('<li><a href="#tab'+tabCounter+'" '+addedClasses+' parent="tab_'+id+'">'+title+"</a></li>");tabContent=tabContent+('<div id="tab'+tabCounter+'" class="tab tab_content" '+tabField+">"+content+"</div>");tabCounter++});tabTitle='<ul class="tab-lists tabs">'+tabTitle+"</ul>";tabContent='<div class="tab-content">'+tabContent+"</div>";$(this).html(tabTitle+tabContent);$(this).attr("id","tab_"+id);id++});(function($){$(".elc-tab .tab-lists li a").click(function(){var src=$(this).attr("href");var parentClass=$(this).attr("parent");parentClass="#"+parentClass;$(parentClass+" .tab_content").hide();$(parentClass+" .tab-lists li a").removeClass("active");$(this).addClass("active");$(parentClass+" "+src).fadeIn(500);return!1})})(jQuery)})
//]]>
</script>

Catatan:
Kode CSS diatas sudah di Minified/Di kompress, jika kalian ingin menggunakan versi yang belum di Minify atau ingin berkontribusi dalam pembuatan tampilan baru, kalian bisa kunjungi halaman Github saya.
Jika Sebelumnya kalian sudah memasang kode Shortcode.js diatas, maka kalian tidak perlu memasangnya lagi.

Contoh Tombol

Default

Tombol Default
Tombol Default Merah
Tombol Default Hijau
Tombol Default Biru

Penulisan
[button] Tombol Default [/button]
[button color="red"] Tombol Default Merah [/button]
[button color="green"] Tombol Default Hijau [/button]
[button color="blue"] Tombol Default Biru [/button]

Catatan: Kalian bisa melihat atribut warna yang tersedia di akhir artikel tutorial ini.

Tipe Tombol

Terdapat beberapa tipe tombol yang bisa kalian gunakan seperti Flat, Depressed, Outline, Rounded, dan Block.

Tombol Flat

Tombol Flat Default
Tombol Flat Merah
Tombol Flat Hijau
Tombol Flat Biru

Penulisan
[button type="flat"] Tombol Flat Default [/button]
[button type="flat" color="red"] Tombol Flat Merah [/button]
[button type="flat" color="green"] Tombol Flat Hijau [/button]
[button type="flat" color="blue"] Tombol Flat Biru [/button]

Catatan:
Untuk membuat tombol menjadi tipe Flat, kalian harus menambahkan atribut type="flat".
Kalian bisa melihat atribut warna yang tersedia di akhir artikel tutorial ini.

Tombol Depressed

Tombol Depressed Default
Tombol Depressed Merah
Tombol Depressed Hijau
Tombol Depressed Biru

Penulisan
[button type="depressed"] Tombol Depressed Default [/button]
[button type="depressed" color="red"] Tombol Depressed Merah [/button]
[button type="depressed" color="green"] Tombol Depressed Hijau [/button]
[button type="depressed" color="blue"] Tombol Depressed Biru [/button]

Catatan:
Untuk membuat tombol menjadi tipe Depressed, kalian harus menambahkan atribut type="depressed".
Kalian bisa melihat atribut warna yang tersedia di akhir artikel tutorial ini.

Tombol Outline

Tombol Outline Default
Tombol Outline Merah
Tombol Outline Hijau
Tombol Outline Biru

Penulisan
[button type="outline"] Tombol Outline Default [/button]
[button type="outline" color="red"] Tombol Outline Merah [/button]
[button type="outline" color="green"] Tombol Outline Hijau [/button]
[button type="outline" color="blue"] Tombol Outline Biru [/button]

Catatan:
Untuk membuat tombol menjadi tipe Outline, kalian harus menambahkan atribut type="outline".
Kalian bisa melihat atribut warna yang tersedia di akhir artikel tutorial ini.

Tombol Rounded

Tombol Rounded Default
Tombol Rounded Merah
Tombol Rounded Hijau
Tombol Rounded Biru

Penulisan
[button type="rounded"] Tombol Rounded Default [/button]
[button type="rounded" color="red"] Tombol Rounded Merah [/button]
[button type="rounded" color="green"] Tombol Rounded Hijau [/button]
[button type="rounded" color="blue"] Tombol Rounded Biru [/button]

Catatan:
Untuk membuat tombol menjadi tipe Rounded, kalian harus menambahkan atribut type="rounded".
Kalian bisa melihat atribut warna yang tersedia di akhir artikel tutorial ini.

Tombol Block

Tombol Block Default Tombol Block Merah Tombol Block Hijau Tombol Block Biru
Penulisan
[button type="block"] Tombol Block Default [/button]
[button type="block" color="red"] Tombol Block Merah [/button]
[button type="block" color="green"] Tombol Block Hijau [/button]
[button type="block" color="blue"] Tombol Block Biru [/button]

Catatan:
Untuk membuat tombol menjadi tipe Block, kalian harus menambahkan atribut type="block".
Kalian bisa melihat atribut warna yang tersedia di akhir artikel tutorial ini.

Kombinasi Tombol

Tombol Flat Rounded
Tombol Depressed Rounded Merah
Tombol Outline Rounded Hijau
Tombol Block Rounded Biru

Penulisan
[button type="flat rounded"] Tombol Flat Rounded [/button]
[button type="depressed rounded" color="red"] Tombol Depressed Rounded Merah [/button]
[button type="outline rounded" color="green"] Tombol Outline Rounded Hijau [/button]
[button type="block rounded" color="blue"] Tombol Block Rounded Biru [/button]

Catatan:
Kalian bisa membuat kombinasi tombol sesuka kalian (Jangan dipakai dulu, karena masih dalam pengembangan).
Kalian bisa melihat atribut warna yang tersedia di akhir artikel tutorial ini.

Ukuran Tombol

Terdapat beberapa ukuran tombol yang bisa kalian gunakan yaitu Small, Normal (Default), dan Large.

Tombol Kecil
Tombol Normal
Tombol Besar

Penulisan
[button size="small" color="red"] Tombol Kecil [/button]
[button color="red"] Tombol Normal [/button]
[button size="large" color="red"] Tombol Besar [/button]

Catatan:
Untuk mengatur ukuran tombol, kalian harus menambahkan atribut type="small" (Tombol kecil), type="large" (Tombol Besar), untuk tombol Normal tidak ada atribut yang harus ditambahkan karena merupakan ukuran Default.
Kalian bisa melihat atribut warna yang tersedia di akhir artikel tutorial ini.

Lain-lain

Menentukan URL tujuan

EL Creative Academy

Penulisan
[button color="red" link="https://elcreativeacademy.blogspot.com/"] EL Creative Academy [/button]

Catatan:
Untuk mengatur URL tujuan, gunakan atribut link="URL".
Secara default, linknya akan kosong (#).

Mengatur rel pada Link

EL Creative Academy

Penulisan
[button type="rounded" color="red" link="https://elcreativeacademy.blogspot.com/" rel="dofollow"] EL Creative Academy [/button]

Catatan:
Untuk mengatur atribut rel, gunakan rel="dofollow".
Secara default, atribut rel akan kosong.

Mengatur target link

EL Creative Academy

Penulisan
[button type="outline" color="red" target="_blank" link="https://elcreativeacademy.blogspot.com/"] EL Creative Academy [/button]

Catatan:
Untuk mengatur target link, gunakan target="_blank" (Membuka link pada jendela baru).
Secara default, target akan berupa _self (Membua link pada jendela yang sama).

Atribut

AtributNilaiDeskripsi
colorredUntuk menentukan warna tombol
pink
purple
deeppurple
indigo
blue
lightblue
cyan
teal
green
lightgreen
lime
yellow
amber
orange
deeporange
brown
bluegrey
grey
black
linkhttps://contoh.comUntuk menentukan URL tujuan
sizesmallUntuk menentukan ukuran
normal
Large
typedefaultUntuk menentukan tipe
flat
depressed
outline
rounded
block
reldofollowUntuk menentukan hubungan antar link
nofollow
Lebih lengkapnya, cek disini
target_blankMengatur target link
Lebih lengkapnya, cek disini

Kontribusi

Silahkan fork project Github saya.

Lisensi

MIT

2Komentar

Posting Komentar

Sebelumnya Selanjutnya