Saturday, 31 December 2016

Social Media Widget For Blogger / Share Widget

Social Media Widget For Blogger/Share Widget

Social Media Widget For Blogger / Share Widget


Friends to day I m going to explain about how to add Social Media Widget For Blogger/Share Widget . I have made some unique and beautiful Social Media Widget For Blogger .But first I will discuss why the social network widget is necessary for your blogger. As I told you in my last post (Promote Your Website Free) about advantage of social network .Every blogger want to drive people form search engines. But first show your blog/site to people .what actually is this .I mean your blog/site. If you want to get more visitor then you must need to add this social network widget to your blogger .the widget will help you. and this widget will show your blog to people. I mean when you share you blog/site posts the people will visit and followed you. In this widget I add all social network .Not only that for following this widget will make your blogger most attractive and responsive.

Now How To Install Social Media Widget For Blogger

First of open you Blogger dash board
Go> Layout >Click on +Add a Gadget
A page will open select HTML-java script
Copy the code from here (which is given below) and past it in content area No need to give any title.
and save it .

Horizontal Drop Down Menu


Horizontal Drop Down Menu


Social Media Widget For Blogger

Copy the Code From Here


<style>
#socialmenu_btrix {
  margin:0;
  padding:0;
  width: 30em;
  height: 4.5em;
  overflow:hidden;
  }
#socialmenu_btrix li {
  display:inline;
  list-style-type:none;
  }
#socialmenu_btrix li a {
  display:block;
  float:left;
  text-decoration:none;
  margin:0;
  }
#socialmenu_btrix li a img {
  opacity:0.7;
  margin:0.5em;
  border:0;
  float:left;
  }
#socialmenu_btrix li a span {
  display:none;
  }
#socialmenu_btrix li a:hover {
  background:transparent;
  }
#socialmenu_btrix li a:hover span {
  width:7em;
  color:#aaa;
  display:block;
  cursor:pointer;
  float:left;
  }
#socialmenu_btrix .h2 {
  margin:0 5px;
  padding:0;
  color:#fc0;
  font-variant:small-caps;
  font-size:1em;
  border:0;
  }

  </style>
  <ul id="socialmenu_btrix">
  <li>
    <a href="https://www.facebook.com/Username"><img src="
http://tinyurl.com/bloggertipssandtricks" alt="facebook" width="50" height="50" title="Facebook" />
     <span><br />
      <b class="h2">Facebook</b><br />
      Add to facebook
     </span>
    </a>
   </li>
   <li>
    <a href="https://plus.google.com/Username"><img src="
http://tinyurl.com/hybt4av" alt="Google plus" width="50" height="50" title="=Google plus" />
     <span>
      <br />
      <b class="h2">Twitter</b><br />
      Add to twitter
     </span>
    </a>
   </li>
   <li>
    <a href="http://feeds.feedburner.com/Username"><img src="
http://tinyurl.com/salgary" alt="Rss" width="50" height="50" title="Rss" />
     <span><br />
      <b class="h2">Rss Feed</b><br />
        Subscribe
     </span>
    </a>
   </li>
   <li>
    <a href="http://stumbleupon.com/Username"><img src="
http://tinyurl.com/moqaddar-khan" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" />
     <span><br />
      <b class="h2">Stumbleupon </b><br />
      add to stumble
     </span>
    </a>
   </li>
    <li>
    <a href="https://twitter.com/Username">
     <img src="
http://tinyurl.com/blogger-tipss-tricks
" alt="twitter" width="50" height="50" title="twitter" />
     <span><br />
      <b class="h2">Twitter</b><br />
      add to twitter
     </span>
    </a>
   </li>
  </ul>

End of the code
Replace Username with your Feed-burner ID 
Replace Username with your Facebook Page Name
Replace Username with your Twitter Usernames
Replace Username with your Google plus-username
Replace Username with your Stumble-upon Username
After pasting and replacing your Social network id's your widget will look like
Social Media Widget For Blogger / Share Widget

Related post with Social Media Widget For Blogger


Thank you for visiting our site .If you need any type help related or to this post or other question then contact us or comment us
                        Is this Post is helpful
                                  Type your opinion in comment section
Previous Post
Next Post

1 comment: