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

Παρασκευή, Οκτωβρίου 30

0

Πως να βαλλετε στο blog σας πτυσσόμενο Slashdot Menu

Σε αυτό το tutorial θα δούμε πως να δημιουργήσουμε ένα όμορφο και κομψό πτυσσόμενο Slashdot sidebar  μενού .



1 )   Πρώτα απ’όλα θα κατεβάστε   sdmenu.zip , αμέσως μετά κάνετε Extract  στο rar και ανοίξτε το   αρχείο  .


  Μέσα στο φάκελο θα βρείτε κάποια  GIF εικονίδια , sdmenu.js  και sdmenu.css  αρχεια .

  Ανεβάστε όλα τα GIF εικονίδια  και το  sdmenu.js  στο δικό σας  Free file hosting and file sharing site

  Αμέσως μετά , ανοίγετε το  sdmenu.css  :


div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
   Ψάχνετε μέσα στο css script  τις εξής γραμμές :  bottom.gif  ,  title.gif  ,  toptitle.gif  , expanded.gif  ,  collapsed.gif  και  linkarrow.gif  και αντικαταστήστε τις με τα URL των αντιστοίχων εικονιδίων σας .

Αποθηκεύετε το css script και το ανεβάζετε κ’ αυτό στο δικό σας  Free file hosting and file sharing site


2)  Τώρα πηγαίνουμε  Διάταξη >> Επεξεργασία HTML >> Επέκταση προτύπων γραφικών στοιχείων  και ψάχνουμε στο  πρότυπο μας το  <head>  και κολλάμε ακριβώς κατω από το  <head>  τον παρακάτω κώδικα :


<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
    <script type="text/javascript" src="sdmenu/sdmenu.js">
        /***********************************************
        * Slashdot Menu script- By DimX         * Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
        * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code         ***********************************************/     </script>
    <script type="text/javascript">
    // <![CDATA[
    var myMenu;
    window.onload = function() {
        myMenu = new SDMenu("my_menu");
        myMenu.init();
    };
    // ]]>
    </script>


  Αλλάζετε τα sdmenu.css   και  sdmenu.js  με τα URL των αντιστοίχων αρχείων  σας και αποθηκεύετε το πρότυπο .



3 )  Ενεργοποιήστε το Slashdot sidebar  Menu :

  Πηγαίνουμε  Διάταξη >>  Στοιχεία Σελίδας >>  Προσθήκη gadget >> HTML/JavaScript  και εισάγουμε τον παρακάτω κώδικα :



<div class="sdmenu" id="my_menu">
<div>
Webmaster tools
<a href="http://bloggertrics.blogspot.com/2009/10/static-image-widget-code-generator.html">Static Image Widget Code Generator</a>
<a href="http://bloggertrics.blogspot.com/2009/10/google-pagerank-button-blog.html"> Google Pagerank Button Generator</a>
<a href="http://bloggertrics.blogspot.com/2009/10/broken-link-checker-tool.html">Broken Link Checker tool</a>
<a href="http://bloggertrics.blogspot.com/2009/09/backlink-checker.html">Backlink Checker</a>
<a href="http://bloggertrics.blogspot.com/2009/09/free-search-engine-ranker.html">FREE Search Engine Ranker!</a>
<a href="http://bloggertrics.blogspot.com/2009/09/free-site-submission.html">FREE Site Submission!</a>
</div>
<div>
Blogger Tips
<a href="http://bloggertrics.blogspot.com/2009/08/blog.html">Πώς να Ρυθμίσετε Blog σας?!!</a>
<a href="http://bloggertrics.blogspot.com/">Link to Us</a>
<a href="http://bloggertrics.blogspot.com/2009/08/template-blogger-blogspot.html">Πως να αλλάξετε το template σας στο Blogger </a>
</div>
<div class="collapsed">
blogger hacks
<a href="http://bloggertrics.blogspot.com/2009/10/css-hover-menu.html">δημιουργήστε μόνο με τη χρήση CSS,ένα όμορφο Hover Menu</a>
<a href="http://bloggertrics.blogspot.com/2009/10/blog-balloon-tooltip.html">Πως να βάλετε στο blog σας ένα όμορφο Balloon tooltip</a>
<a href="http://bloggertrics.blogspot.com/2009/10/lcd-blog-javascript_02.html"> LCD ρολόι για το blog σας χρησιμοποιώντας JavaScript</a>
<a href="http://bloggertrics.blogspot.com/2009/09/scroll-to-top-jquery.html">Προσθέστε " scroll to top " κουμπί χρησιμοποιώντας Jquery</a>
</div>
<div>
Blogger Widgets
<a href="http://bloggertrics.blogspot.com/2009/10/static-image-widget-code-generator.html">Static Image Widget Code Generator Για blogger</a>
<a href="http://bloggertrics.blogspot.com/2009/09/fixed-floating-twitter-follow-me-button.html">Fixed-Floating Twitter Follow Me Button </a>
<a href="http://bloggertrics.blogspot.com/2009/08/top-posts-widget.html">Top Posts Widget</a>
<a href="http://bloggertrics.blogspot.com/2009/08/back-links-e-referrer.html">Αυτόματα back links με το e-Referrer</a>
</div>
</div>
 Αλλάζετε τα links με τα δικά σας ,κάντε αποθήκευση και ανανεώστε την σελίδα σας για να δείτε το αποτέλεσμα . Καλή επιτυχία σε όλους !!!


Δείτε το Slashdot Menu σε λειτουργία εδώ :

0:

 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS