Cara Membuat Info Melayang Keren di Blog 2013 Terbaru

Klik Gambar Untuk Memperbesar

"Asalamualaikum Sahabat Blogger"
Gimana kabarnya hari ini,mudah-mudahan baik ya..
Ok sahabat blogger kali ini saya akan Share bagaimana cara membuat "Info Meleyang Di Blog"
Di Perhatikan ya Gan.

1. Login blogger.com
2. Klik "Template" Edit HTML
3. Cari kode ]]></b:skin> untuk mempermudah pencarian tekan Ctrl + F atau F3
4. Copy code di bawah ini pastekan tepat di atas code ]]></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 #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/AVvXsEjjC2ZG0Q4hAbTp_1d5o6KONdbXoO-aqrqKx-S8Ubo7wCk5Nx_EOZ41OcmC3UwoTzS04bpzt07PACED-eDeSajT02V6PTjKI9rzenskoKAtV0YoW9oC58lIKOXH70Aop3NKvDNC-Nd0wNw/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/AVvXsEjjC2ZG0Q4hAbTp_1d5o6KONdbXoO-aqrqKx-S8Ubo7wCk5Nx_EOZ41OcmC3UwoTzS04bpzt07PACED-eDeSajT02V6PTjKI9rzenskoKAtV0YoW9oC58lIKOXH70Aop3NKvDNC-Nd0wNw/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/AVvXsEiVzHbFTzASY7_3Fr3L191zSW5BXO4DnjPBkHn-_HoEOj3l_hHyybLZ9EUm-433LH7x_khJNK9RIpuxkOpypgtLvVwsejfzgHkO8K7gzwl4-D_tRznnrajo2SEW-JuHI5Ryfj3jMws_L2Q/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}

Kemudian cari lagi kode </head>
Copy code di bawah ini, lalu pastekan tepat di atas code </head>

  <script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;.trigger&quot;).click(function(){

$(&quot;.panel&quot;).toggle(&quot;fast&quot;);

$(this).toggleClass(&quot;active&quot;);

return false;

});

});

</script>

 
Yang Terakhir.

• Masuk ke Tata Letak > Add Gadget > HTML/Java Script
• Copy Code di bawah ini 

<div class='panel'>
<h3>"Asalamualaikum"</h3>
<p style="text-align:justify">Selamat Datang Di Blog Saya Yang Mungkin Banyak Kekurangan :D...
Semoga Anda Betah Untuk Melihat-lihat Sejenak Blog Saya,Jika Anda Mau Saran Atau Kritik Coment Saja,Karna Dengan Kritikan Anda Mungkin Bisa Membangun Saya Agar menjadi Lebih Succses ^_^
<br/>
<a title="Chandra Ari Borgo" target="_blank" href="https://plus.google.com/u/0/112638711167853192733">Selengkapnya tentang saya</a></p>
<h3>Tentang Saya.</h3>
<img width="100px" height="100px" alt="Chandra Ari Borgo" src="http://3.bp.blogspot.com/-neF3_c3efO4/UdLWtaXbHRI/AAAAAAAAAPQ/0f40B9RCQtc/s960/waw.jpg" />
<p>Chandra Ari Borgo
<br/>
Perkenalkan, saya Chandra seorang pendatang baru dunia blogger.. saya masih dalam tahap pembelajaran, jadi mohon maaf jika ada banyak kesalahan di blog ini.. Kesempurnaan Hanya Milik Allah Semata,Selamat Menikmati Blog Sya:D</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/AVvXsEh1BR1RWOM2NInxIFgSaJb5ytdHEdLkDPQtlEZb7HqmCP3OeUmnEOhE4tqgV7742S5Ejo6KsTW2rdcJPteAQd8s2SekCGmXNg0XR9oxknlB2T6gFC2yJPjwNUkp3hAzDWUtQX5so57-U_4/s320/r.png" /></a>
<a href="https://twitter.com/Thelighning"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZ7JXbg41AQcxykv6e07znFIoBAlBLGjIG7wm0fKdM-wL6In1FF_sVHN2rvjjMpYlsFfzBL_8B3x5kfHR0O4NW52FDuNDfKCrGZ2xnGDoEsH4ypOENkNWhJ3Yn0hxIOIXH8E3U7LKe_I/s320/t.png" /></a>
<a href="https://www.facebook.com/chandra.dallas3"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtrtAscqK0vC7AWvLOsjBgH11GWfrXp8dZZTSWRqoPdlCPFYDHM4nizh3P6j93Hg6Dih7pJPcHpQIr1TPIfdMOpjK7X_sP4k__Xb50qq-9D2QyeY-wtt4OhZqnDiWsmPMywqeFKsK_RZs/s320/f.png" /></a>
<a href="http://Fatinisticpeanbaru.blogspot.com/"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTi4Tj3r6uFN7GNZRZb96JxEW0tJK9TLZrkNYN6P-cKEME7wEaXa57mkZ_-54afK0iHl9m1zfVnZw9NRMe4RcS731-JvM_zrh7zNJvFj6bC0FDZTjOC57FsdrGip38y0hyFvE_gl1Axvc/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a> 

 Catatan:

• Ubah Yang Warna Biru  Dengan Kata-kata Anda
• Ubah Yang Warna Orange Dengan Alamat URL Foto Anda
• Ubah Yang Warna Merah Dengan Alamat Facebook,twitter,and Google Anda

Mudahkan,Segala sesuatu mudah di kerjakan apabila kita mempunyai niat..
Happy Blogging.