Home » Blogger Tutorials, Tricks and Hacks » Blogger Images / Photos Tricks
Spacer

Blogger Images / Photos Tricks

Blogger tutorials and tricks about images usage in blogger blogs, how to use, optimize and customize the images in blogger posts and templates.

Spacer
  • image
    46
     

    Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

    This image has no alt text

    Few weeks ago, i posted here a tutorial about Light Box ( Fancy box ) Widget For Blogger Images And Links ( click here )
    And we all mentioned that there are a lot of problems about this widget, refer to comments below the tutorial to know more.

    Today i’ll write a tutorial about adding Updated and fixed lightbox widget for blogger.
    And I WISH it’ll be easy and you’ll like it.

    What’s New About This Widget
    • First of all we add the widget code to our template,
    • You’ll be able to Link this widget to your single images in blogger.
    • You can use it to make photo gallery.
    • You can make Slide show with it.
    • You can add it to your links.
    How Is It Work
    • First of all we add the widget code to our template,
    • Then when we add an image to a new post we have to Link it to the widget by adding a tiny code to it by changing the post writing mode from compose to html don’t worry it’s easy, continue reading to figure it out
    Step 1

    GO to your blogger account dashboard and navigate to Layout >> Edit html and find the following code.

    </head>

    And Before it add the following code.

    <!--Code-By-AllBlogTools-->
<link href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/>
<!--Code-By-AllBlogTools-->

    Now we’ve add all require codes to the template, lets know how to use it.

    Step 2 – How To Use

    The way to make this widget works in your blog is very easy but you have to know what you do,
    What you have to do is : add a small code to the images code. and you can find the images code in post writing area when you change the mode from compose to edit html Please see the next image.

    Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

    What And How To Add :

    Step 2.1 – Add It To Single Image

    Go to blogger account, start writing your post in normal mode (compose)
    And once you add an image to your post, please change your mode to edit html, see previous imsge

    You’ll find the image code looks like the following.

    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

    What we’ll need to add for this code is the next part

    rel="lytebox"

    Example Code For Single Image : 

    <a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

    And you are done.

    Step 2.2 – How To Make Photo Group Gallery

    We’ll do the same as the previous step, but instead of adding Only

    rel="lytebox"

    we’ll have to add a name for this code so it’ll be 

    rel="lytebox[groub1]"

    when you add this code for more than one image, all the images will open as a group.

    Example Code For Images Album : 

    <a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
    Step 2.2 – How To Make A Slide Show

    Instead Of adding 

    rel="lytebox[groub1]"

    We’ll add 

    rel="lyteshow[groub1]"

    Example Code For Slide Show : 

    <a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>
    Demo

    Click here to see demo, special thanks for dolem

    Step 2.3 – And You Can Add It To Links

    The normal link code looks like this 

    <a href="http://www.google.com" title="Search Google"      rev="width: 400px; height: 300px;">Google Search</a>

    We’ll add the following Code to it.

    rel="lyteframe"

    So The Code will be

    <a rel="lyteframe" href="http://www.google.com" title="Search Google"      rev="width: 400px; height: 300px;">Google Search</a>

    And you can apply the same settings for slide show and photo groups for the links.

    Demo

    Click here to see demo, special thanks for dolem

  • image
    25
     

    Collection Of 46 Read More Buttons Free Download

    This image has no alt text

    After publishing one of my latest blogger tricks : Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment. A lot of people asked me about where to get “read more” buttons to use it with this trick, and today i’ll give you a collection of 46 buttons to download for free, This buttons are categorized in 2 sizes, Small buttons And Large Buttons.
    Here is The Details And Download Links, 

    Caution : Don't Link To The Download Links Directly, And Please Link To This Page It Self..
    Small Read More Buttons.

    Collection Of 46 Read More Buttons Free Download

    Download Here : Note: There is a file embedded within this post, please visit this post to download the file.

    Large Read More Buttons.

    Collection Of 46 Read More Buttons Free Download

    Download Here : Note: There is a file embedded within this post, please visit this post to download the file.

    I wish you all like it’ and please share it.

  • image
    11
     

    Light Box ( Fancy box ) Widget For Blogger Images And Links

    This image has no alt text

    We all add images and photos in our blogs. And as we all say A picture is worth a thousand words. 

    Caution : This hack not working perfectly with blogger. so please wait until we find the best solution for this hack.

    I Published Fixed Tutorial Here

    blogspot by default enables us to add and display images in our posts, But what if we want to make our blogs photos looks more professional and stylish ?
    The answer is to use this new amazing widget.
    Please see this demo and click on the images to see how it is working.
    It’s very easy to integrate this hack to your blog in only 1 step.

    Adding The Widget To Your Blog In One Step
    Caution : Please backup your template (Download Full Template) Before making any changes.

    Go to you blogger account, and then navigate to Layout >> Edit Html
    And Find the next Code.

    </head>

    And exactly before it add the following code.

    <link  href='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox.css'  media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script  src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.easing.1.3.js'  type='text/javascript'/>
<script  src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox-1.2.1.pack.js'  type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;a&quot;).fancybox();
});
</script>

    Now Please Click Save Template .
    And the widget will work now automatically with all your blog images.
    Once you or your blog visitors click on any image on your blog the image will be displayed in a nice and elegant frame.

    Customizations And Options

    If you want to go for better customization with this blogger hack then you can display you images in groups Display next And previous Buttons, or you can make your links opens in a new frame without leaving your blog.

    Display images in groups

    After adding an image to your blog post and before publishing it. change the editing more from Compose to Edit Html And now find the image code, it must be like the following code. 

    <a href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

    now we have to add rel Tag which put all images with the same rel tage in one group.
    For example. if you have 6 images in your post, and added the tag rel=”groub1″ for 3 of your images, and the tag rel=”groub2″ for the another 3 of images. once you click on an image, it’ll be displayed in a frame with next and previous buttons, this buttons will take you to the other 2 images with the same rel tag.
    Where to add the rel tag ?
    This is the image code before adding the rel tag

    <a href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

    And the next one is after adding the tag.

    <a rel="group1" href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>
    Adding Titles For Your Images

    To add a title we have to add a tag for the image code. so we’ll have to locate the image code, see the previous step to know how to locate it
    And now add the following tag. title=”Image Title”
    And the code should be like this 

    <a rel="group1" title="Image Title" href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>
    Apply It For Your Links

    While typing a post you may add a link, and if you switched the typing more from Compose to Edit Html you’ll see the links look like this 

    <a href="http://www.allblogtools.com/">Blogger Templates </a>

    and we should add the following tags to it.
    title=”Link Title ” class=”iframe”
    so it will be

    
<a href="http://www.allblogtools.com/" title="Link Title " class="iframe">Blogger Templates</a>

    thats it.

    Demo

    Click here to see demo. thanks for bloggergallery.com

  • image
    17
     

    Add Styles And Effects To Your Images In Blogger

    This image has no alt text

    many bloggers contacted me asking about an easy way to style blogger images, all posts images with out editing every single post.
    so today I’ll teach you a very easy way to style and add nice effects to your all your blog images at once and no need to edit every single image at your blog.

    we will learn today how to :

    • Add borders to our images.
    • Change borders style and color.
    • Increase and decrease the space between the image and the border.
    • Add any background to our images as a border.

    and you can see the final result for this tutorial at this demo heresee the image in the post

    Or see this image

    Add Styles And Effects To Your Images In Blogger

    So lets start

    Intro And Explanation

    we will style the blogspot images depending on the following css tage
    don’t worry, it’s very very easy and every body can do it

    • Border

      • there are a lot of border styles and we can change its color.

    • Padding

      • the space between the border and the image.

    • Background

      • the background between the image and the border and we can make it a picture like the demo or just a plain color.

    You can understand what this tags mean by checking the next image.

    Add Styles And Effects To Your Images In Blogger

    and here is the tags explained for the demo blog in the following image.

    Add Styles And Effects To Your Images In Blogger

    And Now, Lets do it.

    Step 1

    Now go to Blogger and log in, then navigate to : Layout >> Edit html >> and find the following code you can click ctrl+f to find it via your browser finder

    .post img {

    Now this is the opening tag for your images style and the symbol{ mean that this is the start of styles, you’ll need to find the style end symbol witch looks like this }
    And please delete all lines between the two symbols.
    so here is an example for the codes before and after deleting the style codes.
    note : the style lines are not the same for all templates, you may have more or less lines in your template.
    here is the example
    BEFORE

    .post img {
  border: 5px solid #F08C00;
  padding: 10px;
  }

    AFTER deleting the style lines

    
.post img {


  }

    Now you images have no any styles and if you clicked Save Template
    now , your images will be displayed with out any borders or styles. if you like to keep it like that ,ok just click Save Template .
    Or leave and go to step 2 if you want to add styles to your images.

    Step 2

    now you have your images style code like the following 

    
.post img {


  }

    now we have to start add style lines, and as we said before you can add all the following lines or only one or two, we have 3 lines to add.
    border line, padding line, and background line,
    so lets start.

    Adding Borders To Your Images.

    Add the next line between opening and closing symbols 

    border: 5px solid #F08C00;

    so your code should looks like this 

    
.post img {

border: 5px solid #F08C00;

}

    if you saved your template now you’ll have the following style for your images

    Add favicon to blogger

    This is image with 5px width orange border
    and you can change the following parts in the previous line to give it your favorite style.

     5px

    You can change number 5 to increase or decrease the width of the border

    solid

    This word control the type of your border
    And you can change this to any one of the following values

    solid

    double

    groove

    dotted

    dashed

    inset

    outset

    ridge

    hidden

    F08C00

    this is will change your border color, and you can get your favorite color code from our hex / Html color code generator here.
    now we added a border for your images style, you can click Save Template
    Or continue to the next step

    Adding Padding To Your Images.

    padding will add a space between your border and your image.
    Add the following line to your code

    padding: 10px;

    You can change this number 10 for example to 7 or 15 to decrease or increase the space between your image and border.
    now your code should looks like this 

    
.post img {

border: 5px solid #F08C00;

padding: 10px;

}

    and your images will look like this:

    Add favicon to blogger

    This is image with 5px width orange border and 10px padding
    now we added a border and padding for your images style, you can click Save Template
    Or continue to the next step

    Adding Back Ground To Your Images As Border.

    To make this effect active you must apply the previous step : add padding.

    Now add the following line to your code

    background: url(Image Location);

    and please change Image Locationto your favorite image url,
    Recommended : search Google for pattern.

    Now you should have your code like this.

    .post img {

    border: 5px solid #F08C00;

    padding: 10px;

    background: url(Http://www.host.com/image.gif);

    }

    And your image should look like this

    Add favicon to blogger

    This is image with 5px width orange border , 10px padding and with this image as back ground
    Now Click Save Template And go check your Blog,

    I wish you understand and love this tutorial and please don’t hesitate to leave your comment for support and feedback. to get more tricks and latest updates please subscript to our feeds or follow us on twitter

  • image
    22
     

    How To Add Avatars To Custom Blogger Templates

    This image has no alt text

    hi all, in my previous post :
    Show Your Face, Display your Avatar / photo On Blogger Comments
    I said that i’ll add a tutorial soon about adding avatar to your blogspot template if it’s not support or display it.

    your template is acting like that because it’s a customized template, and to add the avatar to your comments you have to follow the steps in this tutorial, don’t worry it’s too easy.
    Only two steps

    Step 1

    Log in to your blogger account and go to,
    dashboard >> Layout >> Edit html
    then make sure to check “Expand widget templates” box
    And find the following code, 

    <dl id='comments-block'>

    Now instead of this code past the next code.

    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

    Note : depending on your template you may find the above code with div Instead of dl

    if you found it in your template with div

    then you should replace it with a div too. so you’ll add the next code.

    <div expr:class='data:post.avatarIndentClass' id='comments-block'>

    Step 2

    Now find this code.

    <a expr:name='data:comment.anchorName'/>

    and exactly before it add the next code.

    <a expr:name='data:comment.anchorName'/>

    and exactly before it add the next code.

    <b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' width='35px' style='margin-bottom:-2px;' />
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

    now you are done.
    Finally click Save Template
    And now you are done, soon we’ll add some tutorials about customizing your avatar,
    all comments are welcomed.

  • image
    17
     

    Show Your Face, Display your Avatar / photo On Blogger Comments

    This image has no alt text

    hi all, this must by a happy day for all blogspot users, today blogger announced new feature as part of the Blogger Birthday feature series.

    And blogger called it, Show Your Face.

    This feature allow you to show your profile photo next to your comment on any blogger blog post,

    And you have the full control to enable or disable it.

    Check out the Next image to see how it looks like.

    Show Your Face, Display your Avatar / photo On Blogger Comments

    So, How It Works

    This feature imports the photo from your profile, so if you already uploaded an image to your profile, it’ll be displayed automatically when you post a comment on a blogger blog,

    But if you don’t have a profile photo, you may do it in two ways,

    1

    . Go to blogger dashboard >> and on the left sidebar you’ll see Edit Profile link, click it, and then scroll down till you see Photograph, and throw this form you can add your photo for your profile, after uploading your photo, scroll to the bottom and click Save Porfile.

    2

    . The second way to do it is to go to comment on any blogspot post, and type your comment, then don’t press Post Comment, Press Preview.
    and click click Add Profile Picture. and upload your picture,
    See the next Image.

    Show Your Face, Display your Avatar / photo On Blogger Comments

    and you are done.

    Some Bad News :-(

    Sorry for this but i have to mention that this feature won’t work with many Customized blogger templates, it works perfectly with all default templates, but it’s wont work with many custom templates, so i’ll work hard to get a code that you can add it to your custom template, and fix the problem, If you subscribed for our twitter or mailing updates list, you’ll receive the latest news about the solution for this error.

  • image
    67
     

    Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.

    This image has no alt text


    Hi dear friend,

    I promised you in a previous tutorial, here ” Blogger Now officially Supports “Read more” links. ” that i’ll add a tutorial about customizing your read more links in blogspot.

    So you have to check out the previous tutorial if you are not familiar with the new blogger jump breaks addition.

    Now is the time for this tutorial,

    after reading this tutorial you’ll be able to Customize you read more links in those ways:

    • Change the text ” read more ” to another words.
    • Add An Image / Button To Your “Read More / Jump Breaks ” In Blogger Links Instead Of Plain Text
    • choose your read more link / button to be displayed on left side, right side or center it.

    so lets start, 

     Please download a copy of your template before applying any changes.
    First Step, You Must Do This Step

    this code should be included in your blogger template,

    <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >

    i’ll tell you where to add it, but before you add it, make sure that it’s not already included in your template.
    Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for the code,

    if you found the code in your template, ok you have to skip this step
    but before you skip it,
    make sure that the third line in the code looks like this 

    <a expr:href='data:post.url + "#more"'>Read More </a>

    And not

    <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

    if you found it like the second one, please replace it with the first one

    if it’s not in your template you’ll have to add it, and i’ll tell you where you should add it.

    Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for this code,

    <data:post.body/>

    and just after it, add the next code, 

    <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >

    Now we finished adding the require code for customizing this trick.

    Lets start customizing
    1.Change the text ” read more ” to another words.

    this is the easiest on ever,
    after applying the first step to your template, you should have this code added to your template :

    <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

    This code will display your read more link in this format : Read More

    and to change it to another word, simply, change the word Read More in the code in your template to what ever you want, Example? Keep reading, continue reading, read the rest, and more.

    After changing it, click Save template and check out your blog.

    2.Add An Image / Button Instead Of Plain Text

    Ok, now again, after applying the first step to your template,
    you must have this code added to your template 

    <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

    This code will display your read more link in this format : Read More

    and to change the text to image / button , we should replace the word Read More in the code with the following 

    <img border="0" src="Paste here the button Image URL"/>

    so you should have some thing like this 

    <img border="0" src="http://www.allblogtools.com/image-url.jpg"/>

    After changing it, click Save template and check out your blog.

    And here is some good samples for read more buttons :

    Read More

    Read More

    Read More

    Read More

    Read More

    Read More

    And you can find more buttons by searching in google for “read more button”.

    3. Control the read more link or button alignment, left, right Or center.

    lets back again for the first step, after applying the first step to your template,
    you must have this code added to your template after applying first step.

    <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

    this code will display read more link in default format, and your template may display it at left or right, but if you want to control where it’ll be displayed, you should add small tag for the code, and the new added tag in blue color.

    <b:if cond='data:post.hasJumpLink'><div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="xxxx">Read More</p></a></div></b:if >

    and you can replace the xxxx with Left, right, or center.

    any in this way you can control the position for your link or button.

    and here is some examples to help you

    Example 1
    <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="Left">Read More</p></a>
</div>
</b:if >

    This will display read more in pain text aligned to left

    Example 2
    <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="right"><img border="0" src="http://www.allblogtools.com/image-url.jpg"/></p></a>
</div>
</b:if >

    This will display read more in image button aligned to right

    i wish this can help you, you comments are welcome, and please share it if you found it useful

  • image
    46
     

    How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger.

    This image has no alt text

    If you want to add a very attractive gallery to your blog you should read this tutorial,

    Through this tutorial, only 3 steps you’ll be able to make your own gallery widget with jQuery, to add it for your blogger blog,

    you add add it to header, sidebar, above posts area, on footer columns, and any where else on your template,

    So let’s see step one.

    Step 1. Adding The Gallery Codes To Your Template.

    Go To your blogger dashboard, layout >> Edit html >>
    And find this code,

    ]]></b:skin>

    And Before it, Add the next code,

    /* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

    Then Find this Tag

    </head>

    And add the next code before it.

    
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

    Now we finished editing template, Click Save template,

    And lets see the next step.

    Step 2. Adding The Gallery To your template.

    Go to Layout >> page elements and on your template’s sidebar, header or footer Click on ‘Add a Gadget‘.

    then Select HTML/Javascript

    A new window will appear, in title box Type your gallery title, and in content area Copy and Paste the next code 

    <ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>

    Then instead Of picture 1 Link Type Your Image Url,
    and if you want to make the image link to another page or url instead of # Add the target url.

    Each time you want to add a new image to the gallery, just repeat this code.

    <li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>

    That’s it.

    Demo. See How is this gallery looks like on a blogger blog.

    Click Here To See Demo Blogger Gallery

    Please share and leave comments if you find it useful.

    To become IT networking professional, you can go for ccent certification which will give you title of Cisco certified entry networking technician while ccde will entitle you certified design expert and ccna will enhance your expertise as a certified network associate.

  • image
    16
     

    How To Host Your Template Images For Free With Unlimited Bandwidth In Blogger

    This image has no alt text

    the main reason that pushing me to write this tutorial is the previous problem with my latest template (Allblogtools.com Gallery ).
    this templates images are hosted to photobucket.
    but the problem is that all free hosting sites, give you a specific amount of bandwidth, once you exceed it, instead of seeing the uploaded images, you will see an image like this,

    And this is the worst thing could happen for the templates designer, and for the blog owners too.
    So we have to find another way to host our images for free, and at the same time keep it for a long time as possible.

    The best way to doing this is to upload our images in blogger for free.
    it's not a direct way, a little tricky but not hard.
    if you are a blogger ( blogspot ) user, you must noticed that you can't upload a very large images in blogger.
    in this way we can use this images for hosting not only our blogger templates, but in forums, blogs and more too.

    So lets do it in only 2 steps.

    step 1

    Go to your blogger dashboard, Follow the usual steps to adding a new post. and in the new post Click On Add Image Icon And Upload the image you want, Make the image size : large.

    Upload blogger images for free with unlimited bandwisth

    step 2

    once you finish uploading your image, don’t save your post, but On post editing area, right click on the image.
     In firefox select > Copy Link Location

     In Internet Explorer select > Copy Link Location

    Upload blogger images for free with unlimited bandwisth

    after this step, just open a new window in your internet browser, and past the
    URL, you should have something like this : 

    http://2.bp.blogspot.com/_JwD5r652h00/SoKyWGxRuSI/AAAAAAAAAGU/acyTJ1OjEW8/s1600-h/Over_the_mountains_and_the_sea_by_jup3nep.jpg

    That’s it, You have got the code, and this image now is hosted free with unlimited bandwidth, I hope that will help you in various ways.
    All comments are welcomed.

  • image
    4
     

    Adding Labels to blogger (blogspot) images with hovering text

    This image has no alt text

    We all post images with in our posts, and some times we need to label this images, but not all of us can use graphic editors or don’t just have the time to do it, so we’ll learn in this tutorial how to label our images using a small code with out using any photo editing soft wares.

    you can look at the following image to see how the label will look like,

    My Label

    If you checked the image and the text you’ll find that the text is not a part of the the image but it added on the image as a second layer,
    you can try to select it to make sure.

    the code to do it is too easy but to use it you need to know

    1. Image width and height in pixels.

    2. Image Url ( Sample: http://www.ImageHostingSite.com/file/image.jpg)

    Now when you going to write your post, you must notice that on the post writing window there are two modes, Compose and Edit Html.

    Check the following image.
    Click here to zoom

    you’ll start write you post in Compose mode and once you want to add an image Labeled to your to your post you’ll change your posting mode to Edit Html.

    And enter the next code,

    

    My Label

    And this code is the same one used here on this tutorial for the image sample.

    and here is what you will need to change in the code,

    width: Put your image width

    height: Put your image width

    background:url(Image URL Here) Put your image url without any spaces

    color:#ffffff change the -ffffff- to your favorite color, you can get your color code from our html color code generator here

    font-size:30px Change 30px to any size you want.

    line-height:3em Your label position on the image, change 3, you can change it to 1 for the top or for 4 of more for the bottom

    text-align:center you can move your text by changing center to left or right.

    My Label Just enter your label here.

    That’s it. now go back to Compose mode to continue your post,

    Or if you need More Optimization We can add transparency effects to the label. by adding the next line to the code

    filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;

    so the code will be 

    

    My Label

    we’ll get the next result.

    My Label

    We set the transparency to 75% you can change it too.

    i with this tutorial can help you. and if you need any help, leave a comment here.

  • image
    35
     

    Adding Static images to blogger (blogspot)

    This image has no alt text

    Adding static images to blogspot blogs
    in only 3 steps.
    today allblogtools.com continue adding new categories and content to keep up with our 2009 plans.

    and now we are about to announce our latest Free service.
    Blogger Static Image Generator

    In case you don’t know what is a static image, it is images can be added to your blogspot blog template and display on your blog corners even if you visitors scrolled down or top. it’ll still displayed on your corned,
    you may not understand even after reading about it, so you must see Demo static images
    Please Click here to see Demo
    I Hope you like it,

    You can add any static image to your blog by using our wizard in only 3 steps.


    Click here to try our new static Image generator

  • image
    9
     

    Full Guide to Using allblogtools.com Glitter / Animations in BlogSpot

    This image has no alt text

    Full guide to learn you how to use images Glitter Or
    Animated gif images
    Ablog with out images like a sea with out fishes ,
    every body in the world using images at his blog to… to what,to explain some thing for his visitors. to make his blog looks better, to have fun, to … Etc.
    And there is alot of ways to use images in our blogs, we can add images to our posts
    or use image as Signature, use it in our -About us- Page, use it as avatar.
    or use it to displayed as static image at the corner of your Blog ( we’ll explain later what is the ” static image “.
    Note : all ways to use images we mention here can be used with allblogtools.com images codes only.
    now a days we updating allblogtools.com and adding new categories. we’ll add glitter images and animated images categories, and we’ll give you a code for each image we’ll add in this new categories, so when we tell you any thing about images code, you should understand that we mean allblogtools.com images codes

    now we’ll talk about Using Glitter Or Animated gif images in our blog post, or as Signature.

    1: Adding images to our blogspot posts.
    After finding your favorite image from allblogtools.com images Categories. glitter images or animations. copy its code and go to you blogger account.
    at Creating new post page write your post and then select “Edit html”

    Full Guide about Using allblogtools.com Glitter / Animated gif images in BlogSpot blogs

    Then past the glitter / animated gif image code where you want the image to be displayed
    Then click “publish post”
    click here to see Demo for using animated images and glitter images in blogspot posts.

    2: Using glitter / animated / non animated images as Signature in blogspot.
    After copying your image code
    go to your blogger account, go to settings. Select Formatting. at
    the bottom of the formatting page you’ll find Post Template form. just copy and
    past your image Signature Code
    . and every time you are going to write new post, write it before the sign code. but don’t delete it.
    To read more about adding Signature to blogger, please click here
    Click here to see demo signature on blogger post

    3: Using glitter / animated / non animated images as static image at the corner of your Blog

    Click here to see demo static image on blogger blog. please in this blog scroll down to see how static images works.
    This trick will be available soon and we’ll add free static images generator.

    we hope you enjoyed our small tutorial and if you need any help. please contact us.

  • image
    6
     

    Free Glitter Text generator

    This image has no alt text

    Free glitter generator Now in just simple 4 steps
    get your free glitter text Glitter Generator

    We are very happy to tell you that we added a new service to allblogtools.com
    Glitter text generator
    it’s all free,
    in 4 steps, you can generate your glitter text image and use it on Blogger,
    Forums and WordPress.

    step 1 : Enter your text,
    step 2 : Select Your Font, and it’s Size
    step 3 : Select Glitter texture, and choose if you want to add outline or not.
    step 4 : click the button to get your codes.

    The glitter generator will show you 3 codes,, Blogger code, forums code and
    Wordpress codes
    click once on any one, and then past it on your page, post or thread.
    you can use it ib About us page, In your posts, in your threads. and you can use
    it ass your signtuare too.

    This is not all
    this glitter generator has:
    More than 240 Difrent Glitter texture
    More than 34 Difrent Font Type.
    4 Font sizes.

    To try our new glitter generator click on the next link


    Glitter Text Generator

    To learn more about

    adding Signature to blogger Posts.

    Click here

Spacer
  • Spacer