Sebelumnya saya peringatkan dahulu sebelum mencoba trik ini,backup dahulu template kamu agar tidak terjadi hal - hal yang tidak diinginkan.kemungkinan berhasilnya trik ini tergantung dirimu sendiri,bagi yang sudah familiar/biasa main css dan html,saya yakin sudah mengerti,tapi bagi yang belum,saya sarankan jangan,tapi jika berniat sungguh",silakan berusaha,saya hanya bisa membantu memberikan solusi,bukan bantuan ini itu =___=v.
#atau yang ga mau ribet ,saya sudah sediakan template yang udah jadi'a~:hatsune miku magazine style+demo
Ok,pertama seperti biasa buka blogger=>template=>edit HTML,setelah itu,ikuti intruksi" dibawah ini.
Copy paste semua CSS ini dibawah code ]]></b:skin>
<style type='text/css'>
#panel{
overflow:auto;
display:block;
}
.slide{
margin:0;
padding:0;
}
.btn-slide:hover {background:#CA2968;}
.btn-slide {
cursor: pointer;
text-align: center;
padding: 10px;
display: block;
color: #B3B3A9; /*Warna text*/
background-color: #1F1538; /*warna background tombol menu*/
position: absolute;
z-index: 9;
margin-left: 0px; /*atur posisi dengan margin*/
margin-right: 0px; /*atur posisi dengan margin*/
margin-top: 0px; /*atur posisi dengan margin*/
margin-bottom: 0px; /*atur posisi dengan margin*/
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
width: 50px; /*Lebar*/
height: 50px; /*tinggi*/
line-height: 50px;
border: 5px solid white; /*border atau garis pinggir*/
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.5); /*bayangan*/
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
} /* trik dari djogzs.blogspot.com*/
</style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#panel{
overflow:auto;
display:none; /*panel yang disembunyikan dalam keaddan normal*/
}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.btn-slide{display:none;} /*Agar tombol menu hilang di halaman posting*/
</style>
</b:if>
Lalu copy paste juga Jquery dibawah ini diatas code </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('.btn-slide').click(function(){
$('#panel').slideToggle('slow');
});
});
</script>
Selanjutnya pengaturan code HTMl'a.perhatikan kode html dibawah ini dan copy paste//Kode Html dibawah ini,adalah tombol open untuk membuka tutup content//
<div class='slide'><span class='btn-slide'>-OPEN-</span></div>kemudian,tentukan content yang akan kamu sembunyikan.
<div id='panel'>
isi content
</div>
#Contoh pada template hatsune miku magazine style
<div id='panel'>
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='sidebar-right'> /*Sidebar*/
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Profile1' locked='false' title='Profile' type='Profile'/>
</b:section>
</div>
<div id='content-wrapper'> /*wrapper*/
<div id='main-wrap1'>
<div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'> /*posting*/
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>
</div>
Intinya,semua kode html yang ada didalam code <div id='panel'> akan tersembunyi,dan difungsikan seperti .
accordion/ buka tutup.Setelah itu,simpan dan lihat hasilnya.
#trik ini sudah saya tinjau dan coba",hasil'a 2 template ujicoba berhasil diterapkan.
mohon maaf kalau penjelasan'a agak rumit,tapi teorinya sudah cukup dan dapat dicoba,semoga berhasil,:)
source:http://djogzs.blogspot.com/
