Social networks play an important role in increasing you blogs traffic, visitors and rankings. So that's the reason why you use social bookmarking or social sharing widgets in your blog. This social bookmarking widget will provide your visitor a simple way to follow you on Facebook, Twitter and Google plus. This Social Bookmarking Widget have a search bar and a Subscribe button with the help of these features you visitor can search posts and subscribe your blog. This Social Bookmarking Widget with Search Bar is a simple black & white widget with simple hover effect.
Demo
Follow these simple steps to add this Social Bookmarking Widget in you blog.
Don't Forget to backup you blogger template.
Step 1. First of all go to your Blogger Dashboard and on left side you will see Template click on Template.
Step 2. Click on Edit HTML > click on Proceed and then Mark/Tick "Expand Widget Templates".
Step 3. Now in find ]]></b:skin> in your template code (Press CTRL + F for a search bar).
Step 4. Paste the following code just before/above ]]></b:skin>.
#search {width:235px;
border: 1px solid
#DDD;
background:
white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6TkpRpFhdQuLzeEOHo3HFTX6xlHa7KRXV_X2Ak5uASrCT9r9X1WelVUEBlv36pCMPqv42XFiDgFuXL2YTcs-BMvO-S7ifIc9Kk3eWM4dXjdW7Kh1bL8ZI2RYOA5T7M9uW-vxSAFT4Gjw/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px;
mouse:pointer:
}
#search #s {
background: none;
color:
#666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget{background:#F5F4EF;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
Save the "Template".
Step 5. Now second portion: Go to Blogger Dashboard > Click on Layout > and then click on Add a Gadget and choose "HTML/JavaScript" Gadget from slide bar.
Step 6. Leave the Title area empty and paste the following code in content area.
<style>
#search {width:235px;
border: 1px solid
#DDD;
background:
white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6TkpRpFhdQuLzeEOHo3HFTX6xlHa7KRXV_X2Ak5uASrCT9r9X1WelVUEBlv36pCMPqv42XFiDgFuXL2YTcs-BMvO-S7ifIc9Kk3eWM4dXjdW7Kh1bL8ZI2RYOA5T7M9uW-vxSAFT4Gjw/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px;
mouse:pointer:
}
#search #s {
background: none;
color:
#666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget{background:#F5F4EF;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>
<div id="search" title="Type and hit enter">
<form action="/search" id="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search";}" onfocus="if (this.value == "Search") {this.value = "";}" type="text" value="Search" />
</form>
</div>
<br/>
<br/><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="rss feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6wPdB5Vq0Wb5LI6RUbmTdAC_wgn-ljxAK2UAMJGcXnT9QKxQiwUpgqa3egCjrZt4RMyEcmqYvcGnP2hwCMb6XoZqMusEA3DZBbuGgFOX8Dgd9yGvHpSoKdsIxdk7A7-15i9Yi05orUG4W/s1600/rss.png" /><a href=" http://feeds.feedburner.com/iactips" target="_blank">Subscribe to our RSS Feeds</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="follow us on twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0pwZwza2LTEQ-q2cQAWZuAqBDrQCzL_NgFkLQlz3RBCf0BCMibUgeqxuplFCjxb5j7H9PAUl9beZTuxaNDEOG28XrKV6-7tTBgoLnLt3NQAGy1d6zzzmdupvYFZWUI3Cq98mu-n3F8InD/s1600/twitter.png" title="follow us on twitter!" /><a href="http://twitter.com/How2Solution" target="_blank">Follow Us on Twitter</a>
</div>
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="be our fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFzbcOVowBpuQzMvkH20M1jXkbSU103H3AmsUNjxfaDf-x4OqhNk89C-6WC59pOfryTtcuVMAdRLs8yCXTDCEzH7p40X1fBv0eK1d7L9zrnTPLXfEiIkMOxj31LG2qPYIbcUutppvZZnDO/s1600/facebook.png' title='Be Our Fan" /><a href="http://www.facebook.com/IACTips" target="_blank">Follow Us on Facebook</a>
</div>
<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="google plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpebLV2NiQyz2V19iMP0Q_ajOhwASGoMfSMUkrpEhVR_qd2WWMn4uhXIkB9NX2TlMGzoQ0zNvs8pVDYJYDIEiIWLmes8ODlz_bbdYDFC8amkIWdTAZfS9I8ORjZsCRmvLMon8GhQbZ2YQ/s1600/g-plus-logo.png" /><a href="https://plus.google.com/100300445870942896896" target="_blank">Add Me on Google+</a>
</div>
Replace Yellow color link of RSS, Facebook, Twitte and Google plus with your own profile links.
Click on save button and Its All Done.
Drop Your Comments.....
I am a student of computer science.Owner of IAC Tips blog. I love to share my knowledge and experience with others. Follow my blog for tips tricks of internet, computer and software.
Posts
0 comments:
Post a Comment