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

Πέμπτη, 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> μπορούμε να κάνουμε πάρα πολλές ρυθμίσεις.
ΠΕΡΙΣΣΟΤΕΡΑ

Σάββατο, 1 Ιουνίου 2013

CSS, ΚΑΘΕΤΟ Hover Menu

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

        <style type="text/css">

#global-nav {
    width: 181px;
    float: left;
    background: #A3FF0F;
}

#global-subnav {
    width: 181px;
    background: #EDEDED;
}

#global-nav a {
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    height: 15px;
    line-height: 15px;  
    text-indent: 6px;              
    text-decoration:none;
    font-weight: bold;
    width: 100%;
}

#global-nav ul{
    background: #009F00;
    padding: 0;
    margin: 0;
}

#global-subnav ul{
    background: #249111;
    position: relative;
    top: -10px;
    left: 30px;
}

#global-nav li{
    list-style: none;  
    border-bottom: #31FF1E solid;
    border-width: 3px;
}

#global-nav ul ul li{
    display:none;
}

#global-nav li:hover {
    background: #00248C;
}

#global-nav li:hover ul li{
    display:block;
}

</style>

<div id="global-nav">
    <ul>
        <li><a href="#One">ΑΘΗΝΑ</a>
            <div id="global-subnav">
                <ul>
                    <li><a href="#A">A</a></li>
                    <li><a href="#B">B</a></li>
                    <li><a href="#C">C</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#Two">ΘΕΣΣΑΛΟΝΙΚΗ</a>
            <div id="global-subnav">
                    <ul>
                        <li><a href="#1">ενα</a></li>
                        <li><a href="#2">δυο</a></li>
                        <li><a href="#3">τρια</a></li>
                        <li><a href="#4">τεσσερα</a></li>
                        <li><a href="#5">πεντε</a></li>
                        <li><a href="#6">εξι</a></li>
                    </ul>
            </div>
        </li>
    </ul>
</div>


Το πρώτο τμήμα του, <style>, ρυθμίζουμε τα χρώματα του και τις διαστάσεις του
Το δεύτερο είναι το Κυρίως  μενού μας.
ΠΕΡΙΣΣΟΤΕΡΑ