Way 2 Blogging admin Harish had released the official share widget of Mashable website. This widget is very interesting and makes the look of the blog more stylish.
He had also made one jQuery pop-up slider which too was one famous and interesting widget among the blogger users.
I edited the codes of these two widgets and made something different and better.
Tutorial -
I will be dividing the tutorial into two parts.
Part 1 - Adding jQuery to blog
(Omit this step if you have added jQuery before.)
1. Open Blogger
2. Open Template
3. Edit HTML
4. Find </head>
5. Now place this code above </head
><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"type="text/javascript"></script>Part 2 - Adding the widget
Now below is the code for the widget.
You must edit the code with your entries where needed.
I have highlighted those sections with different colours.
Now here is the editing index.<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".stblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.stblikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRxz69hjVnHk_VUsS62MfBWY4rCjrNLxW779QgLnOIH58wUz7qkeCZAq4hl_KeJm7e2taoVCJld21jqB_8tKdhnFoqAKCDipsIMJSgLCiOts1txxpN-3SUkxgIEQy1Wm9uKyvdwLvs8w/s1600/Final.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.stblikebox div{border:none;position:relative;display:block;}
.stblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.stblikebox span a{color: gray;text-decoration:none;}
.stblikebox span a:hover{text-decoration:underline;}
</style>
<div class="stblikebox" style="">
<div>
<style type="text/css">
/*<!CDATA[*/
#stb-mashable{width:240px;margin:auto;padding:0;}
.stb-googleplus {height: 57px;}
.stb-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.stb-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.stb-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.stb-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.stb-twitter a.twitter-follow-button {display: block;}
.stb-twitter iframe {margin: 9px 11px;}
.stb-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.stb-sociallinks a {text-shadow: 1px 1px white;}
.stb-sociallinks .stb-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.stb-sociallinks .stb-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWbSGDQpkWRQMLNlitsJZLlT_j1M6SROEgbxtl06tKDHj-jksFlx2CH9n_V0bFHsGX7NfLqUETWkaHp-9K9-NMnABjgIMr194xreTpa9JP4bDjUdOkRL8kpEslU-ncDrrLsZfITjcybDnO/s1600/stb_socialsprite.png) no-repeat;font-size: 12px;}
.stb-sociallinks .stb-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.stb-sociallinks .stb-social li a:hover {text-decoration: underline;}
.stb-sociallinks .stb-social li.youtube {background-position: 0 -90px !important;}
.stb-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.stb-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.stb-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.stb-emailbox input.emailu:focus {color: #333;}
.stb-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.stb-emailbox input.submitu:hover {text-decoration: none;}
.stbBlue{border:1px solid #397CBA;text-shadow: 1px 1px 0 #3A7AB2;background: #60abf8;background: -moz-linear-gradient(top, #60abf8 0%, #4082c4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#60abf8), color-stop(100%,#4082c4));background: -webkit-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: -o-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: -ms-linear-gradient(top, #60abf8 0%,#4082c4 100%);background: linear-gradient(top, #60abf8 0%,#4082c4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60abf8', endColorstr='#4082c4',GradientType=0 );}
.stbBlue:hover{background: #9ccefc;background: -moz-linear-gradient(top, #9ccefc 0%, #5087bf 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ccefc), color-stop(100%,#5087bf));background: -webkit-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: -o-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: -ms-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background: linear-gradient(top, #9ccefc 0%,#5087bf 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ccefc', endColorstr='#5087bf',GradientType=0 );}.stb-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.stb-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
<div id="stb-mashable">
<div class="stb-googleplus">
<script type="text/javascript">
/*<![CDATA[*/
window.___gcfg = {lang: 'en'};
(function(){
var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
/*]]>*/
</script>
<div class="g-plus" data-href="https://plus.google.com/YOUR GOOGLE+ PAGE ID" data-width="240" data-height="69" data-theme="light"></div>
</div>
<div class="stb-facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FYOUR FACEBOOK USERNAME&send=false&layout=standard&width=220&show_faces=true&action=like&colorscheme=light&font=arial&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:220px; height:66px;" allowtransparency="true"></iframe>
</div>
<div class="stb-gplusone">
<script type="text/javascript">/*<![CDATA[*/
(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();/*]]>*/
</script>
<div class="g-plusone" data-size="medium" data-href="YOUR BLOG LINK"></div>
<span>Recommend on Google</span>
</div>
<div class="stb-twitter">
<a href="https://twitter.com/YOUR TWITTER USERNAME HERE" class="twitter-follow-button" data-show-count="true">Follow @YOUR TWITTER USERNAME HERE</a>
<script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div class="stb-sociallinks">
<ul class="stb-social">
<li class="youtube"><a href="http://www.youtube.com/YOUR YOUTUBE USERNAME">Youtube</a></li>
</ul>
</div>
<div class="stb-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEED BURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="64px">
<input class="submitu stbBlue" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="sanved"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
<div class="stb-moresubs">
</div>
</div>
</div>
</div>
YOUR GOOGLE+ PAGE ID - e.g 105836461061022286128 from https://plus.google.com/105836461061022286128
YOUR FACEBOOK PAGE USERNAME - e.g 'sanvedtechblog' from www.facebook.com/sanvedtechblog
YOUR BLOG LINK - e.g http://www.sanvedtapkeer.com/
YOUR TWITTER USERNAME HERE - e.g 'techton77' from www.twitter.com/techton77
YOUR YOUTUBE USERNAME - e.g 'sanvedlop' from www.youtube.com/sanvedlop
YOUR FEED BURNER ID - e.g 'sanved' from feeds.feedburner.com/sanved
Note : The code in BLACK colour is extracted from Facebook Pop up slider and CYANOGEN coloured code is from the Mashable widget, carefully edited for using it on the Facebook Pop up slider code.
Now add this code as HTML/Java Script in blogger via the Layout menu.
Once you do this you are done with all the work.
You can then see this widget in action.
0 comments:
Post a Comment
Please don't Spam in the comments section of Tech Window