Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Παρασκευή, Σεπτεμβρίου 25

0

Προσθέστε " scroll to top " κουμπί χρησιμοποιώντας Jquery


Γεια,οι περισσότεροι από σας ξέρουν για το " scroll to top " ,το οποίο είναι πολύ χρήσιμο για αυτούς που έχουν ένα blog , με πολλές αναρτήσεις σε μια σελίδα η πολλά comments .Ίσως χρησιμοποιείτε ήδη "scroll to top" κουμπί ,αλλά αυτό φαίνεται πολύ κοινότυπο. Έτσι, αυτό το κουμπί θα δώσει διαφορετικό στυλ από τα παλαιά κουμπιά, με " smooth" effect.Θα το συμπαθήσετε!
ΟΚ Τώρα ας δούμε πως μπορούμε να το βάλουμε στο blog μας:

1.Πάμε "Επεξεργασία HTML" , κάνουμε κλικ στο κουτί "Επέκταση προτύπων γραφικών στοιχείων" και ψάχνουμε να βρούμε το κωδικό </body> και κολλάμε το παρακάτω  κωδικό πριν απ,αυτό

<a href="#" id="toTop">^ Scroll to Top</a>

Σημείωση : Το " ^ Scroll to Top " μπορείτε να το αντικαταστήσετε με όποια λέξη θέλετε π.χ. " Top " η κάτι άλλο

2. Τώρα προσθέστε το CSS code πριν απο το ]]></b:skin>
 
/* to top */ #toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }


Σημείωση : Αν δεν σας αρέσει το background που εμφανίζετε μπορείτε να το αντικαταστήσετε με οποία εικόνα σας αρέσει,απλά αντί για το κωδικό που σας έδωσα πιο πάνω χρησιμοποιήστε αυτό το κωδικό :

/* Jquery scroll to top */
#toTop {
width:40px; height:40px;
background: #FFF url(http://i651.photobucket.com/albums.........png) no-repeat;
padding:3px;
text-align:center;
position:fixed;
bottom:10px;
right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
}
Αλλάξτε το http://i651.photobucket.com/albums.........png με το url της εικόνας σας και προσαρμόστε width και height στα μέτρα που θέλετε

3. Τελευταιο βημα , βαζουμε Jquery codes πριν απο το </body>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript">
/*----------------------- * jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* Bring to you by Zen from http://zenplate.blogspot.com
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* Do not delete these infomation
* Version: 1.0, 12/03/2009 -----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); $(function() { $("#toTop").scrollToTop(); }); </script>

Τώρα αποθηκεύουμε το πρότυπο και βλέπουμε το αποτέλεσμα

Κωδικός by Craig Wilson of Ph.Creative Convert to Blogger: Zenplate

0:

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS