Simple Blogger Tips: Customize

Showing posts with label Customize - Others. Show all posts

Monday, October 17, 2011

Blogger Open Image with Lightbox

How to open image with Lightbox on Blogger?
How to open image with Lightbox on Blogspot?
Show image with Lightbox on Blogger.
Show image with Lightbox on Blogspot.

Blogger has recently added a new feature for the photos and images on the blog posts. With the new Lightbox feature, the images can be clicked and be displayed with a darkened background.

blogger image lightbox

Also, all the images and photos within the blog post will be listed below, allowing readers to view them one by one - like a slideshow.

Currently, Blogger blogs in default have "Open images with Lightbox" setting enabled. To configure it, go to Dashboard > Settings > Formatting.

Then you'll see the setting mode for Lightbox. Either yes or no.

blogger lightbox setting

According to the description: If yes is selected, when a reader clicks on an image in a post, it will be displayed in a slideshow-like overlay instead of leaving your page and navigation to the image.

It could seem rather annoying if readers unintentionally click on it. But if your blog is a photography blog, it's definitely suitable.

Sunday, May 15, 2011

How to Redirect A Site to Another Site Automatically

Code to redirect a website to another website
Code to automatically redirect a website to another website
Code to refresh a site to another site automatically
Code to automatically refresh a site to another site automatically
Code to refresh a webpage to another webpage automatically
Code to automatically refresh a webpage to another webpage automatically
How to redirect a website to another website
How to automatically redirect a website to another website
How to refresh a site to another site automatically
How to automatically refresh a site to another site automatically
How to refresh a webpage to another webpage automatically
How to automatically refresh a webpage to another webpage automatically

---

Here's how.

First, go to Dashboard > Design > Edit HTML. Then, just insert this code below <head> tag.

To change the refresh time, change 5 to another number. It represents the seconds needed to redirect/refresh the page to another website/page/domain. Putting 0 means immediate refresh and the viewer won't be able to see the landing website/page/domain.

To set the target website/page/domain, change www.web.com to your desired target website/page/domain.

After that, Save Template and it's ready to redirect/refresh!

It's suitable for redirecting your Blogspot/Blogger blog to your own (new) domain hosted by a web host or you simply want to auto-redirect an old blog post to a new blog post.

Saturday, January 1, 2011

How to Remove Attribution Widget on Blogger

How to remove attribution on Blogger?
How to remove copyright widget on Blogspot?
How to remove line at the bottom of blog?

If you're using a template by Blogger's Template Designer, most of them have an attribution widget at the bottom of the blog.

Take a look and it's something like this...

blogger attribution widget

You're able to modify only the "Copyright" statement from the widget.

If you want to remove this Attribution widget at Design > Page Elements, you see that it can be edited...

blogger attribution widget

But unlike the other normal widgets, you won't be able to remove the Attribution widget because it doesn't have a "Remove" button.

blogger attribution widget

If you insist on removing the widget, here are the steps to remove the attribution widget on Blogger. It's pretty easy and understandable.

1) First, go to Design > Edit HTML > Tick "Expand Widget Templates". Search for the word "attribution".

blogger attribution widget

2) When you see the Attribution widget code (refer to image above), change the "true" on locked to "false".

3) Go back to Design > Page Elements.

blogger attribution widget

4) Since the lock function is disabled (by changing the code to "false"), it's movable and can be removed as well. Click on "Edit" on the Attribution element.

5) And now with the "Remove" button available, you can finally remove the Attribution widget for good.

blogger attribution widget

Done!

Wednesday, September 8, 2010

How to Add Signature to Blog Posts

How to add signature to blog entry?
How to add photo at the bottom of blog post?
How to add photo at the bottom of each blog entry?
How to add image at the bottom of each blog post?
How to include signature at the blog post?
How to include signature to blog entry?
How to include photo at bottom of blog post?
How to include image at the blog post?

You want to add a permanent signature or a picture at the end of each of your blog post, here's how.

blog signature

Firstly, go to Dashboard > Design > Edit HTML. Then click Expand Widget Templates.

Search for this code:

<data:post.body/>

You'll need to include the signature below this code. There are 2 types of including signatures - Text and Image.

---

Signature 1 - Text

Then write your signature text below the <data:post.body/> code, and preview it so that you can make adjustments.

If it appears on the line right after the blog post ends, you can include <br/> before the signature text so that there will be a space between them.

That's it if you just want to have a text signature at the bottom of each of your blog entry.

---

Signature 2 - Image

You want to have an image as your signature, you should add this code below the <data:post.body/> code instead.

Replace the http://imagelink with your signature image URL link.

By default, it's aligned to the left.

To align it to the center, use this code.

To align it to the right, use this code.

Remember to replace the http://imagelink with the your image URL link.

Preview, make adjustments with line break code - <br/> - if necessary. Save it and you're done.

---

If you want the image to have an invisible background, meaning that you just want the signature image/text to be displayed only without the background - you'll have to create one for yourself (with Photoshop) and save it as .png or .gif file without any background layer.

Friday, September 3, 2010

How to Add Floating Twitter Button on Blogger Blog

How to add twitter button on Blogger blog?
How to add Follow Me on Twitter badge on Blogspot blog?
How to add Follow Us on Twitter badge on Blogspot blog?
How to add Twitter Follow Me button on blog?
How to add Twitter Follow Us button on blog?
How to add link to Twitter page on Blogger blog?

Firstly, go to Dashboard > Design > Edit HTML.

follow on twitter button

Then search for </b:skin> and add this code before it.

#twitter-follow { border: 0; position: fixed; top: 300px; right: 0;}

To change the position of the Twitter button, you can change "300" (distance from the top) and "right" to "left" if you want the button to be on the left.

Then search for </body> and add this code before it.

Remember to change the "username" to your Twitter account username.

If you want it to be "Follow Us on Twitter", use this image link - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Y0E-SZ3sob3A3dgnKcz4NrxLk5tbYObJcll-XqNoljLbB0BAJtboX_D1QexX89sffI3X_XDxMSaklAojuWLAClIOlcXBLrFRJi4GkkRFqAbkGOMg_i0wvQdUNc3Shz-5za35lP32To8/s1600/twitter+follow+us+button.gif

Enjoy and all the best in getting more followers on Twitter!

Wednesday, August 11, 2010

Tutorial: How To Set Password for Blogger Post

How to make blogger post private?
How to encrypt blogger post?
How to create blog post with password?

First, please proceed to http://www.vincentcheung.ca/jsencryption/instructions.html.

Go to Dashboard > Design > Edit HTML.

Then add the JavaScript decryption code after the <head> tag in the HTML code of your blog. Copy and paste the following code:

Then proceed to http://www.vincentcheung.ca/jsencryption/.

You'll see this page.

form empty

Then type for secret key at the "Key" area and the secret message at the "Plain Text" area.

filled form

After doing so, hit the Encrypt button under the "Plain Text" area.

Then scroll down a little and you'll see the "HTML Code" area. Highlight, copy and paste the HTML code into your POST EDITOR.

And that's it!

Here's the result of the example shown. The secret key is "the key". Go and click on it.

Show encrypted text

Saturday, July 3, 2010

How To Remove Blogger Navigation Bar in Template Designer (Update)

How to delete navigation bar on Blogger Draft template?
How to remove default bar on Draft Template Designer?

blogger draft navigation bar

It can also be done via this method. Navigate yourself through:

Dashboard > Design > Template Designer > Advanced > Add CSS
And then add this:

#navbar-iframe {display: none !important;}

Click "Apply to Blog" and you're done.

Credit: Comment by Bytexpert

P/S: Click here for the previous workable method.

Saturday, April 3, 2010

How To Remove Blogger Navigation Bar in Draft Template Designer

How to delete navigation bar on Blogger Draft template?
How to remove default bar on Draft Template Designer?

The previous method to remove default Blogger navigation bar cannot be used anymore with templates designed from Blogger Draft Template Designer.

blogger draft navigation bar

Here's how to remove the navigation bar on Template Designer's templates:

Dashboard > Layout > Edit HTML
Add this code:

#navbar-iframe {
display: none !important;
}

just above this line:

]]></b:skin>

(instead of below <b:skin><!--[CDATA[/* in the previous method).

Then save it, view your blog and it's done!

---

***UPDATE (3/7/2010)***: It can also be done via this method. Navigate yourself through:

Dashboard > Design > Template Designer > Advanced > Add CSS
And then add this:

#navbar-iframe {display: none !important;}

Click "Apply to Blog" and you're done.

Credit: Comment by Bytexpert

P/S: Click here to view update on its individual post.

Monday, September 14, 2009

How To Set Password for Blogger Post

How to make blogger post private?
How to encrypt blogger post?
How to create blog post with password?

It's basically called text encryption and decryption. JavaScript is used to perform this function.

To learn how, please proceed to http://www.vincentcheung.ca/jsencryption/instructions.html.

Enjoy! =)

***UPDATE 11/8/2010***: A thorough tutorial on setting password for blog posts can be found at our LATEST TUTORIAL GUIDE. Check it out.

Saturday, July 25, 2009

How To Remove Blogger Navigation Bar

How to hide blogger navigation bar on blog?
How to remove top bar on Blogger blog?
How to hide blogspot navigation bar on Blogspot blog?

blogger remove navigation bar

Here's how:

Dashboard > Layout > Edit HTML
Add this code:

#navbar-iframe {
display: none !important;
}

just below this line:

<b:skin><![CDATA[/*

then save it, view your blog and it's gone!

***UPDATE 3/4/2010: This method can't be used on template designed by Blogger Draft Template Designer. To remove the default navigation bar in Draft, the method can be found here.