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

Pada tutorial kali ini, saya akan menunjukkan cara membuat Tabs 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-tab ul.tab-lists.tabs{margin:0;padding:0;list-style:none}.elc-tab ul.tab-lists.tabs li{margin:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:normal;text-align:center;vertical-align:middle;max-width:none;height:48px;list-style-type:none;-webkit-transition:-webkit-transform .6s cubic-bezier(.86,0,.07,1);transition:-webkit-transform .6s cubic-bezier(.86,0,.07,1);-o-transition:transform .6s cubic-bezier(.86,0,.07,1);transition:transform .6s cubic-bezier(.86,0,.07,1);transition:transform .6s cubic-bezier(.86,0,.07,1),-webkit-transform .6s cubic-bezier(.86,0,.07,1);white-space:nowrap;position:relative}.elc-tab ul.tab-lists.tabs li a{outline:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#767676;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1;flex:1 1;-ms-flex-preferred-size:264px;flex-basis:264px;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:inherit;padding:6px 12px;text-decoration:none;-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-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:normal;bottom:0}.elc-tab ul.tab-lists.tabs li a.active{color:#202124}.elc-tab ul.tab-lists.tabs li a.active::after{height:2px;width:100%;content:'';background-color:#202124;border-color:#202124;position:absolute;top:100%;-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);bottom:0;left:0}.elc-tab ul.tab-lists.tabs li a::after{height:2px;width:100%;content:'';position:absolute;top:100%;-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);bottom:0;left:0}.elc-tab .tab-content{clear:both;position:relative;z-index:50;top:2px}.elc-tab .tab_content{display:none;border-top:1px solid #EEE;padding:16px}.elc-tab .tab_content br:nth-child(1){display:none}

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 Tabs, 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 Tabs

Konten Tab 1

Penulisan

[tab]

[content title="Judul Tab 1"]
Konten Tab 1
[/content]

[content title="Judul Tab 2"]
Konten Tab 2
[/content]

[content title="Judul Tab 3"]
Konten Tab 3
[/content]

[/tab]

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

Kontribusi

Silahkan fork project Github saya.

Credit

jQuery

Lisensi

MIT

0Komentar

Sebelumnya Selanjutnya