Multi-Tabbed Widgets For Blogger

Εδώ θα σας δείξουμε πως να δημιουργήσετε ένα gadget με πολλές-καρτέλες για το ιστολόγιό σας, το οποίο θα σας βολέψει αρκετά...

Λοιπόν ας ξεκινήσουμε...

BHMA 1o:

θα πάτε εδώ & θα κατεβάσετε τα 2 αρχεία

1. tabcontent.css
2. tabcontent.js

Και ανεβάστε αυτά τα δύο αρχεία σε κάποιον server.

Μετά τη μεταφόρτωση των αρχείων, αντιγράψτε τον σύνδεσμο-link σε κάποιο txt θα σας χρειαστεί στην συνέχεια..

ΒΗΜΑ 2o:

Συνδεθείτε στο Blogger

Πηγαίνετε στο Πανόπτη σας --> Διάταξη --> Επεξεργασία HTML

Αφού κρατήσετε ένα backup το template σας καλού-κακού....

& θα κάνετε αναζήτηση με το Ctrl + F για το.....

</head>

Μόλις το βρείτε πριν απο το κλείσιμο του </head>
Προσθέστε τον παρακάτω κώδικα αφού πρώτα έχετε βάλει τους συνδέσμους που είπαμε προυγουμένως πως θα τους έχετε αποθηκεύσει σ ένα txt.

<link rel="stylesheet" type="text/css" href="http://.....To Direct link..../tabcontent.css" />
<script type="text/javascript" src="http://.....To Direct link..../tabcontent.js">
/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Via http://BloggerStop.Net
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Κάνετε αποθήκευση προτύπου & πάμε στο.....

BHMA 3o:

Πανόπτης ---> Διάταξη ---> Στοιχεία Σελίδας ---> Προσθήκη gadget ---> HTML/JavaScript

Και μέσα στο gadget βάζουμε ένα από τους παρακάτω κώδικες....

Σε εικόνα βλέπετε την τελική μορφή του κι ακριβώς από κάτω από το καθένα είναι ο κώδικας.


Screenshot Tab Content 1:



Κώδικας Tab Content 1:

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

Screenshot Tab Content 2:



Κώδικας Tab Content 2:

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>

<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

Screenshot Tab Content 3:



Κώδικας Tab Content 3:

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
Tab content 1 here<br />
</div>

<div id="dog2" class="tabcontent">
Tab content 2 here<br />
</div>

<div id="dog3" class="tabcontent">
Tab content 3 here<br />
</div>

<div id="dog4" class="tabcontent">
Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>

Αλλάξτε τις ετικέτες με τις δικές σας & προσθέστε τα gadgets που θέλετε & είστε έτοιμοι.

Πατήστε ΑΠΟΘΗΚΕΥΣΗ κι είστε ΟΚ.

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!