ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Σάββατο, 1 Φεβρουαρίου 2014

ΠΩΣ Ο Mozilla Firafox ΠΑΙΖΕΙ wmplayer

 Χρησιμοποιώντας το plugin Windows Media Player με τον Firefox

   Κατεβάζουμε από εδώ :  https://msopentechsitestorage.blob.core.windows.net/downloads/wmpfirefoxplugin.exe
  Μετά την λήψη, εκτελεστέ το, και η πρόσθετη λειτουργία θα εγκατασταθεί. Όταν η εγκατάσταση ολοκληρωθεί, κλείστε κι ανοίξτε ξανά τον Firefox:
  Πηγαίνοντας  Εργαλεία >Πρόσθετα> Πρόσθετες λειτουργίες αντικρίζουμε την παρακάτω εικόνα όπου υπάρχει η επέκταση: Microsoft® Windows Media Player Firefox Plugin  np-mswmp.dll.

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


   Αναζητήστε το : plugins.load_appdir_plugins
   Κάντε διπλό κλικ: plugins.load_appdir_plugins να αλλάξετε την τιμή του στην  true  "αλήθεια" όπως στην κάτω φωτογραφία. Κλείστε κι ανοίξτε ξανά τον Firefox.  Και ο wmplayer είναι ποια γεγονός...

ΠΕΡΙΣΣΟΤΕΡΑ

Σάββατο, 23 Νοεμβρίου 2013

Ο ΣΚΕΛΕΤΟΣ ΜΙΑΣ HTML5 ΣΕΛΙΔΑΣ


 <html> Ορίζουμε τον κώδικα. Στο <head>  ορίζουμε το τίτλο της ιστοσελίδας. Στην συνέχεια πάμε στο ορατό μέρος της  στο <body>,   ορίζουμε μια Επικεφαλιδα και αμέσως την μπάρα με το μενού <nav> .  <article>  γράφουμε το κείμενο μας.  <aside> τα social media  για την προώθηση της.  και τέλος το φούτερ <footer>  μια ανασκόπηση και λίγα λόγιαα για τον δημιουργό.
Ετσι περιλεπτικα εχουμε:
 
<html>
<head>
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
 
 
Πιο αναλυτικά βλέπουμε πιο κάτω
 
 
<!DOCTYPE HTML>
------------------------------------------------------------------------------------------------------------
<html>
<head>
  <title>............</title>
</head>

---------------------------------------------------------------------------------------------------------------
<body>
<header>
 <h1>Η HTML5 ΣΕΛΙΔΑ ΜΟΥ</h1>
 <h2>Ο σκελετος μιας HTML5 Ιστοσελιδας</h2>
</header>

------------------------------------------------------------------------------------------------------------------
<nav>
 <ul>
  <li><a href="#">Αρχική</a></li>
  <li><a href="#">Σχετικά</a></li>
  <li><a href="#">Άρθρα</a></li>
  <li><a href="#">Επικοινωνία</a></li>
 </ul>
</nav>

--------------------------------------------------------------------------------------------------------------------
<article>
 <p> Μπλα-μπλα Μπλα  Μπλα  Μπλα  Μπλα  Μπλα  Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα
 Μπλα Μπλα Μπλα Μπλα Μπλα.</p>
 <section>
 <p>Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα
 Μπλα Μπλα Μπλα Μπλα .</p>
 </section>
</article>

---------------------------------------------------------------------------------------------------------------------------
<aside>
 <section>
  <h2>Ακολουθηστε με</h2>
   <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Youtube</a></li>
   </ul>
 </section>
 <section>
 <h2>Τελευταία νέα</h2>
 ...
 </section>
</aside>

---------------------------------------------------------------------------------------------------------------------------------
<footer>
 <section id="about">Σχετικά με εμένα......</section>
 <section id="latest_comments">Τελευταία Σχόλια......</section>
 <section id="blogroll">Blogroll...</section>
</footer>

-----------------------------------------------------------------------------------------------------------------------------
</body>
</html>
ΠΕΡΙΣΣΟΤΕΡΑ

Πέμπτη, 13 Ιουνίου 2013

CSS 3D ΚΟΥΜΠΙ ΜΕ ΠΑΡΑΠΟΜΠΗ

Μπορούμε να τα προσθέσουμε σαν gadget στο μπλοκ μας από τον μπλόκερ.



1.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>CSS3 Punch Button</title>
 <meta name="description" content="CSS Punch Button">
 <style>

 /* punch
*******************************************************************************/
button.punch {
 background: #4162a8;
 border-top: 1px solid #38538c;
 border-right: 1px solid #1f2d4d;
 border-bottom: 1px solid #151e33;
 border-left: 1px solid #1f2d4d;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 color: #fff;
 font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
 line-height: 1;
 margin-bottom: 10px;
 padding: 10px 0 12px 0;
 text-align: center;
 text-shadow: 0px -1px 1px #1e2d4d;
 width: 150px;
 -webkit-background-clip: padding-box; }

button.punch:hover {
 -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 cursor: pointer; }

button.punch:active {
 -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 margin-top: 8px; }
 </style>
</head>

<body>
 <div>
 <button class="punch">punch</button>
 </div>

</body>
</html>



Μπορούμε να ρυθμίσουμε πολλούς παραμέτρους και να τα φέρουμε στα μέτρα μας



2.

<html lang="en">
 <style>
 /****************************************************
 *  Push Button
 *****************************************************/
.push_button{
 position:relative;
 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:5px;
 border:solid 1px #D94E3B;
 background:#cb3b27;
 text-align:center;
 padding:20px 30px;
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 -webkit-box-shadow: 0px 9px 0px #84261a;
        -moz-box-shadow: 0px 9px 0px #84261a;
        box-shadow: 0px 9px 0px #84261a;
}

.push_button:active{
    -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
    box-shadow: 0px 2px 0px #84261a;
    position:relative;
    top:7px;
}

</style>

</html>

<body>
<a href=" " class="push_button">
 Push Me
</a>
</body>


ΠΕΡΙΣΣΟΤΕΡΑ

Πέμπτη, 6 Ιουνίου 2013

CSS ΚΟΥΜΠΙΑ ΓΙΑ ΣΑΙΤ

 Τρεις κώδικες για κουμπιά, τα οποία τοποθετώ  στο μπλοκ μου με τον κλασικό τρόπο σαν gadget δίνω ποιο κάτω:

  1.
  <a class="thenumberone" data-page="2" data-sessionlink="ei=CNeu0JvY_rICFciRfAod9HFRjg%3D%3D" href="το link που θες να ανοίγει" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; background-color: #C9E1FF; background-image: -webkit-linear-gradient(top, rgb(250, 250, 250) 0px, rgb(220, 220, 220) 100%); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(170, 170, 170); border-style: solid; border-top-left-radius: 2px; border-top-right-radius: 2px; border-width: 1px; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: #000000; cursor: pointer; display: inline-block; font-family: aria, sans-serif; font-size: 15px; font-weight: bold; height: 2.78em; line-height: 2.8em; margin: 0px; outline: 0px; padding: 0px 0.91em; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; vertical-align: middle; white-space: nowrap; word-wrap: normal;"><span class="thenumberone" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px;">ΟΝΟΜΑ</span></a>





2.
<a href="το link που θες να ανοίγει" style="background-color: white; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 13px; outline: none; text-align: -webkit-center;" target="_blank"><button class="submit btn primary-btn" style="-webkit-box-shadow: rgba(255, 255, 255, 0.0980392) 0px 5px 0px inset; background-color: #019ad2; background-image: -webkit-linear-gradient(top, rgb(51, 188, 239), rgb(1, 154, 210)); background-repeat: repeat no-repeat; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(5, 126, 208); box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px inset; color: white; cursor: pointer; font-weight: bold; line-height: 20px; margin: 0px; overflow: visible; padding: 5px 10px; position: relative; text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 1px;" tabindex="4" type="submit">ΟΝΟΜΑ</button></a>


 3.

 <div class="row-fluid text-center"
style="padding-bottom:2px; padding-top:2px;background-color:#0007fb">
<div class="btn-group" data-toggle="buttons-radio">
<button href="
link" id="wmp" type="button" class="btn">ΟΝΟΜΑ</button>
<button href="
link 2" id="flash" type="button" class="btn active">ΟΝΟΜΑ 2</button>
</div>  
</div>


Μπλε  ειναι οι ονομασιες
Κοκκινο  ειναι  οι διευθυνσεις
Ροζ  ειναι  τα χρωματα του φοντου
ΠΕΡΙΣΣΟΤΕΡΑ

ΑΝΟΙΓΜΑ ΑΝΑΡΤΙΣΕΩΣ ΣΕ ΝΕΑ ΚΑΡΤΕΛΑ

Πως γίνεται να ανοίγουν τα links των αναρτήσεων μας σε νέα καρτέλα.

1) Σύνδεση στον blogger
2) Σχεδίαση
3) Επεξεργασία HTML
4) Με την βοήθεια του CTRL + F ψάξτε το
 </body>
 5)Μόλις το βρείτε ακριβώς από πάνω του προσθέστε το παρακάτω κώδικα:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery('a').each(function() {
    // Let's make external links open in a new window.
    var href = jQuery(this).attr('href');
 
    if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {
        jQuery(this).attr("target", "_blank");
    }
});
//]]>
</script>




                                                                                     www.bloggertricks.gr
ΠΕΡΙΣΣΟΤΕΡΑ

Τετάρτη, 5 Ιουνίου 2013

CSS3 ΟΡΙΖΟΝΤΙΟ Drop Down Menu



Ο παρακάτω κώδικας αποτελεί ένα απλό οριζόντιο Drop Down  μενού,που ανοίγει με την τοποθέτηση του κήνσορα πάνω του.Τον τοποθετούμε απλά σαν  Gadget στο μπλοκ μας με τον κλασικό τρόπο.
  Τον συγκεκριμένο μπαίνει στην κορυφή της ταμπλέτας μας.
  Πάμε σύνδεση στο blogger>Σχεδίαση >διάταξη>προσθήκη Gadget>HTML/JavaScript και επικολλούμε τον παρακάτω κώδικα.

<div>
<style>
/*-- CSS3 Drop Down Menu -----*/                                     

#bt-menu, #bt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bt-menu {
width: 450px;
margin: 60px auto;
background: #DADFE1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bt-menu:before,
#bt-menu:after {
content: "";
display: table;
}
#bt-menu:after {
clear: both;
}
#bt-menu {
zoom:1;
}
#bt-menu li {
float: left;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bt-menu a {
float: left;
padding: 12px 30px;
color: #000000;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#bt-menu li:hover > a {
background: #333333;
color: #fafafa;
}
*html #bt-menu li a:hover { /* IE6 only */
color: #333333;
}
#bt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
z-index: 9999;
background: #DADFE1 url('images/pageglare.png') no-repeat scroll;
 -moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#bt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#bt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bt-menu ul a:hover {
background-color: #333333;
}
#bt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333333;
}
#bt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #333333;
}
#bt-menu ul li:first-child a:hover:after {
border-bottom-color: #DADFE1;
}
#bt-menu ul ul li:first-child a:hover:after {
border-right-color: #DADFE1;
border-bottom-color: transparent;
}
#bt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="bt-menu">
<li><a href="#">ΑΡΧΙ</a></li>

<li> <a href="#">ΒΒΒΒ</a>
<ul>
<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>
</ul>
</li>

<li><a href="#">ΓΓΓ</a>
<ul>
<li><a href="#">---------</a></li>
<li><a href="#">--------</a></li>
</ul>
</li>
</ul>

<div>

Στο τμήμα <style> μπορούμε να κάνουμε πάρα πολλές ρυθμίσεις.
ΠΕΡΙΣΣΟΤΕΡΑ