பிளாக்கர் வலைப்பூக்களுக்கு "Sticky bar with social buttons" புதிய விட்ஜெட்

http://anbhudanchellam.blogspot.in/2011/12/sticky-bar-with-social-buttons.html#more

பிளாக்கர் வலைப்பூக்களை பயன்படுத்துபவர்களுக்கு ஏராளாமான விட்ஜெட்கள் இணையத்தில் கிடைக்கிறது. அதில் வலைப்பூக்கல்க்கு எந்த விட்ஜெட் பயன்படுமோ, எந்த விட்ஜெட்டினால் வாசகர் எண்ணிக்கை அதிகரிக்க வாய்ப்பிருக்கிறதோ அந்த வகை விட்ஜெட்டை மட்டும் பிளாக்கரில் பயன்படுத்துவது நல்லது. அந்த வகையில் மற்றுமொரு பயனுள்ள விட்ஜெட் கோடிங்கை MBT தளம் உருவாக்கி உள்ளது. Sticky Bar-ல் சமூக வலைதளங்களின் தொடர்பு பட்டங்களை வைத்து இந்த விட்ஜெட்டை உருவாக்கி உள்ளதால் இந்த விட்ஜெட்டின் மூலம் சமூக வலைதளங்களில் பின் தொடர்வோர் எண்ணிக்கையை கணிசமாக அதிகரிக்க முடியும். இந்த பயனுள்ள விட்ஜெட்டை உங்கள் வலைப்பூவில் இணைப்பது எப்படி என கீழே பார்ப்போம். சற்று பெரிய கோடிங் சேர்க்க வேண்டும் என்பதால் சற்று கவனமாக சேர்க்கவும்.

முதலில் உங்கள் பிளாக்கர் கணக்கில் நுழைந்து Design ==> Edit Html செல்லுங்கள். (எதற்கும் உங்கள் டெம்ப்ளேட்டை ஒருமுறை டவுன்லோட் செய்து கொள்ளுங்கள்).
அடுத்து இந்த கோடிங்கை ]]></b:skin> கண்டுபிடிக்கவும்(Ctrl+F கொடுத்து வரும் சிறிய விண்டோவில் இந்த வரியை கொடுத்தால் சுலபமாக கண்டறியலாம்). கண்டுபிடித்த பின் கீழே உள்ள கோடிங்கை காப்பி செய்து கண்டுபிடித்த வரிக்கு மேலே/முன்னே பேஸ்ட் செய்யவும்.

#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoF3vt8mxvFUcwf6jA8Fnl-TYj579bM5ySfdx4NoZXTLhOTiAt_yH6uYBBez8tRW06jyWIAJwVAfPJ5hp_Moyjxo3tWh7O_uu85-QDbSvk0tfTPWr5HoVWCjtFhVXnU4yhvFsF1T2-8KA/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:3px 0 0 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:12px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
margin-right: 6px;}

STEP-2:
அடுத்து </head> இந்த வரியை கண்டுபிடிக்கவும். கண்டுபிடித்த பின் கீழே உள்ள வரியை காப்பி செய்து இந்த வரிக்கு மேலே/முன்னே பேஸ்ட் செய்யவும்.

<script type='text/javascript'>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>

STEP-3
அடுத்து இந்த <body> வரியை கண்டுபிடித்து கீழே உள்ள கோடிங்கை காப்பி செய்து இந்த வரிக்கு கீழே/பின்னே பேஸ்ட் செய்யவும்.

<div id='mbt_bar'> <span style='padding-right:5px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAdsundefined);return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-mfkB2z_D4OeK7yANIn0ME_mAONDCBD6Kc54onhnmIXEoc_qsC0CSgHfFLLdCm-IXdK02k9lm8p3zShM_fFMn624EDw0bVFrqOXBB0Yd3DQ5iV5Lc7pYKDu-j9gG71gtzP7_lsz9IyA/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>புதிய பதிவுகளை உடனுக்குடன் அறிய</div> <div style='float:right; padding-right:0px;'> <p style='font:bold 12px arial; float:left; margin:5px;'>பின்தொடர</p><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fvandhemadharam&send=false&layout=button_count&width=80& show_faces=false&action=like&colorscheme=light&font&height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://www.vandhemadharam.com' size='medium'/> </div> </div>

மேலே உள்ள கோடிங்கில் சிவப்பு நிறத்தில் கொடுத்துள்ளதை மாற்றி உங்கள் விவரங்களை கொடுதுக்கொள்ளவும்.

STEP:4
ஏற்க்கனவே உங்கள் தளத்தில் +1 பட்டன வைத்திருந்தால் இந்த படியை தவிர்த்து விடுங்கள். இல்லாதவர்கள் கீழே உள்ள கோடிங்கை காப்பி செய்து இந்த ]]></b:skin> வரிக்கு கீழே/பின்னே பேஸ்ட் செய்யவும்.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

மேலே உள்ள அனைத்து படிகளில் உள்ள கோடிங்கையும் சரியான இடத்தில் கொடுத்த பின்னர் முடிவாக PREVIEW பார்த்தல் இந்த புதிய sticky Bar உங்கள் தளத்தில் சேர்ந்திருப்பதை காட்டும் அதை உறுதி செய்த பின்னர் SAVE TEMPLATE பட்டனை அழுத்தி விடுங்கள்.