Stylish Scrolling Sidebar Widget για τον Blogger

Τον τελευταίο καιρό βλέπω διάφορες Σελίδες με τόσο φορτωμένα sidebars που δε γίνεται με τίποτα , μα με τίποτα να φορτώσουν. Θα πρότεινα να ξανασκεφτούν τον τρόπο της παρουσίασης, γιατί στον επισκέπτη αρέσει πάντα το εύκολο. Αυτό που λέω αφορά διάφορα σχόλια για την Συγκεκριμένη ανάρτηση. Η άποψή μου είναι η Αρχική Σελίδα να αποτελείται από 3 εως 5 αναρτήσεις πάντα με "Read More" και το sidebar να είναι ανάλογα γεμάτο μέχρι εκεί που τελειώνουν οι αναρτήσεις. Δοκιμάστε το και θα δείτε ένα καλύτερο αποτέλεσμα.

Στο θέμα μας τώρα για να εγκαταστήσουμε το gadget.

• Σύνδεση στον Blogger
• Σχεδίαση / Επεξεργασία HTML
• Βρείτε την </body>
• Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

<script src='https://sites.google.com/site/everythingaboutblogging/Home/prototype.js' type='text/javascript'/>
<script src='https://sites.google.com/site/everythingaboutblogging/Home/effects.js' type='text/javascript'/>
<script src='https://sites.google.com/site/everythingaboutblogging/Home/side-bar.js' type='text/javascript'/>
<style>
body{
    font-size:75%;
}
a{
    outline: none;
}
a:active{
    outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
    color:#FFFFFF;
    font-size:110%;
    font-family:arial;
    margin:10px 10px 10px 10px;
    font-weight:bold !important;
}
#sideBar h2 span{
    font-size:125%;
    font-weight:normal !important;
}
#sideBar ul{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
#sideBar li{
    margin:0px 10px 3px 10px;
    padding:2px;
    list-style-type:none;
    display:block;
    background-color:#DA1074;
    width:177px;
    color:#FFFFFF;
}
#sideBar li a{
    width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
    color:#FFFFFF;
    font-family:verdana;
    font-size:100%;
    text-decoration:none;
    display:block;
    margin:0px 0px 0px 0px;
    padding:0px;
    width:100%;
}
#sideBar li a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}
#sideBar{
    position: fixed;
    width: auto;
    height: auto;
    top: 140px;
    left:0px;
    background-image:url(http://i36.tinypic.com/2wejg37.jpg);
    background-position:top right;
    background-repeat:repeat-y;
}
#sideBarTab{
    float:left;
    height:137px;
    width:28px;
}
#sideBarTab img{
    border:0px solid #FFFFFF;
}
#sideBarContents{
    float:left;
    overflow:hidden !important;
    width:200px;
    height:320px;
}
#sideBarContentsInner{
    width:200px;
}</style>
<div id='sideBar'>
        <div id='sideBarContents' style='display:none;'>
        <div id='sideBarContentsInner'>
            <h2><div style='text-align: justify;'><span style='font-family:verdana;'>Χρήσιμοι Σύνδεσμοι</span>
</div></h2>
                    <ul>
                <li><a href='#'>Σύνδεσμος 1</a></li>
                <li><a href='#'>Σύνδεσμος 2</a></li>
                <li><a href='#'>Σύνδεσμος 3</a></li>
                <li><a href='#'>Σύνδεσμος 4</a></li>
                <li><a href='#'>Σύνδεσμος 4</a></li>
                <li><a href='#'>Σύνδεσμος 4</a></li>
                  </ul>
                </div> </div>
    <a href='#' id='sideBarTab'><img alt='sideBar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEyYOXcaiHaiuvUwY3EgS6bKa9eG-lrp1af-fcf78n5t-YTsnwk5-xKdCvhEss99czYeCxAlAZZGdPJa_wK_vbUfCY3HWYm57Gno3iBhrqwBFfFb_qUIHT1d2alp12P7QeSAkal417or08/s1600/260g2g9.gif' title='sideBar'/></a>
</div>

• Αντικαταστήστε τα κόκκινα φόντα με τους συνδέσμους που θέλετε να χρησιμοποιήσετε και τα κόκκινα φόντα με τα αντίστοιχα ονόματα.
• Αποθήκευση προτύπου και είστε έτοιμοι.

Αυτό το gadget είναι χρήσιμο για κάποιους που θέλουν να ανταλλάξουν links με κάποιους , αλλά η αισθητική και ο χώρος που διαθέτουν δεν τους αφήνουν να το κάνουν.

Μπορείτε να προσθέσετε κι άλλες ετικέτες μέχρι να γεμίσει το πλαίσιο.

LIVE DEMO