• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

ΠΩΣ ΒΑΖΩ SCROLL TOP & SCROLL BOTTOM BUTTONS

BACK TO TOP
ΠΩΣ ΒΑΖΩ SCROLL TOP & SCROLL BOTTOM BUTTONS
Με τους παρακάτω κώδικες μπορείτε να βάλετε 2 κουμπιά scroll top & scroll bottom στο blog σας και πάτώντας τα να μεταφέρεστε αυτόματα στην κορυφή ή στο τέλος του ιστολογίου σας χωρίς να χρειάζετε να κάνετε scrolling με το ροδάκι του mouse σας. Είναι 2 διαφορετικοί κώδικες βάλτε όποιον σας αρέσει και δουλεύει καλύτερα στο blog σας. Την πρώτη γραμμή που περιέχει το javascript query αρχείο μπορείτε να την παραλέιψετε εάν υπάρχει ήδη στο ιστολόγιό σας από κάποιον άλλο κώδικα. Τα χρώματα των κουμπιών αλλάζουν εκεί του υπάρχει το σύμβολο της δίεσης #. Τις εικόνες των κουμπιών κατεβάστε τες και να ανεβάστε τες σε λεύκωμα του google+.


1ος ΚΏΔΙΚΑΣ
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
#toplink, #botlink {
          position: fixed;
          right: 1%;
          bottom: 50%;
          padding: 10px;
          margin: 0 -20px 0 0;
          color: #FFFFFF;
          font: 14px Arial;
          background: #105105;
          border: 1px solid #FBBB22;
          border-bottom: 1px solid #FBBB22;
          border-radius: 6px 3px 0 0;
          z-index: 99;}
#botlink {
          top: 50%;
          padding: 10px;
          background: #661111;
          bottom: auto;
          border: 1px solid #FBBB22;
          border-top: 1px solid #FBBB22;
          border-radius: 0 0 3px 6px;}
#toplink:hover {
          color: #FFFFFF;
          background: #207907;
          text-decoration: none;}
#botlink:hover {
          color: #FFFFFF;
          background: #FF1111;
          text-decoration: none;}
</style>
<script>
$.fn.ready(function() {
$("a[href=#top]").live("click", function(e) {
$("html,body").animate({scrollTop:0}, 1000);
e.preventDefault();});
$("a[href=#bot]").live("click", function(e) {
$("html,body").animate({scrollTop:$(document).height()}, 1000);
e.preventDefault();});});
</script>
<a href="#top" id="toplink" title="Go to top"></a>
<a href="#bot" id="botlink" title="Go to bottom"></a>';


2ος ΚΏΔΙΚΑΣ
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<a href='#' style='display:scroll;position:fixed;bottom:53%;right:5px;' title='Back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhkSYRH4TEItaE6TKKPrV1rwWNGNLW2U0mWKdgcBL4TaDKHmZMPfbf8HayNODhrXysuZAD3T5HcvPZddNKbqxJ0VrRHwIUXw4qI8ZW1LBOgi53RyshLtEZ7bU74WgG_hZIc0ReQ5J3koJ/s50-no/top-button.jpg'  width="30" height="30"/></a> <br /> <br/> <br />

<a href='#Go Down' style='display:scroll;position:fixed;bottom:50%;right:5px;' title='Go Down'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4escXlDL_oJq9RiadSr1kFonS0XqU5LSAU-sf-5C3J5gwPUAXU8XByooAyMu-ylPK7oCkN8GmcHgcpSDjrjeAjDvzAXCVASkJ11_HAAIKoFQXSGF0w5WfFOL-4HRoXkWABw0GKNCC7irc/s50-no/bottom-button.jpg'  width="30" height="30"/></a><br /> <a name='Go Down'></a>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.