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 alert 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 .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}.elc-alert{color:#fff;display:-ms-flexbox;display:-webkit-box;display:flex;font-size:14px;margin:4px auto;padding:16px;position:relative;-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);-webkit-box-align:center;-ms-flex-align:center;align-items:center}.elc-alert.success{background-color:var(--md-green)}.elc-alert.info{background-color:var(--md-blue)}.elc-alert.warning{background-color:var(--md-amber)}.elc-alert.error{background-color:var(--md-red)}.elc-alert .alert-text{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-flex:1 1;-webkit-box-flex:1;flex:1 1}.elc-alert .dismiss-button svg{margin-left:16px;margin-right:0}.elc-alert .dismiss-button{cursor:pointer}.elc-alert.success.outline{border:1px solid currentColor;color:var(--md-green);background:transparent}.elc-alert.info.outline{border:1px solid currentColor;color:var(--md-blue);background:transparent}.elc-alert.warning.outline{border:1px solid currentColor;color:var(--md-amber);background:transparent}.elc-alert.error.outline{border:1px solid currentColor;color:var(--md-red);background:transparent}

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 Alert, 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 JavaScript diatas sudah di Minified/Di kompress, jika kalian ingin menggunakan versi yang belum di Minify atau ingin berkontribusi, kalian bisa kunjungi halaman Github saya.
Jika Sebelumnya kalian sudah memasang kode Shortcode.js diatas, maka kalian tidak perlu memasangnya lagi.

Contoh Alert

Alert Default


Alert Sukses

Alert Warning

Alert Error

Alert Info

Penulisan
[alert] Alert Sukses [alert]
[alert type="warning"] Alert Warning [/alert]
[alert type="error"] Alert Error [/alert]
[alert type="info"] Alert Info [/alert]

Catatan:
Gunakan atribut style=".." untuk menentukan jenis Alert.
Kalian bisa melihat atribut yang tersedia di akhir artikel tutorial ini.

Alert Outline


Alert Sukses Outline

Alert Warning Outline

Alert Error Outline

Alert Info Outline

Penulisan
[alert style="outline"] Alert Sukses Outline [/alert] 
[alert style="outline" type="warning"] Alert Warning Outline [/alert] 
[alert style="outline" type="error"] Alert Error Outline [/alert] 
[alert style="outline" type="info"] Alert Info Outline [/alert] 

Catatan:
Gunakan atribut style="outline" untuk menentukan style pada Alert.
Kalian bisa melihat atribut yang tersedia di akhir artikel tutorial ini.

Alert Default Dismissable


Alert Sukses Outline

Alert Warning Outline

Alert Error Outline

Alert Info Outline

Penulisan
[alert style="dismiss"] Alert Sukses [alert]
[alert style="dismiss" type="warning"] Alert Warning [/alert]
[alert style="dismiss" type="error"] Alert Error [/alert]
[alert style="dismiss" type="info"] Alert Info [/alert]

Catatan:
Tambahkan nilai dismiss pada atribut style=".." untuk menggunakan Dismissable Alert.
Kalian bisa melihat atribut yang tersedia di akhir artikel tutorial ini.

Alert Outline Dismissable


Alert Sukses Outline

Alert Warning Outline

Alert Error Outline

Alert Info Outline

Penulisan
[alert style="outline dismiss"] Alert Sukses Outline [/alert] 
[alert style="outline dismiss" type="warning"] Alert Warning Outline [/alert] 
[alert style="outline dismiss" type="error"] Alert Error Outline [/alert] 
[alert style="outline dismiss" type="info"] Alert Info Outline [/alert] 

Catatan:
Tambahkan nilai dismiss pada atribut style=".." untuk menggunakan Dismissable Alert.
Kalian bisa melihat atribut yang tersedia di akhir artikel tutorial ini.

Kontribusi

Silahkan fork project Github saya.

Lisensi

MIT

0Komentar

Sebelumnya Selanjutnya