Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




0 Πως 1 ΑΝΑΡΤΗΣΗ ΠΕΡΙΕΧΕΙ 3 ΑΝΑΡΤΗΣΕΙΣ

Φίλοι bloggers, σήμερα θα δείτε 3 παλιές αναρτήσεις, μέσα σε μια ανάρτηση...Πως γίνεται; Θα σας το αποκαλύψω σε λίγες ημέρες, στο V.I.P. Blog
ΑΠΟ ΚΑΤΩ ΚΡΥΒΟΝΤΑΙ 3 ΔΙΑΦΟΡΕΤΙΚΕΣ ΑΝΑΡΤΗΣΕΙΣ
ΠΑΤΗΣΤΕ ΕΝΑ-ΕΝΑ ΤΑ ΚΟΥΜΠΙΑ ΑΠΟ ΚΑΤΩ
  1. Χριστ/τικη Ρουλέτα
  2. Κινούμενα Λινκ
  3. "Back to top"
Νέοι bloggers γεια σας !!! Χριστούγεννα-Πρωτοχρονιά έρχονται, και όλοι θα παίξουμε λίγο τζόγο...γιατί να μη παίξουμε στο δικό μας blog ;Γι αυτό σας δίνω σήμερα έναν κώδικα, για να βάλετε μια ρουλέτα-(πιο πολύ τροχό της τύχης θα έλεγα) σαν gadget-javascript σε κάποια σελίδα σας....
DEMO ΕΔΩ
Ο ΚΩΔΙΚΑΣ: (Bάλτε τον σαν gadget-javascript)

<div class="demo-app"><div class="da da-center" style="width:600px;">
<!--[if IE]><script type="text/javascript" src="/sites/default/files/1010/source/excanvas.js"></script><![endif]-->
<input type="button" value="spin" onclick="spin();" style="float: left;">
<canvas id="wheelcanvas" width="500" height="500"></canvas>
<script type="application/javascript">
  var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
               "#2E2C75", "#673A7E", "#CC0071", "#F80120",
               "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
  var restaraunts = ["10 EURO", "20 EURO", "50 EURO", "100 EURO",
                     "200 EURO", "300 EURO", "500 EURO", "1.000 EURO",
                     "2.000 EURO", "5.000 EURO", "10.000 EURO", "20.000 EURO"];

  var startAngle = 0;
  var arc = Math.PI / 6;
  var spinTimeout = null;

  var spinArcStart = 10;
  var spinTime = 0;
  var spinTimeTotal = 0;

  var ctx;

  function draw() {
    drawRouletteWheel();
  }

  function drawRouletteWheel() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      var outsideRadius = 200;
      var textRadius = 160;
      var insideRadius = 125;
   
      ctx = canvas.getContext("2d");
      ctx.clearRect(0,0,500,500);
   
   
      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;
   
      ctx.font = 'bold 12px sans-serif';
   
      for(var i = 0; i < 12; i++) {
        var angle = startAngle + i * arc;
        ctx.fillStyle = colors[i];
     
        ctx.beginPath();
        ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
        ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
        ctx.stroke();
        ctx.fill();
     
        ctx.save();
        ctx.shadowOffsetX = -1;
        ctx.shadowOffsetY = -1;
        ctx.shadowBlur    = 0;
        ctx.shadowColor   = "rgb(220,220,220)";
        ctx.fillStyle = "black";
        ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
        ctx.rotate(angle + arc / 2 + Math.PI / 2);
        var text = restaraunts[i];
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        ctx.restore();
      }
   
      //Arrow
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
      ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.fill();
    }
  }

  function spin() {
    spinAngleStart = Math.random() * 10 + 10;
    spinTime = 0;
    spinTimeTotal = Math.random() * 3 + 4 * 1000;
    rotateWheel();
  }

  function rotateWheel() {
    spinTime += 30;
    if(spinTime >= spinTimeTotal) {
      stopRotateWheel();
      return;
    }
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
    startAngle += (spinAngle * Math.PI / 180);
    drawRouletteWheel();
    spinTimeout = setTimeout('rotateWheel()', 30);
  }

  function stopRotateWheel() {
    clearTimeout(spinTimeout);
    var degrees = startAngle * 180 / Math.PI + 90;
    var arcd = arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    ctx.save();
    ctx.font = 'bold 30px sans-serif';
    var text = restaraunts[index]
    ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
    ctx.restore();
  }

  function easeOut(t, b, c, d) {
    var ts = (t/=d)*t;
    var tc = ts*t;
    return b+c*(tc + -3*ts + 3*t);
  }

  draw();
</script></div></div>

DEMO ΕΔΩ
***Αλλάζουν τα χρώματα και τα νούμερα...
***Δεν νομίζω ότι θα λειτουργήσει με internet explorer...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ και ΚΑΛΑ ΚΕΡΔΗ !!!
Πηγή : thanks to switchonthecode.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Νέοι bloggers γεια σας !!!Υπάρχει τρόπος να κάνουμε τα links και τις εικόνες στο blog μας να κινούνται όταν περνάμε από πάνω τους το ποντίκι μας...Σήμερα θα σας δώσω τον κώδικα για να κάνετε τα links στο ιστολόγιο σας να κινούνται όταν περνάτε το ποντίκι σας από πάνω τους !!!Δείτε την εικόνα, και το παράδειγμα εδώ....
Demo link No 1
Demo link No 2

Βρείτε τη φράση  </head>  (με ctrl F) όπως δείχνει στην εικόνα:

και ΠΑΝΩ από αυτή, βάλτε τον κώδικα:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    $(document).ready(function() {
        $('a.linknudge').hover(function() {
            $(this).animate({
                paddingLeft: '25px'
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>
Πατήστε SAVE / ΑΠΟΘΗΚΕΥΣΗ.....
Τώρα όποτε βάζετε ένα link, θα προσθέτετε τη φράση  class='linknudge' για να λειτουργήσει η κίνηση...(αν δεν τη βάλετε δεν θα κινείται)...δηλαδή, ......παράδειγμα:
<a class='linknudge' href='http://www.blogger.com/'>Dr-Blogger</a>

***η κόκκινη φράση είναι που θα κινεί το link
***τη μπλε φράση, αλλάξτε τη με το δικό σας link.....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!(ότι απορία σας, στείλτε τη με email η σχόλιο!!!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Νέοι bloggers γεια σας...Παλαιότερα είχα ανεβάσει την ανάρτηση 
BACK TO TOP & GO DOWN BUTTONS ΓΙΑ BLOG με 2 βελάκια και απλό κώδικα HTML....Σήμερα σας γράφω τον κώδικα για " back to top" βελάκι, αλλά ανεβαίνει προς την κορυφή της σελίδας, πιο αργά και μαλακά....είναι script και βέβαια μπαίνει σαν gadget....DEMO....(Για να φανεί, ρολάρετε τη σελίδα σας προς τα κάτω)...



O KΩΔΙΚΑΣ :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/*********************************************** 
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* Modified by www.MyBloggerTricks.com 
* This notice MUST stay intact for legal use 
* Visit Project Page at http://www.dynamicdrive.com for full source code 
***********************************************/
var scrolltotop={ 
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="IMAGE LINK" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner 
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport) //if control is positioned using JavaScript 
            this.$control.css({opacity:0}) //hide control immediately after clicking it 
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 
            dest=jQuery('#'+dest).offset().top 
        else 
            dest=0 
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
    },
    keepfixed:function(){ 
        var $window=jQuery(window) 
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
        this.$control.css({left:controlx+'px', top:controly+'px'}) 
    },
    togglecontrol:function(){ 
        var scrolltop=jQuery(window).scrollTop() 
        if (!this.cssfixedsupport) 
            this.keepfixed() 
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
        if (this.state.shouldvisible && !this.state.isvisible){ 
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
            this.state.isvisible=true 
        } 
        else if (this.state.shouldvisible==false && this.state.isvisible){ 
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
            this.state.isvisible=false 
        } 
    }, 
    
    init:function(){ 
        jQuery(document).ready(function($){ 
            var mainobj=scrolltotop 
            var iebrws=document.all 
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
                .attr({title:'Scroll Back to Top'}) 
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body') 
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>

___________________________________________________
****όπου   IMAGE LINK  θα βάλετε τη διεύθυνση url της εικόνας (το βελάκι)...
****για να βρείτε βελάκια, ψάξτε στο google με τις φράσεις "arrow up png"  "arrow up gif"
****βάλτε το χαμηλά...
*** σας δίνω ενδεικτικά και μερικές εικόνες μήπως χρειαστείτε βοήθεια....

http://t1.gstatic.com/images?q=tbn:ANd9GcQlg8XIyvjykaS9wOM5y7lszXVo6gzzK82iKFnVS-8VtkIodFwGMt2wOw
http://th821.photobucket.com/albums/zz135/zish_album/th_up_arrow.png
http://t3.gstatic.com/images?q=tbn:ANd9GcQ7Ild9vn8xog7fIJDVyC2cKZgjcuAt0YcFKodjh6t37rNNg999

http://t2.gstatic.com/images?q=tbn:ANd9GcSK_foW58UZpJgJKZbcoTx3bqgmmyhP7w_DWZon8tt1iGUHP-S_ 

http://www2.tepper.cmu.edu/gifs/arrow.big.up.gif 

http://th245.photobucket.com/albums/gg61/vaultxdrinck/th_Arrow.gif


http://www.rci.rutgers.edu/Images/arrows/cy-up.gif
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!
Πηγή : www.mybloggertricks.com/

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF