CSS3 Tabs με Beveled Corners για Blogger

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
17/10/2012 από
adavalas

Στο ακόλουθο μικρό tutorial θα δούμε πως μπορούμε μέσα σε 11 απλά βήματα να προσθέσουμε ccs3 tabs με beveled corners για blogger όπως βλέπετε και στην φωτογραφία που ακολουθεί.

 

Συνδεθείτε στο  blogger account σας και δώστε Click drop down.

2. Τώρα επιλέξτε “Template”  όπως στην παρακάτω εικόνα .

3. Τώρα μπορείτε να δείτε Live on blog, Κάντε κλικ στο EDIT HTML Button

4. Τώρα κάντε κλικ στο  Proceed button  .

5. Βρείτε αυτό το tag χρησιμοποιώντας  Ctrl+F    ]]></b:skin>

6. Κάντε paste τον παρακάτω κώδικα πριν το tag  ]]></b:skin>

/* The CSS Code for the menu starts here */

#tabs
{
  overflow: auto;
  width:100%;
  list-style: none;

  margin: 0;
  padding: 0;
}
#tabs li
{
    margin: 0;
    padding: 0;
    float: left;
}
#tabs a
{
    -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background:    -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);     
    background:     -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:         linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
}
#tabs a:hover
{
    background: #c93434;
    background:    -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);     
    background:     -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:         linear-gradient(220deg, transparent 10px, #c93434 10px);     
}
#tabs a:focus
{
    outline: 0;
}
#tabs #current a
{
    background: #fff;
    background:    -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);     
    background:     -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:         linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;    
    color: #333;
}
#content
{
    border:1px solid #000000;
    background-color: #fff;
    width:200px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image:    -moz-linear-gradient(top, #fff, #ddd);
    background-image:     -ms-linear-gradient(top, #fff, #ddd);
    background-image:      -o-linear-gradient(top, #fff, #ddd);
    background-image:         linear-gradient(top, #fff, #ddd);
    -moz-border-radius: 0 2px 2px 2px;
    -webkit-border-radius: 0 2px 2px 2px;
    border-radius: 0 2px 2px 2px;
    -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
}
/* Remove the rule below if you want the content to be "organic" */
#content div
{
height: 220px; }

7. Βρείτε το ακόλουθο tag πάλι με την χρήση Ctrl+F    </head>

8. Κάντε paste τον κώδικα που ακολουθεί πριν από το tag </head>

<script type='text/javascript'>

$(document).ready(function() {     
$(&quot;#content div&quot;).hide();   
$(&quot;#tabs li:first&quot;).attr(&quot;id&quot;,&quot;current&quot;);  
$(&quot;#content div:first&quot;).fadeIn();          
$('#tabs a').click(function(e)
 {         e.preventDefault();
    $(&quot;#content div&quot;).hide();
    $(&quot;#tabs li&quot;).attr(&quot;id&quot;,&quot;&quot;);
    $(this).parent().attr(&quot;id&quot;,&quot;current&quot;);
    $('#' + $(this).attr('title')).fadeIn();   }); })();
</script>

9. Πηγαίνετε στο blogger  και δώστε κλικ στο  Layout 
10. Κάντε κλικ στο Add Gadget και επιλέξτε  ‘HTML/Javascript

11. Κάντε paste τον ακόλουθο κώδικα.

<ul id="tabs">
    <li><a href="#" title="tab1">One</a></li>
    <li><a href="#" title="tab2">Two</a></li>
    <li><a href="#" title="tab3">Three</a></li>   
</ul>

<div id="content"> 
    <div id="tab1">One - content</div>
    <div id="tab2">Two - content</div>
    <div id="tab3">Three - content</div>    
</div>

12. Τώρα μπορείτε να σώσετε το HTML/Javascript’.

Αυτό ήταν όλο. Η δημιουργία ιστοσελίδας όπως βλέπετε είναι μια απλή και διασκεδαστική υπόθεση την οποία εμείς στο wdf.gr (web design forum) προσπαθούμε να την απλοποιήσουμε όσο το δυνατόν περισσότερο και την κάνουμε κτήμα σας.








Hide ↑

Aσφάλεια στο opencart

04 September 2014

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

Read more...

Μαθήματα opencart - Αλλαγή του navigation bar

02 September 2014

To OpenCart αποτελεί μια από τις πιο διάσημες πλατφόρμες για την κατασκευή[…]

Read more...

WordFence. Ασφάλεια στο wordpress

01 September 2014

Το WordFence είναι ένα ιδιαίτερα δημοφιλές WordPress plugin που χειρίζεται πολλούς διαφορετικούς και κρίσιμους τομείς ασφαλείας τόσο[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.