Σύγχρονη Κορδέλα Hover Effect Bar Μενού Για Blogger

Κάντε κλικ στο κουμπί EDIT HTM L . Τώρα κάντε κλικ στο κουμπί Προχωρήστε . Βρείτε αυτήν την ετικέτα με τη χρήση του Ctrl + F  ]]> </ b: skin>   .Επικολλήστε παρακάτω κώδικα Πριν ]]> </ b: skin> tag
View Demo- http://demo.bloggertrix.com/2013/02/blog-post.html


........................................../* The CSS Code for the menu starts here bloggertrix.com */ .ribbon span { background:#A81B6A; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span { background:#FFD204; margin-top:0; } .ribbon span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .ribbon span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .ribbon a:link, .ribbon a:visited { color:#000; text-decoration:none; float:left; height:3.5em; overflow:hidden; } .ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border: 1.5em solid #A81B6A; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; }
Μετάβαση στο blogger και κάντε κλικ στην επιλογή Διάταξη 
Κάντε κλικ στο κουμπί Προσθήκη gadget και επιλέξτε "HTML / Javascript 
 Επικολλήστε παρακάτω κώδικα.
------------------------------<div class='ribbon'> <a href='#'><span>Home</span></a> <a href='#'><span>Download</span></a> <a href='#'><span>Css3</span></a> <a href='#'><span>HTML</span></a> <a href='#'><span>MySQL</span></a> <a href='#'><span>Services</span></a> <a href='http://www.bloggertrix.com/'><span>Contact</span></a></div>

Αντικαταστήστε το # με τις συνδέσεις σας. 10. αποθηκεύσετε τώρα σας HTML / Javascript ".     Τελειώσατε 
http://www.bloggertrix.com/2013/02/modern-ribbon-hover-effect-menu-bar-for.html

Follow baner color

• Subscribe to the RSS Feed
• Follow me on Twitter
• Find me on Facebook
• Join me on Google+
• Connect with me on LinkedIn

Subscribe to the RSS Feed

Follow me on Twitter

Find me on Facebook

Join me on Google+

Connect with me on LinkedIn

Βάλτε εικόνα και χρωμα σε κάθε widget στο sidebar της Σελίδας σας

• Σύνδεση στον Blogger
• Σχεδίαση / Επεξεργασία HTML
• Βρείτε το παρακάτω κομμάτι κώδικα:

Επικολλήστε τον παρακάτω κώδικα πριν από το 

.main .Blog {

border-bottom-width: 0;

}

.sidebar .widget h2 { background: yellow url('URL OF YOUR IMAGE') no-repeat left top; margin-top:5px; text-indent: 20px; padding:7px; }

Αντικαταστήστε το URL OF YOUR IMAGE με τη δική σας εικόνα

• Αποθήκευση προτύπου και είστε έτοιμοι.

http://www.bloggertipsandtricks.net/2011/09/widget-sidebar.html

Πώς να προσθέσετε μια εικόνα κεφαλίδας για Blogger Dynamic Views

Εδώ είναι ένα άλλο τακτοποιημένο τέχνασμα για όσους από εσάς χρησιμοποιείτε Δυναμική πρότυπο του Blogger Απόψεις. Είναι ένα φροντιστήριο από blogger Mayura De Silva που δείχνει πώς μπορείτε να προσθέσετε μια εικόνα για σαςκεφαλίδα. Ένα πράγμα που πρέπει να θυμάστε πριν προχωρήσετε με αυτό το τέχνασμα είναι ότι η εικόνα σας δεν πρέπει να υπερβαίνει το 65 εικονοστοιχεία σε ύψος? διαφορετικά κεφαλίδα σας θα φανεί ακατάστατο.
Αλλά, αν η εικόνα σας πληροί ήδη τα κριτήρια μεγέθους, εδώ είναι τα βήματα :

Πηγαίνετε στο Template στο ταμπλό του αυτοκινήτου σας.
Κάντε κλικ στο Προσαρμογή > Φόντο > Εικόνα φόντου .
Κάντε κλικ στο κουμπί Μεταφόρτωση εικόνας > Επιλογή αρχείου.
Αναζήτηση μέσω του καταλόγου του υπολογιστή σας για να βρείτε το αρχείο εικόνας και επιλέξτε το.
Πατήστε Open > Τέλος .
Η εικόνα μπορεί να μοιάζει βρώμικο και από θέση μετά από αυτό. Αν ναι, κάντε τα εξής:
Ρυθμίστε το πλακάκι .
Επιλέξτε Μην κεραμίδι εικόνα αν σας ταιριάζει το πλάτος του blog σας, ή
Επιλέξτε Πλακάκι οριζοντίως αν είναι μικρότερο από το πλάτος.
Ρυθμίστε την ευθυγράμμιση (επάνω αριστερά, επάνω Κέντρο, πάνω δεξιά, κάτω αριστερά, κλπ.).
Μόλις νομίζετε ότι όλα φαίνονται, προκειμένου στη συνέχεια, είστε ουσιαστικά γίνει.Συγχαρητήρια, αυτό είναι όλο!
EXTRA: Αν θελήσετε ποτέ να αφαιρέσετε το blog τίτλος στη γραμμή κεφαλίδας, κάντε τα εξής:
Επιστροφή στο Πρότυπο ενότητα, κάντε κλικ στο Επεξεργασία HTML .

Ψάξτε για ]]> </ b: skin> μέσα στο πρότυπό σας κώδικα, χρησιμοποιώντας το Ctrl + F .
Αντιγραφή / επικόλληση του παρακάτω κώδικα ακριβώς πριν και πάνω από αυτό.
-------------------------------------------------

. Header-bar { 
display: none σημαντικό?! 
}  

---------------------------------allblogtools.com

Black fond

============================

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

111111111111111111111111111111111111111111111111111111111111111111111111

111111111111111111111 22222222222222222 33333333333333333333

Colors banner

................................................

111111	222222	3333333	4444444	555555
.................................................

Πλαίσιο κειμένου με χρωματισμένο φόντο

Γραψτε εδω το κειμενο

....................................<table align="center" bgcolor="#001E3B" border="1" cellpadding="0" cellspacing="0" style="color: #222222; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 12px; width: 596px;"><tbody> <tr><td bgcolor="#bbbdbf" height="728" style="font-family: arial, sans-serif; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 30px; padding-left: 15px; padding-right: 15px; padding-top: 30px;"><table align="center" border="0" cellpadding="0" cellspacing="0" height="650" style="width: 527px;"><tbody> <tr><td align="center" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;" valign="middle" width="156"><br /></td><td style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;" valign="top" width="253">Γραψτε εδω το κειμενο</td><td height="68" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;" valign="top"></td></tr> <tr></tr> </tbody></table> </td></tr> </tbody></table>

Banner σε σχήμα U

☞

	mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

BLACK BANNER

1234567890

..

1234567890

................................................................................................
Αλλάξτε τα νούμερα με το δικό σας κείμενο,το χρώμα του banner((initial; background-color: black;)) με άλλο,πχ-white,black,red,yellow,κλπ και αλλαγή χρώμα κειμένου εδώ((initial; color: white; font-family)),
Περισσοτερους κωδικούς χρωμάτων εδώ


Για αλλαγή θέσεις κειμένου (text-align: right;) με left η center αν δεν θέλετε το κείμενο να γράφετε από δεξιά όπως φαίνεται στα banner παραπάνω.

<div style="background-attachment: initial; background-clip: initial; background-color: black; background-image: initial; background-origin: initial; color: white; font-family: arial, verdana, sans-serif; font-size: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: right;"> 1234567890</div>

Αλλάξτε διαστάσεις στο Button-Banner

Πάρτε ένα κωδικό εδώ και μετά κάντε τις αλλαγές που θέλετε.

Αφού πήρατε τον κωδικό και έχετε επιλέξει το χρώμα που σας αρέσει αλλάξτε της διαστάσεις γκόνιας 1-2-3-4 και μήκους-5 με αυτό που σας ταιριάζει.
1-border-top-left-radius: 2px;
2-border-top-right-radius: 2px;
3-border-bottom-left-radius: 8px;
4-border-bottom-right-radius: 8px;
5-min-width: 300px;
Όσο αφορά το μήκος ((αν θέλετε να γράψετε μεγάλο τίτλο η κείμενο)) διαμορφώνεται αυτόματα,εάν θέλετε μεγάλο banner και μικρό κείμενο τότε ακολουθήστε τα παραπάνω αλλαγες.

καλή επιτυχία

Κουμπιά με διαφορα χρώματα

111111111 ..........................................................................
.demo ......................................................................................
. 11111111111...........................................................................
Το μονο που έχετε να κάνετε αν θέλετε αλλαγή χρώματος αλλάξτε το κωδικό με κόκκινο χρώμα ,με δικια σας επιλογή πχ: initial; background-clip: initial; background-color: #f7bb05; background-image:,name button θα αφαιρέστε τα νούμερα πχ;11111111 και βάλτε το δικό σας,



with link-----------------------------------------

<span style="background-attachment: initial; background-clip: initial; background-color: #f7bb05; background-image: initial; background-origin: initial; border-bottom-color: transparent !important; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid !important; border-bottom-width: 1px !important; border-image: initial !important; border-left-color: transparent !important; border-left-style: solid !important; border-left-width: 1px !important; border-right-color: transparent !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: transparent !important; border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: solid !important; border-top-width: 1px !important; color: #252525; display: inline-block; font-family: helvetica45, helvetica, serif; font-size: 14px; font-weight: bold; height: 28px; line-height: 28px; margin-bottom: 10px; margin-right: 43px; min-width: 119px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px; position: relative; text-align: center; text-decoration: none; vertical-align: top; width: auto; z-index: 1; zoom: 1;"><a href="http://demo-tubesalonika.blogspot.com/">demo</a></span>


no link---------------------------------------------
11111111111


<span style="background-attachment: initial; background-clip: initial; background-color: #f7bb05; background-image: initial; background-origin: initial; border-bottom-color: transparent !important; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid !important; border-bottom-width: 1px !important; border-image: initial !important; border-left-color: transparent !important; border-left-style: solid !important; border-left-width: 1px !important; border-right-color: transparent !important; border-right-style: solid !important; border-right-width: 1px !important; border-top-color: transparent !important; border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: solid !important; border-top-width: 1px !important; color: #252525; display: inline-block; font-family: helvetica45, helvetica, serif; font-size: 14px; font-weight: bold; height: 28px; line-height: 28px; margin-bottom: 10px; margin-right: 43px; min-width: 119px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; padding-top: 0px; position: relative; text-align: center; text-decoration: none; vertical-align: top; width: auto; z-index: 1; zoom: 1;">11111111111</span>
Αλλάξτε διαστάσεις εδώ

Banner color

123456789

123456789

123456789

123456789

123456789

......................................
Αν θέλετε να αποκτήσετε ένα τέτοιο banner,πρώτα θα προσθέσετε το κωδικό nr1 και άμεσος μετά το nr2 ακολουθώντας έτσι και της αλλαγές.
nr1
<table style="background-color: black; border-collapse: collapse; color: #333333; font-family: arial, sans-serif; font-size: 9px; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 980px;"><tbody style="border-bottom-style: none; border-color: initial; border-image: initial; border-left-style: none; border-right-style: none; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <tr style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
......................................
nr2
<td align="center" style="background-attachment: initial; background-clip: initial; background-color: #025da3; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: white; font-size: 16px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;">12345</td>
1-Αλλάξτε το συνολικό μήκος του banner με της διάστασης που θέλετε-width: 980px;αλλάζοντας τον αριθμό με χρώμα μπλε.(banner nr1).
2-Αλλάξτε το χρώμα κάθε προσθέσεις (banner nr2)-background-color: #025da3;μονο τα μπλε,με άλλο κωδικό,δείτε κωδικούς χρωμάτων εδώ

Widget αναζήτησης για το blog σας

Μπορείτε να εφαρμόσετε εύκολα αυτό το widget στο blog σας χρησιμοποιώντας το πρόγραμμα εγκατάστασης widget παρακάτω.

1. Πηγαίνετε στο Πρότυπο> Διάταξη στο Πανόπτη Blogger σας.
2. Δημιουργήστε ένα νέο HTML / Javascript στοιχείο στο sidebar σας.
3. Τοποθετήστε τον ακόλουθο κώδικα του widget:<p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text"/> <input id="search-btn" value="Search" type="submit"/> </form></p>
4. Δώστε widget σας έναν τίτλο, αν σας αρέσει (π.χ.: "Αναζήτηση σε αυτό το Blog"), και κάντε κλικ Αποθήκευση.bloggerbuster.com

Tubesalonika banner

Copy this code to

your website!

<a href="http://tubesalonika.blogspot.com/" target="_blank"><img src="http://i.imgur.com/1JWcd.jpg" alt='Create your own banner at mybannermaker.com!' border=0 /></a><br><a href="http://www.mybannermaker.com/">Make your own banner at MyBannerMaker.com!</a>

Google + για το site σας

Αποκτήστε περισσότερες συστάσεις για το site σας στα αποτελέσματα αναζήτησης Google και να αυξηθεί το ακροατήριό σας στο Google +.

Google + Πλατφόρμα

2012

WIBIYA WIDGET