Ads 468x60px

Featured Posts

Ενσωμάτωση Υπoτίτλων.. Δύτης αποθανατίζει θανάσιμο.. Ένα ταξίδι σε τόπους που δεν... All Player... Δείτε την ip address..

Δευτέρα, 20 Μαρτίου 2017

Sitemap Widget for blogger blogs

Φίλες και φίλοι γεια σας, σε αυτήν την ανάρτηση θα δούμε ένα 

πολύ ωραίο και χρήσιμο Sitemap widget 

το οποίο μας δείχνει μαζεμένες σε μία σελίδα όλες τις αναρτήσεις 

του blog μας χωρισμένες ανά κατηγορία 

όπως τις έχουμε στις ετικέτες μας!





Δείτε εδώ:




               DEMO1        DEMO2




Η εγκατάσταση του είναι πάρα πολύ απλή



Πηγαίνετε blogger-->

Μενού-->Σελίδες-->

Νέα σελίδα-->Κενή Σελίδα,

προσθήκη κειμένου..,

και στην σελίδα που θα ανοίξει κλικάρετε το HTML part δίπλα από το

Σύνθεση και επικολλήστε μέσα τον παρακάτω κώδικα!


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

<script src="https://od.lk/s/MTBfMzUxMDIxNThf/sitemap.js" type='
text/javascript'></script>
<script src="ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΟΥ ΜΠΛΟΓΚ ΣΑΣfeeds/posts/default?max-results=
9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size:
 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule:
 none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule:
 none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-
column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-
inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 
1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid
 #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-
transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition
:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1;
 -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; 
-webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; 
column-gap: 0px; column-rule: none; } }
</style>

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

ΑΛΛΑΓΕΣ

1ον: ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΟΥ ΜΠΛΟΓΚ ΣΑΣ  Εδώ βάζετε την διεύθυνση του blog σας!

2ον: Πηγαίνετε δεξιά στις επιλογές και στα Σχόλια αναγνωστών βάζετε το να
μην επιτρέπεται και πατάτε Τέλος!


Είστε έτοιμοι πατάτε Αποθήκευση και Δημοσίευση!

 
Καλή επιτυχία!!



Πηγή http://www.blogtipsntricks.com


Edit by 

Πέμπτη, 16 Μαρτίου 2017

Admin Says

Φίλες και φίλοι γεια σας, 


Λόγω της αλλαγής πολιτικής του DropBox για τους publics folders των λογαριασμών,


υπάρχει το ανεπιθύμητο αποτέλεσμα κάποια εικονίδια και urls(links) διαφόρων scripts,


να μην λειτουργούν πλέον!Όποιος αντιμετωπίζει πρόβλημα μπορεί να ειδοποιήσει μέσω

των τρόπων επικοινωνίας του Tech Time που υπάρχουν στην ιστοσελίδα, η μέσω των λογαριασμών κοινωνικών δικτύων

(socials) που διαθέτει η σελίδα για να λυθεί το πρόβλημα!


Ευχαριστώ!




















  Edit by

social media subscription box widget for blogger

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση 
θα δούμε ένα
social media subscription box widget   
για τα blog μας!
Απλή εγκατάσταση
και αρκετά ελαφρύ, έτσι ώστε να μην καθυστερεί 
καθόλου το άνοιγμα της
σελίδας μας! 







 
Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

και στο παράθυρο που θα ανοίξει επικολλήστε  


τον ακόλουθο κώδικα--
..............................................................................................................................................................



<a href="YOUR RSS FEED URL" title="Subscribe to Feed" target="_blank"><img src="http://2.bp.blogspot.com/-d882osBkmFo/UiRu0CNEh7I/AAAAAAAABb8/rV_m3dsqdOk/s1600/rss2.png "/><strong></strong> </a>
<a href="YOUR FACEBOOK URL" title="Like on Facebook" target="_blank"><img src="http://4.bp.blogspot.com/-FIqiNaK6vgM/UiRuxqulFYI/AAAAAAAABbk/nj5SQFGVkeg/s1600/facebook2.png"/><strong></strong> </a>
<a href="YOUR TWITTER URL" title="Follow on Twitter" target="_blank"><img src="http://4.bp.blogspot.com/-84w7lpmhk80/UiRu0iuls4I/AAAAAAAABcE/EO-OHjOfOIM/s1600/twitter2.png "/><strong></strong> </a>
<a href="YOUR GOOGLE PLUS PROFILE" title="Add to Circle" target="_blank"><img src="http://3.bp.blogspot.com/-K6Cjo5VGimU/UiRuyGvfRTI/AAAAAAAABbs/an9aEqiURXo/s1600/google-plus2.png "/><strong></strong> </a>
<a href="YOUR LINKEDIN URL" title="Follow on LinkedIn" target="_blank"><img src="http://4.bp.blogspot.com/-j4vsYSupbZo/UiRuzLUfBnI/AAAAAAAABb0/46bsRZM7G1M/s1600/linkedin2.png "/><strong></strong> </a>
<a href="http://www.slideshare.net/YOURNAME" title="Follow on Slideshare" target="_blank"><strong></strong> </a> 
..................................................................................................................................................................
ΑΛΛΑΓΕΣ
Αντικαταστήστε όλα τα urls με τις αντίστοιχες δικές σας διευθύνσεις που έχετε
στα social networks και πατήστε Αποθήκευση!Αυτό ήταν!



Καλή επιτυχία!!!


Πηγή κώδικα 
thanks to avdhootblogger.com



 Edit by

Τετάρτη, 15 Μαρτίου 2017

Tooltip navigation menu bar

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο και 
πρωτότυπο navigation bar widget!Μπαίνει οριζόντια στην σελίδα μας, είναι ελαφρύ
δεν καθυστερεί το άνοιγμα της, και διαθέτει  hover tooltip effect όταν 
κάνουμε mouseover με τον κέρσορα μας!






Η εγκατάσταση είναι απλή και

για να το εγκαταστήσετε και εσείς:
 
Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

και στο παράθυρο που θα ανοίξει  


επικολλήστε τον ακόλουθο κώδικα--
..............................................................................................................................................................

<style type="text/css">
nav {
  margin : 50px auto;
  width  : 100%;
}
menu {
  border-radius : 3px;
}
menu:after , menu:before {
  display : block;
  content : ' ';
}
menu:after {
  clear : both;
}
li {
  list-style-type : none;
  background      : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);
  float   : left;
  cursor  : pointer;
  padding : 3px 10px;
  border-top    : 2px solid rgba(200,200,255,0.5);
  border-bottom : 2px solid rgba(50,50,50,0.4);
}
li:first-child {
  border-radius : 5px 0 0 5px;
}
li:last-child {
  border-radius : 0 5px 5px 0;
}
a {
  display : block;
  padding : 10px 13px;
  font-size : 26px;
  text-decoration : none;
  border-radius   : 5px;
  position        : relative;
  top   : 0;
  color : #FFF;           
  transition : all .4s;
}
li:hover a {
  top   : -20px;
  color : #4eacff;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}
li a:after {
  display  : block;
  content  : '';
  position : absolute;
  top  : 100%;
  left : 42%;
  border-style : solid;
  border-color : transparent;
  border-width : 5px 5px 0 5px;
  transition   : all .4s;
}
li:hover a:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}
/*************************************/
.menu2 {
  width : 100%;
}
.menu2 a {
  font-family : georgia;
  font-size   : 14px;
  font-style  : italic;
  text-transform : capitalize;
}
.menu2 li {
  border-right  : 1px solid rgba(200,200,255,0.5);
  border-left   : 1px solid rgba(40,40,40,0.2);
}
.selected {
  top   : -20px;
  color : #4eacff;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}
.selected:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}
</style>

<nav>
<menu>
<li><a href="#">☀</a></li>
<li><a href="#">✈</a></li>
<li><a href="#">❄</a></li>
<li><a href="#">☎</a></li>
</menu>
</nav>
<nav class="menu2">
  <menu>
    <li><a href="#">ΤΙΤΛΟΣ</a></li>
    <li><a href="#">ΤΙΤΛΟΣ</a></li>
    <li><a href="#">ΤΙΤΛΟΣ</a></li>
    <li><a href="#">ΤΙΤΛΟΣ</a></li>
    <li><a href="#">ΤΙΤΛΟΣ</a></li>
  </menu>
</nav>

....................................................................................................................................................
ΑΛΛΑΓΕΣ 

Αντικαταστήστε όλα τα #  με τις δικές σας διευθύνσεις urls!

TΙΤΛΟΣ: Εδώ βάζετε τον τίτλο σας!


✈            Αντικαταστήστε τα εικονίδια με

❄             δικά σας, η εναλλακτικά αν δεν θέλετε
☎            εικονίδια βάλτε τίτλους!

 Μόλις τελειώσετε Αποθήκευση και έτοιμοι!


Καλή επιτυχία!!! 


Πηγή κώδικα
thanks to avdhootblogger.com



 Edit by

Τρίτη, 14 Μαρτίου 2017

Blockquotes

Φίλες και φίλοι γεια σας, όλοι η σχεδόν όλοι ξέρετε τι σημαίνει το blockquote
μέσω του οποίου μπορούμε να τονίσουμε και να αναδείξουμε διάφορα μέρη
και σημεία μίας ανάρτησης!Οι τρόποι που μπορούμε να το
κάνουμε αυτό είναι πολλοί όπως: Μέσα σε παρένθεση, κείμενο με εικόνα,
παράγραφο μέσα σε text box και άλλοι πολλοί!


Σε αυτή την ανάρτηση θα δούμε μερικές παραλλαγές του blockquote που
μας επιτρέπουν να κάνουμε ότι είπαμε στον πρόλογο της ανάρτησης!

Οι κώδικες έχουν παραμετροποιηθεί έτσι ώστε να χρειάζεται να τους εγκαταστήσουμε
απλά μέσα στο Html section της ανάρτησης!



Κάτω από κάθε κώδικα υπάρχει το ανάλογο demo για να δείτε
την πλήρη ανάπτυξη τους!



ΚΩΔΙΚΑΣ ΠΡΩΤΟΣ...

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

  <style>
.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FC8E42;
border-radius: 240px 240px 240px 240px;
color: #333333;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}
</style>


<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
............................................................................................................................ 



ΚΩΔΙΚΑΣ ΔΕΥΤΕΡΟΣ...
 ...........................................................................................................
<style>
.post blockquote {
background: linear-gradient(#B8DB29, #5A8F00) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font: 1.6em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #B5D928;
border-style: solid;
border-width: 50px 0px 0px 20px;
top: -50px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}
</style> 


<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 


 
ΚΩΔΙΚΑΣ ΤΡΙΤΟΣ....
.......................................................................................................................
 <style>
.post blockquote {
padding:10px 15px;
margin: 5px 15px;
border: 1px solid #E1E1E1;
background-color: #F6F6F6;
font-size: 15px;
font-family: Times;
}
.post blockquote:before {
content: "\201C";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}
</style>

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 




ΚΩΔΙΚΑΣ ΤΕΤΑΡΤΟΣ....
.......................................................................................................................

  <style>
.post blockquote {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 2px 10px 5px 60px;
line-height:1.7em;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(http://3.bp.blogspot.com/-gNZ5r7KaLIE/T33PEnGXSJI/AAAAAAAABoo/cDcreY3-mPc/s1600/notepad1.gif) repeat-y top left;
border : 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
</style>

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 


 ΕΓΚΑΤΑΣΤΑΣΗ:

Απλά γράφετε το κείμενο σας  στο-- ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ --
και πηγαίνεται στο Html Section της ανάλογης ανάρτησης και κάνετε επικόλληση
τον κώδικα!

                     
Καλή επιτυχία!!! 

Πηγή κώδικα


 Edit by

Πέμπτη, 9 Μαρτίου 2017

VideoGrabby - Κατέβασε Βίντεο και Mp3 από το Youtube

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε μία online υπηρεσία
το VideoGrabby, το οποίο σου επιτρέπει να κατεβάσεις απευθείας και εντελώς
δωρεάν υλικό από το Youtube!

Μπορείτε να κατεβάσετε όλο το video η μόνο τον ήχο του κομματιού σε Mp3!

Η διαδικασία είναι πολύ απλή:

1ον:Πηγαίνετε στο Youtube και αντιγράφετε την διεύθυνση (URL) του κομματιού
που θέλετε πάνω από την μπάρα εργασίας του Browser σας, και κατόπιν

πηγαίνετε στην ιστοσελίδα:



και κάνετε επικόλληση το Link 









2ον:όπως βλέπετε στην πάνω εικόνα μετά την επικόλληση(paste) απλά διαλέγεται σε
τι τύπο αρχείου θα κατεβάσετε(download) το κομμάτι!

Αυτό ήταν!!

Υγ:Στην ιστοσελίδα όπως θα δείτε αναφέρει ότι το πρόγραμμα λειτουργεί και με άλλες
υπηρεσίες όπως, Soundcloud , Vimeo, και πολλά άλλα!Μέχρι στιγμής δοκιμάστηκε στο 
Youtube χωρίς κανένα πρόβλημα!

 Homepage


Καλή επιτυχία!!!



 Edit by

Τετάρτη, 8 Μαρτίου 2017

Reverse image search: Δείτε αν έχουν χρησιμοποιηθεί αλλού οι εικόνες σας

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε έναν απλό τρόπο
με τον οποίο μπορούμε να ελέγξουμε αν οι φωτογραφίες μας που έχουμε
δημοσιεύσει κάποια στιγμή, έχουν χρησιμοποιηθεί από άλλους στο internet!


Η μία ευρέως γνωστή λύση που υιοθετούν όλο και περισσότερα sites & blogs 
έχει να κάνει με την προσθήκη υδατογραφήματος (watermark) στις 
φωτογραφίες, πχ το λογότυπο η banner του blog μας, η κάποιο  
άλλο συνθηματικό!

Σε παλαιότερες φωτογραφίες που δεν έχει χρησιμοποιηθεί αυτή η λύση, η απλά
θέλουμε να δούμε αν έχουν χρησιμοποιηθεί και αλλού οι εικόνες μας,
τότε τι κάνουμε...?


Εδώ έρχεται η ιστοσελίδα  http://tineye.com/     μέσω της οποίας
μπορούμε να κάνουμε upload την εικόνα μας η να βάλουμε στο ανάλογο
πεδίο την διεύθυνση της(url) και αυτομάτως η ιστοσελίδα σκανάρει μέσα
από μια μεγάλη γκάμα εκατομμυρίων εικόνων(Μπορεί βέβαια στα Databases
που θα γίνει το scan να υπάρχει η πιθανότητα να μην είναι η εικόνα μας, το
αναφέρω απλά σαν ένα μικρό περιθώριο λάθους, αν και το σκανάρισμα 
είναι αρκετά μεγάλο σε εύρος ) την διεύθυνση της εικόνας μας:






Κάνουμε upload την εικόνα μας αριστερά η αντιγράφουμε την διεύθυνση της δεξιά
και πατάμε Search









Όπως βλέπετε στην πάνω εικόνα μετά το σκανάρισμα, σας δείχνει το αποτέλεσμα του!
Αν δεν έχει χρησιμοποιηθεί η εικόνα θα δείτε το αντίστοιχο αποτέλεσμα το 0 Results
δηλαδή, αλλιώς στο αντίθετο αποτέλεσμα θα δείτε πόσες φορές και που έχει
χρησιμοποιηθεί η ανάλογη φωτογραφία!



 http://tineye.com/


 Καλή επιτυχία!!! 


Homepage









Edit by

Τρίτη, 7 Μαρτίου 2017

Animated action navigation menu bar

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα οριζόντιο χρωματιστό
menu bar για τα blog μας!Χωρίς υποκατηγορίες, απλό menu, το οποίο διαθέτει ένα
πολύ ωραίο animated effect με εικόνα, όταν κάνουμε mouseover με τον κέρσορα
του ποντικιού μας!









Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 
   

και στο παράθυρο που θα ανοίξει κάντε 

επικόλληση τον ακόλουθο κώδικα:--
..............................................................................................................................................................
<style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#avd-nav li a span.myname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;}
border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>
<div id="avd-nav">
<li> <a href="#"><span class="myname">ΟΝΟΜΑΣΙΑ</span> <img src="http://3.bp.blogspot.com/-eY98QSRdCEA/Un4KOycntuI/AAAAAAAACxw/pdvCOdPD7cY/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">
ΟΝΟΜΑΣΙΑ</span> <img src="http://3.bp.blogspot.com/-eY98QSRdCEA/Un4KOycntuI/AAAAAAAACxw/pdvCOdPD7cY/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">
ΟΝΟΜΑΣΙΑ</span> <img src="http://3.bp.blogspot.com/-eY98QSRdCEA/Un4KOycntuI/AAAAAAAACxw/pdvCOdPD7cY/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">
ΟΝΟΜΑΣΙΑ</span> <img src="http://3.bp.blogspot.com/-eY98QSRdCEA/Un4KOycntuI/AAAAAAAACxw/pdvCOdPD7cY/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div> 

 ................................................................................................................................................................
ΑΛΛΑΓΕΣ

#-->Εδώ βάζετε τα urls των δικών σας διευθύνσεων!

ΟΝΟΜΑΣΙΑ-->Εδώ  μπαίνει το όνομα της ετικέτας σας!

http://3.bp.blogspot.com/-eY98QSRdCEA/Un4KOycntuI/AAAAAAAACxw/pdvCOdPD7cY/s1600/Arrows-Up-circular-icon.png--> Όποιος θέλει αλλάζει και την εικόνα με μία δικιά του!

Μόλις τελειώσετε Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!! 



Πηγή κώδικα 
thanks to avdhootblogger.com





Edit by

Δευτέρα, 6 Μαρτίου 2017

3D flying book navigation menu bar

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα οριζόντιο
menu για τα blog μας!Είναι αρκετά μεγάλο σε κατηγορίες, διαθέτει ένα 
πολύ ωραίο 3d flying effect και είναι ιδανικό για blogs που διαθέτουν
πολλές κατηγορίες θεμάτων!






 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

και στο παράθυρο που θα ανοίξει κάντε 


επικόλληση τον ακόλουθο κώδικα:-->

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

<style type="text/css">
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Αρχική</b></a></li>
<li><a class="top-a" href="#url"><b>Blogger</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">Γενικές ειδήσεις</a></li>
<li><a href="#url">blogger design</a></li>
<li><a href="#url">blogger tips</a></li>
<li><a href="#url">blogger seo</a></li>
<li><a href="#url">Ποδόσφαιρο</a></li>
</ul>
<ul class="col">
<li><a href="#url">Related post</a></li>
<li><a href="#url">Popular post</a></li>
<li><a href="#url">Recent Post</a></li>
<li><a href="#url">Chat widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">navigation menu</a></li>
<li><a href="#url">Side menu</a></li>
<li><a href="#url">Επικοινώνια</a></li>
<li><a href="#url">Vertical menu</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Αθλητικά</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Header</a></li>
<li><a href="#url">Footer</a></li>
<li><a href="#url">Post</a></li>
<li><a href="#url">Links</a></li>
<li><a href="#url">Menu</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Mobile </a></li>
<li><a href="#url">Mobile traffic</a></li>
<li><a href="#url">Mobile seo</a></li>
<li><a href="#url">small screen</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email ID</a></li>
<li><a href="#url">Mobile No.</a></li>
<li><a href="#url">Contact Form</a></li>
<li><a href="#url">My email</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Πιλότος</b></a></li>
<li><a class="top-a" href="#url"><b>Benefits</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Κίνηση</a></li>
<li><a href="#url">Permanent Links</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">High page rank</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">Εσωτερικά</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Καιρός</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->
............................................................................................................................................................
 ΑΛΛΑΓΕΣ

#url-->  Αντικαταστήστε όλα τα #url με τα urls (links) των δικών

σας διευθύνσεων!   


 Αρχική-->  Εδώ βάζετε τις δικές σας ονομασίες που

θέλετε να φαίνονται στις ετικέτες του menu!

Mόλις τελειώσετε από όλα Αποθήκευση και έτοιμοι! 


Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to avdhootblogger.com



 Edit by
Icon Icon Icon

spice up your blog