Cara Membuat Spoiler Post Lirik Lagu Anime Di Blog

Cara Membuat Spoiler Post Lirik Lagu Anime Di Blog
Dengan menggunakan Spoiler Post ini pasti akan terlihat rapih dan tidak perlu scroll kebawah untuk melihat terjemahan lirik ataupun kanji nya dengan menggunakan multi tab Spoiler Post ini akan lebih mudah hanya cukup mengklik tab untuk melihat lirik lagu lain nya. Berbeda jika tidak menggunakan Spoiler Post pasti mengharuskan untuk menscroll kebawah untuk melihat lirik lainnya dan jika ingin melihat kembali pasti harus scroll ke atas lagi.

Untuk membuatnya sangat simple karena kalian tidak perlu memperlajari javascript atau css hanya perlu mengikuti tutorial dari blog ini saja dengan begitu kalian dapat membuat Spoiler lirik lagu dengan style yang kalian inginkan.


Cara Membuat Spoiler Post Lirik Lagu Anime Di Blog


1. Masuk ke Dashboard blog kamu blogger.com

2. Silahkan Klik Template/Tema cari kode </style> or </b:skin> lalu copy kode css dibawah ini
 .fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;}.fade.in{opacity:1;}.collapse{display:none;visibility:hidden;}.collapse.in{display:block;visibility:visible;}tr.collapse.in{display:table-row;}tbody.collapse.in{display:table-row-group;}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-property:height,visibility;transition-property:height,visibility;-webkit-transition-duration:.35s;transition-duration:.35s;-webkit-transition-timing-function:ease;transition-timing-function:ease;}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05);}.panel-body{padding:15px;}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-right-radius:3px;border-top-left-radius:3px;}.panel-heading>.dropdown .dropdown-toggle{color:inherit;}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit;}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px;}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0;}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0;}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-right-radius:3px;border-top-left-radius:3px;}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px;}.list-group+.panel-footer,.panel-heading+.list-group .list-group-item:first-child{border-top-width:0;}.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0;}.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption{padding-left:15px;padding-right:15px;}.panel>.table-responsive:first-child>.table:first-child,.panel>.table:first-child{border-top-right-radius:3px;border-top-left-radius:3px;}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px;}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:3px;}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:3px;}.panel>.table-responsive:last-child>.table:last-child,.panel>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px;}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px;}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px;}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px;}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd;}.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th{border-top:0;}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0;}.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0;}.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0;}.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th{border-bottom:0;}.panel>.table-responsive{border:0;margin-bottom:0;}.panel-group{margin-bottom:20px;}.panel-group .panel{margin-bottom:0;border-radius:4px;}.panel-group .panel+.panel{margin-top:5px;}.panel-group .panel-heading{border-bottom:0;}.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd;}.panel-group .panel-footer{border-top:0;}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd;}.panel-default{border-color:#ddd;}.panel-default>.panel-heading{color:#74b9ff;background-color:#f5f5f5;border-color:#ddd;}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd;}.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#74b9ff;}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd;}.panel-primary{border-color:#337ab7;}.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7;}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#337ab7;}.panel-primary>.panel-heading .badge{color:#337ab7;background-color:#fff;}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#337ab7;}.panel-success{border-color:#d6e9c6;}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6;}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6;}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d;}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6;}.panel-info{border-color:#bce8f1;}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1;}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1;}.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f;}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1;}.panel-warning{border-color:#faebcc;}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc;}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc;}.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b;}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc;}.panel-danger{border-color:#ebccd1;}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1;}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1;}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442;}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1;}.nav{margin-bottom:0;padding-left:0;list-style:none;}.nav>li{position:relative;display:block;}.nav>li>a{position:relative;display:block;padding:10px 15px;}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee;}.nav>li.disabled>a{color:#777;}.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;background-color:transparent;cursor:not-allowed;}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7;}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5;}.nav>li>a>img{max-width:none;}.nav-tabs{border-bottom:1px solid #ddd;}.nav-tabs>li{float:left;margin-bottom:-1px;}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0;}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd;}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;}.nav-tabs.nav-justified{width:100%;border-bottom:0;}.nav-tabs.nav-justified>li{float:none;}.nav-tabs.nav-justified>li>a{text-align:center;margin-bottom:5px;}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto;}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%;}.nav-tabs.nav-justified>li>a{margin-bottom:0;}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px;}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border:1px solid #ddd;}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0;}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff;}}.nav-pills>li{float:left;}.nav-pills>li>a{border-radius:4px;}.nav-pills>li+li{margin-left:2px;}.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{color:#fff;background-color:#337ab7;}.nav-stacked>li{float:none;}.nav-stacked>li+li{margin-top:2px;margin-left:0;}.nav-justified{width:100%;}.nav-justified>li{float:none;}.nav-justified>li>a{text-align:center;margin-bottom:5px;}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto;}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%;}.nav-justified>li>a{margin-bottom:0;}}.nav-tabs-justified{border-bottom:0;}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px;}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border:1px solid #ddd;}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0;}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff;}}.tab-content>.tab-pane{display:none;visibility:hidden;}.tab-content>.active{display:block;visibility:visible;}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-right-radius:0;border-top-left-radius:0;}.clearfix:after,.clearfix:before,.nav:after,.nav:before,.panel-body:after,.panel-body:before{content:" ";display:table;}.clearfix:after,.nav:after,.panel-body:after{clear:both;}.center-block{display:block;margin-left:auto;margin-right:auto;}.pull-right{float:right!important;}.pull-left{float:left!important;}.hide{display:none!important;}.show{display:block!important;}.invisible{visibility:hidden;}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}.hidden{display:none!important;visibility:hidden!important;}.affix{position:fixed;}.preset_select{width:30%;}.ki-default{background:#fff;}.ki-default li a{padding:10px 30px;border-bottom:1px solid #eee;margin-right:0;border-radius:0;color:#939599;outline:0;background:#fff;}.ki-default li a i{display:block;text-align:center;}.ki-default .nav-tabs .active a,.ki-default .nav-tabs .active a:focus,.ki-default .nav-tabs .active a:hover{box-shadow:inset 0 8px 0 -5px #74b9ff;background:#fff;}.ki-default .tab-content{border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;background:#74b9ff;color:#fff!important;}.ki-default .tab-content .active{padding:15px;}.ki-blue>.panel>.panel-heading{background:#d9edf7;color:#31708f;border-color:#bce8f1;padding:0;}.ki-blue>.panel>.panel-heading a{text-decoration:none;display:block;padding:10px 15px;}.ki-blue>.panel-default{border-color:#bce8f1;}.ki-blue>.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1;}.ki-blue>panel-default>panel-heading>panel-title>a{color:#31708f;}.ki-blue{background:#fff;}.ki-blue li a{padding:10px 30px;border-bottom:1px solid #eee;margin-right:0;border-radius:0;color:#939599;outline:0;background:#fff;}.ki-blue li a i{display:block;text-align:center;}.ki-blue .nav-tabs .active a,.ki-blue .nav-tabs .active a:focus,.ki-blue .nav-tabs .active a:hover{box-shadow:inset 0 8px 0 -5px #054182;color:#054182;background:#fff;}.ki-blue .tab-content{border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;background:#fff;}.ki-blue .tab-content .active{padding:15px;}.ki-green>.panel>.panel-heading{background:#dff0d8;color:#3c763d;border-color:#d6e9c6;padding:0;}.ki-green>.panel>.panel-heading a{text-decoration:none;display:block;padding:10px 15px;}.ki-green>.panel-default{border-color:#d6e9c6;}.ki-green>.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd;}.ki-green>panel-default>panel-heading>panel-title>a{color:#3c763d;}.ki-green{background:#fff;}.ki-green li a{padding:10px 30px;border-bottom:1px solid #eee;margin-right:0;border-radius:0;color:#939599;outline:0;background:#fff;}.ki-green li a i{display:block;text-align:center;}.ki-green .nav-tabs .active a,.ki-green .nav-tabs .active a:focus,.ki-green .nav-tabs .active a:hover{box-shadow:inset 0 8px 0 -5px #9aca40;color:#9ACA40;background:#fff;}.ki-green .tab-content{border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;background:#fff;}.ki-green .tab-content .active{padding:15px;}.ki-yellow>.panel-tab>.panel-heading{color:#8a6d3b;background:#fcf8e3;border-color:#faebcc;padding:0;}.ki-yellow>.panel-tab>.panel-heading a{text-decoration:none;display:block;padding:10px 15px;}.ki-yellow>.panel-default{border-color:#faebcc;}.ki-yellow>.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd;}.ki-yellow>panel-default>panel-heading>panel-title>a{color:#8a6d3b;}.ki-yellow{background:#fff;}.ki-yellow li a{padding:10px 30px;border-bottom:1px solid #eee;margin-right:0;border-radius:0;color:#939599;outline:0;background:#fff;}.ki-yellow li a i{display:block;text-align:center;}.ki-yellow .nav-tabs .active a,.ki-yellow .nav-tabs .active a:focus,.ki-yellow .nav-tabs .active a:hover{box-shadow:inset 0 8px 0 -5px #e2fc00;color:#E2FC00;background:#fff;}.ki-yellow .tab-content{border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;}.ki-yellow .tab-content .active{padding:15px;}.ki-red>.panel>.panel-heading{color:#a94442;background:#f2dede;border-color:#ebccd1;padding:0;}.ki-red>.panel>.panel-heading a{text-decoration:none;display:block;padding:10px 15px;}.ki-red>.panel-default{border-color:#ebccd1;}.ki-red>.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1;}.ki-red>panel-default>panel-heading>panel-title>a{color:#a94442;}.ki-red{background:#fff;}.ki-red li a{padding:10px 30px;border-bottom:1px solid #eee;margin-right:0;border-radius:0;outline:0;background:#fff;}.ki-red li a i{display:block;text-align:center;}.ki-red .nav-tabs .active a,.ki-red .nav-tabs .active a:focus,.ki-red .nav-tabs .active a:hover{box-shadow:inset 0 8px 0 -5px #fc0000;color:#FC0000;background:#fff;}.ki-red .tab-content{border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;background:#fff;}.ki-red .tab-content .active{padding:15px;}.ki-default>.panel>.panel-heading{padding:0;}.ki-default>.panel>.panel-heading a{text-decoration:none;display:block;padding:10px 15px;}.panel-heading .panel-title{margin:0;}.panel-heading .panel-title>a{border-bottom:0;} 
3. Simpan kode css tersebut diatas kode </style> or </b:skin>

4. Kemudian cari kode </body> dan copy kode javascript dibawah ini taruh diatas kode </body>
 <script>
//<![CDATA[
// Spoiler Post Anime By Kangian
+function($){'use strict';var Tab=function(element){this.element=$(element)}
Tab.VERSION='3.3.2'
Tab.TRANSITION_DURATION=150
Tab.prototype.show=function(){var $this=this.element
var $ul=$this.closest('ul:not(.dropdown-menu)')
var selector=$this.data('target')
if(!selector){selector=$this.attr('href')
selector=selector&&selector.replace(/.*(?=#[^\s]*$)/,'')}
if($this.parent('li').hasClass('active'))return
var $previous=$ul.find('.active:last a')
var hideEvent=$.Event('hide.bs.tab',{relatedTarget:$this[0]})
var showEvent=$.Event('show.bs.tab',{relatedTarget:$previous[0]})
$previous.trigger(hideEvent)
$this.trigger(showEvent)
if(showEvent.isDefaultPrevented()||hideEvent.isDefaultPrevented())return
var $target=$(selector)
this.activate($this.closest('li'),$ul)
this.activate($target,$target.parent(),function(){$previous.trigger({type:'hidden.bs.tab',relatedTarget:$this[0]})
$this.trigger({type:'shown.bs.tab',relatedTarget:$previous[0]})})}
Tab.prototype.activate=function(element,container,callback){var $active=container.find('> .active')
var transition=callback&&$.support.transition&&(($active.length&&$active.hasClass('fade'))||!!container.find('> .fade').length)
function next(){$active.removeClass('active').find('> .dropdown-menu > .active').removeClass('active').end().find('[data-toggle="tab"]').attr('aria-expanded',!1)
element.addClass('active').find('[data-toggle="tab"]').attr('aria-expanded',!0)
if(transition){element[0].offsetWidth
element.addClass('in')}else{element.removeClass('fade')}
if(element.parent('.dropdown-menu').length){element.closest('li.dropdown').addClass('active').end().find('[data-toggle="tab"]').attr('aria-expanded',!0)}
callback&&callback()}
$active.length&&transition?$active.one('bsTransitionEnd',next).emulateTransitionEnd(Tab.TRANSITION_DURATION):next()
$active.removeClass('in')}
function Plugin(option){return this.each(function(){var $this=$(this)
var data=$this.data('bs.tab')
if(!data)$this.data('bs.tab',(data=new Tab(this)))
if(typeof option=='string')data[option]()})}
if($.fn.tab)return;var old=$.fn.tab
$.fn.tab=Plugin
$.fn.tab.Constructor=Tab
$.fn.tab.noConflict=function(){$.fn.tab=old
return this}
var clickHandler=function(e){e.preventDefault()
Plugin.call($(this),'show')}
$(document).on('click.bs.tab.data-api','[data-toggle="tab"]',clickHandler).on('click.bs.tab.data-api','[data-toggle="pill"]',clickHandler)}(jQuery);+function($){'use strict';function transitionEnd(){var el=document.createElement('bootstrap')
var transEndEventNames={WebkitTransition:'webkitTransitionEnd',MozTransition:'transitionend',OTransition:'oTransitionEnd otransitionend',transition:'transitionend'}
for(var name in transEndEventNames){if(el.style[name]!==undefined){return{end:transEndEventNames[name]}}}
return!1}
if($.fn.emulateTransitionEnd)return;$.fn.emulateTransitionEnd=function(duration){var called=!1
var $el=this
$(this).one('bsTransitionEnd',function(){called=!0})
var callback=function(){if(!called)$($el).trigger($.support.transition.end)}
setTimeout(callback,duration)
return this}
$(function(){$.support.transition=transitionEnd()
if(!$.support.transition)return
$.event.special.bsTransitionEnd={bindType:$.support.transition.end,delegateType:$.support.transition.end,handle:function(e){if($(e.target).is(this))return e.handleObj.handler.apply(this,arguments)}}})}(jQuery)
//]]>
</script> 
5. Simpan Template/Tema

6. Sekarang untuk pemasangan kodenya masuk ke post > Lalu pilih mode HTML bukan Compose dan masukan kode HTML berikut
 <div class="ki-default" role="tabpanel" data-example-id="togglable-tabs">
  <ul id="myTab-1" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#ki-tab-1" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Romaji</a></li>
    <li role="presentation" class=" "><a href="#ki-tab-2" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Japanese</a></li>
    <li role="presentation" class=" "><a href="#ki-tab-3" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">English</a></li>
    <li role="presentation" class=" "><a href="#ki-tab-4" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Indonesia</a></li>
  </ul>
  <div id="myTabContent-1" class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="ki-tab-1" aria-labelledby="home-tab">
      <p>Content</p>
    </div>
    <div role="tabpanel" class="tab-pane fade in" id="ki-tab-2" aria-labelledby="home-tab">
      <p>Content</p>
    </div>
    <div role="tabpanel" class="tab-pane fade in  " id="ki-tab-3" aria-labelledby="home-tab">
      <p>Content</p>
    </div>
    <div role="tabpanel" class="tab-pane fade in  " id="ki-tab-4" aria-labelledby="home-tab">
      <p>Content</p>
    </div>
  </div>
</div> 
7. Pada tulisan Content isi dengan lirik lagu anime

8. Selesai

Bagaimana mudah tidak? kalau mudah bagus donk berarti kalian paham betul cara pemasangan nya tapi kalau susah tinggal berkomentar saja nanti saya jawab. Jangan lupa share artikel ini jika memang bermanfaat :)

Berlangganan update artikel terbaru via email:

Show comments
Hide comments

0 Response to "Cara Membuat Spoiler Post Lirik Lagu Anime Di Blog"

Post a Comment

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ