टेम्पलेट में बदलाव किये बिना 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(http://2.bp.blogspot.com/_znjmv4LDwck/Sj_axehjkOI/AAAAAAAAA9c/nk9FGYOz-X4/s400/rss_64x64.png);

}

ul#navigation .facebook a {

background-image: url(http://4.bp.blogspot.com/_znjmv4LDwck/Sj_bXRRRXzI/AAAAAAAAA98/HIXOZAkEyqY/s400/facebook_64x64.png);

}

ul#navigation .twitter a {

background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_cLDgz2cI/AAAAAAAAA-E/Nc04OTHnR48/s400/twitter_64x64.png);

}

ul#navigation .googlebookmarks a {

background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_ak6NscZI/AAAAAAAAA9M/rqTYrs6mybg/s400/google_64x64.png);

}

ul#navigation .e-mail a {

background-image: url(http://2.bp.blogspot.com/_znjmv4LDwck/Sj_asJdgxzI/AAAAAAAAA9U/Qjz2LuzIaPE/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>

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

                                         चलते चलते 

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

View Image in New Window



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



<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>



क्या आपको यह लेख पसंद आया? अगर हां, तो ...इस ब्लॉग के प्रशंसक बनिए !!
इस पोस्ट का शार्ट यूआरएल चाहिए: यहाँ क्लिक करें। Sending request...
Comment With:
OR
The Choice is Yours!

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

  1. bahut acchee jaanakaaree| dhanyavaad|

    ReplyDelete
  2. bahut acchee jaanakaaree hai| dhanyavaad|

    ReplyDelete
  3. आज भी हमारे लिए तो नए ही विजेट्स हैं ,जिनकी आपने जानकारी दी.इस जानकारी के लिए धन्यवाद.



    मोहब्बत नामा
    मास्टर्स टेक टिप्स

    ReplyDelete
  4. बहन निर्मला कपिला जी,भाई आमिर जी पोस्ट पर राय के लिए आप का दिल से धन्यवाद.

    ReplyDelete
  5. जानकारी के लिए धन्यवाद.

    ReplyDelete
  6. सुन्दर जानकारी,आभार.

    ReplyDelete
  7. रंजना सहगल जी,सनिल सक्सेना जी,पोस्ट पर राय के लिए आभार.

    ReplyDelete
  8. विजेट्स के लिए धन्यवाद.

    ReplyDelete
  9. शानदार विजेट्स,एंव पोस्ट मनोज जी,आपके अच्छे स्वास्थ्य की ईश्वर से प्राथना करता हूँ.

    ReplyDelete
  10. बहुत काम की जानकारी शुक्रिया मनोज जी.

    ReplyDelete
  11. लाजबाव विजेट थैंक्स.

    ReplyDelete
  12. काम की जानकारी शुक्रिया मनोज जी.

    ReplyDelete
  13. बहुत बढ़िया सर जी

    ReplyDelete
  14. शानदार बिजेट थैंक्स मनोज जी

    ReplyDelete
  15. ज्ञानवर्धक जानकारी एंव बिजेट आपका आभार सर.

    ReplyDelete
  16. मनोज जी धन्यवाद.

    दिलदार- दुनियाँ

    ReplyDelete
  17. शानदार बिजेट थैंक्स मनोज जी

    ReplyDelete

Widget by:Manojjaiswal
Related Posts Plugin for WordPress, Blogger...
Online Marketing
Praca poznań w Zarabiaj.pl
 

Blog Directories

क्लिक >>

About The Author

Manoj jaiswal

Man

Behind

This Blog

Manoj jaiswal

is a 56 years old Blogger.He loves to write about Blogging Tips, Designing & Blogger Tutorials,Templates and SEO.

Read More.

ब्लॉगर द्वारा संचालित|Template Style by manojjaiswalpbt | Design by Manoj jaiswal | तकनीक © . All Rights Reserved |