Blogger Tips – Tricks – Gadgets – Templates – Hacks

Blogger Dynamic Views (τι είναι, πως τα εφαρμόζω, θετικά-αρνητικά)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr



Σήμερα θα μιλήσουμε για τη νέα λειτουργία του blogger η οποία έγινε διαθέσιμη σε όλους πριν από μερικές ημέρες (28/9/2011 για την ακρίβεια), τα Dynamic Views.







Τι είναι λοιπόν τα Dynamic Views και πώς μπορούμε να τα εφαρμόσουμε;



Τα Dynamic Views είναι ένας νέος τρόπος προβολής των blog μας. Περιλαμβάνει επτά νέους τρόπους προβολής των blog μας: Classic, Mosaic, Sidebar, Flipcard, Snapshot, Timeslide και Magazine (δείτε την παρακάτω εικόνα για να πάρετε μια ιδέα από το καθένα!).

Όπως μπορείτε να δείτε από την παραπάνω εικόνα, κάθε τρόπος προβολής (πχ Classic, Mosaic) διαφέρει αρκετά από τους υπόλοιπους.



Για να εφαρμόσετε κάποιο από τα παραπάνω στο blog σας, ακολουθήστε την παρακάτω διαδικασία:



1. Σύνδεση στο λογαριασμό blogger.

2. “Δοκιμάστε την ενημερωμένη διεπαφή του Blogger” (προαιρετικά)

3. “Πρότυπο”

4. “Προσαρμογή”

5. “Dynamic Views” και επιλέγετε ένα από τα επτά διαθέσιμα πρότυπα

6. “Εφαρμογή στο ιστολόγιο” και “Προβολή ιστολογίου” για να δείτε το αποτέλεσμα!



Μετά τη μεγάλη αλλαγή στο περιβάλλον διαχείρισης του blog μας, τώρα έρχεται μια νέα μεγάλη αλλαγή, αυτή τη φορά στον τρόπο προβολής του blog μας.



Πάμε να δούμε τι μας άρεσε και τι δε μας άρεσε συνοπτικά:



Μας άρεσε:

-Το απλό, καθαρό και όμορφο design των νέων προτύπων.

γρήγορη φόρτωση των σελίδων (αποτέλεσμα του από πάνω).

διαδραστικότητα των νέων προτύπων.

-Τα έτοιμα +1, Tweet και Like buttons που προσφέρονται από μόνα τους σε κάθε πρότυπο.

-Η φόρτωση πολλών post στην αρχική σελίδα, κάτι που δεν απαιτεί χρόνο, αφού οι αναρτήσεις που είναι παρακάτω φορτώνουν με το scrollάρισμα προς τα κάτω.

-Η δυνατότητα που έχουν οι επισκέπτες να προβάλλουν το blog σας με επτά τρόπους, ανεξάρτητα με το ποιον από τους επτά έχετε προ-επιλέξει εσείς.



Δε μας άρεσε:

-Το γεγονός πως δε μπορούμε να προσαρμόσουμε (προς το παρόν τουλάχιστον, δεν ξέρουμε αν θα υπάρξει τέτοια δυνατότητα στο μέλλον) το blog μας όπως θέλουμε εμείς.

Δεν έχουμε πρόσβαση στην HTML.

Δεν μπορούμε να προσθέσουμε δικά μας gadget.

-Η λειτουργία Dynamic Views δεν είναι διαθέσιμη για όλα τα blogs! Δε φταίει το πρότυπο που έχετε, καθώς σε δύο ολόιδια blogs που δοκίμασα να εφαρμόσω τα Dynamic Views, στο ένα εφαρμόστηκε ενώ στο άλλο όχι! Ίσως είναι θέμα χρόνου, θα δείξει…

-Αν και βελτιώθηκαν κάπως τα σχόλια, ακόμα δεν έχουμε τη δυνατότητα απάντησης (reply) προς τους σχολιαστές.



(Επίσης πρέπει να γνωρίζετε πως αν έχετε επιλέξει να βλέπετε το blog μόνο εσείς, να μην είναι δηλαδή ορατό σε οποιονδήποτε, τότε δε θα μπορείτε πάλι να εφαρμόσετε τα Dynamic Views!)



Αυτά είναι πάνω κάτω τα θετικά και αρνητικά που αποκόμισα εγώ από τα Dynamic Views, μια λειτουργία που πιστεύω πως ήρθε για να μείνει, εφόσον φυσικά βελτιωθεί σε κάποιους τομείς τους οποίους έθιξα παραπάνω.



Είναι φανερό πως η blogger προσπαθεί να κρατήσει τους bloggerposters (εμάς και εσάς δηλαδή!) στην πλατφόρμα της. Είναι επίσης φανερό πως κάνει βήματα εμπρός όσον αφορά το θέμα του design στα blog μας. Αυτό που δε μπορούμε να καταλάβουμε όμως, εγώ τουλάχιστον, είναι γιατί δεν ανεβαίνει επίπεδο και στον τομέα της ευχρηστίας.



Πώς να μην μεταπηδήσεις ύστερα σε κάποια άλλη, επίσης δωρεάν, πλατφόρμα, τη στιγμή που δε μπορείς να τροποποιήσεις το blog σου στη blogger, έστω σε ένα βασικό επίπεδο;



Copyrights: /

Post by Secra from WebRev.gr




Αλλαγή του προτύπου του blog για κινητά (How to change blogger mobile template)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.



Σήμερα θα δούμε πως μπορούμε να αλλάξουμε το πρότυπο του blog μας για τα κινητά τηλέφωνα.

Μέσα στις μεγάλες αλλαγές που πραγματοποιήθηκαν στο blogger μέσα στο 2011 (η σημαντικότερη εκ των οποίων είναι η αλλαγή στο περιβάλλον του), συμπεριλαμβάνεται και η δυνατότητα που μας δόθηκε να επιλέξουμε ανάμεσα σε 27 έτοιμα πρότυπα ώστε να βελτιώσουμε τον τρόπο με τον οποίο βλέπουμε το blog μας από τα κινητά.



Πάμε να δούμε τι πρέπει να κάνουμε:



1. Σύνδεση στο λογαριασμό blogger.

2. Επιλέγουμε “Δοκιμάστε την ενημερωμένη διεπαφή του Blogger“, επιλογή η οποία βρίσκεται στο πάνω μέρος της αρχικής σελίδας του blogger.

3. Επιλέγουμε το blog στο οποίο θέλουμε να κάνουμε αλλαγές.

4. Πατάμε κλικ στο “Πρότυπο“, από τη λίστα στα αριστερά.



Έχει δύο επιλογές: “Ζωντανά στο ιστολόγιο” και “Κινητό“, εμάς προφανώς μας ενδιαφέρει η δεύτερη επιλογή, οπότε κάνουμε κλικ στο κουμπί που έχει από κάτω που μοιάζει με γρανάζι.



5. Στο παράθυρο που θα εμφανιστεί επιλέγουμε “Ναι. Εμφάνιση προτύπων για κινητά σε κινητές συσκευές“.



6. Λίγο πιο κάτω λέει “Επιλογή προτύπου για κινητά” και έχει ένα μενού, από το οποίο μπορούμε να διαλέξουμε τον “τύπο” του προτύπου, π.χ. “Υδατογράφημα” και δεξιά, με τα βελάκια, μπορούμε να αλλάξουμε το χρώμα και το φόντο του κάθε προτύπου (υπενθυμίζω πως δε μπορούμε να βάλουμε δικά μας, έχει προεπιλεγμένα πρότυπα!).



Όταν καταλήξουμε σε αυτό που θέλουμε, πατάμε “Αποθήκευση “και τελειώσαμε! Εύκολο, έτσι;



~

Η περίεργη εικόνα που βλέπετε (που μοιάζει κάπως έτσι) στο αριστερό μέρος της οθόνης (πριν κάνετε αποθήκευση), είναι ο κωδικός που χρησιμοποιούν τα κινητά για να “βλέπουν” το πρότυπο που έχετε εφαρμόσει για κινητά.

~



Copyrights: /



Post by Secra from Web in Greece




Print Friendly & PDF Button for your blogger posts



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr

Σήμερα θα δούμε ένα ακόμη ενδιαφέρον tip, το “Print Friendly & PDF Button“, μέσω του οποίου οι αναγνώστες σας θα μπορούν να εκτυπώνουν τις αναρτήσεις σας ή να τις κατεβάζουν στον υπολογιστή τους σε μορφή pdf.



Διαδικασία:



1. Σύνδεση στο λογαριασμό blogger

2. Σχεδίαση

3. Επεξεργασία HTML

4. Επέκταση προτύπων γραφικών στοιχείων

5. Με “Ctrl + F” αναζητούμε το “<div class=’post-footer’>” (αν εμφανίζει δυο αποτελέσματα, μας ενδιαφέρει το πρώτο) και αμέσως μετά από αυτό επικολλούμε τον παρακάτω κώδικα:


<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’>

<a class=’printfriendly’ expr:href=’data:post.url + "?pfstyle=wp"’ style=’ color:#6D9F00; text-decoration:none;’ title=’Printer Friendly and PDF’>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-print-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>Print</span>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-pdf-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>PDF</span></a><b:else/>

<script src=’http://cdn.printfriendly.com/printfriendly.js’ type=’text/javascript’/>

<a class=’printfriendly’ href=’http://www.printfriendly.com’ onclick=’window.print(); return false;’ style=’ color:#6D9F00; text-decoration:none;’ title=’Printer Friendly and PDF’>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-print-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>Print</span>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-pdf-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>PDF</span></a></b:if>

</b:if>



(Αν αφήσετε τον κώδικα όπως είναι, τα κουμπιά δε θα εμφανίζονται στην αρχική σελίδα αλλά μόνο στις σελίδες των αναρτήσεων. Αν θέλετε τα κουμπιά να εμφανίζονται και στην αρχική σελίδα, σβήνετε τις 2 σειρές που επισήμανα με έντονη γραφή -bold-)



6. Αποθήκευση προτύπου και είμαστε έτοιμοι!



Μπορείτε να δείτε πως θα εμφανίζονται τα κουμπιά κάτω από τον τίτλο της παρούσας ανάρτησης.



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

Παρακάτω θα σας δώσω 3 κουμπιά και διαλέγετε όποιο θέλετε. Κάθε κουμπί συνοδεύεται από τον κώδικά του και για να το προσθέσετε απλά βάζετε τον κώδικά του αντί του κώδικα που σας έδωσα στο βήμα 5!





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a></b:if>

</b:if>





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a></b:if>

</b:if>





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf_button_sq_grn_l.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf_button_sq_grn_l.png" alt="Print Friendly and PDF"/></a></b:if>

</b:if>



Πηγή: Οι κωδικοί είναι από το: http://www.printfriendly.com/button

Copyrights: /




Post by Secra from Web in Greece




‘Follow us’ J-Query Social Bookmarking Widget



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.





Σήμερα θα προσθέσουμε ένα ακόμη gadget στη συλλογή μας με τα Social Bookmarking Gadgets, το οποίο επιτελεί 4 λειτουργίες: RSS Feed, Εγγραφή στο blog μέσω e-mail και link για τις σελίδες μας στα Facebook και Twitter.



Πάμε να δούμε πως θα το προσθέσουμε στο blog μας:



1. Σύνδεση στο λογαριασμό blogger

2. Σχεδίαση

3. Επεξεργασία HTML

4. Με Ctrl + F αναζητούμε το ]]></b:skin> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

#social {

width: 98%;

height: 45px;

margin: 0;

padding: 10px 5px 5px 30px;

list-style: none;

border-right:solid 1px #853529;

position: relative;

background: url(http://2.bp.blogspot.com/-Nf6QgqI-jkc/Tas56HEUrwI/AAAAAAAAAxQ/hw_KYA9pPZA/follow-bg-abt.png) no-repeat left top;

}



#social p{

font-size:1.5em;

color:#FFFB98;

font-weight:bold;

float:left;

margin: 10px 10px 0 0;

text-shadow: 1px 1px 0px #000000;

filter: dropshadow(color=#000000, offx=1, offy=1);

}



.abt{

font-size:0.8em;

color:#787878;

float:right;

margin: 0 -30px 0 0;

text-shadow: 1px 1px 0px #ffffff;

filter: dropshadow(color=#ffffff, offx=1, offy=1);

}



#social li {

width: 32px;

height: 32px;

float: left;

margin-right: 3px;

}



#social li a {

float: left;

display: block;

width: 100%;

height: 100%;

text-indent: -1000em;

background-repeat: no-repeat;

text-decoration: none;

}



#social #rss {

background-image: url(http://2.bp.blogspot.com/-27yL99iDt70/Tas569zVJWI/AAAAAAAAAxo/NIEumM2DKRo/s400/allblogtools_rss.png);

}



#social #facebook {

background-image: url(http://4.bp.blogspot.com/-lfZmi7_j72c/Tas56hfwNxI/AAAAAAAAAxg/D_xE4bPyo60/s400/allblogtools_facebook.png);

}

#social #twitter {

background-image: url(http://2.bp.blogspot.com/-BHCqkqm4Dnw/Tas57UCTyAI/AAAAAAAAAxw/fCj4yjzJE0g/s400/allblogtools_twitter.png);

}

#social #mail {

background-image: url(http://1.bp.blogspot.com/–tzwYodHzk8/Tas56U26pSI/AAAAAAAAAxY/Xqxm-jfCPkA/s400/allblogtools_email.png);

}



span.tooltip {

background: #575757;

padding: 3px;

display: block;

width: 140px;

border: 1px solid #000000;

position: absolute;

margin-top:-40px;

color: #F0F0F0;

font-size:10px;

text-indent: 0;

font: Arial, sans-serif;

text-align: center;

-webkit-box-shadow: inset 2px 2px 2px #616161;

-moz-box-shadow: inset 2px 2px 2px #616161;

box-shadow: inset 2px 2px 2px #616161;

-moz-border-radius: 5px;

border-radius: 5px;

}



5. Στη συνέχεια, πάλι με Ctrl + F, αναζητούμε το </body> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

<script type=’text/javascript’>

window.setTimeout(function() {

document.body.className = document.body.className.replace('loading', '');

}, 10);

</script>



<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’/>

<script type=’text/javascript’>

//<![CDATA[

$(document).ready(function() {



$(‘#social li’).each(function() {



var $li = $(this);

var title = $li.find(‘a’).attr(‘title’);



$li.find(‘a’).removeAttr(‘title’);



$(‘<span class=”tooltip”/>’).text(title).appendTo($li.find(‘a’)).hide();





$li.find(‘a’).mouseover(function() {





var top = $(this).position().top;

var left = $(this).position().left;



$(this).find(‘span’).fadeIn()({

top: top,

left: left

}, ‘slow’);



});



$li.find(‘a’).mouseout(function() {





$(this).find(‘span’).fadeOut(‘slow’);





});



});





});



//]]>

</script>



6. Αποθήκευση προτύπου



Πάμε τώρα να προσθέσουμε το gadget στο blog μας:



7. Πάμε Σχεδίαση > Προσθήκη gadget > HTML/Javascript και στο παράθυρο που θα ανοίξει επικολλούμε τον παρακάτω κώδικα:

<ul id=”social”>

<p>Follow Us</p>

<li><a href=”http://blog-name.blogspot.com/feeds/posts/default?alt=rss” id=”rss” title=”Follow our Feeds”>Rss</a></li>



<li><a href=”Mail-Link#” id=”mail” title=”Subscribe to our newsletter”>Mail</a></li>



<li><a href=”Facebook-Link#” id=”facebook” title=”Like us on Facebook”>Facebook</a></li>



<li><a href=”Twitter-Link#” id=”twitter” title=”Follow us on Twitter”>Twitter</a></li>

</ul>



Αντικαθιστούμε το http://blog-name.blogspot.com με τη διεύθυνση (url) του blog μας (ή αν έχετε λογαριασμό στο Feedburner, αντικαταστήστε το http://blog-name.blogspot.com/feeds/posts/default?alt=rss με το url από το Feedburner (όπως θα δείτε στο παράδειγμα παρακάτω), το Mail-Link# με τη διεύθυνση στην οποία οι αναγνώστες μπορούν να κάνουν εγγραφή (subscribe) στο blog μας μέσω e-mail, το Facebook-Link# με το url της σελίδας ή του προφίλ μας στο Facebook και το Twitter-Link# με το url της σελίδας μας στο Twitter.



Για να καταλάβετε καλύτερα τι και πως θα το αντικαταστήσετε, ρίξτε μια ματιά στον παρακάτω κώδικα, ο οποίος αποτελεί παράδειγμα για το bloggertips.gr:

<ul id=”social”>

<p>Follow Us</p>

<li><a href=”http://feeds.feedburner.com/Johnpatrablog” id=”rss” title=”Follow our Feeds”>Rss</a></li>



<li><a href=”http://feedburner.google.com/fb/a/mailverify?uri=Johnpatrablog” id=”mail” title=”Subscribe to our newsletter”>Mail</a></li>



<li><a href=”https://www.facebook.com/bloggertips.gr” id=”facebook” title=”Like us on Facebook”>Facebook</a></li>



<li><a href=”https://twitter.com/#!/johnpatrablog” id=”twitter” title=”Follow us on Twitter”>Twitter</a></li>

</ul>



Για οποιοδήποτε πρόβλημα ή απορία αφήστε το σχόλιό σας.



Πηγές: http://www.allblogtools.com/tricks-and-hacks/blogger-follow-us-j-query-widget-social-icons/



Copyrigths: /



Post by Secra from Web in Greece




Font Size Control Widget για τα posts σας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.




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



Το καλό με αυτό το gadget είναι ότι μπαίνει σχετικά εύκολα και το προσθέτετε στο σημείο που εσείς θέλετε.



Πάμε να δούμε τώρα πως θα το προσθέσετε:



Διαδικασία:


1. Σύνδεση στο λογαριασμό blogger

2. Σχεδίαση

3. Επεξεργασία HTML

4. Με Ctrl + F αναζητούμε το </head> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

<script src=’http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js’ type=’text/javascript’/>

<script type=’text/javascript’>

window.addEvent('domready', function(){



var el = $('myElement'),

font = $('fontSize');



new Slider(el, el.getElement('.knob'), {

steps: 35, // Tamaño máximo de la letra

range: [8], // El 8 es el tamaño mínimo

onChange: function(value){

font.setStyle('font-size', value);

}

}).set(font.getStyle('font-size').toInt());



});

</script>



<style type=’text/css’>

div.slider {

width: 97%;

height: 26px;

background: url(http://4.bp.blogspot.com/-r0WKMic2VOs/TaJQD3MI26I/AAAAAAAAAxE/od7dEWVqFPw/slider-bg.gif) no-repeat right top;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

border:1px solid #708B95;

margin-top:40px;

}

div.slider div.knob {

background: url(http://4.bp.blogspot.com/-0iBbRw58HkM/TaDqwZuIN5I/AAAAAAAAAw8/g9445jD5q5w/s400/allblogtools-pin.png) no-repeat;

width: 32px;

height: 47px;

margin:-35px 0 0 0;

cursor: move;

}

div#fontSize {

height: 40px;

}

</style>



5. Με Ctrl + F αναζητούμε τον παρακάτω κώδικα:

(αν δε σας το βρίσκει κατευθείαν, αναζητήστε την πρώτη ή τη δεύτερη σειρά και μετά θα βρείτε και τις υπόλοιπες σειρές του κώδικα).

<b:section class=’main’ id=’main’ showaddelement=’no’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>



6. Πριν από τον παραπάνω κώδικα προσθέτουμε το <span id=’fontSize’> και μετά από αυτόν το </span>.



Δηλαδή ο κώδικας τελικά θα είναι έτσι:

<span id=’fontSize’>

<b:section class=’main’ id=’main’ showaddelement=’no’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>

</span>



6. Αποθήκευση προτύπου και πάμε να προσθέσουμε το gadgetάκι.



7. Πάμε Σχεδίαση > Προσθήκη gadget > HTML/Javascript



8. Μέσα στο HTML gadget προσθέτουμε τον παρακάτω κώδικα:

<div id=”myElement” class=”slider”><div class=”knob”></div></div>



9. Πατάμε αποθήκευση και τελειώσαμε!



Πηγές: http://www.allblogtools.com/tricks-and-hacks/blogger-font-size-control-changing-j-query-widget/



Copyrights: /



Post by Secra from Web in Greece




Youtube Subscribe Widget – Subscribe Button



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ένα πολύ απλό, αλλά και πολύ πρακτικό widget για το blog μας, μέσα από το οποίο μπορούμε να προβάλλουμε το κανάλι μας στο youtube και δίνουμε τη δυνατότητα στους επισκέπτες του blog μας να εγγράφονται σε αυτό.



Θα φαίνεται κάπως έτσι:







Πολύ απλά και εύκολα μπορείτε να το βάλετε κι εσείς, ακολουθώντας τα παρακάτω βήματα:



Σύνδεση> Πανόπτης> Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη Gadget> HTML/JavaScript και εκεί επικολλούμε τον παρακάτω κωδικό:


<iframe src=http://www.youtube.com/subscribe_widget?p=johnpatrablog1 style=”overflow: hidden; height: 105px; width: 300px; border: 0;” scrolling=”no” frameBorder=”0″></iframe>



Αλλάξτε το johnpatrablog1 με το δικό σας youtube username σας.

Το δικό μου κανάλι π.χ. είναι το http://www.youtube.com/johnpatrablog1

(στείλτε μου πρόσκληση να γίνουμε φίλοι και θα δεχτώ ή αν γίνετε συνδρομητής στο κανάλι, θα γίνω και εγώ στο δικό σας!)



Μπορείτε επίσης να αλλάξετε το μέγεθος του widget αλλάζοντας αντίστοιχα τις αριθμητικές μεταβολές που έχω μαρκάρει με πράσινο.


Μην ξεχάσετε να αποθηκεύσετε και είστε έτοιμοι!


Copyrights: /




READ MORE BUTTON (ΜΕ ΕΙΚΟΝΑ!) ΑΝΤΙ ΓΙΑ ΚΕΙΜΕΝΟ



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους φίλους-αναγνώστες!



Μετά από δεκάδες ερωτήσεις που δέχτηκα για αυτό το θέμα αποφάσισα να γράψω τη σημερινή ανάρτηση.



Όλοι ξέρουμε τώρα πια (με τη βοήθεια βεβαίως του bloggertips.gr) πως θα βάζουμε το Read More στις αναρτήσεις μας, ώστε να μην φαίνονται ολόκληρες στην αρχική μας σελίδα. Σχετικά με αυτό έχω συγγράψει στο παρελθόν δύο τρόπους προσθήκης του: την απλή (/2009/07/read-more-blog.html) και την αυτόματη (/2010/03/automatic-read-more-function-in-blogger.html).



Σήμερα θα σας πω, πως και στις δύο περιπτώσεις θα βάλουμε αντί για κείμενο ένα read more button, όπως έχω εγώ.



Αν έχετε το απλό read more:



Στο βήμα 11 σας λέω να βάλετε τον παρακάτω κωδικό:


<b:if cond=’data:blog.pageType != “item”‘>

<span style=”font-weight:bold;”><span ><a expr:href=’data:post.url’ target=’_blank’>Διαβάστε περισσότερα…</a></span></span>

</b:if>



Απλά αντικαθιστάτε το Διαβάστε περισσότερα… με τον παρακάτω κωδικό:


<img src=”url_of_image” border=”0″ />



Στο url_of_image βάζετε το url του read more button σας.



Στο αυτόματο read more:



Εκεί που λέω να αντικαταστήστε το <data:post.body/> με τον παρακάτω κωδικό:


<b:if cond=’data:blog.pageType != “item”‘>

<div expr:id='”summary-” + data:post.id’><data:post.body/></div>

<script type=’text/javascript’>createSummaryAndThumb(“summary-<data:post.id/>”);</script>

<a class=’readmore’ expr:href=’data:post.url’>Read more »</a>

</b:if>

<b:if cond=’data:blog.pageType == “item”‘><data:post.body/></b:if>



Εκεί που λέει Read more » το αντικαθιστάτε με το:


<img src=”url_of_image” border=”0″ />



Στο url_of_image βάζετε το url του read more button σας.





Πολύ απλό, ε?





ΕΥΡΕΣΗ READ MORE BUTTON





Υπάρχουν εκατοντάδες read more button και σίγουρα θα βρείτε ένα που θα ταιριάζει στη σελίδα σας.



Θα βρείτε πολλά από εδώ και ψάξτε και με άλλες λέξεις-κλειδιά!



Καλή σας ημέρα!


Πηγές: –




Χριστουγεννιάτικο gadget με στατικά γιορτινά buttons



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Νέοι bloggers γειά σας !! Πολλοί φίλοι μου ζήτησαν τον κώδικα από τα καπάκια που έχω αριστερά στη σελίδα μου, για να φτιάξουν κάτι παρόμοιο…Τους τον έστειλα με e-mail, και πολλοί κατάφεραν και τον χρησιμοποίησαν


Σήμερα σας τον δίνω με ανάρτηση, αλλά με χριστουγεννιάτικες εικόνες και εικονίδια που έφτιαξα στο photoshop, ειδικά για αυτήν την ανάρτηση…Πρόκειται για χρησιμοποίηση 2 κωδικών, με επικρατέστερο αυτόν που θα βρείτε ΕΔΩ
Τον κώδικα θα τον βάλετε εδώ :BLOGGER επεξεργασία διάταξης=>Σχεδίαση=>Στοιχεία Σελίδας=>Προσθήκη Gadget=>HTML/JavaScript :


Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα:

<a class=”linkopacity” style=”display:scroll;position:fixed;top:5px;left:20px;”
href=” ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΠΟΥ ΘΑ ΑΝΟΙΓΕΙ ” target=”_blank” title=”FIRST

PAGE”><img
src=”http://i1029.photobucket.com/albums/y353/pantelakos/AAAHOMEgif.gif”

width=”60″ height=”70″/></a>
<a class=”linkopacity” style=”display:scroll;position:fixed;top:65px;left:20px;”
href=” ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΠΟΥ ΘΑ ΑΝΟΙΓΕΙ “target=”_blank” title=”MY

VIDEOS”><img
src=”http://i1029.photobucket.com/albums/y353/pantelakos/AAAMOVIES2.gif”

width=”60″ height=”70″/></a>
<a class=”linkopacity” style=”display:scroll;position:fixed;top:125px;left:20px;”
href=” ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΠΟΥ ΘΑ ΑΝΟΙΓΕΙ ” target=”_blank”
title=”VIDEOS”><img
src=”http://i1029.photobucket.com/albums/y353/pantelakos/AAAMOVIES.gif”width=”60″

height=”70″ /></a>
<a class=”linkopacity” style=”display:scroll;position:fixed;top:185px;left:20px;”
href=” ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΠΟΥ ΘΑ ΑΝΟΙΓΕΙ ” target=”_blank”
title=”PHOTOS”><img
src=”http://i1029.photobucket.com/albums/y353/pantelakos/AAAPHOTOS.gif” width=”60″

height=”70″/></a>
<a class=”linkopacity” style=”display:scroll;position:fixed;top:245px;left:20px;”
href=” ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΠΟΥ ΘΑ ΑΝΟΙΓΕΙ ” target=”_blank”
title=”SONGS”><img
src=”http://i1029.photobucket.com/albums/y353/pantelakos/AAAMUSIC7.gif” width=”60″

height=”70″/></a>
<a class=”linkopacity” style=”display:scroll;position:fixed;top:310px;left:20px;”
href=” ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΠΟΥ ΘΑ ΑΝΟΙΓΕΙ ” target=”_blank”
title=”SEARCH”><img
src=”http://i1029.photobucket.com/albums/y353/pantelakos/AAASEARCH.gif” width=”60″

height=”70″/></a>
<a class=”linkopacity” style=”display:scroll;position:fixed;top:370px;left:20px;”
href=” ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΠΟΥ ΘΑ ΑΝΟΙΓΕΙ ” target=”_blank”
title=”ΜΟΥΣΙΚΗ”><img
src=”http://i1029.photobucket.com/albums/y353/pantelakos/AAAMUSIC6.gif”width=”60″

height=”70″ /></a>
<a class=”linkopacity” style=”display:scroll;position:fixed;top:430px;left:20px;”
href=” ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΠΟΥ ΘΑ ΑΝΟΙΓΕΙ ” target=”_blank”
title=”TOOLS”><img
src=”http://i1029.photobucket.com/albums/y353/pantelakos/AAATOOLS3.gif”width=”60″

height=”70″ /></a>



…Σας έχω βάλει, 8 (χριστ. μπάλες) στατικά κουμπιά, γιά να ανοίγετε όποιες σελίδες (σε νέα καρτέλα) θέλετε εσείς ! Η πρώτη χριστ. μπάλα σίγουρα θα είναι η διεύθυνση της αρχικής σας σελίδας (π.χ.

http://www.egioparalia.blogspot.com/ )

Αν θέλετε μπορείτε να αλλάξετε, μεγαλώσετε, αφαιρέσετε, προσθέσετε, και τροποποιήσετε στα μέτρα σας, τον κώδικα αυτόν, και μετά τις γιορτές, αλλάζοντας τα εικονίδια με άλλα που θα βρείτε εσείς (αρκεί να αλλάξετε και τις αποστάσεις διαβάζοντας την ανάρτηση του Εκαβιτη στον Johnpatras που σας έδωσα πιο πάνω…)
Αν δεν έχετε καταλάβει κάτι, αφήστε ερώτηση στα σχόλια, η στη σελίδα μου…

Το demo είναι ΕΔΩ






FLAGS TRANSLATOR WIDGET (έγινε update στον κώδικα!)



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Πρόκειται για ένα widget που μεταφράζει τη σελίδα σας σε άλλες γλώσσες.Η μόνη διαφορά του από αυτήν την ανάρτηση εδώ είναι ότι σου έχει σημαίες (βλ.εικόνα) και ο επισκέπτης πατάει τη σημαία της γλώσσας που θέλει να μεταφραστεί το blog.

Το βάζουμε σαν απλό,κανονικό widget.Διάταξη>Προσθήκη gadget>HTML/JavaScript.O κωδικός είναι ο εξής:




<style>



.google_translate img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

border:0;

}

.google_translate:hover img {

filter:alpha(opacity=30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

.google_translatextra:hover img {

filter:alpha(opacity=0.30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

</style>



<div>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cen&hl=en’); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24" /></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cfr&hl=en’); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0/Kc6eDMT9LFI/s200/France.png" style="cursor: pointer;margin-right:8px" width="24" /></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cde&hl=en’); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/AAAAAAAAAC8/WgvMK3zP1Rk/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24" /></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Ces&hl=en’); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24" /></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cit&hl=en’); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24" /></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cnl&hl=en’); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWRkFo9UI/AAAAAAAAADU/4AzKfc6Oyxg/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cru&hl=en’); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YWR-jg9pI/AAAAAAAAADc/vYZrPOzazHU/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24" /></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cpt&hl=en’); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSGHcxOI/AAAAAAAAADk/ElHZBjDCZn8/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24" /></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cja&hl=en’); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWSR2_wYI/AAAAAAAAADs/GtKdPLKUluE/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24" /></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cko&hl=en’); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="http://2.bp.blogspot.com/_5jbh95HruKA/S1YWSrlfMyI/AAAAAAAAAD0/_MACsRIW8wg/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24" /></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Car&hl=en’); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YWq7SrDkI/AAAAAAAAAD8/ZE8A1isEZrw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24" /></a>



<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Czh-CN&hl=en’); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="http://1.bp.blogspot.com/_5jbh95HruKA/S1YWrMQAw9I/AAAAAAAAAEE/r-DEVtWXp50/s200/China.png" style="cursor: pointer;margin-right:8px" width="24" /></a> </div>

<div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>



<br />





Απολαύστε το νέο σας widget!




Μπαλονάκι με τα σχόλια κάθε ανάρτησης



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Τι λέτε να εμφανίσετε τα σχόλια των αναρτήσεων σας μέσα σ’ ένα “μπαλονάκι”?

Είναι ένα όμορφο hack που θα σας διευκολύνει πολύ στο να βλέπετε τα σχόλια των αναρτήσεών σας.



Για να το κάνετε, ακολουθήστε τα παρακάτω βήματα:



1. Σύνδεση στον λογαριασμό σας

2. Σχεδίαση

3. Επεξεργασία html

4. “Επέκταση προτύπων γραφικών στοιχείων”

5. Με τη βοήθεια του ctrl + F βρίσκουμε το παρακάτω:


<h3 class=’post-title entry-title’>



6. Και κάτω από αυτό βάζουμε τον παρακάτω κώδικα:


<!–COMMENT-BUBBLES-STARTS–>

<b:if cond=’data:post.allowComments’>

<a class=’comment-bubble’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:post.numComments/></a>

</b:if><!–COMMENT-BUBBLES-STOPS–>



7. Πάλι με το ctrl+F βρίσκουμε το


</head>



8. και πριν από τον παραπάνω κωδικό προσθέτουμε το


<!–COMMENT-BUBBLES-STARTS–><style type=”text/css”>

.comment-bubble {

float: right;

background: url(image direct link) no-repeat;

width: 55px;

height: 38px;

font-size: 18px;

margin-top: -15px;

margin-right: 2px;

text-align: center;

}

</style><!–COMMENT-BUBBLES-STOPS–>



Απλά εκεί που λέει “image direct link” βάλτε το λινκ της εικόνας της αρεσκείας σας.



Να μερικά εικονίδια που βρήκα από το Loneeagle:















9. Πατήστε Προεπικόπηση να δείτε αν σας εμφανίζεται σωστά και αν είναι ολα οκ πατήστε Αποθήκευση.



Ελπίζω να σας άρεσε.



johnpatra




Πρόσθεσε Reply Button σε κάθε σχόλιό σου – Add a Reply Button to your comments



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα,



εδώ και λίγο καιρό έχω βάλει μια νέα λειτουργία στα σχόλια. Αν προσέξτε κάθε σχόλιο έχει δίπλα ένα [Reply]. Αν θέλετε να δείτε πως ακριβως δουλεύει σας αφήνω να δημοσίευσετε test comments σε αυτην την ανάρτηση. Αφήστε ένα σχόλιο και μετά αφήστε άλλο ένα, πατώντας το [Reply], για να δείτε πως δουλεύει. Και αν σας αρέσει, δείτε παρακάτω πως θα το βάλετε κι εσείς!




Για να ενσωματώσετε αυτό το hack στο Blog σας, ακολουθήστε τα παρακάτω βήματα:



1) Login στον blogger account

2) Πανόπτης

3) Σχεδίαση ή Διάταξη

4) Επεξεργασία html

5) Επέκταση προτύπων γραφικών στοιχείων

6) Με το ctrl+F βρείτε τον παρακάτω κωδικό:


<data:commentPostedByMsg/>



Κάτω από τον παραπάνω κώδικα επικολλήστε τον παρακάτω:


<span><a expr:href=’"https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"’ onclick=’javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;’>[Reply]</a></span>



Επεξεργασία του παραπάνω κώδικα:



α) Καταρχίν εκεί που λέει YOUR-BLOG-ID αλλάξτε το με το ID του blog σας. Το ID σας μπορείτε να το βρείτε πολύ εύκολα. Αρκεί να κοιτάξετε στην url σας και θα το δείτε, όπως φαίνεται και στη φώτο:




β) Εκεί που λέει [Reply], μπορείτε να το αλλάξετε και να βάλετε κάτι άλλο π.χ.: “Απαντήστε σε αυτό το σχόλιο”.



γ) Μπορείτε να βάλετε και εικόνα αντί για το [Reply]. Απλά διαγράψτε το [Reply] και στη θέση του βάλτε τον παρακάτω κωδικό:


<img src=”http://3.bp.blogspot.com/_v5IxGTiMTD8/TDDXeKfwaaI/AAAAAAAACe8/lI2Jj9VdMFs/s1600/reply%5B1%5D.gif“/>



Μπορείτε να βάλετε όποια εικόνα θέλετε, αντικαθιστώντας τα κόκκινα γράμματα με το url της.



7) Πατήστε Προεπισκόπηση να δείτε αν θα γίνει δεκτός ο κώδικας και αν είναι όλα οκ, πατήστε Αποθήκευση!



Ελπίζω να σας αρέσει 🙂



Αφήστε ένα σχόλιο να δω κι εγώ αν οι κωδικοί είναι οκ ή είναι λάθος.



Μην ξεχάσετε να το αναρτήσετε στο facebook wall σας, πατώντας το παρακάτω κουμπί:




Κάθετο Menu Bar στο Blog σας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ένα όμορφο κατακόρυφο menu bar έχω να σας δείξω σήμερα. Είναι πολύ εξυπηρετικό και το κυριότερο είναι ότι δεν χρειάζεται επεξεργασία του Html κωδικού. Μπαίνει απλά σαν widget στην sidebar του blog.

Επίσης μπορείτε να αλλάξετε τα χρώματά του, προσαρμόζοντάς τα με τα δικά σας γούστα, έτσι ώστε να ταιριάζει χρωματικά με το blog του καθενός.

Παρακάτω θα σας δείξω ποιό χρώμα αντιστοιχεί στον ανάλογο κωδικό.



Ο κωδικός του είναι αυτός.



<style type=”text/css”>



#ddblueblockmenu ul{

margin: 0;

padding: 0;

list-style-type: none;

font: normal 90% ‘Trebuchet MS’, ‘Lucida Grande’, Arial, sans-serif;

}



#ddblueblockmenu{

border: 1px solid #000000;

border-bottom-width: 0;

width: 100%;

}



#ddblueblockmenu a{

display: block;

padding: 3px 0;

padding-left: 9px;

width: 94%; /*94% minus all left/right paddings and margins*/

text-decoration: none;

color: #ffffff;

background-color: #2175bc;

border-bottom: 1px solid #90bade;

border-left: 7px solid #1958b7;

list-style-type:none;

}



* html #ddblueblockmenu a{ /*IE only */

width: 94%; /*IE 5*/

width: 94%; /*94% minus all left/right paddings and margins*/

}



#ddblueblockmenu a:hover {

background-color: #2586d7;

border-left-color: #1c64d1;

}



#ddblueblockmenu div.menutitle{

color: #ffffff;

border-bottom: 1px solid black;

padding: 1px 0;

padding-left: 5px;

background-color: #000000;

font: bold 90% ‘Trebuchet MS’, ‘Lucida Grande’, Arial, sans-serif;

}



</style>



<div id=”ddblueblockmenu”>



<div class=”menutitle”>Browse</div>

<ul>

<a href=”Το Url του Link σας/“>Home</a>

<a href=”Το Url του Link σας/“>About me</a>

<a href=”Το Url του Link σας/“>To άλλο μου Blog</a>

<a href=”Το Url του Link σας/“>Διάφορα</a>

<a href=”Το Url του Link σας/“>Επικοινωνία</a>

</ul></div>



Όπως προανέφερα, είναι widget, οπότε για να κάνετε την εφαρμογή θα πάτε Πίνακα ελέγχου –>  Σχεδίαση –> Προσθήκη gadget –> Html/Javascript, και κάνουμε επικόλληση τον κωδικό. Πριν πατήσετε Αποθήκευση, πρέπει να κάνετε τις ρυθμίσεις που απαιτούν τα …γούστα σας.

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

Ακολούθως, το σκούρο μπλε, είναι το χρώμα των γραμμάτων του κεντρικού Menu.

Με το καφέ, είναι το background του Menu.

Με το κόκκινο χρώμα είναι το χρωμα της διαχωριστικής γραμμής του menu.

Με το μπλε, είναι η κάθετη γραμμή δίπλα στο πλαίσιο, που φαίνεται αριστερά του menu.

Με το θαλασσί, είναι το χρώμα του menu, όταν περνάμε το δείκτη του ποντικιού από πάνω του.

Με το φούξια, είναι το χρώμα της κάθετης γραμμής του menu, όταν περνάμε το δείκτη του ποντικιού από πάνω του.

Με το πράσινο, είναι το χρώμα των γραμμέτων του τίτλου.

Τέλος με το πορτοκαλί, είναι το background του τίτλου.



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

Δείτε την εικόνα.








Προς το τέλος του κωδικού, αυτό με το κόκκινο χρώμα, είναι τα links που θα φαίνονται.

Εκεί που γράφει “Το Url του Link σας/”, βάζουμε το direct link που θα οδειγήται ο επισκέπτης πατώντας το, ενώ εκεί που γράφει Home κλπ, γράφουμε αυτό που προσδιορίζει το link.

Μπορούμε να προσθέσουμε, (ή να αφαιρέσουμε), όσα links θέλουμε, επικολώντας κάθε φορά για κάθε link τον κωδικό














<a href=”Το Url του Link σας/”>Home</a>





Νομίζω ότι είναι αρκετά εύκολο.

Δοκιμάστε το, κι αν σας άρεσε αφήστε μου ένα σχόλιο.





Post by Ekabitis




Widget για να κατεβάσεις ότι πρόγραμμα θέλεις



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Άλλο ένα απλό, μα πολύ καλό και χρήσιμο widget, σας έχω για σήμερα. Είναι ένα widget με 41 μικρά εικονίδια προγραμμάτων. Και όποιος πατήσει το κάθε εικονίδιο κατεβάζει το συγκεκριμένο πρόγραμμα. Το είχα και εγώ αυτό το widget για μια περίοδο στο blog μου, αλλά επειδή θέλω να κάνω πιο ελαφρύ το blog μου, το διέγραψα.

Αυτό το widget πρέπει να το έχει κάθε blog που ασχολείται με:
Τεχνολογία, Computers-Πληροφορική, Προγράμματα και κώδικες.

Οφείλω να πω ότι αυτό το widget μου το έδωσε το blog “exypno“.

Η προσθήκη του είναι απλή, σαν οποιοδήποτε άλλο widget.

(σχεδίαση>στοιχεία σελίδας>προσθήκη gadget>HTML-JAVASCRIPT)


html κωδικός του widget:


<img style=”width: 160px; height: 74px;” alt=”g.live” src=”http://www.idsecuritysolutions.com/Images/download_button.jpg” />

<center>
<a target=”_blank” href=”http://g.live.com/1rewlive3/pt-brz/wlsetup-web.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://3.bp.blogspot.com/_Fca2TSNaqb0/St_4X2eyJlI/AAAAAAAAA1c/jZ2pj61DhBE/S180/2009h.jpg” /></a><a target=”_blank” href=”http://ftp.freenet.de/pub/filepilot/windows/plug-ins/javaruntime/jre-6u12-windows-i586-p.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://i29.tinypic.com/2mmagzm.jpg” /></a><a target=”_blank” href=”http://www.puxarapido.com.br/downloads/puxarapido_v0861.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://i28.tinypic.com/29nfj1k.jpg” /></a><a target=”_blank” href=”http://www.epsxe.com/files/epsxe170.zip”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://i29.tinypic.com/2w33lgh.jpg” /></a><a target=”_blank” href=”http://download.divx.com/divx/DivXInstaller.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://img256.imageshack.us/img256/8053/81782374.png” /></a>
<a target=”_blank” href=”http://ufpr.dl.sourceforge.net/sourceforge/aresgalaxy/aresregular211_installer.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/23888/3896.jpg” /></a><a target=”_blank” href=”http://mirror3.msgpluslive.net/MsgPlusLive-481.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/41034/5887.jpg” /></a><a target=”_blank” href=”http://files.avast.com/iavs4pro/setuppor.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/5576/2274.jpg” /></a><a target=”_blank” href=”http://ufpr.dl.sourceforge.net/sourceforge/emule/eMule0.49c-Installer.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/6345/2501.jpg” /></a><a target=”_blank” href=”http://www.rarlab.com/rar/wrar380br.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/2657/1518.jpg” /></a>
<a target=”_blank” href=”http://download.limewire.com/download/lastValidVersions/all_platforms/LimeWireWin.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/2219/1437.jpg” /></a><a target=”_blank” href=”http://el.www.mozilla.com/el/firefox/”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://kara.allthingsd.com/files/2008/07/mozilla_firefox_readerszone.jpg” /></a><a target=”_blank” href=”http://ardownload.adobe.com/pub/adobe/reader/win/9.x/9.1/ptb/AdbeRdr910_pt_BR.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/907/651.jpg” /></a><a target=”_blank” href=”http://www.enriquepuertas.com/wp-content/files/vdownloader.zip”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/42942/6502.jpg” /></a><a target=”_blank” href=”ftp://majorgeeks.mirror.internode.on.net/graphics/PhotoScapeSetup_V3.3.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/46101/8592.jpg” /></a>
<a target=”_blank” href=”http://software-dl.real.com/0434a30bb9da87176914/windows/installer/stubinst/stub/rp11/R41RD01/RealPlayer11GOLD.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/4521/1907.jpg” /></a><a target=”_blank” href=”http://www.mediafire.com/download.php?nzi51jtmwly”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/3586/1653.jpg” /></a><a target=”_blank” href=”http://download.microsoft.com/download/2/E/B/2EB4A8C1-419A-4139-8608-57109F5568B4/IE8-WindowsXP-x86-PTB.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/49944/13364.jpg” /></a><a target=”_blank” href=”http://download.microsoft.com/download/e/b/2/eb20c6d8-1e81-4f37-8fc8-47c0f97d743e/wmp11-windowsxp-x86-pt-br.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/40195/5727.jpg” /></a><a target=”_blank” href=”http://fpdownload.macromedia.com/get/flashplayer/current/install_flash_player.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/51303/15751.jpg” /></a>
<a target=”_blank” href=”http://ftp.opera.com/pub/opera/win/964/int/Opera_964_int_Setup.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/38343/5347.jpg” /></a><a target=”_blank” href=”http://download.piriform.com/ccsetup219.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/40195/5727.jpg” /></a><a target=”_blank” href=”http://dl.google.com/packdata/ci_earth/peruser/googleearthsetup.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/26308/41766.jpg” /></a><a target=”_blank” href=”ftp://majorgeeks.mirror.internode.on.net/multimedia/klmcodec485.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/35104/4630.jpg” /></a><a target=”_blank” href=”http://www.xpcodecpack.com/download”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/30616/4225.jpg” /></a>
<a target=”_blank” href=”http://download.skype.com/SkypeSetup.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/53005/16576.jpg” /></a><a target=”_blank” href=”http://download.utorrent.com/1.8.2/utorrent.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/37053/5001.jpg” /></a><a target=”_blank” href=”ftp://majorgeeks.mirror.internode.on.net/drives/daemon4304-lite.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/30070/4191.jpg” /></a><a target=”_blank” href=”http://dl.orbitdownloader.com/dl/OrbitDownloaderSetup.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/43379/6748.jpg” /></a><a target=”_blank” href=”http://download.iobit.com/asc-setup.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/38021/5255.jpg” /></a>
<a target=”_blank” href=”http://download.microsoft.com/download/d/c/c/dccd3e5b-aef9-4f61-bfc4-d973396282aa/WindowsXP-KB936929-SP3-x86-PTB.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/51013/15663.jpg” /></a><a target=”_blank” href=”http://www.any-dvd-converter.com/any-video-converter-free.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/44172/7218.jpg” /></a><a target=”_blank” href=”http://downloads.pcworld.com/pub/new/graphics___multimedia/video/video_tools/dvdshrink32setup.zip”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/38346/5348.jpg” /></a><a target=”_blank” href=”http://download.speedbit.com/dap9.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/1354/792.jpg” /></a><a target=”_blank” href=”http://download.microsoft.com/download/8/1/e/81ed90eb-dd87-4a23-aedc-298a9603b4e4/directx_9c_redist.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://i29.tinypic.com/hrmrtd.gif” /></a>
<a target=”_blank” href=”http://download.nullsoft.com/winamp/client/winamp5552_full_emusic-7plus_pt-br.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/7597/2755.jpg” /></a><a target=”_blank” href=”http://soft.oszone.net/files_soft/aimp/aimp_2.51.330.zip”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/45896/8412.jpg” /></a><a target=”_blank” href=”http://appldnld.apple.com.edgesuite.net/content.info.apple.com/QuickTime/061-5376.20090121.BD7E9/QuickTimeInstaller.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/2600/1509.jpg” /></a><a target=”_blank” href=”http://download.microsoft.com/download/5/6/7/567758a3-759e-473e-bf8f-52154438565a/dotnetfx.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/36889/4972.jpg” /></a><a target=”_blank” href=”http://dl.google.com/chrome/install/172.28/chrome_installer.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/53549/17018.jpg” /></a>
<a target=”_blank” href=”http://ufpr.dl.sourceforge.net/sourceforge/gimp-win/gimp-2.6.6-i686-setup.exe”><img style=”width: 30px; height: 35px;” alt=”g.live” src=”http://www.baixaki.com.br/imagens/2602/1510.jpg” /></a></center>
<font face=”Tahoma”><a target=”_blank” href=”http://johnpatrablog.blogspot.com/2010/07/widget.html”><span style=”font-size: 6pt; text-decoration: none”>Johnpatrablog</span></a></font></font>




ΠΡΟΕΠΙΣΚΟΠΗΣΗ WIDGET:




g.liveg.liveg.liveg.live
g.liveg.liveg.liveg.liveg.live
g.liveg.liveg.liveg.liveg.live
g.liveg.liveg.liveg.liveg.live
g.liveg.liveg.liveg.liveg.live
g.liveg.liveg.liveg.liveg.live
g.liveg.liveg.liveg.liveg.live
g.liveg.liveg.liveg.liveg.live
g.live



Κάτω από το widget έχω βάλει έναν σύνδεσμο που οδηγεί εδώ. Σας παρακαλώ μην τον σβήσετε, αλλά αν σας ενοχλεί τόσο δεν μπορώ να σας απαγορέψω να το διαγράψετε. Αλλά πόσο να σας ενοχλήσει? Τον έχω κάνει τόσο μικρό, που σχεδόν δε φαίνεται!

Αποθηκεύστε το widget κι απολαύστε το!

Ελπίζω να σας φανεί χρήσιμο 🙂

Διαδώστε αυτό το post στο facebook με ένα απλό πάτημα του παρακάτω κουμπιού: