How to add a thumbnail image/photo gallery in Blogger

For those who would like to show pictures in an image gallery, here's a beautiful gallery made with JavaScript and CSS. This image gallery displays the available thumbnails either vertically or horizontally on top of the chosen picture, thus making it easier for you to pick different images on mouse click.

With the help of CSS, we can make the <img> element to display on same position with the rest of the thumbs and style the thumbnails as small blocks with a defined height and width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and will assign an "active" class name to the <li>.

Related: Image Slider with Mouse Hover Effect using CSS only

Demo blog

How to Add Image Gallery with Thumbnails to Blogger

Step 1. Log in to your Blogger account, select your blog and go to "Template", press the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

Step 3. Type the following tag inside the search box and hit Enter to find it:

</head>

Step 4. Now pick one of the styles below and copy the code below it:

Style 1 Demo

<style type='text/css'>
#image-gallery {display: none;}
  #jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}
  #jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}
  #jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}
  #jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption {background: rgba(0, 0, 0, 0.3);color: #fff;font-size: 16px;font-weight: bold;left: 3px;position: absolute;text-align: center;top: 103px;width: 490px;text-transform: uppercase;}
</style>

Style 2 Demo

<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption {background: rgba(0, 0, 0, 0.3);color: #fff;font-size: 16px;font-weight: bold;text-transform: uppercase;margin: 0 -17px;position: absolute;right: 0;text-align: center;top: 3px;width: 370px;}
</style>

Note: The display: none; for the first ID (#image-gallery) is to prevent images appear with their actual size before they go inside the gallery container.

In #jquery-gallery we have the width of the container for the thumbnails (200px), so that they display in two rows and for this we need to calculate the width of the thumbnail (80px) plus the margins between them.

The left declaration of #jquery-gallery li img is to move the larger thumbnail that shows on mouse click so that it doesn't overlap with the smaller thumbnails.

Step 5. Paste the code of the chosen style just above the </head> tag.

Step 6. Now above the same </head> tag, add this script:

<script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
document.getElementById('gallery-caption').innerHTML = this.title;
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>

Basically, what this script does is to check if there is any ID named "image-gallery" and get the different list items that may exist within it. These elements will be displayed as thumbnails and a function will decide what to do once they are clicked. So, each time we click on a thumbnail, the "active" class will be assigned and the thumbnail should be visible in the larger container.

Step 7. Finally, save the changes by clicking the "Save template" button.

And here's the HTML code providing a normal list with the image-gallery ID, enclosed within a DIV with a relative position in order to avoid side effects of other pre-existing positions.

Step 8. Paste the below HTML to where you want to display the gallery by going either to "Layout" and adding a new gadget (click on the "Add a gadget" link and choose "HTML/JavaScript" option), or inside a post/page in the HTML section.

<div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>
</ul>
</div>

Note: if elements on your page overlap with this gallery, you might need to add the height declaration after "position: relative;". The value of height depends on the size of your gallery.

Example:

<div style="position:relative; height: 500px;"> 

Change IMAGE-URL1 with the image URL. If you don't know how to get the address of an image, see this tutorial: How to Upload Images and Get the URL

In case you need to make the pictures clickable, add this HTML structure instead:

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>
</ul>
</div>

Again, here you need to replace the page-URL text with the URL of your page/post.

Update: To add captions, please include the lines in orange and then replace the "Caption" with the text that you want to appear on each picture:

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL5" /></a></li>
</ul>
<div id="gallery-caption"></div>
</div>

Save the widget or publish your page and you're done adding the thumbnail image / photo gallery in Blogger.

working with Fragments in android

Fragments are one of the most useful user interface components in android. Making of a very complex user interface made easy by using the fragments. We can easily categorize an android activity into separate modules using the fragment feature of android.
Ads by Google

---

---

 Why we use the fragment ?

We know that there are a lot of android devices with different screen resolutions are available on the market. So the making of an android app for a particular device or resolution is not practical. Fragments help us to solve this problem. We can categorize the UI of an activity using fragments. If the app open in a high resolution device then the detailed representation of the activity shown and if it is a standard definition device then the system shows only one or more fragment view of that activity.

You can implement the Fragments in two ways

1. Insert the Fragment directly in to the XML file of an activity.

2. Insert the Fragment programatically to an activity.

While working with Fragments make sure that you select the minimum sdk version as Android 3.0 (API : 11)

How to insert a Fragment directly into the XML file of an android activity ?

Create a new android application project in eclipse IDE.

Step 1: Right click the layout folder and create a new android layout xml file and name it as fragment_layout.

fragment_layout.xml

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent"   
5:    android:background="#657578"  
6:    >  
7:    <TextView  
8:      android:id="@+id/textView1"  
9:      android:layout_width="wrap_content"  
10:      android:layout_height="wrap_content"  
11:      android:layout_alignParentTop="true"  
12:      android:layout_centerHorizontal="true"  
13:      android:layout_marginTop="141dp"  
14:      android:text="Welcome to first fragment"  
15:      android:textAppearance="?android:attr/textAppearanceLarge" />  
16:  </RelativeLayout>  

Step 2 : Right click the package and create a new java class with name FirstFragment. Extends that class with Fragment and make the override method onCreateView(). Now inflate the Fragment layout through the inflate() method and finally return view of the fragment.

FirstFragment.java

1:  package com.fragment1;  
2:  import android.app.Fragment;  
3:  import android.os.Bundle;  
4:  import android.view.LayoutInflater;  
5:  import android.view.View;  
6:  import android.view.ViewGroup;  
7:  public class FirstFragment extends Fragment {  
8:       @Override  
9:       public View onCreateView(LayoutInflater inflater, ViewGroup container,  
10:                 Bundle savedInstanceState) {  
11:            // TODO Auto-generated method stub  
12:            View v;  
13:            v = inflater.inflate(R.layout.fragment_layout, container,false);  
14:            return v;  
15:       }  
16:  }  

Step 3: Add the Fragment to the activity. In that Fragment the android:name indicates the Fragment class file.   

1:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2:    xmlns:tools="http://schemas.android.com/tools"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent"  
5:    android:paddingBottom="@dimen/activity_vertical_margin"  
6:    android:paddingLeft="@dimen/activity_horizontal_margin"  
7:    android:paddingRight="@dimen/activity_horizontal_margin"  
8:    android:paddingTop="@dimen/activity_vertical_margin"  
9:    tools:context=".MainActivity"  
10:    android:background="#E0DDBD"  
11:     >  
12:    <TextView  
13:      android:id="@+id/textView1"  
14:      android:layout_width="wrap_content"  
15:      android:layout_height="wrap_content"  
16:      android:layout_alignParentLeft="true"  
17:      android:layout_alignParentTop="true"  
18:      android:layout_marginLeft="70dp"  
19:      android:text="Main Activity"  
20:      android:textAppearance="?android:attr/textAppearanceLarge" />  
21:    <fragment  
22:      android:id="@+id/fragment1"  
23:      android:name="com.fragment1.FirstFragment"  
24:      android:layout_width="wrap_content"  
25:      android:layout_height="match_parent"  
26:      android:layout_below="@+id/textView1"  
27:      android:layout_centerHorizontal="true"  
28:      android:layout_marginTop="31dp" />  
29:  </RelativeLayout>  

Watch video of this topic

How to add Fragment Programatically to an Activity ?
Create a new android application project in eclipse. Create two fragments with layout names fragment_one and fragment_two and their corresponding  class names are FragmentOne and FragmentTwo.
Add a button on the activity_main.xml file. Also don't forget to add an id for activity_mail.xml file.

1:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2:    xmlns:tools="http://schemas.android.com/tools"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent"  
5:    android:paddingBottom="@dimen/activity_vertical_margin"  
6:    android:paddingLeft="@dimen/activity_horizontal_margin"  
7:    android:paddingRight="@dimen/activity_horizontal_margin"  
8:    android:paddingTop="@dimen/activity_vertical_margin"  
9:    tools:context=".MainActivity"   
10:    android:id="@+id/main_id"  
11:    >  
12:    <TextView  
13:      android:id="@+id/textView1"  
14:      android:layout_width="wrap_content"  
15:      android:layout_height="wrap_content"  
16:      android:layout_alignParentTop="true"  
17:      android:layout_centerHorizontal="true"  
18:      android:text="Main Activity"  
19:      android:textAppearance="?android:attr/textAppearanceLarge" />  
20:    <Button  
21:      android:id="@+id/b1"  
22:      android:layout_width="wrap_content"  
23:      android:layout_height="wrap_content"  
24:      android:layout_below="@+id/textView1"  
25:      android:layout_centerHorizontal="true"  
26:      android:text="Show First Fragment" />  
27:  </RelativeLayout>  

For connecting a fragment to an activity you need to get an object of API FragmentTransaction. For getting the FragmentTransaction, you can use the object of FragmentManager class. add() method is used to add the fragment to the activity. You need to commit a transaction to take effect.   

1:  FragmentManager fm = getFragmentManager();  
2:  FragmentTransaction ft = fm.beginTransaction();  
3:  FragmentOne f1 = new FragmentOne();  
4:  ft.add(R.id.main_id, f1);  
5:  ft.commit();  

Add a button on the first fragment layout for open the second fragment  and don't forget to add an id for the first fragment layout.

fragment_one.xml

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent"  
5:    android:id="@+id/fr1_id"  
6:     >  
7:    <TextView  
8:      android:id="@+id/textView1"  
9:      android:layout_width="wrap_content"  
10:      android:layout_height="wrap_content"  
11:      android:layout_alignParentLeft="true"  
12:      android:layout_alignParentTop="true"  
13:      android:layout_marginLeft="91dp"  
14:      android:layout_marginTop="137dp"  
15:      android:text="First Fragment"  
16:      android:textAppearance="?android:attr/textAppearanceLarge" />  
17:    <Button  
18:      android:id="@+id/b2"  
19:      android:layout_width="wrap_content"  
20:      android:layout_height="wrap_content"  
21:      android:layout_below="@+id/textView1"  
22:      android:layout_centerHorizontal="true"  
23:      android:text="Show second Fragment" />  
24:  </RelativeLayout>  

MainActivity.java

1:  import android.app.Activity;  
2:  import android.app.FragmentManager;  
3:  import android.app.FragmentTransaction;  
4:  import android.os.Bundle;  
5:  import android.view.Menu;  
6:  import android.view.View;  
7:  import android.view.View.OnClickListener;  
8:  import android.widget.Button;  
9:  import android.widget.Toast;  
10:  public class MainActivity extends Activity {  
11:       Button bn;  
12:       @Override  
13:       protected void onCreate(Bundle savedInstanceState) {  
14:            super.onCreate(savedInstanceState);  
15:            setContentView(R.layout.activity_main);  
16:            bn = (Button)findViewById(R.id.b1);  
17:            bn.setOnClickListener(new OnClickListener() {  
18:                 @Override  
19:                 public void onClick(View v) {  
20:                      // TODO Auto-generated method stub  
21:                      FragmentManager fm = getFragmentManager();  
22:                      FragmentTransaction ft = fm.beginTransaction();  
23:                      FragmentOne f1 = new FragmentOne();  
24:                      ft.add(R.id.main_id, f1);  
25:                      ft.commit();  
26:                 }  
27:            });  
28:       }  
29:       @Override  
30:       public boolean onCreateOptionsMenu(Menu menu) {  
31:            // Inflate the menu; this adds items to the action bar if it is present.  
32:            getMenuInflater().inflate(R.menu.main, menu);  
33:            return true;  
34:       }  
35:  }  

Add the second fragment into the first fragment.

FragmentOne.java

1:  import android.app.FragmentTransaction;  
2:  import android.os.Bundle;  
3:  import android.view.LayoutInflater;  
4:  import android.view.View;  
5:  import android.view.View.OnClickListener;  
6:  import android.view.ViewGroup;  
7:  import android.widget.Button;  
8:  public class FragmentOne extends Fragment  
9:  {  
10:       Button bn;  
11:       @Override  
12:       public View onCreateView(LayoutInflater inflater, ViewGroup container,  
13:                 Bundle savedInstanceState) {  
14:            // TODO Auto-generated method stub  
15:            View v;  
16:            v = inflater.inflate(R.layout.fragment_one, container,false);  
17:            bn = (Button)v.findViewById(R.id.b2);  
18:            bn.setOnClickListener(new OnClickListener() {  
19:                 @Override  
20:                 public void onClick(View v) {  
21:                      // TODO Auto-generated method stub  
22:                 FragmentManager fm = getFragmentManager();  
23:                 FragmentTransaction ft = fm.beginTransaction();  
24:                 FragmentTwo f2 = new FragmentTwo();  
25:                 ft.add(R.id.fr1_id, f2);  
26:                 ft.commit();  
27:                 }  
28:            });  
29:            return v;  
30:       }  
31:  }  

FragmentTwo.java

1:  package com.fragment2;  
2:  import android.app.Fragment;  
3:  import android.os.Bundle;  
4:  import android.view.LayoutInflater;  
5:  import android.view.View;  
6:  import android.view.ViewGroup;  
7:  public class FragmentTwo extends Fragment{  
8:       @Override  
9:       public View onCreateView(LayoutInflater inflater, ViewGroup container,  
10:                 Bundle savedInstanceState) {  
11:            View v;  
12:            v = inflater.inflate(R.layout.fragment_two, container,false);  
13:            return v;  
14:            }  
15:  }  

fragment_two.xml

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent" >  
5:    <TextView  
6:      android:id="@+id/textView1"  
7:      android:layout_width="wrap_content"  
8:      android:layout_height="wrap_content"  
9:      android:layout_centerHorizontal="true"  
10:      android:layout_centerVertical="true"  
11:      android:text="Welcome to second fragment"  
12:      android:textAppearance="?android:attr/textAppearanceLarge" />  
13:  </RelativeLayout>  

Watch Video of this topic

Click Here to watch part 2 of this topic

Code Combat: Open Source Javascript Tutorial Gamification (In A Good Way)

youtube.com/watch?v=dCOHjERswGw

Code Combat is a javascript programming learning IDE wrapped in a delicious cute RPG/2D RTS packaging that runs in the browser without any plugins. They recently announced their open source/free art release.

The current set of Code Combat tutorials starts with directional movement and activation of pre-programmed behavior, continues with coordinate movement and targeting and conditional behavior and continues towards prediction calculations.

Editor GUI

youtube.com/watch?v=H5u5ga5dHm8

There is an editor, officially described as "broken". I can confirm that the text editor was slow when I tried using it. :)

All in all, a very exciting project. I have noticed a few possible drawbacks so far:

• It's not yet clear which parts will not remain proprietary. It looks like the excellent humor (writing) unfortunately will do so (legal page).
• The music tends to be too exciting to code to.
• There's a CLA requirement for contributing.

What do you think? Persuaded to work on a HTML5 game yourself perhaps, seeing that this performs okay? :)

How to result co-citation into valuable backlink?

What yields co-citation for SEO?

There is much stuff written about the role of co-citation for SEO. To explain co-citation briefly: if site A links to sites B and C, then Google means sites B and C are somehow related. But how SEO makes a valuable backlink Profit with co-citation?
Read full article »

Best HTACCESS File for Wordpress Website

HTACCESS is one of the most important files of a website. If its coded correctly then it can improve the load time of your website to the best possible limit. But if its coded incorrectly then you will keep messing with other PHP and HTML code, and your website speed will not improve. Once you have coded HTACCESS correctly you will also make it better according to SEO point of view.

Best HTACCESS for Wordpress Website

However this is a blogger blog but i am providing tips for a wordpress website. just because this thing will help a number of people struggling with their Wordpress website. If you are aware of HTACCESS file then you must know its importance as well.
Below we will provide some coding for HTACCESS and also explain its use.

1) Add Expires : It will add a expiry tag to each type of file that the website loads while loading it in the browser of a user. If the same user access the same website again or go through the other pages of your website then the same content like images, logo, scripts, style sheets will not load again if expiry tags are added to it. Thus it improves the loading time of a website.

<IfModule mod_rewrite.c>
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/html "access plus 5 minute"
</IfModule>

2)  Pagespeed Module for Apache Server Based Sites

<IfModule pagespeed_module>
    ModPagespeed on
    # using commands,filters etc
</IfModule>

3) ETag : Entity Tag tells if the content available in browser is same as file on the server. Thus it saves loading time of same content again. So it should be handled properly.

Header unset ETag
FileETag None

4) DEFLATE : If you know the zip files then you will understand it. Using DEFLATE make your website server send the zip version of files from server to browser which reduces the loading time a lot.

<IfModule mod_deflate.c>
# Insert filters
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary

<FilesMatch ".(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

5) Multiple Connections: This will help your website in creating multiple connection with browser at the same time. Thus your wordpress website will improve.

<ifModule mod_headers.c>
 Header set Connection keep-alive
 <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary: Accept-Encoding
 </FilesMatch>
</ifModule>

Note: Before implementing these codes in your wordpress website HTACCESS code, make you that you have taken backup of your original HTACCESS. It will help you if anything goes wrong. I will suggest you to implement these changes one by one. Don't add all of the above codes at onces. Instead apply them one by one and also keep checking if your website is working or not. If anything goes wrong then revert the changes and add the next code.

Usually i use GTMETRIX to check performance of my websites. You can also use it as its a free tool. Check you website rating using it before applying the changes and then after applying the changes.

You are most welcome to add your comments about HTACCESS. Any suggestions are most welcome.