Cara Membuat Info Melayang Keren Di Blog

Hallo sahabat Diary, kali ini saya akan memposting artikel tentang cara membuat Info melayang yang keren dan mudah, caranya praktis, Info ini akan memberitahukan tentang informasi blog anda dan tentang anda, ikuti langkah berikut ini :

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/AVvXsEjja4akQrsdMNoGGok7RBvNu56ouWaAa5_02jmo4T6WzzrzxkL12g1dg1n2pyzEAf9Cz7WW0klW7gt1aCrr64MERHmiIPrV5wlThWXjjeYDbvhn7VULw1hY3AR_IYcvk-6rRznRfX3tgGQ/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/AVvXsEjja4akQrsdMNoGGok7RBvNu56ouWaAa5_02jmo4T6WzzrzxkL12g1dg1n2pyzEAf9Cz7WW0klW7gt1aCrr64MERHmiIPrV5wlThWXjjeYDbvhn7VULw1hY3AR_IYcvk-6rRznRfX3tgGQ/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/AVvXsEh7mfwomKr8zSDN-OHvgcby4UPCRbQ6GWKBv6FRvqQTLVAjCtB8r7fb0nCQem2coTxMFPaM7pAr90uPmsG1BNQdaJWnfoAL2GTXmMjLImeh_vU8giMZeYpUyxSLA8i6AE8u18izVvQdRTA/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>

Belum Selesai gan, langkah terakhir

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

   <div class='panel'>
<h3>WELCOME</h3>
<p style="text-align:justify">Selamat datang di blog yang sederhana ini :D semoga anda betah menjelajah di blog ini.. silahkan baca - baca di artikel terbaru saya..
terima kasih telah berkunjung ^_^
<br/>
<a title="Ahmad Nufin" target="_blank" href="https://plus.google.com/104169733184205086019">Selengkapnya tentang saya</a></p>
<h3>Tentang Saya.</h3>
<img width="73px" height="73px" alt="Ahmad Nufin" src="https://lh3.googleusercontent.com/-CBOiNUOEbn4/AAAAAAAAAAI/AAAAAAAAACE/1TnhEzc1etc/s120-c/photo.jpg" />
<p>Ahmad Nufin
<br/>
Perkenalkan, saya Nufin seorang pendatang baru dunia blogger.. saya masih dalam tahap pembelajaran, jadi mohon maaf jika ada banyak kesalahan di blog ini.. jangan dihina ya bro :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/AVvXsEg62pTzHv21OXAJUNxI0bbcHDoBXcYHhfFEgd-J7AEojVo4YfQ3OfEPGw2EuMLltq-DmEXtdEW0VGhudXy3Pu5ihnmwiSpaE7qZB2HXPfW9eMGdcmA_tqKJJJwW0_cxWEQK4X26MS1_7-o/s320/r.png" /></a>
<a href="https://twitter.com/anufinm"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wrDhR_0Kpu0Todz3FXVvOKrR50eQt_rfAeLPMrFCyoRwzdG5_6XlcPiYRphLKons2D6xzh0ZLy1Xw5cO1kjscdXRgAFBsemAEjrgTfSstCPzP38hO6kKUtPO6FZdeIo4e4ctCZgZdXY/s320/t.png" /></a>
<a href="https://www.facebook.com/anufinm"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJvautopM0kM_R2ltHwNlPVdfE1BryfmJoXAqAFOkdz5dT-7W9wc-c-ym7-WDaXIZuy1N6Mf6yvfs94G2WllRnJvEKpqFVJGTfduwzWWxsql3ElZu5csKhg1a32j22Eq76UzjFXA33SQ/s320/f.png" /></a>
<a href="http://anufin.blogspot.com/"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSgQ_mIsH9vb-N3xpIzNYrq8w_pXB6sRvmgSIiRtO7YkPIggz4iNLhY-Ku2QAI3_x3Bs4QbPgYJt8L66BM7OtLxUPMItr2OFXcjtNzF62IVIWQwntpQu_8owHtn7RxRxmawyzoZFtejyU/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a>

CATATAN
Yang warna Hijau ganti kata-kata sobat sendiri 
Yang warna Biru Ganti dengan Url Foto Sobat 
Yang warna KUNING ganti dengan alamat Feedburner anda,ganti dengan alamat Facebook anda, Blogger anda dan Twitter Anda.

Terakhir klik SIMPAN

Lihat Hasil
 
Semoga artikel ini bermanfaat.  

Share this