Ads by Yasya El Hakim

Membuat Accordion dengan EL Creative GoDev Shortcode.js dan Material.css

Pada tutorial kali ini, saya akan menunjukkan cara membuat Accordion 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 dibawah ini 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}.elc-accordion{-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);margin:10px}.elc-accordion .accordion-item:first-child{border-top:none}.elc-accordion .accordion-item{background:#fff;border-top:thin solid #dadce0;padding:0}.elc-accordion .accordion-item:not(.selected) h2{cursor:pointer}.elc-accordion .accordion-item h2{outline:none;position:relative;font-size:inherit;margin:0}.elc-accordion h2{background-color:#fff;color:#202124;font-size:1rem;font-weight:500;line-height:1.25rem;margin:0;padding:.875rem 3.25rem .875rem 1.75rem}.elc-accordion .accordion-item h2 .up,.elc-accordion .accordion-item.selected h2 .down{display:none}.elc-accordion .accordion-item.selected h2 .up{display:block}.elc-accordion .accordion-item h2 svg{height:1.25rem;position:absolute;right:1.75rem;top:calc(50% - .625rem);width:1.25rem}.accordion-content{margin-bottom:0;-webkit-transition:margin-top .5s;-o-transition:margin-top .5s;transition:margin-top .5s;color:#3c4043;display:none;padding:.875rem 3.25rem .875rem 1.75rem}.accordion-content br:nth-child(1){display:none}.elc-accordion.popout .accordion-item.selected{-webkit-box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);margin:16px 0}

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 Accordion, 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 dibawah ini:

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 Accordion

Judul Item 1

Konten Item 1

Judul Item 2

Judul Item 3


Penulisan

[accordion]

[item title="Judul Item 1"]
Konten Item 1
[/item]

[item title="Judul Item 2"]
Konten Item 2
[/item]

[item title="Judul Item 3"]
Konten Item 3
[/item]

[/accordion]

Catatan:
Gunakan shortcode [accordion] untuk membuat Accordion.
Gunakan shortcode [item] untuk menentukan item dari Accordion.
Gunakan shortcode [item title="Judul Item"] untuk menentukan judul item.
Letakan konten item diantara shortcode [item title="Judul"] dan [/item].
Sama seperti HTML, penulisan shortcode memiliki Opening Tag [accordion] dan Closing Tag [/accordion].

Kontribusi

Silahkan fork project Github saya.

Credit

jQuery

Lisensi

MIT

0Komentar

Sebelumnya Selanjutnya