Rotating images for your popular posts!

Today I will show you a short code that makes the image next to the description in your popular posts rotate on mouseover!

The installation is quite simple.After installing the gadget Popular posts save and go to edit template.Using cntrl + F look for / b: skin. Once you've found it click on dots between the SKIN tags and paste the following code.You can the effect live on my Popular posts down the page.

 <style type='text/css'> .PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;} .PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;} .PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;} </style>

@Πνευματικά δικαιώματα ανάρτησης symvl.blogspot.com Επιτρέπεται η αντίγραφη με υποχρεωτικό ενεργό backlink πίσω στην πηγή με ένα κλικ.

Αυτόματο 'διαβάστε περισσότερα' στις αναρτήσεις σας.

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

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

Για να σπάσουμε λοιπόν τις αναρτήσεις και να εμφανίζεται το διαβάστε περισσότερα στο τέλος,το μόνο που έχουμε να κάνουμε είναι να προσθέσουμε τον παρακάτω κώδικα.

1.Στην επεξεργασία προτύπου με cntr+F ψάχνουμε για /head

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

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var s=a.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}a=s.join("")}b=(b<a.length-1)?b:a.length-2;while(a.charAt(b-1)!=' '&&a.indexOf(' ',b)!=-1)b++;a=a.substring(0,b-1);return a+'...'}function createSummaryAndThumb(a){var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+'<div>'+removeHtmlTag(b.innerHTML,e)+'</div>';b.innerHTML=f}
//]]>
</script>
<script type='text/javascript'>
summary_noimg = 550;
summary_img = 450;
img_thumb_height = 150;
img_thumb_width = 200;
</script>

2.Ψάχνουμε με cntr+F για

<data:post.body/>

και το αντικαθιστούμε με τον παρακάτω κώδικα.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:6px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more</a></span>
</b:if>
</b:if>

@Πνευματικά δικαιώματα ανάρτησης symvl.blogspot.com Επιτρέπεται η αντίγραφη με υποχρεωτικό ενεργό backlink πίσω στην πηγή με ένα κλικ.

Εφέ για τις δημοφιλείς αναρτήσεις σας.

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

Η εγκατάστασή της είναι αρκετά απλή.Αφού κάνετε εγκατάσταση του γκάτζετ Δημοφιλείς αναρτήσεις αποθηκεύετε και πηγαίνετε στην επεξεργασία προτύπου.Με cntrl+F ψάχνετε για /b:skin .Αφού το βρείτε κάνετε κλικ στις τελείες ανάμεσα στα σκιν και κατόπιν επικολλείστε τον παρακάτω κώδικα.

 <style type='text/css'> .PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;} .PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;} .PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;} </style>

@Πνευματικά δικαιώματα ανάρτησης symvl.blogspot.com Επιτρέπεται η αντίγραφη με υποχρεωτικό ενεργό backlink πίσω στην πηγή με ένα κλικ.

Αλλάξτε το βελάκι στο μπλογκ σας.

Σήμερα θα ασχοληθούμε λίγο με τον καλλωπισμό του μπλογκ μας και μετά από πολλά αιτήματα αναγνωστών μας σας δίνω έναν μικρό κώδικα για να αλλάξετε το βελάκι (κέρσορας) στο μπλογκ σας.Δείτε το μπλε κέρσορα στο δικό μου.Παρακάτω ακουλουθούν και διάφορα άλλα για να διαλέξετε.

Η εγκατάσταση είναι εύκολη .Στην επεξεργασία προτύπου με cntr+F ψάχνουμε για <body και ακριβώς ΚΑΤΩ από αυτό προσθέτουμε τον παρακάτω σύντομο κώδικα.

 <style type="text/css">body, a:hover {cursor: url(http://safir85.ucoz.com/24work-blogspot/mouse-cursor/COOL_BLUE_OUTER_GLOW_POINTER-www.24work.blogspot.c.cur), progress;}</style><a href="http://24work.blogspot.com" target="_blank" title="μικρές συμβουλές μπλόγκερ"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="μικρές συμβουλές μπλόγκερ" style="position:absolute; top: 0px; right: 0px;" /></a>

Δείτε και μερικά άλλα βελάκια.Απλά κάντε δεξί κλικ,αντιγραφή τοποθεσίας εικόνας και αντικαταστείστε τον παραπάνω κώδικα. 



<style type="text/css">body, a:hover {cursor: url(http://safir85.ucoz.com/24work-blogspot/mouse-cursor/ANGRY_BIRDS-LINK_SELECT-www.24work.blogspot.com-.cur), progress;}</style><a href="http://24work.blogspot.com" target="_blank" title="μικρές συμβουλές μπλόγκερ"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>




<style type="text/css">body, a:hover {cursor: url(http://safir85.ucoz.com/24work-blogspot/mouse-cursor/ANGRY_BIRDS-www.24work.blogspot.com-.cur), progress;}</style><a href="http://24work.blogspot.com" target="_blank" title="μικρές συμβουλές μπλόγκερ"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>

 <style type="text/css">body, a:hover {cursor: url(http://safir85.ucoz.com/24work-blogspot/mouse-cursor/JAPANESE_RED_UMBRELLA-www.24work.blogspot.com-.cur), progress;}</style><a href="http://24work.blogspot.com" target="_blank" title="μικρές συμβουλές μπλόγκερ"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>

<style type="text/css">body, a:hover {cursor: url(http://safir85.ucoz.com/24work-blogspot/mouse-cursor/BUFF-www.24work.blogspot.com-.cur), progress;}</style><a href="http://24work.blogspot.com" target="_blank" title="μικρές συμβουλές μπλόγκερ"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>

<style type="text/css">body, a:hover {cursor: url(http://safir85.ucoz.com/24work-blogspot/mouse-cursor/COOL_BLUE_OUTER_GLOW_POINTER-www.24work.blogspot.c.cur), progress;}</style><a href="http://24work.blogspot.com" target="_blank" title="μικρές συμβουλές μπλόγκερ"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>

Ημερολόγιο για το μπλογκ σας.

Αν χρειάζεστε ένα απλό ημερολόγιο (events calendar) με επαγγελματική εμφάνιση ,είτε για το μπλογκ σας ,είτε ανεξάρτητο,μια καλή λύση είναι το ημερολόγιο Google Calendar.Αφού συνδεθείτε στο λογαριασμό σας μπλόγκερ κάντε κλικ στο λινκ του ημερολογίου της προηγούμενης σειράς και θα βγείτε στην παρακάτω οθόνη.
 

Κατόπιν ακουλουθούμε τα παρακάτω βήματα.

• Επιλέγουμε το ημερολόγιο που θέλουμε από αυτά που έχουμε φτιάξει.

• Μετά αντιγράφουμε τον κώδικα και τον επικολλούμε σε ένα HTML γουίτζετ στη Διάταξη του μπλογκ σας.

 

Ο κώδικας είναι της μορφής που ακολουθεί και τέλος ρυθμίζουμε τις διαστάσεις του με το κόκκινο για να ταιριάζει στο μπλογκ μας.

 <iframe src="https://www.google.com/calendar/embed?src=el.greek%23holiday%40group.v.calendar.google.com&ctz=Europe/Athens" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

@Πνευματικά δικαιώματα ανάρτησης symvl.blogspot.com Επιτρέπεται η αντίγραφη με υποχρεωτικό ενεργό backlink πίσω στην πηγή με ένα κλικ.