Cara Membuat Spoiler Di Postingan Blog

Cara Membuat Spoiler Di Postingan - Halo sobat blogger, kali ini saya akan membagikan tutorial Cara Membuat Spoiler Di Post Blog, pada kesempatan sebelumnya saya sudah post Cara Memperbaiki Post Pada Blog Manga yang mungkin bermanfaat buat kalian.

Tutorial kali ini mungkin bermanfaat buat kalian yang ingin membuat artikel namun tidak mau isi artikel tersebut terlalu panjang kebawah, maka dari itu saya disini membagikan tutorial ini. Ok kita mulai saja tutorial kali ini.

Cara Membuat Spoiler Di Postingan

1. Pastikan Markup javascript ini ada ditemplate blog kalian, letaknya terdapat di atas </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>

2. Buka Blog > Template > Edit HTML, lalu salin Javascript dibawah ini dan letakkan di atas </head>

<script>
//<![CDATA[
$(document).ready(function(){$("#content").find("[id^='tab']").hide(),$("#tabs li:first").attr("id","current"),$("#content #tab1").fadeIn(),$("#tabs a").click(function(t){t.preventDefault(),"current"!=$(this).closest("li").attr("id")&&($("#content").find("[id^='tab']").hide(),$("#tabs li").attr("id",""),$(this).parent().attr("id","current"),$("#"+$(this).attr("name")).fadeIn())})});
//]]>
</script>

3. Salin CSS ini dan letakkan di atas </style>

/* CSS Spoiler Tabs Post */
#tabs{overflow:hidden;width:100%;margin:0;padding:0;list-style:none}
#tabs li{float:left;margin:0 ;margin-right:0.5%}
#tabs a{float:left;position:relative;padding:0 9px;height:0;line-height:200px;text-transform:none;text-decoration:none;color:#fff;filter:alpha(opacity=30)}
#tabs a:hover,#tabs a:focus{border-bottom-color:#2e51a2;opacity:1;filter:alpha(opacity=100)}
#tabs a:focus{outline:0}
#content {padding: 10px 5px;background: #eee;}
#tabs #current{z-index:3;border-bottom-color:#3d3d3d;opacity:1;filter:alpha(opacity=100);margin-bottom:5px}
#tabs a{height:0;line-height:30px;border-bottom:30px solid #34373b;font-size:smaller}

4. Lalu Markup HTML berikut ini untuk didalam postingan blog kalian

<ul id="tabs">
<li><a href="#" name="tab1">English</a></li>
<li><a href="#" name="tab2">Indonesia</a></li>
</ul>

<div id="content">
<div id="tab1">
ISI KONTEN TAB 1
</div>
<div id="tab2">
ISI KONTEN TAB 2
</div>
</div>

Sekian tutorial dari saya, semoga bermanfaat.