There are many ways you can share your website or blog content with people online. Social Media buttons for Twitter, Facebook and Google+ have huge marketing value and your popularity increases when users started sharing your articles in these social media.More are the number of shares; more is the popularity of any site in Web.Social network play an important role in increasing blog visitors and rankings in search engine, and that's is the reason why you need to provide your readers with social sharing widget, if you really want to move your blog to the next level.In this article you will read "How to Add Social Sharing Widget With Search Bar To Your Blogger Blogs?".
You should read previous tutorials.Because if you don't want to install this widget on your blog then you can select widget style from old articles.
- Add A Share Buttons To Blogger Sidebar
- Add Social Subscribe With CSS3 Bubble Buttons
- Floating Social Media Share Buttons On Blogger Side
- Add Shareaholic Sassy Bookmarks Widget To Blogger Blog
- 3D Social Buttons With Rotate Spin Effect For Wordpress And Blogger
Adding The Social Sharing Widget
There are two ways to adding this widget on your blogger blog.
- Adding it to HTML/Javascript Widget
- Adding it to Blogger Template
Adding it to HTML/Javascript Widget
- Go to Blogger Dashboard -> Layout > Add a Gadget -> HTML/JavaScript
- Copy and Paste The Code Below Into HTML/JavaScript Gadget
<style>
/* ---------BLOGS DADDY SOCIAL SHARING GADGET----------- */
#search {width:235px;
border: 1px solid
#DDD;
background:
white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSHi-pNjyZppuVL6oVRiNBxkbhiE4MIt_j5Kc6X2gNHrtR-epcMipwz8fL0eTO0spp11EeISwoZfMd6iHJtwuDaKv1sI3IwVT7NmSLL9ErteulUJ7lvyuWUpboxB2D70rTj27kUtA9fk/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/AVvXsEiC8CNBZPhD7s3j8LxA7hBBvRvyiSNiL-D2AxXfluH7W1ZILlnNDjPGv1e0vICDSDiQOSFyXZHuyzPERsz7CVqg_JqOvbU0PfusaWjj106F6U_WVMjcc0tyFjm9ZH2aReN7FNPXXK4H_ROI/s1600/rss.png" /><a href="http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy" 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/AVvXsEgkf8bpBuCDXIOBMqKZzdy3nOpp5z6JsGR73WkDbofikA5PBLClPCB-am3AMfVLUWPRODFjfFmtAqmz5tr2-mz7CllkpB7P0pPw7p3AhAVSTNBZ0Ti-N-w7ei58fbI6xebqdEMUynkeYNdV/s1600/twitter.png" title="follow us on twitter!" /><a href="http://twitter.com/BlogsDaddy" 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/AVvXsEgAZylNxm_j_mp3qE1OYI2mAtS5zwqLnmwb9r6XLvUrhDIChleOui8G03hWhCQQeiO4eU2LmF12KtzIfVFbdauAlNXggp9arus11COVWFQDaTs39xDj0ncxUCSbRS49vMXhjZfFhoiAvwga/s1600/facebook.png' title='Be Our Fan" /><a href="http://www.facebook.com/BlogsDaddy" 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/AVvXsEhVy7n2NKqse5OcoRZBPdWtZYjsokpTR3fZLC-PYVRM9keRLlskbx6PNwRa07CCGjZYA07O39zz4l2nqV6ge1KDrBfs_tVd58KYjiwWcvf-KZ3CjAkupXbNG_l-6zimT-md94oveZykON0/s1600/g-plus-logo.png" /><a href="https://plus.google.com/u/0/117100549673033253859" target="_blank">Add Me on Google+</a>
</div>
Adding It To Your Blogger Template
- Go to Blogger Dashboard -> Template -> Backup/Restore -> Back Up Your Template
- Now Click On Edit HTML -> Proceed -> Mark/Tick "Expand Widget Templates"
- Use Ctrl F to Find ]]></b:skin> and Paste The Code Below Before/Above ]]></b:skin>
#search {width:235px;
border: 1px solid
#DDD;
background:
white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSHi-pNjyZppuVL6oVRiNBxkbhiE4MIt_j5Kc6X2gNHrtR-epcMipwz8fL0eTO0spp11EeISwoZfMd6iHJtwuDaKv1sI3IwVT7NmSLL9ErteulUJ7lvyuWUpboxB2D70rTj27kUtA9fk/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;}
- Click "Save Template"
- Now, Go to Blogger Dashboard -> Layout > Add a Gadget -> HTML/JavaScript
- Copy and Paste The Code Below Into HTML/JavaScript Gadget
- Click On Save Button and Its All Done
<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/AVvXsEiC8CNBZPhD7s3j8LxA7hBBvRvyiSNiL-D2AxXfluH7W1ZILlnNDjPGv1e0vICDSDiQOSFyXZHuyzPERsz7CVqg_JqOvbU0PfusaWjj106F6U_WVMjcc0tyFjm9ZH2aReN7FNPXXK4H_ROI/s1600/rss.png" /><a href="http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy" 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/AVvXsEgkf8bpBuCDXIOBMqKZzdy3nOpp5z6JsGR73WkDbofikA5PBLClPCB-am3AMfVLUWPRODFjfFmtAqmz5tr2-mz7CllkpB7P0pPw7p3AhAVSTNBZ0Ti-N-w7ei58fbI6xebqdEMUynkeYNdV/s1600/twitter.png" title="follow us on twitter!" /><a href="http://twitter.com/BlogsDaddy" 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/AVvXsEgAZylNxm_j_mp3qE1OYI2mAtS5zwqLnmwb9r6XLvUrhDIChleOui8G03hWhCQQeiO4eU2LmF12KtzIfVFbdauAlNXggp9arus11COVWFQDaTs39xDj0ncxUCSbRS49vMXhjZfFhoiAvwga/s1600/facebook.png' title='Be Our Fan" /><a href="http://www.facebook.com/BlogsDaddy" 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/AVvXsEhVy7n2NKqse5OcoRZBPdWtZYjsokpTR3fZLC-PYVRM9keRLlskbx6PNwRa07CCGjZYA07O39zz4l2nqV6ge1KDrBfs_tVd58KYjiwWcvf-KZ3CjAkupXbNG_l-6zimT-md94oveZykON0/s1600/g-plus-logo.png" /><a href="https://plus.google.com/u/0/117100549673033253859" target="_blank">Add Me on Google+</a>
</div>
- To Change The Width Of Your Search Box Edit width:235px (Yellow Color)
- Replace http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy (Yellow Color) With Your RSS Feeds Link
- Replace http://twitter.com/BlogsDaddy (Yellow Color) With Your Twitter Profile URL
- Replace http://facebook.com/BlogsDaddy (Yellow Color) With Your FB Profile URL
- Replace https://plus.google.com/u/0/117100549673033253859 (Yellow Color) With Your Google + Profile URL
If you need any type of help, Ask via comments.Happy blogging :)
0 comments:
Post a Comment