Vertical Side Menu For Blogger

Καλημέρα σας bloggers, όλοι μας προσπαθούμε να κερδίσουμε χωρο στο blog μας και το συγκεκριμένο vretical slide menu for blogger  είναι ότι π...

fixed-position-side-menu-for-bloggerΚαλημέρα σας bloggers, όλοι μας προσπαθούμε να κερδίσουμε χωρο στο blog μας και το συγκεκριμένο vretical slide menu for blogger  είναι ότι πρέπει (μετάφραση) κάθετο μενού το όποιο εμφανίζεται πλάγια στο blog μας, το vretical menu for blogger  έχει και υποκατηγορίες το όποιο το κάνει ακόμα ποιο χρήσιμο από ότι είναι και από μόνο του, το συνιστώ σε όλους είναι πραγματικά παρά πολύ εντυπωσιακό για τους επισκέπτες.


Δεν ξέρω αν θυμάστε αλλά σε ποιο προηγούμενα μου άρθρα είχα δημοσίευση ένα βίντεο το όποιο αφορούσε για το πως να αυξήσουμε το κέρδος από το google adsense με τι βοήθεια του προγράμματος google adsense preview tools, όσοι λοιπόν έχετε στο blog σας διαφημιστικά της google adsense καλά θα κάνετε να δείτε το συγκεκριμένο βίντεο το όποιο θα το βρείτε:
Περισσοτερα λεφτα στο ιντερνετ- google adsense preview tools

Παμε τώρα βήμα προς βήμα να το προσθέσουμε στο blog μας:


menu vertical, blogger1) Πινάκας έλεγχου
2) Σχεδίαση
3) Σχεδιαστής προτύπων




lefta,internet4) Προηγμένη
5) Προσθήκη css
6) Βαλτέ των Κων κώδικα
7) εφαρμογή στο blog

Κωδικός:

/* CSS Style for Horizontal Menu - info @ http://www.spiceupyourblog.com*/
#hor {
list-style:none;
padding:0;
margin:0;
}
#hor li {
float:left;
padding:5px;
}
#hor a {
display:block;
height: 12px;
text-indent:-999em;
}
#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}
#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}
#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}
/* CSS Style for Vertical Menu */
#ver {
list-style:none;
padding:0;
margin:0;
}
#ver li {
padding:2px;
}
#ver li a {
display:block;
height:12px;
text-indent:-999em;
}
#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}
#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}
.clear {
clear:both;
}
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
/*End menu css - info @ http://www.spiceupyourblog.com */

Αμέσως μετά αντιγράφουμε των παρακάτω κώδικα:

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://www.spiceupyourblog.com">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="http://www.spiceupyourblog.com/p/about-spice-up-your-blog.html">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="http://www.spiceupyourblog.com/p/hire-us_08.html">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="http://www.spiceupyourblog.com/">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="http://www.spiceupyourblog.com/2009/09/contact-us.html">
<span>Contact us</span>
</a>
</li>
</ul>
</div><a href="http://www.spiceupyourblog.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

Μετά πάμε;

1) Πίνακάς έλεγχου
2) Σχεδίασή
3) Προσθήκη Gadget
4) Html/javascript
5) Επικόλλησή του κωδικά
6) Αποθήκευσή

Προσοχή:
1) Τα λινκ τα όποια είναι μαρκαρισμένα με το κόκκινο χρώμα να τα αντικαταστήσετε με τα δικά σας link
2) Της λέξεις με το μπλε χρώμα να της αντικαταστήσετε με δίκες σας λέξεις…

Και είστε έτοιμη.!! εάν σας άρεσε το άρθρο αφήστε σχόλιο.

Σχόλια

Όνομα

ΑΠΑΤΕΩΝΕΣ ΣΤΟ ΙΝΤΕΡΝΕΤ ΒΓΑΛΤΕ ΧΡΗΜΑΤΑ ΔΙΑΜΟΡΦΩΣΤΕ ΤΟ BLOG ΣΑΣ ΔΩΡΕΑΝ ΒΙΝΤΕΟ ΜΑΘΗΜΑΤΑ ΚΑΙ ΕΚΠΑΙΔΕΥΣΗ ΔΩΡΕΑΝ ΘΕΜΑΤΑ ΓΙΑ BLOGSPOT ΕΚΠΑΙΔΕΥΣΗ Ελλάδα Η ΥΠΗΡΕΣΙΕΣ ΜΟΥ Κοινωνία ΠΑΙΧΝΙΔΙΑ banner Blogger widget google html Lifestyle photoshop Proionta Project
false
ltr
item
LFY.GR: Vertical Side Menu For Blogger
Vertical Side Menu For Blogger
http://lh4.ggpht.com/-Gwbk2E4JhBQ/T18Xu7z92pI/AAAAAAAAA_4/DfZWDSWW3tk/fixed-position-side-menu-for-blogger_thumb%25255B10%25255D.png?imgmax=800
http://lh4.ggpht.com/-Gwbk2E4JhBQ/T18Xu7z92pI/AAAAAAAAA_4/DfZWDSWW3tk/s72-c/fixed-position-side-menu-for-blogger_thumb%25255B10%25255D.png?imgmax=800
LFY.GR
http://www.lfy.gr/2012/03/vertical-side-menu-for-blogger.html
http://www.lfy.gr/
http://www.lfy.gr/
http://www.lfy.gr/2012/03/vertical-side-menu-for-blogger.html
true
7742921601199696161
UTF-8
Δεν βρεθηκαν αρθρα Προβολή όλων Περισσότερα Απάντηση Ακυρωση απάντησεις Διαγραφη Απο Αρχικη Σελιδες Αρθρα Προβολή όλων Προτεινόμενα άρθρα Κατηγορια Αρχειο SEARCH Ολα τα αρθρα Δεν βρεθηκαν αρθρα Back Home Κυριακή Δευτέρα Τρίτη Τετάρτη Πέμπτη Παρασκευή Σάββατο Κυρ Δευ Τρί Τετ Πέμ Παρ Σάβ Ιανουάριος Φεβρουάριος Μάρτιος Απρίλιος Μάιος Ιούνιος Ιούλιος Αύγουστος Σεπτέμβριος Οκτώβριος Νοέμβριος Δεκέμβριος Ιαν Φεβ Μάρ Απρ Μάιος Ιού Ιού Αύγ Σεπ Οκτ Νοέ Δεκ Μολις τωρα Πριν από 1 λεπτό $$1$$ minutes ago Πριν από 1 ώρα $$1$$ hours ago Εχθές $$1$$ days ago $$1$$ weeks ago 5 εβδομαδες πριν Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy