Saturday 28 December 2013

Must Have Foreign Blogger Widgets

I already demonstrated how to add foreign widget follow this link Add Foreign Widgets If you Missed It

Some essential foreign widgets are

1.
Search Box widget:





<style>
#MBBOldSearch {
display: block;
clear: both;
margin: 10px 0;
}
#MBBOldSearch #MBBSinput {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir7fW8rwOCddUXoEw1pd3XM_HEz8kTLrviqvEFYNsSromMwV3Ugq-X8b6EWFiepVuuf9VU2_-EVPzgGLqHy48HbBMYDrfeeG0CVAYbFXhPEX4IJiiBW76wPuC9dDKCk5Fvin-_hOKShIZT/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
padding: 7px 15px 7px 35px !important;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3 !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 52%;
}
#MBBOldSearch #MBBSsubmit {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<div id="MBBOldSearch">
    <form action="/search">
        <input name="q" id="MBBSinput" type="text" />
        <input value="Search" id="MBBSsubmit" type="submit" />
    </form>
</div>


2. Social Network Widget:




<td width="245" height="35"> <!-- START SOCIAL MEDIA WIDGET --><ul id="socialbar">
<li id="facebook"><a target="_blank" href="http://facebook.com/nairahead"><img src="http://www.topproducerwebsite.com/images/site_defaults/generic/facebook.png" /></a></li>
<li id="twitter"><a target="_blank" href="http://twitter.com/nairahead"><img src="http://www.topproducerwebsite.com/images/site_defaults/generic/twitter.png" /></a></li>
<li id="Googleplus"><a target="_blank" href="https:// plus.google.com/112177429819536289222"><img src="http://www.topproducerwebsite.com/images/site_defaults/generic/Googleplus.png" /></a></li>
<li id="Pinterest"><a target="_blank" href="http://pinterest.com/nairahead"><img src="http://www.topproducerwebsite.com/images/site_defaults/generic/Pinterest.png" /></a></li>
<li id="linkedin"><a target="_blank" href="http://ng.linkedin.com/pub/naira-head/87/470/684/"><img src="http://www.topproducerwebsite.com/images/site_defaults/generic/linkedin.png" /></a></li>
</ul>
<style>#socialbar img {border:0px;}#socialbar li img {width:36px; height:36px;}#socialbar li a:hover {position:relative;top:2px;}#socialbar{list-style: none outside none; margin:0px; position: static;}#socialbar li {display:inline;padding-right:2px;}#socialbar{padding:10px;text-align:center;}</style></td>  
<tr>    <td height="10"><h6 align="center">
<!-- PLEASE DON"T REMOVE CREDIT --><a href="http://www.mbgadget.com/">blogger widget</a></h6>
<!-- END SOCIAL MEDIA WIDGET --></td>  </tr>

To use the above,change all social network profile addresses inside with your own.

3. Related Post Widget




Visit http://linkwithin.com to have this widget installed to your blog directly

Related post widget is what will make your visitors see posts under ''YOU MIGHT ALSO LIKE'' it helps keep visitors staying longer on your page.


4. Floating Social network Button




<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:03px;top:300px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-516ff8e04b04378b"></script>
<!-- AddThis Button END -->





                                                          The End