Tuesday, June 19, 2012

வலைப்பூக்களுக்கு நிலையான ஸ்டிக் பார் -ப்ளாக்கர் (Stick Bar)

நண்பர்களே பதிவுகளை பகிர்வதற்கு பேஸ் புக் ட்விட்டர்,கூகுள் ப்ளஸ் போன்ற பட்டன்-களை நம் வலைப்பூவின் பதிவின் முடிவில் இணைத்திருப்போம் .இன்று நாம் பார்க்க போவது நிலையான ஸ்டிக் -என்பது வலைப்பதிவின் எந்த பக்கம் சென்றாலும் அது வலைப்பூவின் மேலே தொடர்ந்து தெரிந்து கொண்டே தான் இருக்கும் .அந்த பக்கத்தை அங்கிருந்தே பகிர்ந்து கொள்ள முடியும் மேலும் இந்த ஸ்டிக் பாரில்
முகப்பு  பக்கத்தின் இணைப்பு வந்து விடும் .

Back To Top பட்டன் வந்து விடும் .

Random Post-அடுத்த பதிவை  பார்க்க முடியும் .

Email- மூலமாக பதிவுகளை பெற முடியும் .

வேகமாக  இந்த இந்த நிரல் செயல் படும் லோடிங் ஆவதற்கு சிறிது நேரமே எடுத்து கொள்ளும் .

எப்படி இணைக்கலாம் . மூன்றே படிகளில் எளிமையாக இணைத்து விடலாம் .


]]</b:skin> -க்கு முன்னால் சேர்க்க வேண்டியவை .
#SYB-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));
}

 #SYB-Bar-Container , #SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit {
 box-shadow: 0 5px 5px -5px #999;
 -webkit-box-shadow: 0 5px 5px -5px #999;
 -moz-box-shadow: 0 5px 5px -5px #999;
 }

 #SYB-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;
  }

#SYB-Bar-Container *{
padding:0;
}

#SYB-Bar-Container a {
text-decoration:none;
}

#SYB-Bar-Content{
width:1024px;
margin:0 auto;
}

#SYB-Bar-Content li{
list-style:none;
float:left;
}

#SYB-Bar-Left{
float:left;
width:45%;
}

#SYB-Bar-Right{
float:right;
width55%;
}

#SYB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}

#SYB-Bar-Right li{
margin-top:-7px;
}

#SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-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;
}

#SYB-Bar-Left .Home a:active, #SYB-Bar-Right .btt a:active,.SYB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}

#SYB-Bar-Left .Home a{
background:#143eb4;
}

#SYB-Bar-Left .Home a:hover{
background:#1556fa;
}

#SYB-Bar-Right .Subscribe{
margin-top:-14px;
}



#SYB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}

#SYB-Bar-Right .btt a:hover{
background:#06b421;
}

.SYB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.SYB-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){
#SYB-Bar-Container{
display:none;
}
}

<body> -க்கு பின்னால் சேர்க்க வேண்டியது :
<div id='SYB-Bar-Container'>
<div id='SYB-Bar-Content'>
<ul id='SYB-Bar-Left'>
<li class='Home'> <a href='http://www.stylifyyourblog.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='SYB-Bar-Right'>
<li class='Subscribe'> <div class='SYB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=stylifyyourblog&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);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='stylifyyourblog'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form>
<a href="http://wesmob.blogspot.com" title="Tamil blogger Tips" ><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 &#8593;</a> </li>
</ul></div></div> 

 </body> -க்கு முன்னால் சேர்க்க வேண்டியது :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> 
<script>
//<![CDATA[
var b = $("#SYB-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> 

எல்லா கோடிங்-களையும் சேர்த்து SAVE TEMPLATE என்பதை அழுத்தி

 வார்ப்புருவை சேமித்து விடுங்கள் .அவ்வளவு தான் இனி நிலையான ஸ்டிக் பார் வலைப்பதிவின் எந்த பக்கம் சென்றாலும் தெரியும்.

நன்றி 

13 comments:

  1. இதில் ஓட்டு பட்டைகளையும் அடக்கியிருந்தீர்கள் என்றால் சும்மா 'நச்' என்று இருந்திருக்கும் :)

    ReplyDelete
  2. சும்மா சொல்லக்கூடாது அருமையாகவே இருக்கிறது நண்பரே :)

    ReplyDelete
  3. நல்லா இருக்கு நண்பா..... தொடருங்கள் நன்றி ....

    ReplyDelete
  4. நன்றி அருமையான பதிவைத் தந்தமைக்கு!

    ReplyDelete
  5. பாக்குறதுக்கு நல்லாத்தான் இருக்கு பகிர்ந்த நண்பனுக்கு நன்றி

    ReplyDelete
  6. அருமையான பதிவு.
    நன்றி.

    ReplyDelete
  7. நல்ல தகவல்

    ReplyDelete
  8. நன்றி சகோ... ஒரு தளத்திற்கு பிரயோகித்துப் பார்க்கிறேன்..

    அன்புச் சகோதரன்
    ம.தி.சுதா
    ஏழை மாணவன் ஒருவனை கரை ஏற்ற வாருங்கள்

    ReplyDelete
  9. நல்லா இருக்கு நண்பரே

    ReplyDelete