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 με τα δικά σας ,κάντε αποθήκευση και ανανεώστε την σελίδα σας για να δείτε το αποτέλεσμα .
Καλή επιτυχία σε όλους !!!<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>
Δείτε το Slashdot Menu σε λειτουργία εδώ :
0:
