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

ΕΜΦΑΝΙΣΗ ΑΝΑΡΤΗΣΕΩΝ ΣΕ GALLERY STYLE

ΠΩΣ ΝΑ ΕΜΦΑΝΙΖΟΝΤΑΙ ΟΙ ΑΝΑΡΤΗΣΕΙΣ ΤΟΥ BLOGGER ΣΕ GALLERY STYLE

Με την προσθήκη του παρακάτω κώδικα μπορείτε να αλλάξετε το στυλ εμφάνισης των αναρτήσεων του blogger από list view σε grid view ή αλλιώς σε gallery style. Ο κώδικας αυτός μπαίνει μέσα στο πρότυπο πρίν την ετικέτα </head> Ρυθμίστε το πλάτος width:300px; ανάλογα με το πόσο είναι το συνολικό πλάτος ανάρτησης που διαθέτετε και το πόσες αναρτήσεις θέλετε να εμφανίζονται ανα σειρά. Μπορούν να εμφανίζονται από 2 μέχρι 5 ανάλογα πάντα με το πλάτος που διαθέτετε. 

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

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. 

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  

Photo Gallery No 2

ΠΩΣ ΒΑΖΩ PHOTO GALLERY No 2

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


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

Video Gallery

ΠΩΣ ΒΑΖΩ VIDEO GALLERY

ΠΩΣ ΒΑΖΩ VIDEO GALLERY

Πηγαίνουμε στο youtube, διαλέγουμε ένα video που μας αρέσει, πατάμε κάτω από το video κοινή χρήση και μετά ένσωμάτωση. Παίρνουμε τον κώδικα που μας δίνει αφού πρώτα προσαρμόσουμε τις διαστάσεις του video μας για να γεμίζουν το πλάτος της σελίδας μας. Κάνουμε το ίδιο και για τα άλλα videos που θέλουμε να βάλουμε στη σελίδα μας. Παρακάτω έχω επιλέξει 8 videos με διαστάσεις 240Χ180 τα οποία γεμίζουν την σελίδα μου με 2 σειρές των 4 videos η κάθε μία. Εσείς αναλόγως το πλάτος της σελίδας σας θα αυξομειώσετε τις διαστάσεις των videos σας και θα επικολλήσετε τους κώδικες των videos στην σελίδα σας πατώντας το κουμπί HTML στον editor της σελίδας ή της ανάρτησης για να δεχτεί τον κώδικα. Μετά πατάτε δημοσίευση και είστε έτοιμοι.

- See more at: http://gadgetsforblogs1.blogspot.gr/2015/01/video-gallery.html#more

ΠΩΣ ΒΑΖΩ VIDEO GALLERY

 

ΠΩΣ ΒΑΖΩ VIDEO GALLERY

Πηγαίνουμε στο youtube, διαλέγουμε ένα video που μας αρέσει, πατάμε κάτω από το video κοινή χρήση και μετά ένσωμάτωση. Παίρνουμε τον κώδικα που μας δίνει αφού πρώτα προσαρμόσουμε τις διαστάσεις του video μας για να γεμίζουν το πλάτος της σελίδας μας. Κάνουμε το ίδιο και για τα άλλα videos που θέλουμε να βάλουμε στη σελίδα μας. Παρακάτω έχω επιλέξει 8 videos με διαστάσεις 240Χ180 τα οποία γεμίζουν την σελίδα μου με 2 σειρές των 4 videos η κάθε μία. Εσείς αναλόγως το πλάτος της σελίδας σας θα αυξομειώσετε τις διαστάσεις των videos σας και θα επικολλήσετε τους κώδικες των videos στην σελίδα σας πατώντας το κουμπί HTML στον editor της σελίδας ή της ανάρτησης για να δεχτεί τον κώδικα. Μετά πατάτε δημοσίευση και είστε έτοιμοι.

Photo Gallery w Text

ΠΩΣ ΒΑΖΩ PHOTO GALLERY No 3

ΠΩΣ ΒΑΖΩ PHOTO GALLERY ΜΕ ΠΕΡΙΓΡΑΦΗ No 3

Ανοίξτε μία σελίδα στο blogger και πατήστε html. Αντιγράψτε αυτόν τον κώδικα αλλάζοντας τα γαλάζια και πράσινα links των φωτοφραφιών με τα δικά σας και τις αντίστοιχες περιγραφές με τα κίτρινα γράμματα με τις δικές σας περιγραφές. Μπορείτε να αλλάξετε τις διαστάσεις της μικρογραφίας των φωτογραφιών για να χωρούν στο πλάτος της σελίδας σας αλλάζοντας το width="180" & το height="113". Μπορείτε να αλλάξτε και τις διαστάσεις του παραθύρου μεγένθησης της φωτογραφίας αλλάζοντας το μώβ νούμερο που βρίσκεται εντός του γαλάζιου link το οποίο πρέπει να είναι από το picasa ή το google+.
Εννοείται ότι ο κώδικας από το <table> εώς το </table> επαναλαμβάνεται για κάθε νέα γραμμή με 5 φωτογραφίες ή λιγότερες αν αλλάξετε τις διαστάσεις των μικρογραφιών. Δημοσιεύτε την σελίδα και είστε έτοιμοι.

Photo Gallery

ΠΩΣ ΒΑΖΩ PHOTO GALLERY

Ανοίξτε μία σελίδα στο blogger και πατήστε html. Αντιγράψτε αυτόν τον κώδικα αλλάζοντας τα links των φωτοφραφιών με τα δικά σας και τους αντίστιχους τίτλους με τα μώβ γράμματα με τους δικούς σας τίτλους. Μπορείτε να αλλάξτε και τις διαστάσεις του παραθύρου μεγένθησης της φωτογραφίας καθώς και τις διαστάσεις της μικρογραφίας των φωτογραφιών να χωρούν στο πλάτος της σελίδας σας. Δημοσιεύτε την σελίδα και είστε έτοιμοι.

<left>

<a onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

style="opacity:0.8;filter:alpha(opacity=80)" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" href="https://lh3.googleusercontent.com/-_xe0RxHk5n4/UpPPyzkgk4I/AAAAAAAAKl0/1lUWChytIN8/s1152/ALONISOS-01.jpg" title='ALONISOS-01' target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=800, height=500, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;">

<img border="0" alt="ALONISOS-01" style="width: 180px; height: 113px;" src="https://lh3.googleusercontent.com/-_xe0RxHk5n4/UpPPyzkgk4I/AAAAAAAAKl0/1lUWChytIN8/s1152/ALONISOS-01.jpg"/></a>

<a onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

style="opacity:0.8;filter:alpha(opacity=80)" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" href="https://lh4.googleusercontent.com/-ODPrrWQ77P0/UpPP2nsWnvI/AAAAAAAAKmE/6uPeiuNa55A/s1152/ALONISOS-04.jpg"  title='ALONISOS-04' target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=800, height=500, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;">

<img border="0" alt="ALONISOS-04" style="width: 180px; height: 113px;" src="https://lh4.googleusercontent.com/-ODPrrWQ77P0/UpPP2nsWnvI/AAAAAAAAKmE/6uPeiuNa55A/s1152/ALONISOS-04.jpg"/></a>

<a onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

style="opacity:0.8;filter:alpha(opacity=80)" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" href="https://lh5.googleusercontent.com/-LWZDUGrbObs/UhTC-xG5p9I/AAAAAAAAItQ/v4eb20ECbcY/s1152/ZAKYNTHOS-05.jpg" target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=800, height=500, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;">

<img border="0" alt="ZAKYNTHOS-05" style="width: 180px; height: 113px;" src="https://lh5.googleusercontent.com/-LWZDUGrbObs/UhTC-xG5p9I/AAAAAAAAItQ/v4eb20ECbcY/s1152/ZAKYNTHOS-05.jpg"/></a></left> 

- See more at: http://gadgetsforblogs1.blogspot.gr/2015/01/photo-gallery.html#more