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

Τρίτη, Μαΐου 18

6

Aλλο ένα στιλάτο featured content slider στο Blogger με την χρήση jQuery UI


Αυτό το script επιτρέπει  να επιδείξετε τα πιο δημοφιλή η πιο ενδιαφέροντα άρθρα και αναρτήσεις από το  blog σας .
FeaturedContentSliderjQueryΜπορείτε επίσης να αναδείξετε και κάποιες παλιές αναρτήσεις που δύσκολα τα βρίσκει ο επισκέπτης του blog σας
Το Featured contents συνήθως θα πρέπει να εμφανίζετε στην αρχική σελίδα του blog ,  διευκολύνοντας έτσι τους επισκέπτες  να βρούνε στην στιγμή τις πιο “hot αναρτήσεις ” από το blog σας. 
Επίσης , είναι κομψό και λειτουργικό .

Click  εδώ για demo


Τα βήματα που πρέπει να ακολουθηθούν είναι τα εξής  :


1. Κάνετε Login στο Blogger  Πίνακας Ελέγχου –> Σχεδίαση -> Επεξεργασία HTML

2. Εισάγετε τον παρακάτω κώδικα  στο Html του πρότυπου σας  ακριβώς πάνω από την ετικέτα : ]]></b:skin> 

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:400px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}

#featured .ui-tabs-panel{
    width:400px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url(' http://3.bp.blogspot.com/_L116RpGjEMY/S-3MJC5jdTI/AAAAAAAABuc/_-Lmjmgqelo/s1600/tabs-selected.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}

#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px; 
    background: url('http://1.bp.blogspot.com/_L116RpGjEMY/S-3LQB_CsKI/AAAAAAAABuY/KipWcEpC2Zg/s1600/panel+.info.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}

3. Τώρα ,εισάγουμε τον παρακάτω κώδικα ακριβώς  πάνω από την ετικέτα : </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});
</script>

4. Τώρα  πηγαίνετε  Στοιχεία Σελίδας  και δείτε κάτω από την επικεφαλίδα αν υπάρχει στοιχειό  Προσθήκη gadget , πατήστε το και  επιλέξτε  HTML/JavaScript , εισάγετε τον παρακάτω κώδικα στο κουτί και αποθηκεύετε


1


<div id="featured">
          <ul class="ui-tabs-nav">
            <li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><img alt="" src=" http://lh5.ggpht.com/_L116RpGjEMY/S89usJ-JIHI/AAAAAAAABkE/zwaCuelG7dw/image1-small.jpg "/><span>15+ Excellent High Speed</span></a></li>
            <li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2"><img alt="" src=" http://lh4.ggpht.com/_L116RpGjEMY/S89usWJvQeI/AAAAAAAABkM/nP98Bd62-y4/image2-small.jpg "/><span>20 Beautiful Long Exposure</span></a></li>
            <li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3"><img alt="" src=" http://lh5.ggpht.com/_L116RpGjEMY/S89wpzv-z_I/AAAAAAAABks/CuHLZemhd4s/image3-small.jpg "/><span>35 Amazing Logo Designs</span></a></li>
            <li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4"><img alt="" src="http://lh5.ggpht.com/_L116RpGjEMY/S89wqfhE9UI/AAAAAAAABk0/QVO8IYt9w2g/image4-small.jpg"/><span>Create a Vintage</span></a></li>
          </ul>
        <!-- First Content -->
        <div id="fragment-1" style="" class="ui-tabs-panel">
            <img alt="" src=" http://lh3.ggpht.com/_L116RpGjEMY/S89ur2bAB-I/AAAAAAAABkA/N22X9P1yf2Q/image1.jpg"/>
             <div class="info">
                <h2><a href="#">15+ Excellent High Speed</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">read more</a></p>
             </div>
        </div>
        <!-- Second Content -->         <div id="fragment-2" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src=" http://lh6.ggpht.com/_L116RpGjEMY/S89usCo-PLI/AAAAAAAABkI/vPQYRcUNn9c/image2.jpg "/>
             <div class="info">
                <h2><a href="#">20 Beautiful Long Exposure</a></h2>
                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">read more</a></p>
             </div>
        </div>
        <!-- Third Content -->
        <div id="fragment-3" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src=" http://lh3.ggpht.com/_L116RpGjEMY/S89wpo3di-I/AAAAAAAABko/UkEshdWie9M/image3.jpg"/>
             <div class="info">
                <h2><a href="#">35 Amazing Logo Designs</a></h2>
                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">read more</a></p>
             </div>
        </div>
        <!-- Fourth Content -->
        <div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src="http://lh5.ggpht.com/_L116RpGjEMY/S89wqDR9mJI/AAAAAAAABkw/fDRv5XJH9TM/image4.jpg"/>
             <div class="info">
                <h2><a href="#">Create a Vintage</a></h2>
                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">read more</a></p>
             </div></div></div>

Αλλάζετε τα links και τις εικόνες με τα δικά σας και αποθηκεύετε


Σημείωση :  Αν δεν βρείτε κάτω από την επικεφαλίδα το στοιχειό  Προσθήκη gadget , τότε εισάγετε τον κώδικα μέσα στο  Html πρότυπο σας  .

Θα βρείτε στο πρότυπο σας την ετικέτα  <div id='main-wrapper'> και κολλάτε τον παραπάνω κώδικα ακριβώς από πάνω

Καλή επιτυχία σε όλους :) 

6:

post2.soo είπε...

Αααααααααα και αυτό πολύ ωραίο! Όσο και αν θέλω να ξεφύγω από το τριπάκι "σχεδιαστικό κομμάτι" , εσύ δεν λες να με αφήσεις >:o :*
Θα το δοκιμάσω και αυτό χιχι

Savsidir είπε...

Πολύ καλό αλλά δεν αλλάζει τις εικόνες στη μεγάλη φωτογραφία πιθανόν κάτι κάνω λάθος. μήπως πρέπει να αλλάξω κάτι όπως το και αν ναι τι;

bloggertrics είπε...

@ Savsidir 

Καλησπέρα σου 

Στοο συγκεκριμένο featured content χρειαζετε να εισαγουμε 2 μεγεθους εικονες , μικρες και πιο μεγαλες .
Όπου το small.jpg θέλει μικρές εικόνες και  όπου το image.jpg θέλει μεγάλες εικόνες 
Γι 'αυτό το λόγο δεν  σου φορτώνει τις  μεγάλες εικόνες . 

bloggertrics είπε...

Όχι όχι όχι !!!! Δεν θα σε αφήσω να ησυχάσεις ποτεεεε !!!!  χι χι χι :-P :-P :-P :-P

Φιλιάαα τρελοκομείο !!!! 

post2.soo είπε...

Είσαι κακιά >:o :-[ :'( :-P :*

bloggertrics είπε...

πολύ !!!!! >:o >:o >:o >:o >:o ;)

 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS