.png "Sebelum di klik")
2. Template -> Edit HTML.
3. Lanjutkan -> Centang Expand Template Widget.
4. Gunakan CTRl dan F atau F3.
5. Lalu, cari tag ]]></b:skin>
6. Tepat diatasnya, copy paste kode berikut :
7. Selanjutnya, cari tag </head>
.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 #666;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px 30px 30px 100px} .panel p{color:#fff;margin:0 0 15px;padding:0} .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0} .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-9_rubUkTkl4TpBrHAismXwNzNeZBfo92gjOwtIjPebojzcfjOVPYEnNGi7lMSw1CcyThQakvuJJ3rl8jurTHq4ddkmMMkiXzLZLDowhFlBFbg13EYIRHIecrbr4Dsa_7YdsztrICbE/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-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:10px 35px 10px 10px} 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-9_rubUkTkl4TpBrHAismXwNzNeZBfo92gjOwtIjPebojzcfjOVPYEnNGi7lMSw1CcyThQakvuJJ3rl8jurTHq4ddkmMMkiXzLZLDowhFlBFbg13EYIRHIecrbr4Dsa_7YdsztrICbE/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-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:10px 40px 10px 10px} a.active.trigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3tsyymqE5FQcM9FAVOrLL1YWakhAjoDhG6ET2HM-aJB7R5llXDZLe6IBrzbLOdFHIu2GZ7SWfCkUMfqKTdrvbWW_bG-eanXF_3ShzCU9nKicmsPWv2HwG5viZD96WnIhEey95I7djsM0/s320/minus.png) 85% 55% no-repeat} .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px} a:focus{outline:none} .panel img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px} .panel h3{border-bottom:1px solid #666;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#fff;font-size:13px;font-weight:700} .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
8. Copas kode berikut tepat diatasnya.
<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){$(".trigger").click(function(){$(".panel").toggle("fast");$(this).toggleClass("active");return false;});});</script>
9. Klik Save template.
Sekarang, anda hanya perlu menambahkan beberapa kode untuk menampilkan widget ini. Caranya sebagai berikut :
1. Tata letak.
2. Klik Add Gadget.
3. Klik HTML/Javascript.
4. Copas kode dibawah :
<div class='panel'><center><font size="1"><a href="http://myblogger-tutorials.blogspot.com/2012/09/buat-sliding-info-panel-di-blogspot.html"target=_blank"><div style="color: #444444;"><span >make own</span></div></a></font></center><h3>KATA SAMBUTAN</h3><p style="text-align:justify">Salam Blogger | KATA - KATA YANG INGIN ANDA SAMPAIKAN<br/><a title="NAMA ANDA DISINI" target="_blank" href="http://www.blogger.com/profile/08113139411481282535">Selengkapnya tentang saya</a></p><h3>Author..</h3><img width="73px" height="73px" alt="Nama Anda Disini" src="URL Foto profile anda disini" /><p>Nama anda disini<br/>Caritakan Tentang anda</p><div class='columns'><div class='colleft'><h3>FIND ME ON..</h3><a href="feeds/posts/default"><img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6EIwYatskSBB-wIc0U2HL_H7N0Ud90JRHur8_QbXSorxV59vb-rrLkWvMkwVrEa7CkRaDOW1p49ubL5FZN3ngGEcB2I1j1LbbqOlRifLpLWcMwIPAljvXF2108-88u8exA02Q3JeCoLg/s320/r.png" /></a><a href="http://www.mybloglog.com/buzz/members/08113139411481282535/"><img alt="mybloglog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA-LunYWkZXUurApBVEIZJjY9uWqYF0WF4ptuZfSQXy5BHJsMB56ItiKzEiEOaMGnOMdlMRg0H8ds9IxEZ47sHtBQ7JturPUkxSiJkr2JOWmOUG5YUv4I6Gke68dli4BJe0UZfljuVj4c/s320/l.png" /></a><a href="https://twitter.com/#!/yustin_annisa"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNaBOjJ4dKzd-hd2ebkqfMKZQAzB8bxFskHF6cd-dSviCyaG7QW7i_8poy_kZqMRpq0C25sCxA6kzTni5ojQA3ZrpQar-5hvfaFkW6TVbyr1_1m5n7K0Jg4wUBfOMhhZq9_d4IZbR_Ld0/s320/t.png" /></a><a href="http://www.facebook.com/yustin.annisa"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm0l0AZuGML8CbTrEyL5kQs1hFi-NVwdcZlh-FRePMSQoLvDXb51r2YQt-0ZZG68DvQdwhBLTVlwb8zIXi1c5iVwLpJa5lMqZC_9ujyyl6GuI3mWK04RQMuiTlmqbAmPT9jo56eeSI8LI/s320/f.png" /></a><a href="http://infoiki.blogspot.com"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvZiwzEMF-1yvCrTZx93b3DhaUao6pRd-xSAf3x9ttuSvlLMCaCt7A9uOKEDjb1h5wUoZZFAdBpabruoz0dZ3rE9bfy54Nye4OUyfDJpPUPVIU_ipsvHW39Aft3kW4QvD6GNkpit2V8oc/s320/b.png" /></a></div></div></div><a class='trigger' href='#'>Info</a>
Keterangan,,..........
a). Ganti kode yang saya beri blok merah dengan url profile blogger anda.
b). Ganti kode berwarna hijau dengan url website dan jejaring social anda.
5. Terakhir, klik save & lihat hasilnya.
Terimakasih sudah membaca posting diatas sampai habis. Komentar anda sangat dibutuhkan. Salam Blogger!
.png)
Posting Komentar
Bagaimana tanggapan tentang artikel diatas? Jelek, baguskah? Atau... ada pertanyaan dan sebagainya? Sampaikan apa yang ada di benak anda dengan berkomentar. Tapi jangan SPAM ya :)
Salam blogger!