Membuat Info Panel Slide (Tersembunyi)

Baca Juga

Kang Fiqih | Assalamu'alaikum wr.wb., baru kali ini saya merasakan yang selalu dirasakan kebanyakan orang di bulan ramadhan, apalagi namanya kalau bukan "mudik". Memang, setelah melakukan mudik, ada suka dan ada duka yang saya rasakan pada saat itu. Sudah ceritanya sampai disana..hehe .. Sekarang kita masuk ke pembahasan saja, pertemuan kali ini saya akan sedikit membahas tentang Membuat Info Panel Slide (Tersembunyi) di blog Anda semuanya dan bisa dicoba setelah mengikuti tutorial ini. 

Info Panel Slide adalah dimana kita menyembunyikan info panel yang kita pasang ini tersembunyi dan bisa dilihat dengan menekan sebuah tombol. Yang disembunyikan di sini berupa informasi mengenai blog yang kita miliki dan juga si adminnya itu sendiri, contohnya bisa Anda lihat sendiri pada gambar di atas. Bagaimana cara membuatnya? Langsung saja ikuti tutorial di bawah ini

1. Login ke Akun blog Anda.

2. Klik Template.

3. Pilih Edit HTML.

4. Pada kolom script, carilah kode ]]></b:skin> dengan menggunakan Ctrl+F untuk mempercepat pencarian. Letakkan kode di bawah ini 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}

5. Kemudian cari kode </head> dengan cara yang sama seperti langkah no 4 dan letakkan kode di bawah ini diatasnya

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

keterangan :

• Jika script jquery di atas sudah ada maka tidak perlu ditambahkan ke blog Anda, langsung ke langkah selanjutnya saja.

6. Masukkan kode di bawah ini dibawah kode jquery tadi

    

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".trigger").click(function(){ 
$(".panel").toggle("fast"); 
$(this).toggleClass("active"); 
return false; 
}); 
}); 
</script>

7. Langkah pamungkas adalah mencari satu kode lagi yakni </body>, setelah itu copy kode di bawah ini tepat di atasnya

<div class='panel'>
<h3>Selamat Datang di Kangfiqih</h3>
<p style='text-align:justify'>Selamat datang di blog kangfiqih, blog yang difungsikan untuk membantu Anda dalam memecahkan masalah yang Anda alami. Saya berharap blog ini dapat menyenangkan Anda dan saya berharap Anda berkenan untuk datang kembali di lain waktu. Silahkan Anda mencari hal-hal baru di blog ini. Selamat beraktifitas dan sampai jumpa. <a href='http://kangfiqih.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

<h3>Sekilas tentang kangfiqih</h3>
<img height='73px' src='http://i984.photobucket.com/albums/ae322/fiqihpunya/946388_592291774123619_159164671_n_zps64218e9e.jpg' width='73px'/>
<p>Kangfiqih, dia masih berusia 17 tahun. Dia mengawali dunia blogger pada saat memasuki kelas 12 di SMA, sampai sekarang dia sudah menjadi mahasiswa di salah satu perguruan tinggi negeri di Indonesia. Belajar menjadi blogger didasari dari hobinya yang selalu menekuni dunia komputer. Semoga kedepannya dia menjadi lebih baik dan lebih baik lagi.</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://twitter.com/fiqihpunya' title='Twitter'>Twitter</a></li>
<li><a href='http://www.facebook.com/fiqih21' title='Facebook Me'>Facebook Me</a></li>
<li><a href='mailto:abcdef@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

keterangan :

• Untuk keterangannya bisa Anda lihat gambar di atas dan sesuaikan dengan yang kalian inginkan.
• Khusus untuk yang berwarna hijau ganti dengan url gambar yang akan Anda tampilkan nanti.

8. Klik Simpan Template.


Selamat beraktifitas dan sampai jumpa ...