Twitter and Facebook Mashable Fanbox for Blogger

Visitors most favorable Social Networking Media is Facebook and Twitter. So I have tried to mash up those two famous Social Media Service in one widget and successfully applied it with little twitter bird animation. This is my first Twitter and Facebook mashable widget. I hope my readers will like this. 

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Widget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Widget.

<style type="text/css">

#bstf-box { background-color:#04BDFA; border-bottom:1px solid #ccc; height: 270px; position:relative; margin-bottom:10px; width:292px; }

#bstf-box:before,#bstf-box:after{ background:#f7f7f7; border:1px solid #aaa; border-top:none; bottom:-3px; content:""; height:1px; left:2px; position:absolute; right:2px; }

#bstf-box:after { bottom:-5px; box-shadow:0 0 2px #aaa; left:4px; right:4px; }

/***** www.bloggerspice.com ******/

.twitterpage { height: 34px; overflow: hidden; }

</style>

<div id="bstf-box">

<object type="application/x-shockwave-flash" data="http://www.twpics.com/BUTTON6/twitbutton.swf" width="290" height="80"><param name="movie" value="http://www.twpics.com/BUTTON6/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=Arsalanbest"></param><a href=" http://www.bloggerspice.com/" title="bloggerspice">bloggerspice</a><embed src="http://www.twpics.com/BUTTON6/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=Arsalanbest"></embed></object>

<div class="twitterpage"><iframe allowtransparency="true" frameborder="0

" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=BloggerSpice" style="background: #f6f6f6; border-color: #CCCCCC; border-style: solid; border-width: 0 1px; height: 20px; padding: 7px; width: 276px;"></iframe></div>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Besttricks&amp;width=292&amp;

height=200&amp;show_faces=true&amp;stream=false&amp;header=false&amp;" style="border:none; overflow:hidden; width:292px; height: 160px;"></iframe>

</div>

Note: Don’t Change any code then it won’t work.

Customization:

• Replace Arsalanbest with your Twitter username or ID

•  Replace Besttricks with your Facebook username or ID 

Step 5 Save your widget and you are done!