टेम्पलेट में बदलाव किये बिना Sliding फालो मी बटन लगायें(इसके साथ चलते चलते फीचर भी)

मनोज जैसवाल : सभी पाठकों को मेरा प्यार भरा नमस्कार.मेरी पिछली पोस्ट को अत्यधिक पसंद करने के लिए आप सभी का दिल से धन्यबाद.जो कि  18 जुलाई २०१२ को प्रकाशित हुई थी.आज 24 जुलाई २०१२ को मैं यह पोस्ट प्रकाशित कर रहा हूँ,जो कि लगभग 6 दिन का अंतराल है.आज तकनीकी पोस्टों के क्रम में पेश है 'टेम्पलेट में बदलाव किये बगैरटेम्पलेट में बदलाव किये बिना Sliding सोशल मीडिया फालो मी बटन लगायें !!!'' इसका लाइव डेमो आप मेरे इस ब्लॉग में देख सकते हैं.इस विजेट की खास खूबी यह है कि यह आपके ब्लॉग के ठीक ऊपर  खाली जगह लग जाता है .इसके लिए आप को अपने टेमप्लेट में कोई बदलाव भी नहीं करना होगा.आप अपने ब्लॉगर खाते में लॉन्ग इन हों एड विजेट जाबा स्क्रिप्ट्स का चयन कीजिये खुले बॉक्स में नीचे दिया कोड डाल कर सेव कर दीजिये.कोड के लिए प्लीज Show बटन पर क्लिक करें. 

क्लिक >>

<style>

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 0px;

right: 0px;

list-style: none;

z-index:999999;

width:721px;

}

ul#navigation li {

width: 103px;

display:inline;

float:left;

border:0;

}

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color:#eeeeee;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #BDDCEF;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

text-decoration:none;

text-align:center;

padding-top:80px;

opacity: 0.96;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

ul#navigation li a:hover{

background-color:#CAE3F2;

}

ul#navigation li a span{

letter-spacing:2px;

font-size:11px;

color:#60ACD8;

font-family:trebuchet-ms, arial, tahoma, Sans-Serif;

font-weight:bold;

text-shadow: 0 -1px 1px #fff;

}

ul#navigation .rss a{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOf1EM3JXzV32wTKVSnFIMrjPZyisa1b4OXTvnUC1Xn8yOQt-vrJnhrcWHeKTNlNJbmrGPjEKH5dFBM41DQ2C0Q9xD5bXcHcaqCoRA_80E4reV8-YlgopJk2DrI_cpQqtaE9RKH8lQgPf4/s400/rss_64x64.png);

}

ul#navigation .facebook a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTYHOQPeMx9IM8gD9HsKKyFY43iM5p12DCqi_CM_dyeTj8xQ_ix6OVUaZuv2UgW3tvwB4jujoWDjo-Trb-75tqhCSnlxDMGfv5GWQXxsmjrlD6N76-H3_dS81G3v_PY-niztVudvswawPC/s400/facebook_64x64.png);

}

ul#navigation .twitter a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6xsd7jrX4imkzw1MQKGC91yRx5-pjcs3fNNtv5h0ckK7LXvZtb_sHRQvdME6rTcu9WG2zqPiE93pb1BwUi34kbT_3A-1jZZWjgbBBlrgysd8ujNtFLQG8hLWhhkpJfmmvwbBmtqCe1ses/s400/twitter_64x64.png);

}

ul#navigation .googlebookmarks a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4pSbUAzP9oWTtVUwA9f4Xq7Eh8ijieZB0DfBkL5VFd2JSavmLeqMmY3NzOsnm0t2o2d-A73IzXqTPVaaKMixQLbZQri_MIDcsR9ps7_ogqK4IcqmCtNuvfR4keiuam3EXKavXt0BapsD/s400/google_64x64.png);

}

ul#navigation .e-mail a {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMqW6gEtnYAPAtJTrlm_Yq_FmWt6RXanP5QOzeZ0ne7Om3gYInF-YqrIFaArYj9wpjhyphenhyphen3KuEGRWg9yDvcJve1betR2_PZ4PGXJzHD5rwghAPs_NsxbbH1VX1hDVaFTapQX19KzuTvofViz/s400/yahoo_64x64.png);

}

</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">

</script>

<script type="text/javascript">

$(function() {

var d=300;

$('#navigation a').each(function(){

$(this).stop().animate({

'marginTop':'-80px'

},d+=150);

});

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},200);

},

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},200);

}

);

});

</script>

<ul id="navigation">

<li class="rss"><a href="http://feeds.feedburner.com/blogspot/Rytvt" target="_blank">RSS Feed</a></li><li class="facebook"><a href="http://facebook.com/pages/Mediamanojjaiswalpbt/275794579116597" target="_blank">Facebook</a></li><li class="twitter"><a href="http://twitter.com/manojjaiswalpbt" target="_blank">Twitter</a></li><li class="googlebookmarks"><a href="https://plus.google.com/114465017807692970484" target="_blank">Google</a></li>

<li class="e-mail"><a href="manojjaiswalpbt@yahoo.com" target="_blank">Yahoo!</a></li></ul>

                    नोट :: लाल रंग से दिए मेरे लिंकों को अपने लिंकों से बदलना ना भूलें.

                                         चलते चलते 

इस कोड से अपने ब्लॉग पोस्ट में प्रयुक्त चित्रों को बड़े साइज में दिखाए.





प्लीज ऊपर चित्र पर अपना कर्सर ले जाएँ,इसके लिए आप को अपने टेमप्लेट में कोई बदलाव भी नहीं करना होगा.आप अपने ब्लॉगर खाते में लॉन्ग इन हों एड विजेट जाबा स्क्रिप्ट्स का चयन कीजिये खुले बॉक्स में नीचे दिया कोड डाल कर सेव कर दीजिये.



<style type='text/css'>
img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}
</style>
<script type='text/javascript'>

if (document.images){
 (function(){
  var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
  var expConIm = function(im){
   im = im || window.event;
   if (!expConIm.r.test (im.className))
    im = im.target || im.srcElement || null;
   if (!im || !expConIm.r.test (im.className))
    return;
   var e = expConIm,
   widthHeight = function(dim){
    return dim[0] * cos + dim[1] + 'px';
   },
   resize = function(){
    cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims[i].w);
    im.style.height = widthHeight (e.ims[i].h);
    if (e.ims[i].d && times > e.ims[i].jump){
     ++e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
     --e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    }
   }, d = document.images, i = d.length - 1;
   for (i; i > -1; --i)
    if(d[i] == im) break;
   i = i + im.src;
   if (!e.ims[i]){
    im.title = '';
    e.ims[i] = {im : new Image(), jump : 0};
    e.ims[i].im.onload = function(){
     e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
     e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
     e (im);
    };
    e.ims[i].im.src = im.src;
    return;
    }
   if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
   e.ims[i].d = !e.ims[i].d;
   resize ();
  };

  expConIm.ims = {};

  expConIm.r = new RegExp('\\bexpando\\b');

  if (document.addEventListener){
   document.addEventListener('mouseover', expConIm, false);
   document.addEventListener('mouseout', expConIm, false);
  }
  else if (document.attachEvent){
   document.attachEvent('onmouseover', expConIm);
   document.attachEvent('onmouseout', expConIm);
  }
 })();
}
</script>


 अब आप डेशबोर्ड -> सेटिंग -> Site Feed पर जाये  यहाँ आपको  Post Feed Footer का आप्शन मिलेगा इसके सामने बॉक्स में नीचे दिया कोड डाल कर सेटिंग को सेव कर दें. इससे आपको यह फायदा होगा जब भी आप नई पोस्ट लिखेंगे यह कोड अपने आप वहां मिलेगा,इससे आप बार बार कोड को कॉपी पेस्ट नहीं करना होगा.जब भी आप इसे इस्तेमाल करना चाहे करें अन्यथा डिलीट कर दें.


<img border="0" class="expando" height="315" src="YOUR IMAGE LINK SOURSE" style="height: 443px; width: 421px;" title="" width="300" /><a href="YOUR IMAGE LINK" target="_blank"><img alt="View Image in New Window" src="http://draft.blogger.com/img/icon_new_window.png" title="If You Can't See, Open In New Window" /></a>



क्या आपको यह लेख पसंद आया? अगर हां, तो ...इस ब्लॉग के प्रशंसक बनिए !!