Cara Memasang Kotak Info Melayang Pada Blogspot

Dikirim oleh Andi Syam Sabtu, 01 Januari 2011 6 Komentar Post views:

Langkah pertama login ke blog sobat dan pilih Rancangan dan Edit HTML, selanjutnya demi keamanan pada proses pengeditan sebaiknya sobat backup terlebih dahulu template sobat.
Beri tanda centang Expand Template Widget
Kemudian cari kode ]]></b:skin> untuk mempermudah pencarian tekan Ctrl+F
Selanjutnya silahkan sobat copy pastekan kode dibawah ini di atas kode ]]></b:skin>

/* kotak author
----------------------------------------------- */
#authorinfo{
margin:20px 0 5px;
padding:4px;
background:#eee;
background:-moz-linear-gradient(top, rgba(255,255,255,.9), rgba(211,211,211,.9));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211,211,211,.9)));
border:1px solid #fff;
border-radius:0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-webkit-box-shadow:#600 0 2px 12px;
-moz-box-shadow:#600 0 2px 7px;
width:auto;
text-shadow:0 1px 0 #FFFFFF;
}
#authorinfo .informasi{
line-height:16px;
margin:0;
padding:2px;
height:80px;
}
#authorinfo .informasi a {
text-decoration:none !important;
}
#authorinfo img {
float:left;
margin:2px 8px 2px 2px;
padding:0;
width:72px;
height:72px;
border:2px solid #999;
}
#authorinfo .informasi ul, #authorinfo .informasi ul li {
margin:0;
padding:0;l
ist-style-type:none;
}




Langkah selanjutnya silahkan sobat copy pastekan kode berikut tepat di bawah kode ]]></b:skin>

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


Script diatas harus diparse terlebih dahulu untuk memasangnya di template sobat 



Setelah proses diatas selesai jangan simpan template sobat karena masih ada kode yang akan ditambahkan. Kode berikut yang akan menampilkan info sobat pada kotak info yang sobat buat tadi. Letakkan kode berikut diatas kode </body> :

<div class='panel'>
<h3>Selamat Datang Di Belajar Komputer</h3>
<p style='text-align:justify'>Selamat datang di Belajar Komputer, semoga saja sobat bisa mendapatkan apa yang sobat butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya, apabila berkenan silahkan sobat berkomentar dan follow blog saya. Salam hangat dari saya... </p>
<h3>Sekilas tentang Belajar Komputer</h3>
<img height='73px' src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs223.ash2/48935_1848526219_7730027_q.jpg' width='73px'/>
<p>Perkenalkan nama saya Syam, Keseharian saya mengajar pada SMU Negeri di Sulawesi Selatan tepatnya di Kab.Maros, selain itu saya bekerja sambilan sebagai IT Support.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://www.andisyam.web.id/' title='home'>Home</a></li>
<li><a href='http://www.andisyam.web.id/2009/12/site-map.html' title='sitemap'>Daftar Isi</a></li>
<li><a href='http://www.andisyam.web.id/2009/12/link-sobat.html' title='link sobat'>Link Exchange</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='blog'/></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/syam_u' title='twitter'>Twitter</a></li>
<li><a href='http://www.facebook.com/syam.u' title='facebook'>Facebook</a></li>
<li><a href='http://inspirasisyam.blogspot.com/' title='blogspot'>My Blog </a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>


kode diatas silahkan sobat modif dengan alamat dan penamaan teks yang berwarna merah dengan yang akan sobat munculkan dan silahkan sobat modifikasi.