Panel Seluncur yang dibuat sebagai Panel info author suatu web dengan jquery untuk memberitahukan informasi kepada pengunjung blog, Info slide panel ini diletakkan di sebelah kanan atas page blog mu dan kita akan coba Info Panel Slide Vertikal terapkan di bloger.
- Log in blogger
- Rancangan, edit html, centang tanda Expand Template Widget
- Cari kode ]]></b:skin> dan kopi kan CSS berikut diatasnya :
.panel{
position:fixed;
top:20px;
left:0;
background:#000;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
border:1px solid #444;
width:330px;
height:auto;
filter:alpha(opacity=85);-
moz-opacity:0.85;opacity:0.85;
display:none;
padding:30px 30px 30px 100px
}
.panel p{
color:#ccc;
margin:0 0 15px;padding:0
}
.panel a,.panel a:visited{
color:#9FC54E;
text-decoration:none;
border-bottom:1px solid #9FC54E;
margin:0;padding:0
}
.panel a:hover,.panel a:visited:hover{
color:#fff;
text-decoration:none;
border-bottom:1px solid #fff;
margin:0;
padding:0
}
a.trigger{
position:fixed;
text-decoration:none;
top:50px;left:0;
font-size:16px;
letter-spacing:-1px;
font-family:verdana, helvetica, arial, sans-serif;
color:#fff;font-weight:700;
background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;
border:1px solid #444;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-bottomleft:0;
-webkit-border-bottom-left-radius:0;
display:block;padding:15px 40px 15px 15px
}
a.trigger:hover{
position:fixed;
text-decoration:none;
top:50px;left:0;
font-size:16px;
letter-spacing:-1px;
font-family:verdana, helvetica, arial, sans-serif;
color:#fff;font-weight:700;
background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;
border:1px solid #444;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-bottomleft:0;
-webkit-border-bottom-left-radius:0;
display:block;
padding:15px 40px 15px 15px
}
a.active.trigger{
background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat
}
.columns{
clear:both;width:330px;
line-height:22px;
padding:0 0 20px
}
.colleft{
float:left;
width:130px;
line-height:22px
}
.colright{
float:right;
width:130px;
line-height:22px
}
a:focus{
outline:none
}
.panel img{
background-color:#262626;
border:1px solid #333;
float:right;
margin:3px 3px 6px 8px;
padding:5px
}
.panel h3{
border-bottom:1px solid silver;
margin-bottom:5px;
padding-bottom:3px;
text-align:left;
clear:both;
color:#FFF;
font-size:12px;
font-weight:700
}
.columns ul,.columns ul li{
list-style-type:none;
margin:0;
padding:0
}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Selanjutnya cari kode </body> lalu kopi kan kode berikut diatasnya :
<div class='panel'>
<h3>Selamat Datang kawan-kawan</h3>
<p style='text-align:justify'>Selamat datang di situs blog saya, maaf atas kekurangannya atau saya dianggap so tau dsb, sebenarnya saya membuat blog ini sebagai tempat belajar saya, sebagai tempat memuaskan rasa penasaran tentang semua yang ingin saya ketahui <a href=' http://indonesianzsecrert.blogspot.com ' title='Ciamis Blogger'>Selengkapnya tentang kami</a></p>
<h3>Sedikit Profil tentang saya</h3>
<img src='http://lh3.ggpht.com/_xTRukLv_HsA/TNjaYa1tSjI/AAAAAAAAABc/jZL2B4_PLHM/s140/screenshaver2.gif' width='73px' height='73px'/>
<p>Nama Saya Julian, saya seorang SMP, nama sekolah saya SMP 4 N tambun selatan - Bekasi</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='#' title='Twitter'>Twitter</a></li>
<li><a href='#' title='Facebook'>Facebook</a></li>
<li><a href='#' title='Digg'>Digg</a></li>
<li><a href='#' title='Del.Icio.Us'>Del.Icio.Us</a></li>
<li><a href='#' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>
Simpan template...........
Selamat mencoba........
Posting Komentar