Add an Icon to Blog Post Titles with CSS

A little icon next to your post title is a cute way to bring the design elements of your theme into your blog posts. And, it's easy to do with a bit of CSS! You'll probably spend more time choosing the perfect icon than you will on adding the CSS to your blog.

Change Width/Height of Popular Post Thumbnails in Blogger

How To Change Width/Height of Popular Post Thumbnails in Blogger

Few days’ a go a user messaged me on Facebook that, he wants to resize Blogger popular post thumbnails. This is not the first time we have received a request from our reader, so we decided to write a detailed tutorial on it. Firstly, we thought that it is not possible but later while playing with a bit of XML Coding we were able to change the size of Popular post thumbnails. To be honest, we were surprised to see that it was so straightforward to resize Thumbnails. Therefore, today in this tutorial we will be sharing a million dollar technique through which anyone can modify the Widget/height of the popular post thumbnails in blogger.

Image Morph Effect To Post Images

Add An Amazing Image Morph Effect To Post Images On Blogger

 In the last post we had a CSS Zoom effect for images on your blog.Now we are continuing with image effects this time with something really awesome.This effect has a number of layers but as with all our tutorials it can be easily added to your blog even for a newbie.

So what is the effect ? The main feature is on hover images will spin and morph from square to round, to help this effect images will also have a 3D style.Below I have created an animated GIF to give you an idea of how it looks, check out the demo for the real thing (On the demo page hover over any of the images in the post).

Mouseover Effect For Images

Simple Mouseover Effect Code For Images

DEMO: Hover mouse over the image!

3D Icons - Photos in Post

3D εφε σε μια εικονα στο blogger

Πως θα κάνω τις εικόνες ή μια φωτό μας στις αναρτησεις μας να στριφογυριζει οταν περναει το ποντικι απο πανω της, να αποκτήσει το λεγομενο 3d εφε.

Δείτε το παραδειγμα

3d εφε στις φωτο μας

Author Avatar in Post Title

Add Author Avatar Beside Post Title in Blogger

Today I will show you how you can add author image beside the title of every post of your blogger blog. This design hack looks really cool when there are more than one author in a blog. It helps you to distinguish between the authors of the post.

The widget is fully automated so if you change your profile pic then the changes you want will take place.

Sitemap with Thumbnails

2 Awesome Sitemap Widgets for Blogger

Posted On 22:09 // 47 comments

Adding Sitemap or Table of Contents in a blog is highly recommended for all the bloggers whether new or old. These Sitemaps help our readers to navigate our blog easily and it also helps our blog by decreasing its bounce rate (number of visits that consists of only one pageview). Two of my very good friends +Chandeep J and +Ankit Kumar Singla have worked on the Sitemap widget to make it more attractive.




The two Sitemap Widgets are -

1. Responsive Sitemap Widget for Blogger (Table of Contents σε προηγούμενη ανάρτηση)
2. Sitemap with Thumbnail for Blogger

Rollover image

Rollover image Δυο φωτογραφίες σε μία

 Σημερα θα σας δωσω ενα κωδικο με τον οποιο μπορειτε να συνδιασετε δυο φωτογραφιες σε μια. Τι εννοω? Πως καθως περναει το ποντικι πανω απο την μια τοτε θα αλλαζει και θα εμφανιζεται η δευτερη.

Ακοmα μπορουμε να την κανουμε clickable δηλαδη πατωντας πανω της να οδηγει σε καποιο συγκεκριμενο url. Μπορουμε να βαλουμε τον κωδικο στην sidebar βαζωντας τη σα gadget ,η μεσα σε καποια αναρτηση.

δειτε το παρακατω παραδειγμα.

 



Για να το κανετε αντιγραψτε τον παρακατω κωδικο και προσθεστε τον οπου θελετε.αλλαζοντας παντα τα κοκκινα γραμματα με τα λινκ απο τις δικες σας φωτο και τα μπλε γραμματα με το λνκ που θελετε να οδηγει η φωτο. Αν δε θελετε να οδηγει καπου τοτε αφηστε το κενο.

<a href="που θελετε  να οδηγει"><img src="λινκ πρωτης εικονας" onmouseover="this.src='λινκ δευτερης εικονας'" onmouseout="this.src='λινκ πρωτης εικονας'" /></a>

Marquee Social Images

ΠΩΣ ΒΑΖΩ ΚΥΛΙΟΜΕΝΕΣ ΕΙΚΟΝΕΣ ΜΕ LINKS

Πηγαίνουμε στην διάταξη του blog μας και πατάμε προσθήκη gadget στην αριστερή πλαϊνή πλευρική μπάρα. Μετά επίλέγουμε το gadget HTML/JAVASCRIPTκαι επικολλάμε τον παρακάτω κώδικα. Μπορείτε να αλλάξετε την κατεύθυνση ροής των εικόνων με τα links αντικαθιστώντας τα κίτριναγράμματα. Επίσης μπορείτε να αλλάξετε και ταχύτητα ροής των εικόνων με τα linksαλλάζοντας το γαλάζιο νούμερο, καθώς το χρώμα φόντου αλλάζοντας το πράσινο νούμερο. Το πλάτος και το ύψος του widgetτο ρυθμίζετε αλλάξοντας το πορτοκαλί νούμερο. Εννοείται ότι τα links των εικόνων με τα μώβ γράμματα και τα linksτων sosial networks με τα γαλάζια γράμματα τα αλλάζετε με τα δικά σας.

Web Radio Icons

RADIO ICONS ΠΟΥ ΑΝΟΙΓΟΥΝ ΣΕ POP UP WINDOW

RADIO ICONS ΠΟΥ ΑΝΟΙΓΟΥΝ ΣΕ POP UP WINDOW

Πηγαίνουμε στην διάταξη του blog μας και πατάμε προσθήκη gadget σε όποια μπάρα δεξιά ή αριστερά, πάνω ή κάτω θέλουμε να βάλουμε τα radio icons. Μετά επίλέγουμε το gadget HTML/JAVASCRIPT και επικολλάμε τον παρακάτω κώδικα. 

Web TV Icons

TV ICONS ΠΟΥ ΑΝΟΙΓΟΥΝ ΣΕ POP UP WINDOW

TV ICONS ΠΟΥ ΑΝΟΙΓΟΥΝ ΣΕ POP UP WINDOW

Πηγαίνουμε στην διάταξη του blog μας και πατάμε προσθήκη gadget σε όποια μπάρα δεξιά ή αριστερά, πάνω ή κάτω θέλουμε να βάλουμε τα sosial buttons. Μετά επίλέγουμε το gadget HTML/JAVASCRIPT και επικολλάμε τον παρακάτω κώδικα. 

 

Icon in Post Title

ΠΡΟΣΘΕΣΤΕ ΕΙΚΟΝΑ ΠΡΙΝ ΤΟ ΤΙΤΛΟ ΤΗΣ ΑΝΑΡΤΗΣΗΣ

Νέοι bloggers γεια σας !!! Μπορείτε να βάλετε μια  εικόνα πριν τον τίτλο της κάθε ανάρτησής σας...δείτε τον κώδικα, και πώς θα τον εφαρμόσετε :

Icon in Post Title

Εικόνα στον τίτλο ανάρτησης

Φίλοι bloggers, απ” ότι βλέπετε και στον τίτλο, αυτής της ανάρτησης, μπορούμε στις αναρτήσεις του blogger, να βάζουμε και εικόνα μέσα στον τίτλο της ανάρτησης…Υπό προϋποθέσεις βέβαια, και να είναι σχεδιαστικά όμορφη, και συνεργάσιμη !!!
1η  προϋπόθεση να μην είναι μεγαλύτερος ο κώδικας από 100 χαρακτήρες…(Δεν είναι και απόλυτο αυτό, αφού με τον blogger ποτέ δεν ξέρεις) …Απ΄ότι βλέπετε το κολπάκι αυτό δουλεύει και στη πλατφόρμα WordPress…
2η  προϋπόθεση, να χωράει στο χώρο του τίτλου….(Για να είναι εμφανίσημο, και να μην είναι οπτικά κακόγουστο)