Monday, July 08, 2013

Add Social Media & RSS Subscription Widget:

Social+Media+And+Rss+Subscribe+Widget

In  this  tutorial   im   gonna  explain  how  to   add  Social Media And Rss Subscribe Widget.  By  using  this  widget you  can link your social  media  profile  Facebook, Twitter and  Rss and  subscribe  field. It  will help to  get  the new updates by  emails. If you have any questions regarding to this.Let me know.
I will help you.
Also see: Add "Search the Blog" Widget to your blog better than google custom search.

Process:

1.Sign in to your Google Account and go to blogger dashboard .
2.Click on Your Blog(in which you want to add this widget).
3.Then Click on "Layout" which is present on left side bar.
4.Then Click on "Add a Gadget".
5.Give gadget a title and leave it keeping it blank.
6.Choose gadget i-e "HTML/JAVA script" from "basics" menu of Gadgets
7.Add the following Bold codes after doing following changes:
  *Replace OS-trickz.blogspot.com with your twitter profile
  *Replace OS-trickz.blogspot.com with your facebook profile
  *Replace OS-trickz.blogspot.com with your feedburner profile
  *Replace UserId with your Google Plus User Id


<style>
.subscribebtrix {
border: 2px solid #000000;
padding: 4px;
width: 200px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribebtrix:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius:2px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 200px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.btrixsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>

<br />
<div class="subscribebtrix">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" 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;}" type="text" value="Enter your email..." />
<input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/
OS-trickz.blogspot.com" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy5wBwwmjWlwWWZid2H6QerbQPy3Et8gJrN4Fgy4XiHaKgXCYtKSHrTqziaCwgwfAVuxbQatqCaGBLrq2skJrRKWfhmaeYPvilfw_5SpOuNVEKQkgyc1xLywIEiP3_mYBLYnedZiJX8bY/s1600/facebook_btrix.png" /></a>
<a href="http://www.twitter.com/
OS-trickz.blogspot.com" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjwu7zgAPxda8mH7MZNmQ3GoGcIVB6Lem_ULvjhA95i14qttwXATLwrvlSl70_Ktt_4CITeeGesjY_uXrUZgRlZD2eY-mIGWUhScX5LrOOj2JqIQl6O2838-CwfzSS32P2feYXL-02alI/s1600/twitter_btrix.png" /></a>
<a href="https://plus.google.com/
UserId" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWxWyFi0nK1XbTsjR4WUlEPBzNwiNA2Ps97c8fhvxMHM9JaIRJkhN-7Lw4ZudQdwr0E4R8WCT2IySUbYp9rNtWVz8loRVuY75ILTqEhDVWq9NYpnbG4G78nY0CS05bchOvwvbVXzJ-8T8/s1600/googleplus_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/
OS-trickz.blogspot.com" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpvOrS_LMDHEePpNgMcdosw4kHe7mKr3g44004HDAT8LuvpVkxktip9bBJ2MbadDqmcVsJKcDzhKM662lvTqWYKXuRU1K5Tl2qVROPzpAc4yKQcTi0RZFEMvcb_StkKkeW77jQLzGLazc/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/bloggertrix"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/bloggertrix?bg=FF9900&amp;fg=444444&amp;anim=1" style="border: 0;" width="88" /></a></div>
</div>




8. Now , Save your JAVA/HTML Script and save arrangement.
9.That,s it Enjoy The Change.


Like the Post? Please share it with your Friends.

No comments:

Post a Comment

Warning !

Search This Blog