Social media is very important in
these days.In this tutorial im gonna explain,how to add social media
widget with search box for blogger.Social media always helps to bring
quality and fast traffic to your blog.All bloggers must use social
medias sites like Facebook, Twitter,Linkdin.By sing this social media
widget, you can link with your social profiles.And other thing is, this
widget include with search box too. So, you can save your blogger side
bar space by using this 2 in 1 widget.In this post im gonna explain
how to add social media widget with light search box for your
blog. Im using css3 and HTML for this widget.
3. Paste below code.
<style>
#btrixwidget{width:307px;
padding:0 0 5px 0;
border:1px solid black;}
#btrix-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NmQzvgH_nzVeAkzxEBJiXsq495CS6TSnWcMSrawkfKbbHBvqI3oDDzprPvMtBwT-QXgx1Yol1tWMYHt50w9a99AJ2TeOXDn-hiUZSzbVw-usILbNZPMVUgaojJhilM0e0rtTF0pER5JY/s1600/blue.png) no-repeat scroll center center transparent;
width: 307px;height: 50px;disaply: block;}
form#btrix-searchform {
display: block;padding: 9px 16px; margin: 0;}
form#btrix-searchform #s {
padding-left: 24px !important;padding: 7.5px;margin: 0;width: 198px;
font-size: 16px;font-family: georgia;font-style: italic;color: #666666;vertical-align: top; border: none;background: transparent;}
form#btrix-searchform
#sbutton {margin: 0;padding: 0;height: 40px;width: 74px;vertical-align: top;
border: none;background: transparent;}
</style>
<div id="btrixwidget"><center>
<a href="http://twitter.com/bloggertrix" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRNjSFCRsU0KcPVP5XnhdAWoGwGHxhAPQdfzKLrEGPl9G-eL_EMddJHaRImn1_gwaLqQUA05CMox_7vawMnYad_7kuDqRCMGZDLBajleZyTBOBiyQVH4SxwhK_oBCy0S-YiYsKUT7k5fA/s1600/btrix-twitter.png" alt="" title="twitter" width="62" height="78" class="alignnone size-full wp-image-6249"></a>
<a href="http://www.facebook.com/bloggertrix" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX667iEPYlZPiTUSgFU2jyLJM-smE16plAPhm-Ahq_AMHeb_-nFmJBTiUq-tdhacImvU1oy1L2PwX_wL2_Y_4g6c-JBqbeYA08fJt8u8pWS8DXSkxpvFzKfUH4_zjHLFfmW5wsXM9ujEM/s1600/btrix-facebook.png" alt="" title="facebook" width="62" height="78" class="alignnone size-full wp-image-6248"></a>
<a href="http://feeds.feedburner.com/bloggertrix" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOf58bmm6ToKkSio0TSJ86t-3FBDoBidinUTrkSlc8BhMKTSYRA-pqW4a0S1THSwYMA20M6unGncVd-VM-wXlm745vtgsA3VqErz8qyPI29hxqtHgahCzSnZxCJb0juDmOt7a4CgdKW4M/s1600/btrix-rss.png" alt="" title="rss" width="62" height="78" class="alignnone size-full wp-image-6251"></a>
<a href="http://au.linkedin.com/username" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPQpj85JiKfP2W-M6m3nQPsBUkXGwo4WCvQIZJyNrPLc3EjyIahJJi6qsWkt-aCjMipKnHkBv31TtjF3dgfNhlb2FCqYkZe-32EIUSeBe57N528hilnZ7xhyphenhyphenaqTZDyXMICObJkY4RJzOU/s1600/btrix-linkedin.png" alt="" title="linkedin" width="62" height="78" class="alignnone size-full wp-image-6250"></a>
<div id="btrix-searchbox">
<form id="btrix-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
onblur='if (this.value == "") {this.value = "Search...";}' />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
/>
</form>
</div>
</center>
</div>
Replace bloggertrix with your twitter profile
Replace bloggertrix with your facebook profile
Replace bloggertrix with your feedburner profile
Replace username with your linkedin profile
4. Now save your HTML/Javascript'.
You are done. If you have any problem related to this Stylish Social Media Widget. Just leave a comment.I will help to you.
0 comment:
Post a Comment