Friday, 27 July 2012

Social Network Sidebar Gadget For Blogger

Social Bookmark site helps to get more traffic to
your blog.There fore we need some more followers
for our social profile. By using this gadget you can
link your profile with this gadget. Your users can
follow you from your site. It include Facebook fan,
Twitter followers, and Rss subscribers. you can do
with easy steps. Follow these steps to add it your blog.
My earlier post Social Network Widget With Spinning
Hover Effect For Blogger



DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag
#col2 {
float: left;
width: 320px;
}
.subcol {
width: 150px;
}
.subcol h2 {
font-size: 14px;
padding: 0 0 10px;
color: #999999;
}
#subscribe { background:#none; width:308px; font-size:8px; }
.subscribe_icons { width:286px; margin:0px auto; }
.subscribe_icons li { display:inline; float:left; margin:0px 2px 5px 2px; width:52px; text-align:center; font-size:11px; }
.subscribe_icons a { display:block; padding:40px 0px 2px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; color:#444 !important; }
.subscribe_icons a:hover { color:#26b !important; text-decoration:none; -moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); }
.subscribe_icons .subscribe_buzz a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLMyEKfxTidpR_xzYAOpmYbKDwsmiTorp-k77xzYlOHMfM6brTC43odCz3YDrvZfvSr1ClGOcnU-4hWtjBRakWn6NjGEnoVjXZxVw0gxt8n7LKrl653jIOLg3LedFQgL-RO52Z7f8sHok/s1600/buzz.png) center top no-repeat; }
.subscribe_icons .subscribe_twitter a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVRS9PiLrKVsltSZqbsGTi2JZj-8cnksNIWQtrDKILdPQLEamL8LluigJmp0JgWjc_A4qGfRquErNhfWQixvVHOfQL1UG_hk9bvPlNaNvYfP6QncCNR-rsdiiLC-EHEjT9oXIKpi02LA8/s1600/twitter1.png) center top no-repeat; }
.subscribe_icons .subscribe_facebook a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijgfd1gzmYU0KIyUPfjk7yNXgOVXL4bfxH_zdyejQN1a0LpPR3Uk_E1W_DOlEw6KQ9c_hlA443VEdaDcsyL6qu_2riEodnOQhEHQCWr2CX6EQiEuwdFhoFmoW0AI57Cl8XFrU-a-FEpVQ/s1600/facebook1.png) center top no-repeat; }
.subscribe_icons .subscribe_rss a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5YCKeG9X_3pLBl4RhdDh5PDxzQRmL0vXEaw0su_a6ej5mEAHuwutFr3oTEDOWZn8yHN1Lb4TTTcSTd9ni57o_63vXy6REeV_aERbkbyKHZH1cHJ0dw4ntbvpV5KV3G7jWnmUBXPVcW34/s1600/rss1.png) center top no-repeat; }
.subscribe_icons .subscribe_email a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnxJX6tjIBqL_gbjNGT9DjcIPXPwlNVCdeiHbNTqsTk3_BzfbQejTsHwmEVmvVYLfDGJu9UA3zfvUaxbXS6VgWAOi_PrzxUfqCoju64WZ0MmoRqEKBsaL77rPRgPTIs8iNHLwbe0d7C6M/s1600/email.png) center top no-repeat;

4. Now Go to Design >> Page Element

5. Click Add Gadget and select 'HTML/Javascript'

6. Paste  below code.

<!-- www.bloggertrix.com -->
<div id='col2'>
<div id='subscribe'>
<ul class='subscribe_icons'>
<li class='subscribe_buzz'><a href='ADD HERE YOUR GOOGLE PROFILE URL' rel='nofollow' target='_blank'>Buzz</a></li>
<li class='subscribe_twitter'><a href='ADD HERE YOUR TWITTER URL' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='subscribe_facebook'><a href='ADD HERE YOUR FACEBOOK URL' rel='nofollow' target='_blank'>Facebook</a></li>

<li class='subscribe_rss'><a href='ADD HERE YOUR FEEDBURNER URL' rel='nofollow' target='_blank'>RSS</a></li>
<li class='subscribe_email'><a href='ADD HERE YOUR FEEDBURNER EMAIL URL' rel='nofollow' target='_blank'>Email</a></li>
</ul>
<!-- End -->

Replace highlighted word with your URLs

7. Now save 'HTML/Javascript'
 you are done.

No comments:

Post a Comment