Social Widget - 4 in 1

Your first priority should always be Facebook, Google+, Twitter, Linkedin and Feedburner for social subscription widget. All these social media, play well in circulating your content over a wide range of visitors. Social Media is a non-stoppable engine, which, if driven correctly and carefully can bring tons of valuable traffic each visitor worth a dollar. You should always encourage your readers to share, like, pin your post or articles. provides the best sharing, social, recommended content, and conversion tools to help you make your website smarter.

How to install:

1. Log into your blogger account

2. Design --> Edit HTML

3. Copy this code bellow and past before </body> tag

#social {
  width: 98%;
  height: 45px;
  margin: 0;
  padding: 10px 5px 5px 30px;
  list-style: none;
  border-right:solid 1px #853529;
  position: relative;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSz2sEJGQylW-Agy1uoeYXtx8O6xB9GyPgkIZpsXl02RSISoD7bod4TeJsPe6ktJ35NsjQ92w2EEnp0Gyn8LDtBi9waAcWabNU7fu18C05N-M4L3LDnKBFtBpXoU2FY3NptsfmeDKFA0c/) no-repeat left top;
  }

#social p{
  font-size:1.5em;
  color:#FFFB98;
  font-weight:bold;
  float:left;
  margin: 10px 10px 0 0;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
  }

.abt{
  font-size:0.8em;
  color:#787878;
  float:right;
  margin: 0 -30px 0 0;
  text-shadow: 1px 1px 0px #ffffff;
  filter: dropshadow(color=#ffffff, offx=1, offy=1);
  }

#social li {
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 3px;
  }

#social li a {
  float: left;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -1000em;
  background-repeat: no-repeat;
  text-decoration: none;
  }

#social #rss {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2S9pTXBQsj_6JGbywazSk1Cj7m8Q5Gqdvx30hXKYtV9WKHFTHNKQJnM1q9GDQJNj96_hoGzruJGGlMfVph5yJRCGVzO5FsbTktVlfdsX19gPvmZevUJJQP5xQgQoaSryh6L_fYshYrE/s400/allblogtools_rss.png);
  }

#social #facebook {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGCjXhlw1HGTflnlnPaEldGwj-JtrVV2FayJLOfso4j5KzCmbnbDfoN6ktwNREuKwfORFo8hjF6EQCJgAgdtNPDw-a5m9w_ke5Hj7_XLZ_4_g6JefflCt7Mnl2Xz1-Har4XrhFAfP7mZc/s400/allblogtools_facebook.png);
  }
  #social #twitter {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPn8ckgYguRUDKmAt1KWjF5vXnq6LwIuqhzR00kA3wO9VanoY53Lw2ua9gL0mWmullrTQWeJuai-oag4sk2YO0Y59OALDeOrsu0JbyYfOGwzuY83FmVWGZ3KjUASQKQ5tJn1kQemw8j5c/s400/allblogtools_twitter.png);
  }
  #social #mail {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEwrISVxMTAG9Q5jGQO5T3rtljGz38ZJD9UYC6qPt6GEipzLnvuKWm8XoCYMEe2l6JJIrfSJMpRi34t8VTMzun3JOJVskjTt0pPzFjZDo0-DfJ5aQjfIfkQUETcDNdmexsjr1dLt6o3d0/s400/allblogtools_email.png);
  }

span.tooltip {
  background: #575757;
  padding: 3px;
  display: block;
  width: 140px;
  border: 1px solid #000000;
  position: absolute;
  margin-top:-40px;
  color: #F0F0F0;
  font-size:10px;
  text-indent: 0;
  font: Arial, sans-serif;
  text-align: center;
  -webkit-box-shadow: inset 2px 2px 2px #616161;
  -moz-box-shadow: inset 2px 2px 2px #616161;
  box-shadow: inset 2px 2px 2px #616161;
  -moz-border-radius: 5px;
  border-radius: 5px;
  }
</style>

<ul id="social">
  <p>
Follow Us </p>
<li><a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/blogspot/ekWMe" id="rss" title="Follow Our Feeds">Rss</a></li>
<li><a rel="nofollow" href="MailLink#" id="mail" title="Subscribe To Our News Letter">Mail</a></li>
<li><a rel="nofollow" href="FaceBookLink#" id="facebook" title="Be Our FaceBook Fan">Facebook</a></li>
<li><a rel="nofollow" href="TwitterLink#" id="twitter" title="Follow Us On Twitter">Twitter</a></li>
</ul>
<b class="abt"><a rel="nofollow" target="_blank" href="http://how-its-made2.blogspot.com/">Get This Widget</a></b>

Save template:

Now add widget:

Layout--> Page Elements --> Add Gadget

Choose "HTML/JavaScript"

Add Code Beloow and Change URL to Your URL

#social p{
  font-size:1.5em;
  color:#FFFB98;
  font-weight:bold;
  float:left;
  margin: 10px 10px 0 0;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
  }

.abt{
  font-size:0.8em;
  color:#787878;
  float:right;
  margin: 0 -30px 0 0;
  text-shadow: 1px 1px 0px #ffffff;
  filter: dropshadow(color=#ffffff, offx=1, offy=1);
  }

#social li {
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 3px;
  }

#social li a {
  float: left;
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -1000em;
  background-repeat: no-repeat;
  text-decoration: none;
  }
#social #rss {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2S9pTXBQsj_6JGbywazSk1Cj7m8Q5Gqdvx30hXKYtV9WKHFTHNKQJnM1q9GDQJNj96_hoGzruJGGlMfVph5yJRCGVzO5FsbTktVlfdsX19gPvmZevUJJQP5xQgQoaSryh6L_fYshYrE/s400/allblogtools_rss.png);
  }

Click "Save" - That's All.

How To Do

Saturday, November 12, 2016

Social Widget - 4 in 1

Admin 4:26:00 AM

Categories

Blog Tools