Social Networking Widget is a way
to engage your visitors with your blog as well as you can build a circle for
your Audience. However we got many social networking widget but Horizontal
social Networking widget is unique. Earlier we found Horizontal Social
Subscription box but now I am going to introduce Horizontal Starry Social
Networking Widget. You can place this widget below Header or above footer
section. It will easily attract your visitors to get response easily.
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 Gadget" then select "HTML/JavaScript" Widget.
Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.bssocialhorizontal{
float:left;
margin: 0 0 20px 0;width:auto;
padding: 12px 10px 10px;
}
.bssocialhorizontal li{
float: left;
width: 120px;
height: 33px;
line-height: 1.3;
margin: 0 0 10px 0;
padding: 3px 0 0 38px;
}
.bssocialhorizontal li a{font:400 13px "Droid Sans", "DroidSans", "Trebuchet MS", Arial, sans-serif;line-height:1.1em;color: #000;}
.bssocialhorizontal li span{
color: #333;
display: block;
font:400 11px "Droid Sans", "DroidSans", "Trebuchet MS", Arial, sans-serif;line-height:1.1em;
}
.bssocialhorizontal .bsyoutube{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJx5Nv4cBIt3c7CKwH6ffKyc7BDkGT-W9UrwCJQGdFRetRCAX2KfilMxE4daYTLFV5bZck1XkJ_RiFlC6pUuHi9XeHRxfjvVxf9A6hfK44j95VYMNORfmxn-9Rxsu2JpmnmvVb249FLKKH/s320/BS+youtube.png) no-repeat 0 0;
}
.bssocialhorizontal .bsrss{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJVRasICWkrsRo5C0p8JTDZuvMPT4VcPgs3mu16nCucpgBjN_8uzzPNFBLQeCxKTv7k2qMZJSh3Bqz4mfQqU_8YDSmxQHU8nn6EdDJpMqd6BA4gaQbKup6PHtc4M2nXocyLbYTLdNRNuPp/s320/BS+rss.png) no-repeat 0 0;
}
.bssocialhorizontal .bsgoogle{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjubIXvQ_bz8zWRvaOiaCMiryJIwyAXwGwy2c4hwJfmwDUQf4xx7uC278MLOUyMoMHgGavqeKioBdio-9B-W0AGKmMZbDwSr5wqNQhgdSC1Ad0RO2k98gvA6sOBM7QysImUvman_lff3rnX/s320/BS+google.png) no-repeat 0 0;
}
.bssocialhorizontal .bstwitter{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwajbub0F1ioKHkGUHmhEefZyvFsg1fGCW_9MybfSEv1HOuCkhs6R46CmmF4WDX0uDVjWUTgXcd24H2nh_ZrpAUME8OCM2arB48t9JNUXNeMf6XWiN9rUSiBqlHN0oDKr6-m40AJMVSIiy/s320/BS+twitter.png) no-repeat 0 0;
}
.bssocialhorizontal .bsfacebook{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzX8DzfsomFW3pQ13evZV0ivPevRGyYtAAbcFalhbvZIKPIQGuLGeVu6SsYPYBZcLm2GLehA-GJ7CoFwrhye7Jn4afOmEw2q-KKNKKDjwkHOpIS9TlK0gZ5Q4sU6ESguQHf0wjdF8vENAo/s320/BS+facebook.png) no-repeat 0 0;
}
.bssocialhorizontal .bslinkedin{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajiLqmCR2AX-nUY71bOj5pKXbqxA1FyhRCvvTEbmlpL9HkoGFppUqAhA5IH9ie-Xr_sPI9hIF0UZbCzGcryS59S1ZgpI732SevNLTRe_xVTKhyHukvSARmFofZ0HuUtrNKctb7Nb4HEXT/s320/BS+linkedin.png) no-repeat 0 0;}
.bssocdate{float:right;width:450px;height:20px;margin-top:5px;}
.bssocdate li{float:left;padding:0 10px;}
}
</style>
<br />
<div class="bssocialhorizontal">
<ul>
<li class="bsfacebook"><a href="http://www.facebook.com/BloggerSpice">Facebook</a><br />Become our fan</li>
<li class="bstwitter"><a href="http://twitter.com/BloggerSpice">Twitter</a><br />Follow us</li>
<li class="bsgoogle"><a href="https://plus.google.com/102331886274459115104">Google Plus</a><br />Join our circle</li>
<li class="bsyoutube"><a href="http://www.youtube.com/BloggerSpice">You Tube</a><br />Our Videos</li>
<li class="bslinkedin"><a href="http://www.linkedin.com/BloggerSpice">Linkedin</a><br />Get updates</li>
<li class="bsrss"><a href="hhttp://feeds.feedburner.com/BloggerSpice">RSS</a><br />Get updates</li>
</ul>
</div>
</div>
Step 5 Now Hit on save Button
Customization
- Change BloggerSpice with your ID
- Change 102331886274459115104 with your Google Plus ID
0 comments:
Post a Comment