Jumat, 28 Januari 2011

Membuat Vertikal Sliding Kaya di Sebelah tu. . . .

langsung saja. kita mulai.

Pertama-tama jangan lupa baca do'a dulu, kalau belum sholat(bagi yang muslim), sholat dulu, biar blognya laris. OK. .                       :).

1. Log In ke akun Blogger anda
2. Pilih Rancangan lalu ke Edit HTML
3. Jangan lupa di back up dulu ok. . , karena trik ini rawan kesalahan bagi yang gx mudeng.
4. Klik "Expand Template Widget"
5. Cari kode ini  ]]><b/skin>
6. Copas kode di bawah ini, taruh tepat di atas 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}


7. Kemudian cari kode </head>

8. Kemudian copas kode ini tepat di atas kode tadi

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


9. Kemudian cari kode </body> dan taruh script berikut tepat di atasnya


<div class='panel'>
<h3>Selamat Datang Di "K-sEm"</h3>

<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>Sekilas tentang "K-sEm"</h3>
<p>Berawal dari iseng. Hingga menjadi hobi. <b>(TRESNO JALARAN SAKA GAK NO SING LIYA)</b>.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://k-sem.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://www.blogger.com/profile/04697634038556937783' title='about'>About Me</a></li>
<li><a href='http://k-sem.blogspot.com/feeds/posts/default' title='subscibe'>Subscibe</a></li>
</ul>
</div>
<div class='colright'>
<h3>Contact</h3>
<ul>
<li><a href='http://twitter.com/k_s3m' target='_new' title='twitter'>Twitter</a></li>
<li><a href='http://id-id.facebook.com/people/K-sem-Winata/100001113099309' target='_new' title='facebook'>Facebook</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>"K-sEm"</a>


Simpan Template

copasedsi(copy paste edit sedikit) dari http://www.oktri.co.cc/

Artikel Terkait



0 komentar:

Posting Komentar

 

Selamat Datang Di "K-sEm"

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...

Sekilas tentang "K-sEm"

Berawal dari iseng. Hingga menjadi hobi. (TRESNO JALARAN SAKA GAK NO SING LIYA).

Contact

"K-sEm"