Cara Membuat Info Blog Bergaya Jquery

Cara Membuat Info Blog Bergaya Jquery

Halo teman-teman semuanya masih semangatkan. Oh ya tutorial kali ini masih mengenai beragam animasi jQuery,dimana kali ini aku akan menjelaskan tentang Membuat Info Panel Slide Vertikal dengan jQuery. Sesuai dengan namanya yakni fungsinya ialah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya. Ok untuk lebih lengkapnya langsung menuju ke tkp aja ya....

• Log in dulu ke account blog anda

• Pada dasbor klik rancangan

• Pilih Edit HTML jangan lupa centang "Expand Template Widget"

• Cari kode berikut ]]></b:skin>

• Copy paste kode dibawah ini diatas kode ]]></b:skin>

.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}

• Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.

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

Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas.

• Masukan kode Javascript berikut dibawah script jQuery tadi:

<script type="text/javascript">

$(document).ready(function(){

$(".trigger").click(function(){

$(".panel").toggle("fast");

$(this).toggleClass("active");

return false;

});

});

</script>

• Langkah terakhir cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.

<div class='panel'>

<h3>Selamat Datang</h3>

<p style='text-align:justify'>Selamat datang di blog nobinoku, saya harap anda senang berada diblog sederhana ini. dan berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini<a href='http://ilhamibnupurnomo.blogspot.com/' title='ScienceWorld'>Selengkapnya tentang Saya</a></p>

<h3>Sepintas Tentang Nobinoku</h3>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRjGk04W-y-OFUCADNL9gc7earuQg01-gaa0MRKvqtbfmDC6NuN4-wXT5KF62tvvDpN-Fh0mx0XtVFHBOri32HZxTvYUr9YDdwLcTS-p7pwznaSfk88EOJL5hDeENo4ZAW-9MvifIsvQw/s220/nobi.jpg' width='73px' height='73px'/>

<p>Nama saya Arga Anggriawan saya seorang yang ingin belajar blogger. Saya memulai blogger sejak usia 18 th dan baru aja koq memulai aktifitas blogging.</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='http://facebook.com/inupurnomo' title='Facebook'>Facebook</a></li>

<li><a href='http://www.blogger.com/profile/9172771638054325521' title='About Me'>About Me</a></li>

<li><a href='mailto:ilham_ibnu_purnomo@gmail.com' title='Yahoo'>Yahoo</a></li>

</ul>

</div>

</div>

<div style='clear:both;'/>

</div>

<a class='trigger' href='#'>Info</a>

• Klik Simpan Selesai dan preview blog.

mungkin sekian tutorial dari saya. apabila ada kesalahan saya mohon maaf. selamat mencoba dan semoga berhas