Berbicara tentang Info, siapa dan bagaimana si pemilik blog itu lumayan berguna juga penting. Karena Hal tersebut bisa memudahkan pembaca mengetahui siapa kita, juga bisa berinteraksi dengan kita melalui jejaring sosial kita.

Nah berikut ini adalah widget sedehana tentang Info si pemilik blog, Untuk demonya seperti dipojok atas kiri blog ini. Jika sobat berminat silahkan lihat dan copy kode CSS dan HTML dibawah ini

KODE CSS

<style>
#info{position:fixed;top:3%;left:-350px;width:410px;height:30px;background:#111;border-radius:5px;border:1px solid #fff;box-shadow:0 0 4px #000;font:25px Arial, San Serif;color:#fff;text-align:right;padding:5px;z-index:9999;
}
#info:hover{left:-5px;transition:all 1s;-webkit-transition:all 1s;
}
.box{position:relative;width:300px;margin:-30px 10px 10px 10px;background:#333;color:#fff;border-radius:5px;border:1px solid #ddd;padding:5px;box-shadow:0 0 4px #000;text-align:left;font-size:12px;color:#999;opacity:0.5;cursor:help;
}
.box:hover{opacity:1;transition:all 1s;-webkit-transition:all 1s;
}
.box:before{content:"";position:absolute;top:5px;left:5px;width:10px;height:10px;border-radius:100%;border:2px solid #ddd;background:#000;
}
.box:after{content:"";position:absolute;top:5px;right:5px;width:10px;height:10px;border-radius:100%;border:2px solid #ddd;background:#000;
}
.box a:link,.box a:visited{font:15px Arial, San Serif;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000;
}
.box p{font-size:18px;text-align:center;border-bottom:1px solid;margin:5px;
}
.box ul,.box li{margin:5px 0 0 ;list-style:none;
}
.about{width:auto;margin:5px;padding:5px;font-style:italic;background:#999;border-radius:5px;color:#000;
}
.photo{float:left;margin:5px;width:50px;height:40px;background:url(https://sites.google.com/site/binkbenk77/binkbenk.jpg) center;background-size:100% 100%;border-radius:40%;border:4px double #999;
}
</style>

KODE HTML

<div id='info'>INFO
<div class='box'><p>ABOUT ME</p>
<div class='about'><div class='photo'></div>
This My Face, Lumayan Keren....!!!!<hr/><br />Saya adalah anda,dan anda adalah saya, lalu siapa yang di maksud saya dan siapa juga yang di maksud anda. Tentunya disini sobat tuliskan sesuatu tentang siapa dan bagaimana sobat... !!!!
</div>
<div class='about'><p>Kontak</p>
U can find Me In My Social Connect :
<ul>
<li>➦ <a href="">My Facebook</a></li>
<li>➦<a href="">My Twitter</a></li>
<li>➦<a href="">My G+plus</a></li>
<li>➦<a href="">My @mail</a></li>
</ul>
Silahkan Pilih Kontak yang Mana Sobat..??
</div>
</div>
</div>

Untuk Langkah-langkah pemasangannya cukup sederhan, ikuti saja petunjuk di bawah ini :

• Masuk Ke Blog Sobat /DASBORD
• Pilih tata letak dan tambahkan gadget Javascript
• Copy dan pastekan kode-kode diatas ke dalam gadget tersebut dan simpan.

Selamat mencoba semoga bisa bermanfaat... !!!!