Latest Information : How to add Social Network Subscription Widget for Blogspot/Blogger

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Social Network Subscription Widget for Blogspot/Blogger

Preview

Step by Step Process How to add Social Subscription Widget for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

Step 3 :    Search for Below Code

]]></b:skin> 

Step 4 :    After that Replce With Following Code.

    @import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.LatestinfoOldSocial ul {
 font-family: 'Oswald', sans-serif;
 margin: 15px 0;
 overflow: hidden;
}
.LatestinfoOldSocial ul li {
 float: left;
 width: 90px;
 padding: 0 0 0 55px !important;
 margin: 0 0 0 5px !important;
 line-height: 48px !important;
}
.LatestinfoOldSocial ul li a {
 font-size: 20px !important;
 text-decoration:none;
 padding:0 !important;
 margin:0 !important;
 text-decoration:none;
}
.LatestinfoOldSocial ul li a:hover {
 text-decoration:underline;
}
.LatestinfoOldSocial ul li.Latestinforss {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjquYnRIg08-P9GClNUzNCIFGCmEHNo83Gz8wHA4TCLeD9oo-uglDEM_Y07wVXDBw7cjCyflfyHOuWG4CoklJtA_B3dD9uIY9Wa_rIoOcTeEywTDf6rzxaXuoRJ9P3rMhh9BIPWNIAs7onc/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.LatestinfoOldSocial ul li.Latestinfomail {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-B-63PNGv1un-KqKmDpEJ0WzHKXcaxvaqC_LZqX3BJocVI_1kjJd6f6-IibaUfXZCCAN3UVkwS2SJstjN1Je1NkqDh5Nr0eEazaMyy07M6pAe8tOqVGJeXE4gQLQwjIQCqmGER8Vvqna/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.LatestinfoOldSocial ul li.Latestinfotwitter {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguBJ1C8W61Mh8kdQMeYdjYTk7baxW3Ahp6QB4b5aBtcyx0OPHpjc96N3V-V9YcEdRd_3g8YpJ6vfR8OYJ0f5SY6-08TYXCSSl73VfV2Y-242S1UT1lXwUmdgzbPLE4pSI8GNPGdddohP-u/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.LatestinfoOldSocial ul li.Latestinfofacebook {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1zzdWkrzaRYqilpbvCByRK5jYMghk8FRRQ4R_fM0IBo7uDQvnDPvbriubEbYtlkDqJQSUG_gw1UlNE_qfvFRhCg4mWmJz7K08xhpgmt2HkNU4rHVwGufnNb65jY6HN0_VA2GLK4fhyphenhyphenROH/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#LatestinfoEmailsub {
 display: block;
 clear: both;
 margin: 10px 0;
}
form.LatestinfoEmailform {
 margin: 20px 0 0;
 display: block;
 clear: both;
}
.emailText {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCrs_FWZ5PCOeFy_RXpUK4LNMrNCZ6zCZqStdaMQHSDdf9YbdnsDcCc4d6YQOhl4uogVT7kL4qrfHFfGQnqQIRpe3Sawh449JdnG4nhzjZTzOayY5LBL1nwl5iUAG-YlkQ3geWskMx5w9R/s28/Latestinfo-mail.png") no-repeat scroll 4px center transparent;
 padding: 7px 15px 7px 35px;
 color: #444;
 font-weight: bold;
 text-decoration: none;
 border: 1px solid #D3D3D3;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

 -webkit-box-shadow: 1px 1px 2px #CCC inset;
 -moz-box-shadow: 1px 1px 2px #CCC inset;
 box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
 color: #444;
 font-weight: bold;
 text-decoration: none;
 padding: 6px 15px;
 border: 1px solid #D3D3D3;
 cursor: pointer;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

 background: #fbfbfb;
 background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
 background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
 background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
    ]]></b:skin> 

Step 5 :    Save Template.

Step 6 :    Go to Layout >> Click Add Widget >> Select HTML/JavaScript

Step 7 :    Give Title as Subscribe Us

Step 8 :    After that Copy the Below Code and Paste in Content Block

  
    <div class="LatestinfoOldSocial">
 <ul>
  <li class="Latestinforss"><a href="http://feeds.feedburner.com/forlatestinformation">RSS</a></li>
  <li class="Latestinfomail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=forlatestinformation" >Email</a></li>
  <li class="Latestinfotwitter"><a href="http://twitter.com/forlatestinfo">Twitter</a></li>
  <li class="Latestinfofacebook"><a href="http://facebook.com/Forlatestinformation">Facebook</a></li>
 </ul>
</div>
<div id="LatestinfoEmailsub">
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=forlatestinformation', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="LatestinfoEmailform">
  <input type="hidden" value="Way2blogging" name="uri" />
  <input type="hidden" name="loc" value="en_US" />
  <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailText" />
  <input type="submit" class="emailButton" value="SignUp" title='' />
 </form>
</div>

  Note :
    After adding above Widget code Customize the RSS, twitter and other URLs as follows.!
        http://feeds.feedburner.com/forlatestinformation with your feedburner url
        http://feedburner.google.com/fb/a/mailverify?uri=forlatestinformation change the Feedburner ID
        http://twitter.com/forlatestinformation with your Twitter URL
        http://facebook.com/forlatestinformation with your Facebook Page URL
        <input type="hidden" value="forlatestinformation" name="uri" /> change the Feedburner ID with yours.

Step 9 :    Save Widget.

Thank You.
Happy Blogging.
Write Your Comments Below.