இது அனைவருக்கும் தெரிந்த ஒன்றாக இருக்கும். தெரியாவிட்டால் தெரிந்து கொள்ளுஙகள். அதாவது இவ்வகையான Sticky Bar கள் வலைப்பூக்களை அழகூட்டுகின்றது.
இதில் உள்ளடங்கியுள்ளவையாவன...
- Home Button
- Tweet Button
- Google + Button
- Facebook Button
Step 1 : Adding The HTML
- Go to Blogger Dashboard > Template
- Download a copy of your template
- Click on Edit HTML
- Hit Proceed
- Find for below code,
<body>===============================================================
கீழுள்ள CODE இனை மேலுள்ள <body> Tag இன் கீழ் Copy செய்து Paste செய்யுங்கள்
<div id='HB-Bar-Container'>
<div id='HB-Bar-Content'>
<ul id='HB-Bar-Left'>
<li class='Home'> <a href='http://tamilcomputerblog.blogspot.com'>Home</a> </li>
<li class='Share'> <div id='share-top'>
<ul>
<li> <a class='twitter-share-button' data-count='horizontal'
href='http://twitter.com/share'>Tweet</a> </li>
<li> <g:plusone size='medium'></g:plusone> </li>
<li> <div class='fb-like' data-font='verdana' data-layout='button_count'
data-send='false' data-show-faces='false'>
</div></li></ul>
<div style='clear:both;'></div></div></li>
</ul>
<ul id='HB-Bar-Right'>
<li class='Subscribe'> <div class='HB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'
onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?
uri=Your Feed Name Here', 'popupwindow', '
scrollbars=yes,width=550,height=520');return true' style='padding:
3px;text-align:center;' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if
(this.value == "") {this.value = "";}' onfocus='if (this.value == "")
{this.value = "";}' placeholder=' Enter Your Email Address :)'
type='text' value=''/> <input name='uri' type='hidden'
value='HB'/><input name='loc' type='hidden' value='en_US'/>
<input class='HB-emailsubmit' type='submit'
value='Subscribe'/> </form>
<a href="http://tamilcomputerblog.blogspot.com" title="HB"
><img src="http://img1.blogblog.com/img/blank.gif" /></a>
</div></li>
<li class='btt'> <a href='#top' title='Back to top'>Slide to Top ↑</a> </li>
</ul></div></div>- Replace http://tamilcomputerblog.blogspot.com with your blog URL.
- Replace Your Feed Name Here with your feedburner username
Step 2 : Adding the Scripts
இப்பொழுது கீழுள்ள Code இனை தேடுங்கள் </body> கீழுள்ள Code இனை மேலுள்ள Code இற்கு முன்னாலோ அல்லது மேலோ சேருங்கள்.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
type='text/javascript'></script>
<script>
//<![CDATA[
var b = $("#HB-Bar-Container");var c = b.css("top");$(window).scroll(function
(){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop()
.animate({top: "-100px"}, 0)}});
//]]>
</script>
<script>
$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click
$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);
return false;});});});
</script>
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;js = d.createElement(s);
js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));
</script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>Step 3 : Adding the Bar Style
இப்பொழுது கீழுள்ள Code இனை தேடுங்கள்
===============================================================]]></b:skin>
கீழுள்ள Code இனை மேலுள்ள Code இன் மேலாக இணைக்கவும்.
#HB-Bar-Container {
background-color:#f6f6f6;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9),
to(#f1f1f1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9),
to(#f1f1f1));
}
#HB-Bar-Container , #HB-Bar-Left .Home a, #HB-Bar-Right .btt a,
.HB-emailsubmit {
box-shadow: 0 5px 5px -5px #999;
-webkit-box-shadow: 0 5px 5px -5px #999;
-moz-box-shadow: 0 5px 5px -5px #999;
}
#HB-Bar-Container{
margin: 0px 116px;
top:-100px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
text-align:center;
border-bottom: 1px solid #aaa;
z-index:999;
padding:4px;
height:33px;
position:fixed;
vertical-align: baseline;
}
#HB-Bar-Container *{
padding:0;
}
#HB-Bar-Container a {
text-decoration:none;
}
#HB-Bar-Content{
width:1024px;
margin:0 auto;
}
#HB-Bar-Content li{
list-style:none;
float:left;
}
#HB-Bar-Left{
float:left;
width:45%;
}
#HB-Bar-Right{
float:right;
width55%;
}
#HB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}
#HB-Bar-Right li{
margin-top:-7px;
}
#HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit{
font-size:9pt;
font-family:cambria;
font-weight:Bold;
text-transform:uppercase;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
letter-spacing: 1px;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#HB-Bar-Left .Home a:active, #HB-Bar-Right .btt a:active,
.HB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}
#HB-Bar-Left .Home a{
background:#143eb4;
}
#HB-Bar-Left .Home a:hover{
background:#1556fa;
}
#HB-Bar-Right .Subscribe{
margin-top:-14px;
}
#HB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}
#HB-Bar-Right .btt a:hover{
background:#06b421;
}
.HB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.HB-emailsubmit:hover{
background: #f02a37;
}
.textarea{
border:1px solid #aaaaaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
resize:none;
font-size:8pt;
font-family:verdana;
width:170px;
height:25px;
color:#000000;
}
#share-top{
background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;
margin: -4px 0 0 60px;
padding: 10px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
#share-top li {
display: block;
margin-right: 0;
}
#facebook-widget,#google-widget,#twitter-widget {display:none; }
@media only screen and (min-width : 768px) and (max-width : 1050px),
only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#HB-Bar-Container{
display:none;
}
}இனி உங்கள் Template இனை Save செய்து விட்டு உங்கள் ப்ளாக்கினுள் நுழைந்து பாருங்கள்............
0 comments :
Post a Comment