Step#1
Open Blogger Dashboard → Layout → Add A Gadget → Html/Javascript Editor
Now copy paste the below given code.
Now copy paste the below given code.
<style>
.Twittco {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw0gkwnsAZuUnqDeIJPbp6rwUnnKmVBn8xb6OvIYY2aadTuUeVCNCnIxybSUyj-T0Qx1Nx4obIlwxO0GDCs2uf0m2-5p9VwbEhJLsGBuzfpAzrD19fCzJXzErzYkvrJQzP-WdHhE9GYvc/s1600/twitter_bird.png) 0 0 no-repeat;
padding: 0 15px 0 20px;
margin-left: 0;
height: 45px;
}
.Twitterocfollow {
background-color: #fff;
width: 294px;
height: 70px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.iframeoftwi {
margin-left: 55px;
margin-top: -31px;
}
.Socialiconsoc {
background-color: #fff;
width: 294px;
height: 70px;
background-repeat: no-repeat;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.Facebookox {
background-color: #fff;
width: 294px;
height: 40px;
margin-top: -6px;
background-repeat: no-repeat;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.Feedburneroc {
background-color: #fff;
background-repeat: no-repeat;
margin-top: -19px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
width: 294px;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
#subboxs {
border: 1px solid #d2d2d2;
padding: 5px 26px 5px 10px;
color: #838383;
font-size: .7rem;
height: 28px;
font-family: "Rancho", cursive;
outline: none;
width: 50%;
margin: 0 5px 0 0;
}
#subbuttons {
background-color: #f90;
border: 3px solid #f90;
cursor: pointer;
color: white;
width: 30%;
height: 38px;
margin: 0;
font-size: .7rem;
margin-right: 4px;
float: right;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#subbutton:hover {
background-color: #292929;
border: 3px solid #292929;
}
</style>
<div class="Socialiconsoc">
<table border="0" margin="0px" rules="none" cellspacing="0px" cellpadding="0px">
<tbody><tr valign="top">
<td style="padding-top: 12px; padding-left: 12px" width="60px">
<a href="http://feeds.feedburner.com/your-feedburner-id" target="_blank" title="Subscribe via RSS"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/rss.png" alt="RSS" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60px">
<a href="http://twitter.com/username" target="_blank" title="Follow on Twitter"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/twitter.png" alt="Twitter" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60x">
<a href="http://www.facebook.com/your-facebook-ID" target="_blank" title="Follow on Facebook"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/facebook.png" alt="Facebook" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60x">
<a href="http://pinterest.com/Your-pinterest-ID" target="_blank" title="Follow on Pinterest"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/pinterest.png" alt="Pinterest" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60px">
<a href="http://www.youtube.com/Your-Youtube-ID" target="_blank" title="Subscribe on YouTube"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/youtube.png" alt="YouTube" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a>
</td></tr></tbody></table>
</div>
<div class="google+ss">
<!-- Place this tag where you want the widget to render. -->
<div class="g-person" data-width="296" data-href="//plus.google.com/Your G+ Id Code" data-layout="landscape" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(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>
<div align="left" class="Facebookox">
<div style="padding:8px 0px 5px 10px">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FYour FB Id Code&width=284&height=35&colorscheme=light&layout=standard&action=like&show_faces=false&send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:284px; height:35px;" allowtransparency="true"></iframe>
</div> </div>
<div class="Twitterocfollow">
<div class="Twittco"></div>
<div class="iframeoftwi">
<a href="https://twitter.com/trackmyblog" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @Twiiter-Page-Name</a>
<script>!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>
<div class="Feedburneroc">
<div style="padding:14px 0 11px 7px">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" 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">
<input id="subboxs" name="email" onblur="if ( this.value == '' ) { this.value = 'Enter your email address...'; }" onfocus="if ( this.value == 'Enter your email address...') { this.value = ''; }" type="text" value="Enter your email address..." />
<input name="uri" type="hidden" value="Your-feed-burner-id" />
<input name="loc" type="hidden" value="en_US" />
<input id="subbuttons" type="submit" value="Subscribe!" />
</form></div></div>
0 التعليقات: