Thumbnail photo gallery

HOW TO Create a thumbnail photo gallery in Blogger

So, here we go! I'm starting this off with a tutorial on how to make thumbnail photo galleries on your blog, something I use a lot, and is fairly easy to do.

Image Gallery Blogger Tutorial

 Blogger Image Gallery Tutorial

 Do you want to create your own image gallery? You are in luck because today I am going to show you the tutorial on how to do this yourself. (Please note I am using the newer blogger interface. You can do the steps pretty much the same on the old interface, it will just look a little different.)

Tiny jQuery Circleslider for Blogger

Tiny jQuery Circleslider for Blogger

Tiny jQuery Circleslider for Blogger

http://helplogger.blogspot.gr/2013/10/how-to-add-tiny-jquery-circleslider-to.html

Create a jQuery Facebook Photo Gallery

How to Create a jQuery Facebook Photo Gallery in Blogger

Facebook is turning out to be the number one source for quality targeted traffic. This is the reason why webmasters are concentrated more towards connecting  their website with different Facebook Plugins and widgets. We have already covered How to Add Facebook comments, Facebook Recommendation box and Facebook Fan Box in Blogger. Recently, one of our visitors asked us How to Create a JQuery Facebook Photo Gallery in Blogger? Today in this article we will be showing you  How to Create a jQuery Facebook Photo Gallery in Blogger.

What is jQuery Facebook Photo Gallery For Blogger?

This plugin enables you to view and import your all Facebook Galleries and images to your website. It imports your all public albums, but it works only with Facebook Page galleries. It also gives you the flexibility and the freedom to exclude any album that you like. The whole system works on jQuery, so you get enough options to customize it they way you like. In case, you want to see this photo gallery in live action check out the following screenshot.

On the top of that, you can also view the photos within your site through Lightbox functionality. You can browse different albums and can go back to the place from where you started.

How to create jQuery Facebook Photo Gallery in Blogger?

Installing Facebook Gallery:
The first thing you need to do is to login into your Google account. After logging in go to Blogger.com >> Your blog >> Template >> Edit HTML and search for the ending </head> Tag. After finding the head tag just above it paste the following piece of code.

<!-- MyBloggrLab Jquery Facebook Gallery Plugin -->
<link media="all" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet" type="text/css" />

<link media="all" href="https://googledrive.com/host/0B-vz7n1QSdEfWE1Wbmxtc2FYN1k" rel="stylesheet" type="text/css" />
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfRkNxSXVfYjlRU3c"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUDFxcEpsM1ZSTjQ"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfaHU3dTFPallrU1E"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUFhSTlNaaU5tTkE"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfeVlQNnBDZGhtXzQ"></script>

After adding the above code in your template, just press the “Save Template” button and proceed to the next step.

Creating Facebook Gallery:
Now you need to find the ID of your Facebook Page profile (remember this only works for pages not profile). To find your Facebook Page ID go to http://findmyfacebookid.com/ enter your Page URL i.e. https://www.facebook.com/Templateism and hit “Lookup Numeric ID” to get a numeric Id of your page.

Now once you find out your ID, it's time to create a gallery. Now it depends on you where you would like to see the photo gallery either in your post or pages. If you like to create a page then, go to Blogger >> Your site >> Pages >> add a new page >> Give your page a title sometime like “Facebook Galleries”. After naming your page, simply paste the following code there. (Do not forget to replace Your-Page-ID with the numeric ID that you got from the previous step.

<script>
    $(document).ready(function ($) {
        $('#FB_Album_Frame').FB_Album({
            facebookID: 'Your-Page-ID',
            responsiveGallery: false,
            fixedWidth: 980
        });
    });
</script>

<div id="FB_Album_Frame"></div>

Congratulations: Once everything is done, publish it. You have successfully created a Facebook jQuery Photo Gallery in Blogger. Now go and check if it is working fine.

We hope this tutorial has helped you in learning How to Create a jQuery Facebook Photo Gallery in Blogger. This plugin would certainly help those who are really crazy about facebook and photo galleries.

http://www.mybloggerlab.com/2013/08/how-to-create-jquery-facebook-photo-gallery-in-blogger.html

Featured Images Slideshow-Slider

Featured Images Slideshow+Slider

UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........

 

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).

Photoshop Alternatives for Photos

8 Awesome Photoshop Alternatives

Everybody is looking through the best photo editing alternatives to photoshop.

Anyone who uses a computer regularly sometimes needs to edit at least one picture. The problem that arises in this case is that there are a multitude of image editing software, according to users' needs and budget. That is why I made ​​this list of the best programs covering a wide range of needs. Because I do not want to leave out any interesting program, I want to mention both the free and commercial ones, giving a description of each of course in which category it belongs.

Mouseover Effect For Images

Simple Mouseover Effect Code For Images

DEMO: Hover mouse over the image!

Featured Content Slider

17+ Featured Content Slider Using jQuery

You should already know about JQuery Featured Content Slider.Today we will see how to add 17+ jQuery featured content sliders / slideshows for your blog or website.Almost all bloggers use the contents, which included slider.Contents are a great way to show a lot of content in a smaller area of ​​a web page or a blog. Automatic sliding doors are dynamic content in many popular websites on the web.This is a great technique to represent different types of content in a limited space and a good way to involve the user.You have probably noticed that a lot of websites recently a working area with content that slides or changes in any way.

3D Icons - Photos in Post

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

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

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

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

Post Large Images Resizing

How to post large images in Blogger (Multiple Image Sizes in Blogger)

As you might already know, Blogger is integrated with Picasa and  all the images that you upload to Blogger automatically becomes a part of your Picasa account.Picasa has got 1 GB free Storage.So if your Picasa Account exceeds this 1 GB limit, you wont be able to post more images to your blog.(In that case you will have to buy additional Storage).
Each of your Blogs will be having a separate album in your Picasa Account. You can check it out at http://picasaweb.google.com  The visibility of these albums will be set to “Anyone With Link” and hence these albums won’t be publically visible to anyone.If you delete any of these images from Picasa, they will disappear from your blog as well. 
Images uploaded to Picasa have some special properties which might come in handy for you. You can resize or crop these images so easily. This post talks specifically about landscape images. 

Change Photo Size in Blog

Πως να αλλαξουμε το μεγεθος των εικονων αυτοματα σε ολο το blog μας

Χρησιμοποιωντας το ιδιο μεγεθος εικονων σε ολες τις αναρτησεις μας τοτε εχουμε ενα blog πιο ομορφο πιο μαζεμενο.
  Οι αναρτησεις μας θα ειναι πιο ομορφες και ετσι ο επισκεπτης θα  θελει να ξαναερθει. Αν εχουμε πολυ μεγαλες εικονες τοτε μερικες φορες υπαρχει περιπτωση να ξεπερνανε τα ορια του blog μας και να φαινεται ασχημο.
   Αλλος ενας λογος που θα επρεπε ολες οι εικονες να ειναι ιδιες και μικρες ειναι η ταχυτητα του blog μας . Αν εχουμε μικρες εικονες τοτε το blog  μας θα αλλαζει πιο γρηγορα σελιδες και θα φορτωνει πιο γρηγορα

Ακομα και αυτο βοηθαει στο Seo γιατι το robot (εφοσον οι εικονες ειναι ολες το ιδιο μεγεθος) θα καταλαβαινει αμεσως  οτι ειναι εικονα και θα μπορει να τις καταχωρησει πιο γρηγορα.

Image Slider

JavaScript Image Slider For Blogger

Today I am sharing another cool slider which works with JavaScript and no jQuery and flash is needed.This slider contains a ribbon at the left top corner of slider and it is named as "What's Hot" also it contains a beautiful slice effect which slices image into 12 parts,these main features increase beauty of the slider.Another great feature of this slider is it is highly customizable so that to edit it as you wish and which will perfectly suits to your blog.This slider is created by menucool.com and I have created a bloggerized version of this slider to works perfect with blogger blog.See the demo of the slider by clicking on the demo button below,

Live Slider Demo

Simple Image Gallery SlideShow

  Simple Image Gallery With Easy Customization Options

Image gallerys,slideshows are the best ways to show off your photos,featured posts,images and any other material as you wish.Previously we published a tutorial about adding nivo slider to blogger but many of you gets the problems while adding it to blogger blog.That's why I considered to share a fully and easily customizable image slider/gallery.This is a simple image slider with lots of customizing options such as dimensions,play,pause,interval between next and previous slide and some other options.The script of this gallery is taken from dynamicdrive and I have made some changes so that you can easily add it to your blog.The installation is one step installation,you just have copy and paste the code inside content section of HTML/JavaScript widget i.e you can add it as HTML/JavaScript widget.Press the red button below to see live demo of the slider.

Live Slider Demo  

Google Drive Space

3. Ανάρτηση

Φωτογραφίες στο Blog (Πρόβλημα χώρου στο Blog)

Εάν δεν μας φτάσουν τα 1GB, για το/τα blogs μπορούμε να σηκώσουμε τις φωτο, ή ότι άλλο μας πιάνει χώρο στο Blog, στο Google Drive το οποίο μας παρέχει χώρο 15GB.


https://drive.google.com/drive/my-drive

Rollover image

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

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

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

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

 



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

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

Interactive Diadrastiko Gadget

Διαδραστικό Gadget

 

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

 
<div class="container">
    <div class="labels">
        <div id="label1" class="label" ><a href="link1">Ζάντες</a>
            <span />
        </span></div>
        <div id="label2" class="label"><a href="link1">Φώτα</a>
            <span />
        </span></div>
        <div id="label3" class="label" ><a href="link1">Πινακίδα</a>
            <span />
        </span></div>
        <div id="label4" class="label" ><a href="link1">Σήμα</a>
            <span />
        </span></div>
        <div id="label5" class="label" ><a href="link1">Πόρτα</a>
            <span />
        </span></div>
        <div id="label6" class="label" ><a href=""link1">Καθρέφτης</a>
            <span />
        </span></div>
    </div>
   
    </div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>


<style>
.container {
    background: url("http://oi49.tinypic.com/2h51kk4.jpg") no-repeat scroll center top transparent;
    color: #000000;
    height: 535px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 1030px;
}

.dialog {
    background-color: rgba(163, 154, 77, 0.9);
    color: #FFFFFF;
    display: none;
    height: 140px;
    left: 343px;
    line-height: 24px;
    padding: 100px 30px;
    position: absolute;
    text-align: center;
    top: 97px;
    width: 280px;
    z-index: 10;

    -moz-border-radius: 170px;
    -ms-border-radius: 170px;
    -o-border-radius: 170px;
    -webkit-border-radius: 170px;
    border-radius: 170px;
}
.dialog .close {
    color: black;
    background-color: #65683b;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    position: absolute;
    right: 10px;
    top: 60px;
    width: 36px;

    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}
.labels p {
    display: none;
}
.labels div {
    background-color: rgba(203, 189, 58, 0.8);
    color: #FFFFFF;
    display: none;
    height: 50px;
    padding: 30px 0 0;
    position: absolute !important;
    text-align: center;
    text-decoration: none;
    width: 80px;

    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
}
.labels > div {
    background-color: rgba(203, 189, 58, 0.8);

    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}
.labels div:hover {
    background-color: rgba(128, 128, 128, 0.8);
}
.labels div span {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid rgba(203, 189, 58, 0.8);
    bottom: -14px;
    height: 0;
    left: 30px;
    position: absolute;
    width: 0;

    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}
.labels div:hover span {
    border-top: 15px solid rgba(128, 128, 128, 0.8);
}
#label1 {
    left: 720px;
    top: 181px;
}
#label2 {
    left: 495px;
    top: 183px;
}
#label3 {
    left: 165px;
    top: 260px;
}
#label4 {
    left: 270px;
    top: 178px;
}
#label5 {
    left: 845px;
    top: 85px;
}
#label6 {
    left: 239px;
    top: 50px;
}
</style>


<script>

jQuery(function(){
    // initialize of labels
    $('.labels div#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
        $('.labels div#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
            $('.labels div#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                $('.labels div#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                    $('.labels div#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                        $('.labels div#label6').fadeIn(100).effect('bounce', { times:3 }, 300);
                    });
                });
            });
        });
    });

    // dialog close
    $('.dialog .close').click(function() {
        $(this).parent().fadeOut(500);
        return false;
    });

    // display dialog on click by labels
    $('.labels div').click(function() {
        $('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
        return false;
    });

    // close dialog on click outside
    $('.container').click(function() {
        $('.dialog').fadeOut(500);
    });
});
</script>

Delete Photo From Blog

ΔΙΑΓΡΑΦΗ ΦΩΤΟ ΑΠΟ ΤΟ BLOG

Εάν θέλουμε να διαγράψουμε μια φωτογραφία που ανεβάσαμε στο blog.

1. Σε μια σελίδα κάνουμε εισαγωγή εικόνας
2. Επιλέγουμε "Από αυτό το Ιστολόγιο"
    Εκεί στο περιθώριο πάνω μας εμφανίζει τον σύνδεσμο "Λευκώματα ιστού Picasa" που ανοίγει τις φωτό μας στο Picasa.
https://picasaweb.google.com/home

3. Επιλέγουμε το blog μας, και εκεί βρίσκονται όλες μας οι φωτό στο blog.
π.χ. https://picasaweb.google.com/111364522451147226835/TTravellerThomasgrm
 
3. Επιλέγουμε την φωτό που θέλουμε να διαγράψουμε.
    Στο νέο παράθυρο που μας ανοίγει την φωτό, πατάμε "Ενέργειες" και επιλέγουμε
"Διαγραφή αυτής της φωτογραφίας".

NIVO slider

Απλο nivo slider για τον blogger

Εδώ έχω ένα slider για τον blogger πολύ όμορφο και πρακτικό. Μπαίνει σα gadget πάνω από τις αναρτήσεις σας η στο sidebar μικραίνοντας το μέγεθος του, και αλλάζει τις εικόνες που θα του υποδείξετε. Είναι πολύ χρήσιμο ιδιαίτερα για blog συνταγών και όχι μόνο. Για να βάλετε τις δικές σας φωτογραφίες πρέπει να αλλάξετε τα link με τα κόκκινα γράμματα με τα λινκ των δικών σας φωτογραφιών.

Photo Gallery No 2

ΠΩΣ ΒΑΖΩ PHOTO GALLERY No 2

Ανοίξτε μία σελίδα στο blogger και πατήστε html. Αντιγράψτε τον παρακάτω κώδικα αλλάζοντας τα πράσινα και τα γαλάζια links των φωτοφραφιών με τα δικά σας και τους αντίστιχους τίτλους με τα μώβ γράμματα με τους δικούς σας τίτλους. Μπορείτε να αλλάξετε τις διαστάσεις της μικρογραφίας των φωτογραφιών να χωρούν στο πλάτος της σελίδας σας αλλάζοντας τα "width: 180px; height: 113px;".


Μπορείτε να αλλάξτε και τις διαστάσεις μεγένθυσης της φωτογραφίας αλλάζοντας το κίτρινο νούμερο που βρίσκεται εντός του πράσινου link της φωτογραφίας (αυτό ισχύει μονο όταν παίρνετε τα link των photos από picasa ή google+). Δημοσιεύτε την σελίδα και δείτε το αποτέλεσμα που πρέπει να είναι σαν αυτό ▼.