Cara membuat Info melayang keren di blog 2013 terbaru ala jumadil

Hallo teman2 kali ini ane akan berbagi bagaimana cara membuat info kecil seperti punya abdul ghoni di atas. Langsung aja ya teman2....

Ikuti langkah2nya....

• Login blogger.com
• Klik "Template" Edit HTML
• Cari kode ]]></b:skin> untuk mempermudah pencarian tekan Ctrl + F atau F3
• Copy code di bawah ini pastekan tepat di atas code ]]></b:skin>

Klik View Plain Untuk Memakai Script

.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/AVvXsEgecq23j_Zl_1kdl4g2O6h6mAkWGhNXX5V51Q6TELfRnozaWlqXcUwbwj06S1lPL5aWmOnbgmfkhPdEppeSiLnf3LbStyCGliwjNKGlLAT0oiPjjLDU1_Jv-tbwzbr7Zjg3T7Ox_v0LAX0/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/AVvXsEgecq23j_Zl_1kdl4g2O6h6mAkWGhNXX5V51Q6TELfRnozaWlqXcUwbwj06S1lPL5aWmOnbgmfkhPdEppeSiLnf3LbStyCGliwjNKGlLAT0oiPjjLDU1_Jv-tbwzbr7Zjg3T7Ox_v0LAX0/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/AVvXsEhcaNApbvLFbWkEW_j7Piwx2JfCVI1X7ywZiw5HMbDyIondYk3fzrzJ4_Z4-c6NrRbz2EcFVdAO_hrc_ijrbNWevO92foMwDizKl-oSEHVOT93QwHJyqQnO-68nJLr8qRH7HgYNUKdr3-8/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 teman2 harus mencari lagi kode </head>
• Copy code di bawah ini, lalu pastekan tepat di atas code </head>

Klik View Plain Untuk Memakai Script

<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 dulu teman2, langkah terakhir

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

Klik View Plain Untuk Memakai Script

<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="Jumadil Abdul Rahman Selian" target="_blank" href="https://plus.google.com/u/0/105852098279477783224">Selengkapnya tentang saya</a></p><h3>Tentang Saya.</h3>
<img width="73px" height="73px" alt="
<img width="73px" height="73px" alt="Jumadil Abdul Rahman Selian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr1ijS07lWuDe3F-ysALwVpCHp0ZOpbw_OGdEd3WkDq0mUxyd93wo2WoErNZQjg2CL7WD3bCqZ5VmjL-e2jKJ6KYjWd0HCYEmqJGt_RdG9F-URyDaukV41RHApHimgr1GlFxR3HNp0PJdg/h120/adil.jpg"
/><p>Jumadil Abdul Rahman Selian<br/>Perkenalkan,
saya Adil 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="adilzzz.blogspot.com/feeds/posts/default"><img
alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYDtP6SoAAQuO90t356KliH2LcFmFUbj3IZ36nbEhrxtiGQCzz3n9AxGNvlkMIVZLVNa9AIWwwS2u7s4odO0Wtv5DEvVg2YGvbm6SBU0eQUV9gBgrin75ClYghCnrNfxaXRprQCsY1ncQ/s320/r.png"
/></a>
<a href="https://twitter.com/jufal_"><img
alt="twitter"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMDiWhyBoXh4WtZIPu67zZAzggtkNMlpjWkQDjte9CTz9vQIiRWtjHOvQZx4VYzdwFfacSN6144xRB_ENB0q53mpuwMz_qD6yM3ZJk3PRqIIkZu743jG2khJVYsqAkjk17pNwTGTgtAbE/s320/t.png"
/></a>
<a href="https://www.facebook.com/jum.aspal?ref=tn_tnmn"><img
alt="facebook"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVoiwUiaxjdYDNTbtjPe1azsm3U4kKyToJD3mPOE4Q8YwmETLKDESdS1dClweKV7WKFvaEooLXagIc4S4iIOCcfuXOkBq_2vItRudiTAUuSTwH0nAvJddN04rNfBsITm04gKJPFshoCKw/s320/f.png"
/></a>
<a href="http://adilzzz.blogspot.com/"><img
alt="HOME"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGxNFxhQsaR9dPMEoYRHwL7hLeXa7WZQG-CUED-yoSth-TUoY90kcSim8doFcygMSBgXrHmlZIYZ6C8ZlbWJkmqHc-u-PGmWhpYcdHQN_TG9SoGpwTwbvXFIfg0YmqXpuW_vkKFam4T8/s320/b.png"
/></a></div></div>
</div><a
class='trigger' href='#'>Info</a>

CATATAN :

Silahkan anda ubah kata-kata, url gambar serta link yang ada di dalam widget diatas...

• Terakhir klik SIMPAN

Selamat Membaca "Terima Kasih"